From d9b3d21ad64fd4e28e05ddbd4e3735bcef8da5d3 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Fri, 3 May 2024 01:39:48 +0200
Subject: [PATCH] Restyle checkboxes

---
 src/app/components/Persist/ChoosePasswordFields.tsx | 3 ++-
 src/styles/theme/ThemeProvider.tsx                  | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/components/Persist/ChoosePasswordFields.tsx b/src/app/components/Persist/ChoosePasswordFields.tsx
index 3c1b6625a7..326d07af13 100644
--- 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
index 4e48042c3b..7aaaf19d73 100644
--- 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: {
     /**