refactor: use em instead of px

striker-ui/components/Bars/AllocationBar.tsx

@@ -12,14 +12,14 @@ const breakpointAlert = 90;
 
 const BorderLinearProgress = withStyles({
   root: {
-    height: 15,
-    borderRadius: 2,
+    height: '1em',
+    borderRadius: '2px',
   },
   colorPrimary: {
     backgroundColor: PANEL_BACKGROUND,
   },
   bar: {
-    borderRadius: 3,
+    borderRadius: '3px',
   },
 })(LinearProgress);
 

striker-ui/components/Bars/ProgressBar.tsx

@@ -10,14 +10,14 @@ const completed = 100;
 
 const BorderLinearProgress = withStyles({
   root: {
-    height: 15,
-    borderRadius: 2,
+    height: '1em',
+    borderRadius: '2px',
   },
   colorPrimary: {
     backgroundColor: PANEL_BACKGROUND,
   },
   bar: {
-    borderRadius: 3,
+    borderRadius: '3px',
   },
 })(LinearProgress);
 

striker-ui/components/Decorator.tsx

@@ -5,7 +5,7 @@ export type Colours = 'ok' | 'off' | 'error' | 'warning';
 
 const useStyles = makeStyles(() => ({
   decorator: {
-    width: '20px',
+    width: '1.4em',
     height: '100%',
     borderRadius: 2,
   },

striker-ui/components/Header.tsx

@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme) =>
       paddingRight: theme.spacing(3),
     },
     input: {
-      height: '40px',
+      height: '2.8em',
       width: '30vw',
       backgroundColor: theme.palette.secondary.main,
       borderRadius: '3px',

striker-ui/components/Network/Network.tsx

@@ -13,15 +13,15 @@ const useStyles = makeStyles((theme) => ({
   container: {
     width: '100%',
     overflow: 'auto',
-    height: '30vh',
+    height: '32vh',
     [theme.breakpoints.down('md')]: {
       height: '100%',
       overflow: 'hidden',
     },
   },
   root: {
-    paddingTop: '10px',
-    paddingBottom: '10px',
+    paddingTop: '0.7em',
+    paddingBottom: '0.7em',
   },
   noPaddingLeft: {
     paddingLeft: 0,

striker-ui/components/Nodes/AnvilNode.tsx

@@ -9,31 +9,31 @@ import Decorator, { Colours } from '../Decorator';
 const useStyles = makeStyles((theme) => ({
   root: {
     overflow: 'auto',
-    height: '30vh',
-    paddingLeft: '5px',
+    height: '24vh',
+    paddingLeft: '0.3em',
     [theme.breakpoints.down('md')]: {
       height: '100%',
       overflow: 'hidden',
     },
   },
   state: {
-    paddingLeft: '10px',
-    paddingRight: '10px',
-    paddingTop: '15px',
+    paddingLeft: '0.7em',
+    paddingRight: '0.7em',
+    paddingTop: '1em',
   },
   bar: {
-    paddingLeft: '10px',
-    paddingRight: '10px',
+    paddingLeft: '0.7em',
+    paddingRight: '0.7em',
   },
   header: {
-    paddingTop: '3px',
-    paddingRight: '10px',
+    paddingTop: '0.3em',
+    paddingRight: '0.7em',
   },
   label: {
-    paddingTop: '5px',
+    paddingTop: '0.3em',
   },
   decoratorBox: {
-    paddingRight: '5px',
+    paddingRight: '0.3em',
   },
 }));
 

striker-ui/components/Panels/InnerPanel.tsx

@@ -13,9 +13,9 @@ const useStyles = makeStyles(() => ({
     borderRadius: '3px',
     borderStyle: 'solid',
     borderColor: DIVIDER,
-    marginTop: '20px',
-    marginBottom: '20px',
-    paddingBottom: '10px',
+    marginTop: '1.4em',
+    marginBottom: '1.4em',
+    paddingBottom: '0.7em',
     position: 'relative',
   },
 }));

striker-ui/components/Panels/Panel.tsx

@@ -8,20 +8,20 @@ type Props = {
 
 const useStyles = makeStyles(() => ({
   paper: {
-    padding: '30px',
+    padding: '2.1em',
     backgroundColor: PANEL_BACKGROUND,
     opacity: 0.8,
     zIndex: 999,
   },
   container: {
-    margin: 15,
+    margin: '1em',
     position: 'relative',
   },
   square: {
     content: '""',
     position: 'absolute',
-    width: '30px',
-    height: '30px',
+    width: '2.1em',
+    height: '2.1em',
     border: '1px',
     borderColor: TEXT,
     borderWidth: '1px',
@@ -31,12 +31,12 @@ const useStyles = makeStyles(() => ({
     margin: 0,
   },
   topSquare: {
-    top: '-5px',
-    left: '-5px',
+    top: '-0.3em',
+    left: '-0.3em',
   },
   bottomSquare: {
-    bottom: '-5px',
-    right: '-5px',
+    bottom: '-0.3em',
+    right: '-0.3em',
   },
 }));
 

striker-ui/components/Panels/PanelHeader.tsx

@@ -10,12 +10,12 @@ type Props = {
 const useStyles = makeStyles(() => ({
   innerHeader: {
     position: 'relative',
-    padding: '0 10px',
+    padding: '0 0.7em',
   },
   header: {
-    top: '-5px',
-    left: '-5px',
-    padding: '20px 0',
+    top: '-0.3em',
+    left: '-0.3em',
+    padding: '1.4em 0',
     position: 'absolute',
     content: '""',
     borderColor: DIVIDER,

striker-ui/components/Servers.tsx

@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     width: '100%',
     overflow: 'auto',
-    height: '80vh',
+    height: '78vh',
     [theme.breakpoints.down('md')]: {
       height: '100%',
     },

striker-ui/components/SharedStorage/SharedStorage.tsx

@@ -10,13 +10,13 @@ import { AnvilContext } from '../AnvilContext';
 
 const useStyles = makeStyles((theme) => ({
   header: {
-    paddingTop: '3px',
-    paddingRight: '10px',
+    paddingTop: '0.1em',
+    paddingRight: '0.7em',
   },
   root: {
     overflow: 'auto',
-    height: '80vh',
-    paddingLeft: '5px',
+    height: '78vh',
+    paddingLeft: '0.3em',
     [theme.breakpoints.down('md')]: {
       height: '100%',
     },

striker-ui/components/SharedStorage/SharedStorageNode.tsx

@@ -7,16 +7,16 @@ import Decorator from '../Decorator';
 
 const useStyles = makeStyles(() => ({
   fs: {
-    paddingLeft: '10px',
-    paddingRight: '10px',
-    paddingTop: '15px',
+    paddingLeft: '0.7em',
+    paddingRight: '0.7em',
+    paddingTop: '1.2em',
   },
   bar: {
-    paddingLeft: '10px',
-    paddingRight: '10px',
+    paddingLeft: '0.7em',
+    paddingRight: '0.7em',
   },
   decoratorBox: {
-    paddingRight: '5px',
+    paddingRight: '0.3em',
   },
 }));