Adds quick style selects, rewrites styling

components/shared.tsx

@@ -7,7 +7,7 @@ export const IconButton = styled('button', {
   borderRadius: '4px',
   padding: '0',
   margin: '0',
-  display: 'flex',
+  display: 'grid',
   alignItems: 'center',
   justifyContent: 'center',
   outline: 'none',
@@ -15,6 +15,11 @@ export const IconButton = styled('button', {
   pointerEvents: 'all',
   cursor: 'pointer',
 
+  '& > *': {
+    gridRow: 1,
+    gridColumn: 1,
+  },
+
   '&:hover:not(:disabled)': {
     backgroundColor: '$hover',
   },
@@ -23,30 +28,28 @@ export const IconButton = styled('button', {
     opacity: '0.5',
   },
 
-  '& > svg': {
-    height: '16px',
-    width: '16px',
-  },
-
   variants: {
     size: {
-      small: {},
+      small: {
+        '& > svg': {
+          height: '16px',
+          width: '16px',
+        },
+      },
       medium: {
         height: 44,
         width: 44,
-        '& svg': {
-          height: 16,
-          width: 16,
-          strokeWidth: 0,
+        '& > svg': {
+          height: '16px',
+          width: '16px',
         },
       },
       large: {
         height: 44,
         width: 44,
-        '& svg': {
-          height: 24,
-          width: 24,
-          strokeWidth: 0,
+        '& > svg': {
+          height: '24px',
+          width: '24px',
         },
       },
     },