Restyle checkboxes

oasisprotocol · May 3, 2024 · d9b3d21 · d9b3d21
1 parent d80cff8
commit d9b3d21
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/app/components/Persist/ChoosePasswordFields.tsx b/src/app/components/Persist/ChoosePasswordFields.tsx
@@ -1,6 +1,7 @@
 import { selectIsPersistenceUnsupported } from 'app/state/persist/selectors'
 import { selectUnlockedStatus } from 'app/state/selectUnlockedStatus'
 import { Box } from 'grommet/es6/components/Box'
+import { Text } from 'grommet/es6/components/Text'
 import { CheckBox } from 'grommet/es6/components/CheckBox'
 import { FormField } from 'grommet/es6/components/FormField'
 import { Paragraph } from 'grommet/es6/components/Paragraph'
@@ -31,7 +32,7 @@ export function ChoosePasswordFields() {
     <Box as="fieldset" margin={{ top: 'medium' }} pad="medium">
       <FormField contentProps={{ border: false, pad: 'none' }} margin={{ top: 'xsmall' }}>
         <CheckBox
-          label={t('persist.createProfile.startPersistingToggle', 'Create a profile')}
+          label={<Text>{t('persist.createProfile.startPersistingToggle', 'Create a profile')}</Text>}
           toggle
           onChange={event => setStartPersisting(event.target.checked)}
           {...(isChoiceDisabled

diff --git a/src/styles/theme/ThemeProvider.tsx b/src/styles/theme/ThemeProvider.tsx
@@ -281,6 +281,14 @@ const grommetCustomTheme: ThemeType = {
         light: 'grayMedium',
       },
     },
+    border: {
+      color: 'text',
+    },
+    gap: '1.5ex',
+    extend: css`
+      font-size: 14px;
+      line-height: 1.2;
+    `,
   },
   layer: {
     /**