style: change px to rem

opengovsg · Aug 12, 2021 · fd6b183 · fd6b183
1 parent f28a239
commit fd6b183
Showing 1 changed file with 18 additions and 18 deletions.
diff --git a/frontend/src/theme/components/DropdownMenu.ts b/frontend/src/theme/components/DropdownMenu.ts
@@ -7,11 +7,11 @@ export const DropdownMenu: ComponentMultiStyleConfig = {
   parts: ['outerBox', 'innerBox', 'option', 'text', 'menu'],
   baseStyle: ({ isActive }) => ({
     outerBox: {
-      padding: '4px',
+      padding: '0.25rem',
       background: 'white',
-      borderRadius: '8px',
-      border: '0px',
-      minWidth: '0px',
+      borderRadius: '0.5rem',
+      border: '0rem',
+      minWidth: '0rem',
       color: 'secondary.500',
       _hover: {
         background: 'white',
@@ -28,43 +28,43 @@ export const DropdownMenu: ComponentMultiStyleConfig = {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      padding: isActive ? '7px 15px' : '8px 16px',
-      height: '44px',
+      padding: isActive ? '0.4375rem 0.9375rem' : '0.5rem 1rem',
+      height: '2.75rem',
       background: 'white',
       boxSizing: 'border-box',
       borderStyle: 'solid',
-      borderWidth: isActive ? '2px' : '1px',
-      borderRadius: '4px',
+      borderWidth: isActive ? '0.125rem' : '0.0625rem',
+      borderRadius: '0.25rem',
       borderColor: 'white',
     },
     option: {
-      padding: '12px 16px',
+      padding: '0.75rem 1rem',
       fontWeight: '400',
       _hover: {
-        padding: '12px 16px',
+        padding: '0.75rem 1rem',
         background: 'primary.100',
-        borderWidth: '0px',
+        borderWidth: '0rem',
       },
       _focus: {
-        padding: '10px 14px',
+        padding: '0.625rem 0.875rem',
         background: 'white',
-        borderWidth: '2px',
+        borderWidth: '0.125rem',
         borderStyle: 'solid',
         borderColor: 'primary.500',
-        borderRadius: '2px',
+        borderRadius: '0.125rem',
       },
       _active: {
-        padding: '12px 16px',
-        borderWidth: '0px',
+        padding: '0.75rem 1rem',
+        borderWidth: '0rem',
         background: 'primary.200',
         fontWeight: '500',
       },
     },
     text: {
-      marginRight: '24px',
+      marginRight: '1.5rem',
     },
     menuList: {
-      minW: '0',
+      minW: '0rem',
     },
   }),
   sizes: {