create and customize checkbox component

Emurgo · Oct 12, 2021 · a871f0b · a871f0b
1 parent 7354dfb
commit a871f0b
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 13 deletions.
diff --git a/packages/yoroi-extension/app/assets/images/forms/checkbox-checked.inline.svg b/packages/yoroi-extension/app/assets/images/forms/checkbox-checked.inline.svg
diff --git a/packages/yoroi-extension/app/assets/images/forms/checkbox-outline.inline.svg b/packages/yoroi-extension/app/assets/images/forms/checkbox-outline.inline.svg
diff --git a/packages/yoroi-extension/app/components/common/CheckboxLabel.js b/packages/yoroi-extension/app/components/common/CheckboxLabel.js
@@ -0,0 +1,88 @@
+// @flow
+import type { Node } from 'react';
+import { Checkbox, FormControlLabel, Typography } from '@mui/material';
+
+import OutlineIcon from '../../assets/images/forms/checkbox-outline.inline.svg';
+import CheckedIcon from '../../assets/images/forms/checkbox-checked.inline.svg';
+import { Box } from '@mui/system';
+import ReactMarkdown from 'react-markdown';
+
+type Props = {|
+  label: string | Node,
+  labelProps?: Object,
+  sx?: Object,
+  labelSx?: Object,
+  descriptionSx?: Object,
+  description?: ?string,
+  checked: boolean,
+  disabled?: boolean,
+  onChange: () => void,
+|};
+function CheckboxLabel({
+  label,
+  disabled,
+  labelProps,
+  description,
+  sx,
+  labelSx,
+  descriptionSx,
+  ...checkboxProps
+}: Props): Node {
+  return (
+    <FormControlLabel
+      control={
+        <Checkbox
+          disabled={disabled}
+          icon={<OutlineIcon />}
+          checkedIcon={<CheckedIcon />}
+          {...checkboxProps}
+        />
+      }
+      label={
+        <Box
+          sx={{
+            margin: 0,
+            'p + p': {
+              fontSize: '0.75rem',
+              letterSpacing: '0.5px',
+              ...(descriptionSx !== null && descriptionSx),
+            },
+            strong: { fontWeight: 500 },
+          }}
+        >
+          <Typography
+            marginBottom={description ? '8px' : 0}
+            sx={{
+              color: 'var(--mui-checkbox-label-text-color)',
+              fontWeight: 300,
+              ...(labelSx !== null && labelSx),
+            }}
+          >
+            {label}
+          </Typography>
+          {Boolean(description) && <ReactMarkdown source={description} escapeHtml={false} />}
+        </Box>
+      }
+      sx={{
+        alignItems: description !== null ? 'center' : 'flex-start',
+        margin: 0,
+        '& .MuiFormControlLabel-label': {
+          flex: 1,
+        },
+        ...(sx !== null && sx),
+      }}
+      {...labelProps}
+    />
+  );
+}
+
+export default CheckboxLabel;
+
+CheckboxLabel.defaultProps = {
+  labelProps: null,
+  sx: null,
+  labelSx: null,
+  descriptionSx: null,
+  disabled: false,
+  description: null,
+};
diff --git a/packages/yoroi-extension/app/styles/globalStyles.js b/packages/yoroi-extension/app/styles/globalStyles.js
@@ -15,7 +15,7 @@ const globalStyles = (theme: Object): Node => (
         '--mui-button-primary-text-disabled': theme.palette.secondary.contrastText,
         '--mui-button-primary-text': theme.palette.secondary.contrastText,
         // general button secondary variant
-        '--mui-button-outlined-background-color': theme.palette.secondary.contrastText,
+        '--mui-button-outlined-background-color': 'transparent',
         '--mui-button-outlined-background-color-hover': theme.palette.secondary.light,
         '--mui-button-outlined-border-color': theme.palette.secondary.main,
         '--mui-button-outlined-border-color-disabled': theme.palette.secondary.disabled,
@@ -41,8 +41,9 @@ const globalStyles = (theme: Object): Node => (
 
         /* === CHECKBOX === */
         '--mui-checkbox-border-color': 'hsl(0 0% 21%)',
-        '--mui-checkbox-border-color-disabled': 'hsl(168 82% 45% / 20%)',
+        '--mui-checkbox-border-color-disabled': theme.palette.secondary.disabled,
         '--mui-checkbox-check-bg-color': theme.palette.secondary.main,
+        '--mui-checkbox-label-text-color': 'hsl(228 4% 23%)',
 
         /* === TEXTFIELD === */
         '--mui-input-bg-color': 'hsl(0 0% 0% / 0%)',

diff --git a/packages/yoroi-extension/app/styles/overrides/Checkbox.js b/packages/yoroi-extension/app/styles/overrides/Checkbox.js
@@ -2,37 +2,30 @@
 const ClassicCheckbox = {
   styleOverrides: {
     root: {
-      border: 1,
-      borderRadius: 0,
+      padding: 0,
+      marginRight: '18px',
       color: 'var(--mui-checkbox-check-bg-color)',
       '&.Mui-checked': {
         color: 'var(--mui-checkbox-check-bg-color)',
       },
       '&.Mui-disabled': {
         color: 'var(--mui-checkbox-border-color-disabled)',
       },
-      '& svg': {
-        width: '1.15em',
-        height: '1.15em',
-      },
     },
   },
 };
 const ModernCheckbox = {
   styleOverrides: {
     root: {
-      border: 2,
+      padding: 0,
+      marginRight: '18px',
       color: 'var(--mui-checkbox-border-color)',
       '&.Mui-checked': {
         color: 'var(--mui-checkbox-check-bg-color)',
       },
       '&.Mui-disabled	': {
         color: 'var(--mui-checkbox-border-color-disabled)',
       },
-      '& svg': {
-        width: '1.15em',
-        height: '1.15em',
-      },
     },
   },
 };