From 574a8a7666fb55667c8a544c941cf953ceecef3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 11:55:15 +0100
Subject: [PATCH 01/11] update theme colors

---
 assets/figma/variables.json        | 4 ++--
 src/design-system/config/colors.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/figma/variables.json b/assets/figma/variables.json
index 5eef56df..1902e6f2 100644
--- a/assets/figma/variables.json
+++ b/assets/figma/variables.json
@@ -4242,7 +4242,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/Brand/600"
+                "name": "Colors/Error/900"
               }
             },
             {
@@ -4314,7 +4314,7 @@
               "isAlias": true,
               "value": {
                 "collection": "1. Color modes",
-                "name": "Colors/Text/text-brand-secondary (700)"
+                "name": "Colors/Text/text-error-primary (600)"
               }
             },
             {
diff --git a/src/design-system/config/colors.ts b/src/design-system/config/colors.ts
index f4c73373..5027661b 100644
--- a/src/design-system/config/colors.ts
+++ b/src/design-system/config/colors.ts
@@ -656,7 +656,7 @@ export const themeColors = {
     },
     button: {
       primary: {
-        bg: '#7F56D9',
+        bg: '#7A271A',
         bg_hover: '#6941C6',
         border: '#7F56D9',
         border_hover: '#6941C6',
@@ -674,7 +674,7 @@ export const themeColors = {
       secondary: {
         bg: '#FFFFFF',
         bg_hover: '#F9FAFB',
-        border: '#6941C6',
+        border: '#D92D20',
         border_hover: '#D0D5DD',
         color: {
           bg: '#FFFFFF',

From 504fb188586eab376126bd577937be8929e75cc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 12:07:44 +0100
Subject: [PATCH 02/11] disable outline on web inputs

---
 src/styles/root-layout.module.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/root-layout.module.scss b/src/styles/root-layout.module.scss
index 0329ef73..c65cb1bc 100644
--- a/src/styles/root-layout.module.scss
+++ b/src/styles/root-layout.module.scss
@@ -2,6 +2,10 @@ $size-xs: 768px;
 $size-l: 1264px;
 $ui-sidebar: 244px;
 
+*:focus {
+  outline: none;
+}
+
 .container {
   flex-direction: column;
   @media (min-width: $size-xs) {

From 60d80c2dcd0ab01b6402dc5f44d8a8a12c5ae72b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 12:08:08 +0100
Subject: [PATCH 03/11] ad missing translation and validation in test form

---
 src/screens/TestFormScreen.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/screens/TestFormScreen.tsx b/src/screens/TestFormScreen.tsx
index 4f6c5029..6796f575 100644
--- a/src/screens/TestFormScreen.tsx
+++ b/src/screens/TestFormScreen.tsx
@@ -77,48 +77,65 @@ export const TestFormScreen = (): JSX.Element => {
         {...{ control, errors }}
         enterKeyHint="next"
         isRequired
+        label={t('test_form.name_placeholder')}
         name="name"
         onSubmitEditing={setFocus('surname')}
         placeholder={t('test_form.name_placeholder')}
+        rules={VALIDATION.name}
       />
       <ControlledField.Input
         {...{ control, errors }}
         enterKeyHint="next"
         mt={2}
+        isRequired
+        label={t('test_form.surname_placeholder')}
         name="surname"
         onSubmitEditing={setFocus('email')}
         placeholder={t('test_form.surname_placeholder')}
+        rules={VALIDATION.surname}
       />
       <ControlledField.Input
         {...{ control, errors }}
         enterKeyHint="next"
+        isRequired
+        label={t('test_form.email_placeholder')}
         mt={2}
         name="email"
         onSubmitEditing={setFocus('phone')}
         placeholder={t('test_form.email_placeholder')}
+        rules={VALIDATION.email}
       />
       <ControlledField.Input
         {...{ control, errors }}
         enterKeyHint="next"
+        isRequired
+        label={t('test_form.phone_placeholder')}
         mt={2}
         name="phone"
         onSubmitEditing={setFocus('postalCode')}
         placeholder={t('test_form.phone_placeholder')}
+        rules={VALIDATION.phone}
       />
       <ControlledField.Input
         {...{ control, errors }}
         enterKeyHint="next"
+        isRequired
+        label={t('test_form.postalCode_placeholder')}
         mt={2}
         name="postalCode"
         onSubmitEditing={setFocus('city')}
         placeholder={t('test_form.postalCode_placeholder')}
+        rules={VALIDATION.postalCode}
       />
       <ControlledField.Input
         {...{ control, errors }}
         enterKeyHint="next"
+        isRequired
+        label={t('test_form.city_placeholder')}
         mt={2}
         name="city"
         placeholder={t('test_form.city_placeholder')}
+        rules={VALIDATION.city}
       />
       <ControlledField.Radio
         {...{ control, errors }}

From 4966ef2f5b7be118dfacbe1332a518d4f2a0d06e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 12:11:21 +0100
Subject: [PATCH 04/11] add button shadow styles

---
 .../components/Button/Button.tsx              | 27 ++++++++++++--
 src/design-system/config/buttonVariants.ts    | 36 ++++++++++++++-----
 src/design-system/config/theme.ts             | 23 +++++++++---
 3 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/src/design-system/components/Button/Button.tsx b/src/design-system/components/Button/Button.tsx
index 08e474a0..8d42cc00 100644
--- a/src/design-system/components/Button/Button.tsx
+++ b/src/design-system/components/Button/Button.tsx
@@ -18,9 +18,17 @@ import {
   TextStyle,
   StyleProp,
   View,
+  Platform,
 } from 'react-native'
 
-import { ButtonSize, ButtonVariant, buttonSizeVariants, buttonVariants, theme } from '../../config'
+import {
+  ButtonSize,
+  ButtonVariant,
+  buttonSizeVariants,
+  buttonVariants,
+  getButtonShadowStyle,
+  theme,
+} from '../../config'
 import { generateStyledComponent } from '../../utils'
 import { Box } from '../Box'
 import { Loader } from '../Loader'
@@ -81,6 +89,10 @@ const RawButton = memo(
         [variant]
       )
 
+      const pressedStyles = useMemo<ViewStyle>(() => {
+        return getButtonShadowStyle({ variant })
+      }, [variant])
+
       const hoveredStyles = useMemo<ViewStyle>(
         () => ({
           backgroundColor: getColorValue({
@@ -184,7 +196,17 @@ const RawButton = memo(
         ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> =>
           StyleSheet.flatten<ViewStyle>([
             styles.baseButton,
-            pressed || isHovered ? hoveredStyles : defaultStyles,
+            {
+              ...Platform.select({
+                default:
+                  pressed || isHovered ? { ...hoveredStyles, ...pressedStyles } : defaultStyles,
+                web: pressed
+                  ? { ...defaultStyles, ...pressedStyles }
+                  : isHovered
+                  ? hoveredStyles
+                  : defaultStyles,
+              }),
+            },
             disabled && disabledStyles,
             loading && disabledStyles,
             buttonSizeStyle,
@@ -198,6 +220,7 @@ const RawButton = memo(
           hoveredStyles,
           isHovered,
           loading,
+          pressedStyles,
           style,
         ]
       )
diff --git a/src/design-system/config/buttonVariants.ts b/src/design-system/config/buttonVariants.ts
index bd3e4697..384547b5 100644
--- a/src/design-system/config/buttonVariants.ts
+++ b/src/design-system/config/buttonVariants.ts
@@ -1,4 +1,5 @@
 import { TextVariant } from './textVariants'
+import { theme } from './theme'
 
 export type ButtonVariant =
   | 'Primary'
@@ -82,21 +83,21 @@ export const buttonVariants: { [key in ButtonVariant]: VariantStyle } = {
   },
   SecondaryColor: {
     defaultStyle: {
-      backgroundColor: 'button.secondary.bg',
-      color: 'button.secondary.fg',
-      borderColor: 'button.secondary.border',
+      backgroundColor: 'button.secondary.color.bg',
+      color: 'button.secondary.color.fg',
+      borderColor: 'button.secondary.color.border',
       borderWidth: 1,
     },
     hoveredStyle: {
-      backgroundColor: 'button.secondary.bg_hover',
-      color: 'button.secondary.fg_hover',
-      borderColor: 'button.secondary.border_hover',
+      backgroundColor: 'button.secondary.color.bg_hover',
+      color: 'button.secondary.color.fg_hover',
+      borderColor: 'button.secondary.color.border_hover',
       borderWidth: 1,
     },
     focusedStyle: {
-      backgroundColor: 'button.secondary.bg',
-      color: 'button.secondary.fg',
-      borderColor: 'button.secondary.border',
+      backgroundColor: 'button.secondary.color.bg',
+      color: 'button.secondary.color.fg',
+      borderColor: 'button.secondary.color.border',
       borderWidth: 1,
     },
     disabledStyle: {
@@ -295,3 +296,20 @@ export const buttonSizeVariants: { [key in ButtonSize]: SizeStyle } = {
     iconSize: 24,
   },
 } as const
+
+const { errorShadow, focusShadow, grayShadow } = theme.dark.shadows
+
+export const getButtonShadowStyle = ({ variant }: { variant: ButtonVariant }) => {
+  switch (variant) {
+    case 'Primary':
+    case 'SecondaryColor':
+      return focusShadow
+    case 'PrimaryDestructive':
+    case 'SecondaryDestructive':
+      return errorShadow
+    case 'SecondaryGray':
+      return grayShadow
+    default:
+      return {}
+  }
+}
diff --git a/src/design-system/config/theme.ts b/src/design-system/config/theme.ts
index 594bd2e5..4a283ebe 100644
--- a/src/design-system/config/theme.ts
+++ b/src/design-system/config/theme.ts
@@ -316,10 +316,25 @@ export const shadows = {
     shadowRadius: 0,
     elevation: 0,
   },
-  inputShadow: {
-    shadowOffset: { width: 0, height: 2 },
-    shadowColor: colors.primary,
-    shadowOpacity: 0.16,
+  errorShadow: {
+    shadowOffset: { width: 0, height: 0 },
+    shadowColor: themeColors.primitives.Error[500],
+    shadowOpacity: 1,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  focusShadow: {
+    shadowOffset: { width: 0, height: 0 },
+    shadowColor: themeColors.primitives.Brand[500],
+    shadowOpacity: 1,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  grayShadow: {
+    shadowOffset: { width: 0, height: 0 },
+    shadowColor: themeColors.primitives['Gray (light mode)'][400],
+    shadowOpacity: 1,
+    shadowRadius: 8,
     elevation: 3,
   },
 }

From 8c55134593dd4a82a38ef96bc964d75a272557b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 12:12:23 +0100
Subject: [PATCH 05/11] add box with shadow to input

---
 .../components/BoxWithShadow.tsx              |  30 +++++
 src/design-system/components/Input.tsx        | 108 +++++++++---------
 src/design-system/components/index.ts         |   1 +
 3 files changed, 85 insertions(+), 54 deletions(-)
 create mode 100644 src/design-system/components/BoxWithShadow.tsx

diff --git a/src/design-system/components/BoxWithShadow.tsx b/src/design-system/components/BoxWithShadow.tsx
new file mode 100644
index 00000000..1b32efde
--- /dev/null
+++ b/src/design-system/components/BoxWithShadow.tsx
@@ -0,0 +1,30 @@
+import { FC, PropsWithChildren, useMemo } from 'react'
+
+import { Box, BoxProps } from './Box'
+import { theme } from '../config'
+
+const { errorShadow, focusShadow } = theme.light.shadows
+
+type BoxWithShadowProps = {
+  isInvalid?: boolean
+  isFocused?: boolean
+} & BoxProps
+
+export const BoxWithShadow: FC<PropsWithChildren> = ({
+  children,
+  isInvalid,
+  isFocused,
+  style,
+  ...rest
+}: BoxWithShadowProps) => {
+  const shadowProps = useMemo(
+    () => (isInvalid ? errorShadow : isFocused ? focusShadow : {}),
+    [isInvalid, isFocused]
+  )
+
+  return (
+    <Box borderRadius={8} style={[style, shadowProps]} {...rest}>
+      {children}
+    </Box>
+  )
+}
diff --git a/src/design-system/components/Input.tsx b/src/design-system/components/Input.tsx
index f50de767..a8d082f6 100644
--- a/src/design-system/components/Input.tsx
+++ b/src/design-system/components/Input.tsx
@@ -18,6 +18,7 @@ import {
 } from 'react-native'
 
 import { Box } from './Box'
+import { BoxWithShadow } from './BoxWithShadow'
 import { Icon } from './Icon'
 import { Touchable } from './Touchables/Touchable'
 import type { InputProps } from './types'
@@ -173,10 +174,7 @@ export const Input = forwardRef<TextInput, InputProps>(
     },
     ref
   ) => {
-    const {
-      colors,
-      shadows: { inputShadow },
-    } = useTheme()
+    const { colors } = useTheme()
 
     const [isFocused, setIsFocused] = useState(false)
     const _inputRef = useRef<TextInput>(null)
@@ -224,56 +222,58 @@ export const Input = forwardRef<TextInput, InputProps>(
     )
 
     return (
-      <Box
-        flexDirection="row"
-        alignItems="center"
-        overflow="hidden"
-        borderColor={isInvalid ? 'border.error' : isFocused ? 'border.primary' : 'border.brand'}
-        borderRadius={4}
-        borderWidth={1}
-        backgroundColor={
-          isInvalid ? 'bg.error.primary' : isFocused ? 'bg.brand.primary' : 'bg.active'
-        }
-        bgOpacity={isFocused ? 0.1 : 1}
-        {...inputShadow}
-        {...layoutProps}
-      >
-        <StyledInput
-          ref={_inputRef}
-          autoCapitalize="none"
-          color={isInvalid ? 'text.error.primary' : 'text.primary'}
-          cursorColor={colors.text.placeholder}
-          {...Platform.select({
-            default: { editable: !isDisabled },
-            web: { disabled: isDisabled },
-          })}
-          flex={1}
-          fontFamily="Regular"
-          fontSize="xs"
-          // fontWeight="bold"
-          height="100%"
-          placeholder="Enter your email"
-          px={3}
-          py={2}
-          secureTextEntry={securePassword}
-          selectionColor={colors.text.secondary}
-          width="100%"
-          {...inputProps}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-        {props.type === 'password' ? (
-          <Touchable mr={2} onPress={toggleSecurePassword}>
-            <Icon
-              name={secureTextIconName || iconName}
-              color={secureTextIconColor || 'icon.fg.brand'}
-              size={secureTextIconSize}
-            />
-          </Touchable>
-        ) : (
-          props.rightElement
-        )}
-      </Box>
+      <BoxWithShadow {...{ isFocused, isInvalid }}>
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          overflow="hidden"
+          borderColor={isInvalid ? 'border.error' : isFocused ? 'border.brand' : 'border.primary'}
+          borderRadius={8}
+          borderWidth={1}
+          backgroundColor={
+            isInvalid ? 'bg.error.primary' : isFocused ? 'bg.brand.primary' : 'bg.active'
+          }
+          bgOpacity={isFocused ? 0.1 : 1}
+          {...layoutProps}
+        >
+          <StyledInput
+            ref={_inputRef}
+            autoCapitalize="none"
+            bg="bg.primary"
+            color={isDisabled ? 'text.disabled' : isInvalid ? 'text.error.primary' : 'text.primary'}
+            cursorColor={colors.text.placeholder}
+            {...Platform.select({
+              default: { editable: !isDisabled },
+              web: { disabled: isDisabled },
+            })}
+            fontFamily="Regular"
+            fontSize="md"
+            fontWeight="Regular"
+            height="100%"
+            placeholder="Enter your email"
+            placeholderTextColor={colors.text.placeholder}
+            px={3}
+            py={2}
+            secureTextEntry={securePassword}
+            selectionColor={colors.text.secondary}
+            width="100%"
+            {...inputProps}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+          {props.type === 'password' ? (
+            <Touchable mr={2} onPress={toggleSecurePassword}>
+              <Icon
+                name={secureTextIconName || iconName}
+                color={secureTextIconColor || 'icon.fg.brand'}
+                size={secureTextIconSize}
+              />
+            </Touchable>
+          ) : (
+            props.rightElement
+          )}
+        </Box>
+      </BoxWithShadow>
     )
   }
 )
diff --git a/src/design-system/components/index.ts b/src/design-system/components/index.ts
index 2ed363a5..0e63b20c 100644
--- a/src/design-system/components/index.ts
+++ b/src/design-system/components/index.ts
@@ -1,5 +1,6 @@
 export * from './Absolute'
 export * from './Box'
+export * from './BoxWithShadow'
 export * from './Button'
 export * from './Center'
 export * from './Column'

From 74fa5c6aefb41e227db5d09e392ae817c657330c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 12:17:59 +0100
Subject: [PATCH 06/11] update button test to meet new colors

---
 src/design-system/components/Button/Button.test.tsx           | 4 ++--
 .../components/Button/__snapshots__/Button.test.tsx.snap      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/design-system/components/Button/Button.test.tsx b/src/design-system/components/Button/Button.test.tsx
index 9e02ed77..bf4ca971 100644
--- a/src/design-system/components/Button/Button.test.tsx
+++ b/src/design-system/components/Button/Button.test.tsx
@@ -43,8 +43,8 @@ describe('Button', () => {
     const { getByTestId } = render(<Button.SecondaryColor title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
       ...baseStyles,
-      backgroundColor: theme.light.colors.button.secondary.bg,
-      borderColor: theme.light.colors.button.secondary.border,
+      backgroundColor: theme.light.colors.button.secondary.color.bg,
+      borderColor: theme.light.colors.button.secondary.color.border,
       borderWidth: 1,
     })
   })
diff --git a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
index eba2a4ed..2e8eb661 100644
--- a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`Button renders correctly 1`] = `
   style={
     {
       "alignItems": "center",
-      "backgroundColor": "#7F56D9",
+      "backgroundColor": "#7A271A",
       "borderColor": "#7F56D9",
       "borderRadius": 4,
       "borderWidth": 1,

From ee027f6d62ba4edea67d4e50f8d3e403a821c7af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 13:34:17 +0100
Subject: [PATCH 07/11] adjust input styles

---
 src/components/molecules/Field/Input.tsx   | 14 ++++++-------
 src/design-system/components/FormLabel.tsx |  8 +++++---
 src/design-system/components/Input.tsx     | 24 +++++++++++++---------
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/components/molecules/Field/Input.tsx b/src/components/molecules/Field/Input.tsx
index d9ea34d6..071f54d8 100644
--- a/src/components/molecules/Field/Input.tsx
+++ b/src/components/molecules/Field/Input.tsx
@@ -39,14 +39,14 @@ const layoutPropsKeys = [
 export const Input = forwardRef<Partial<TextInput>, FieldInputProps>(
   (
     {
-      isRequired,
+      errorMessage,
+      helperText,
       isInvalid,
+      isRequired,
       label,
-      helperText,
-      errorMessage,
-      onFocus,
-      onBlur,
       labelStyle,
+      onBlur,
+      onFocus,
       ...props
     },
     ref
@@ -90,13 +90,13 @@ export const Input = forwardRef<Partial<TextInput>, FieldInputProps>(
     return (
       <Box {...layoutProps} width="100%" mb="2">
         <Pressable onPress={handleFocus}>
-          <FormLabel label={label} isRequired={isRequired} labelStyle={labelStyle} />
+          <FormLabel {...{ isRequired, label, labelStyle }} />
           <BaseInput
             isInvalid={isInvalid || Boolean(errorMessage)}
             {...inputProps}
             ref={_inputRef}
           />
-          <FormErrorMessage errorMessage={errorMessage} />
+          <FormErrorMessage {...{ errorMessage }} />
         </Pressable>
       </Box>
     )
diff --git a/src/design-system/components/FormLabel.tsx b/src/design-system/components/FormLabel.tsx
index 6e46c2ae..b64d750c 100644
--- a/src/design-system/components/FormLabel.tsx
+++ b/src/design-system/components/FormLabel.tsx
@@ -19,12 +19,14 @@ export const FormLabel = ({ label, isRequired, labelStyle }: FormLabelProps) =>
   return (
     <View style={[styles.wrapper, { ...(label && styles.wrapperWithLabel) }]}>
       {label && (
-        <Text style={[labelStyle, { color: labelStyle?.color || colors.text.brand.primary }]}>
+        <Text.SmMedium style={[labelStyle, { color: labelStyle?.color || colors.text.secondary }]}>
           {label}
           {isRequired && (
-            <Text style={[stylesForRequired, { color: colors.text.error.primary }]}>*</Text>
+            <Text.SmMedium style={[stylesForRequired, { color: colors.text.error.primary }]}>
+              *
+            </Text.SmMedium>
           )}
-        </Text>
+        </Text.SmMedium>
       )}
     </View>
   )
diff --git a/src/design-system/components/Input.tsx b/src/design-system/components/Input.tsx
index a8d082f6..92671b15 100644
--- a/src/design-system/components/Input.tsx
+++ b/src/design-system/components/Input.tsx
@@ -224,23 +224,26 @@ export const Input = forwardRef<TextInput, InputProps>(
     return (
       <BoxWithShadow {...{ isFocused, isInvalid }}>
         <Box
-          flexDirection="row"
           alignItems="center"
-          overflow="hidden"
-          borderColor={isInvalid ? 'border.error' : isFocused ? 'border.brand' : 'border.primary'}
+          borderColor={
+            isDisabled
+              ? 'border.disabled'
+              : isInvalid
+              ? 'border.error'
+              : isFocused
+              ? 'border.brand'
+              : 'border.primary'
+          }
+          bg={isDisabled ? 'bg.disabled_subtle' : 'bg.primary'}
           borderRadius={8}
           borderWidth={1}
-          backgroundColor={
-            isInvalid ? 'bg.error.primary' : isFocused ? 'bg.brand.primary' : 'bg.active'
-          }
-          bgOpacity={isFocused ? 0.1 : 1}
+          flexDirection="row"
+          overflow="hidden"
           {...layoutProps}
         >
           <StyledInput
-            ref={_inputRef}
             autoCapitalize="none"
-            bg="bg.primary"
-            color={isDisabled ? 'text.disabled' : isInvalid ? 'text.error.primary' : 'text.primary'}
+            color={isDisabled ? 'text.disabled' : 'text.primary'}
             cursorColor={colors.text.placeholder}
             {...Platform.select({
               default: { editable: !isDisabled },
@@ -254,6 +257,7 @@ export const Input = forwardRef<TextInput, InputProps>(
             placeholderTextColor={colors.text.placeholder}
             px={3}
             py={2}
+            ref={_inputRef}
             secureTextEntry={securePassword}
             selectionColor={colors.text.secondary}
             width="100%"

From 863c0bf2e298ba3ed916a4e43be53fdc6d133649 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 13:51:36 +0100
Subject: [PATCH 08/11] update colors file

---
 assets/figma/variables.json        | 142 ++++++++++++++---------------
 src/design-system/config/colors.ts |  10 +-
 2 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/assets/figma/variables.json b/assets/figma/variables.json
index 1902e6f2..89f36fd7 100644
--- a/assets/figma/variables.json
+++ b/assets/figma/variables.json
@@ -1395,73 +1395,73 @@
               "value": "#0D2D3A"
             },
             {
-              "name": "Colors/BlueLight/25",
+              "name": "Colors/Blue light/25",
               "type": "color",
               "isAlias": false,
               "value": "#F5FBFF"
             },
             {
-              "name": "Colors/BlueLight/50",
+              "name": "Colors/Blue light/50",
               "type": "color",
               "isAlias": false,
               "value": "#F0F9FF"
             },
             {
-              "name": "Colors/BlueLight/100",
+              "name": "Colors/Blue light/100",
               "type": "color",
               "isAlias": false,
               "value": "#E0F2FE"
             },
             {
-              "name": "Colors/BlueLight/200",
+              "name": "Colors/Blue light/200",
               "type": "color",
               "isAlias": false,
               "value": "#B9E6FE"
             },
             {
-              "name": "Colors/BlueLight/300",
+              "name": "Colors/Blue light/300",
               "type": "color",
               "isAlias": false,
               "value": "#7CD4FD"
             },
             {
-              "name": "Colors/BlueLight/400",
+              "name": "Colors/Blue light/400",
               "type": "color",
               "isAlias": false,
               "value": "#36BFFA"
             },
             {
-              "name": "Colors/BlueLight/500",
+              "name": "Colors/Blue light/500",
               "type": "color",
               "isAlias": false,
               "value": "#0BA5EC"
             },
             {
-              "name": "Colors/BlueLight/600",
+              "name": "Colors/Blue light/600",
               "type": "color",
               "isAlias": false,
               "value": "#0086C9"
             },
             {
-              "name": "Colors/BlueLight/700",
+              "name": "Colors/Blue light/700",
               "type": "color",
               "isAlias": false,
               "value": "#026AA2"
             },
             {
-              "name": "Colors/BlueLight/800",
+              "name": "Colors/Blue light/800",
               "type": "color",
               "isAlias": false,
               "value": "#065986"
             },
             {
-              "name": "Colors/BlueLight/900",
+              "name": "Colors/Blue light/900",
               "type": "color",
               "isAlias": false,
               "value": "#0B4A6F"
             },
             {
-              "name": "Colors/BlueLight/950",
+              "name": "Colors/Blue light/950",
               "type": "color",
               "isAlias": false,
               "value": "#062C41"
@@ -1539,73 +1539,73 @@
               "value": "#102A56"
             },
             {
-              "name": "Colors/BlueDark/25",
+              "name": "Colors/Blue dark/25",
               "type": "color",
               "isAlias": false,
               "value": "#F5F8FF"
             },
             {
-              "name": "Colors/BlueDark/50",
+              "name": "Colors/Blue dark/50",
               "type": "color",
               "isAlias": false,
               "value": "#EFF4FF"
             },
             {
-              "name": "Colors/BlueDark/100",
+              "name": "Colors/Blue dark/100",
               "type": "color",
               "isAlias": false,
               "value": "#D1E0FF"
             },
             {
-              "name": "Colors/BlueDark/200",
+              "name": "Colors/Blue dark/200",
               "type": "color",
               "isAlias": false,
               "value": "#B2CCFF"
             },
             {
-              "name": "Colors/BlueDark/300",
+              "name": "Colors/Blue dark/300",
               "type": "color",
               "isAlias": false,
               "value": "#84ADFF"
             },
             {
-              "name": "Colors/BlueDark/400",
+              "name": "Colors/Blue dark/400",
               "type": "color",
               "isAlias": false,
               "value": "#528BFF"
             },
             {
-              "name": "Colors/BlueDark/500",
+              "name": "Colors/Blue dark/500",
               "type": "color",
               "isAlias": false,
               "value": "#2970FF"
             },
             {
-              "name": "Colors/BlueDark/600",
+              "name": "Colors/Blue dark/600",
               "type": "color",
               "isAlias": false,
               "value": "#155EEF"
             },
             {
-              "name": "Colors/BlueDark/700",
+              "name": "Colors/Blue dark/700",
               "type": "color",
               "isAlias": false,
               "value": "#004EEB"
             },
             {
-              "name": "Colors/BlueDark/800",
+              "name": "Colors/Blue dark/800",
               "type": "color",
               "isAlias": false,
               "value": "#0040C1"
             },
             {
-              "name": "Colors/BlueDark/900",
+              "name": "Colors/Blue dark/900",
               "type": "color",
               "isAlias": false,
               "value": "#00359E"
             },
             {
-              "name": "Colors/BlueDark/950",
+              "name": "Colors/Blue dark/950",
               "type": "color",
               "isAlias": false,
               "value": "#002266"
@@ -1971,73 +1971,73 @@
               "value": "#4E0D30"
             },
             {
-              "name": "Colors/Rose/25",
+              "name": "Colors/Rosé/25",
               "type": "color",
               "isAlias": false,
               "value": "#FFF5F6"
             },
             {
-              "name": "Colors/Rose/50",
+              "name": "Colors/Rosé/50",
               "type": "color",
               "isAlias": false,
               "value": "#FFF1F3"
             },
             {
-              "name": "Colors/Rose/100",
+              "name": "Colors/Rosé/100",
               "type": "color",
               "isAlias": false,
               "value": "#FFE4E8"
             },
             {
-              "name": "Colors/Rose/200",
+              "name": "Colors/Rosé/200",
               "type": "color",
               "isAlias": false,
               "value": "#FECDD6"
             },
             {
-              "name": "Colors/Rose/300",
+              "name": "Colors/Rosé/300",
               "type": "color",
               "isAlias": false,
               "value": "#FEA3B4"
             },
             {
-              "name": "Colors/Rose/400",
+              "name": "Colors/Rosé/400",
               "type": "color",
               "isAlias": false,
               "value": "#FD6F8E"
             },
             {
-              "name": "Colors/Rose/500",
+              "name": "Colors/Rosé/500",
               "type": "color",
               "isAlias": false,
               "value": "#F63D68"
             },
             {
-              "name": "Colors/Rose/600",
+              "name": "Colors/Rosé/600",
               "type": "color",
               "isAlias": false,
               "value": "#E31B54"
             },
             {
-              "name": "Colors/Rose/700",
+              "name": "Colors/Rosé/700",
               "type": "color",
               "isAlias": false,
               "value": "#C01048"
             },
             {
-              "name": "Colors/Rose/800",
+              "name": "Colors/Rosé/800",
               "type": "color",
               "isAlias": false,
               "value": "#A11043"
             },
             {
-              "name": "Colors/Rose/900",
+              "name": "Colors/Rosé/900",
               "type": "color",
               "isAlias": false,
               "value": "#89123E"
             },
             {
-              "name": "Colors/Rose/950",
+              "name": "Colors/Rosé/950",
               "type": "color",
               "isAlias": false,
               "value": "#510B24"
@@ -3432,7 +3432,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/50"
+                "name": "Colors/Blue light/50"
               }
             },
             {
@@ -3441,7 +3441,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/100"
+                "name": "Colors/Blue light/100"
               }
             },
             {
@@ -3450,7 +3450,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/200"
+                "name": "Colors/Blue light/200"
               }
             },
             {
@@ -3459,7 +3459,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/300"
+                "name": "Colors/Blue light/300"
               }
             },
             {
@@ -3468,7 +3468,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/400"
+                "name": "Colors/Blue light/400"
               }
             },
             {
@@ -3477,7 +3477,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/500"
+                "name": "Colors/Blue light/500"
               }
             },
             {
@@ -3486,7 +3486,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/600"
+                "name": "Colors/Blue light/600"
               }
             },
             {
@@ -3495,7 +3495,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/700"
+                "name": "Colors/Blue light/700"
               }
             },
             {
@@ -3576,7 +3576,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/50"
+                "name": "Colors/Blue dark/50"
               }
             },
             {
@@ -3585,7 +3585,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/100"
+                "name": "Colors/Blue dark/100"
               }
             },
             {
@@ -3594,7 +3594,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/200"
+                "name": "Colors/Blue dark/200"
               }
             },
             {
@@ -3603,7 +3603,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/300"
+                "name": "Colors/Blue dark/300"
               }
             },
             {
@@ -3612,7 +3612,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/400"
+                "name": "Colors/Blue dark/400"
               }
             },
             {
@@ -3621,7 +3621,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/500"
+                "name": "Colors/Blue dark/500"
               }
             },
             {
@@ -3630,7 +3630,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/600"
+                "name": "Colors/Blue dark/600"
               }
             },
             {
@@ -3639,7 +3639,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/700"
+                "name": "Colors/Blue dark/700"
               }
             },
             {
@@ -4242,7 +4242,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/Error/900"
+                "name": "Colors/Brand/600"
               }
             },
             {
@@ -4313,8 +4313,8 @@
               "type": "color",
               "isAlias": true,
               "value": {
-                "collection": "1. Color modes",
-                "name": "Colors/Text/text-error-primary (600)"
+                "collection": "_Primitives",
+                "name": "Colors/Gray (light mode)/300"
               }
             },
             {
@@ -6389,7 +6389,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/950"
+                "name": "Colors/Blue light/950"
               }
             },
             {
@@ -6398,7 +6398,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/900"
+                "name": "Colors/Blue light/900"
               }
             },
             {
@@ -6407,7 +6407,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/800"
+                "name": "Colors/Blue light/800"
               }
             },
             {
@@ -6416,7 +6416,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/700"
+                "name": "Colors/Blue light/700"
               }
             },
             {
@@ -6425,7 +6425,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/600"
+                "name": "Colors/Blue light/600"
               }
             },
             {
@@ -6434,7 +6434,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/500"
+                "name": "Colors/Blue light/500"
               }
             },
             {
@@ -6443,7 +6443,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/400"
+                "name": "Colors/Blue light/400"
               }
             },
             {
@@ -6452,7 +6452,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueLight/300"
+                "name": "Colors/Blue light/300"
               }
             },
             {
@@ -6533,7 +6533,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/950"
+                "name": "Colors/Blue dark/950"
               }
             },
             {
@@ -6542,7 +6542,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/900"
+                "name": "Colors/Blue dark/900"
               }
             },
             {
@@ -6551,7 +6551,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/800"
+                "name": "Colors/Blue dark/800"
               }
             },
             {
@@ -6560,7 +6560,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/700"
+                "name": "Colors/Blue dark/700"
               }
             },
             {
@@ -6569,7 +6569,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/600"
+                "name": "Colors/Blue dark/600"
               }
             },
             {
@@ -6578,7 +6578,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/500"
+                "name": "Colors/Blue dark/500"
               }
             },
             {
@@ -6587,7 +6587,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/400"
+                "name": "Colors/Blue dark/400"
               }
             },
             {
@@ -6596,7 +6596,7 @@
               "isAlias": true,
               "value": {
                 "collection": "_Primitives",
-                "name": "Colors/BlueDark/300"
+                "name": "Colors/Blue dark/300"
               }
             },
             {
diff --git a/src/design-system/config/colors.ts b/src/design-system/config/colors.ts
index 5027661b..02d7bd6e 100644
--- a/src/design-system/config/colors.ts
+++ b/src/design-system/config/colors.ts
@@ -656,7 +656,7 @@ export const themeColors = {
     },
     button: {
       primary: {
-        bg: '#7A271A',
+        bg: '#7F56D9',
         bg_hover: '#6941C6',
         border: '#7F56D9',
         border_hover: '#6941C6',
@@ -674,7 +674,7 @@ export const themeColors = {
       secondary: {
         bg: '#FFFFFF',
         bg_hover: '#F9FAFB',
-        border: '#D92D20',
+        border: '#D0D5DD',
         border_hover: '#D0D5DD',
         color: {
           bg: '#FFFFFF',
@@ -1105,7 +1105,7 @@ export const themeColors = {
       '900': '#194185',
       '950': '#102A56',
     },
-    BlueDark: {
+    'Blue dark': {
       '25': '#F5F8FF',
       '50': '#EFF4FF',
       '100': '#D1E0FF',
@@ -1119,7 +1119,7 @@ export const themeColors = {
       '900': '#00359E',
       '950': '#002266',
     },
-    BlueLight: {
+    'Blue light': {
       '25': '#F5FBFF',
       '50': '#F0F9FF',
       '100': '#E0F2FE',
@@ -1441,7 +1441,7 @@ export const themeColors = {
       '900': '#3E1C96',
       '950': '#27115F',
     },
-    Rose: {
+    Rosé: {
       '25': '#FFF5F6',
       '50': '#FFF1F3',
       '100': '#FFE4E8',

From a53dcf390745a703c5c277143986fd3074ba6280 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 14:07:59 +0100
Subject: [PATCH 09/11] fix language picker on web

---
 src/components/organisms/Menu/index.tsx | 65 ++++++++++++-------------
 1 file changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/components/organisms/Menu/index.tsx b/src/components/organisms/Menu/index.tsx
index bd464886..511323b9 100644
--- a/src/components/organisms/Menu/index.tsx
+++ b/src/components/organisms/Menu/index.tsx
@@ -1,8 +1,8 @@
-import { AbsoluteFullFill, Box, TouchableProps, ScrollView } from '@baca/design-system/components'
+import { Box, TouchableProps, ScrollView, Pressable } from '@baca/design-system/components'
 import { useRef, useState, useMemo, useTheme, useCallback } from '@baca/hooks'
 import { Portal } from '@gorhom/portal'
 import React, { NamedExoticComponent, PropsWithChildren, memo } from 'react'
-import { View, Modal, TouchableWithoutFeedback } from 'react-native'
+import { View, Modal } from 'react-native'
 
 import { MenuItem } from '../../molecules/MenuItem'
 
@@ -120,37 +120,36 @@ const Menu = memo<MenuProps>(
             visible={isOpen}
             onRequestClose={handleClose}
           >
-            <TouchableWithoutFeedback onPress={handleClose}>
-              <AbsoluteFullFill backgroundColor="bg.active" bgOpacity={0.1} />
-            </TouchableWithoutFeedback>
-            {triggerPosition && (
-              <Box
-                position="absolute"
-                top={triggerPosition?.y}
-                left={triggerPosition?.x}
-                p={2}
-                backgroundColor="fg.white"
-                borderRadius={4}
-                {...shadows['4']}
-              >
-                <ScrollView scrollEnabled={scrollable}>
-                  {React.Children.map(props.children, (child) => {
-                    if (React.isValidElement(child)) {
-                      return React.cloneElement(child, {
-                        ...child.props,
-                        onPress: () => {
-                          if (closeOnSelect) {
-                            handleClose()
-                          }
-                          child.props.onPress?.()
-                        },
-                      })
-                    }
-                    return child
-                  })}
-                </ScrollView>
-              </Box>
-            )}
+            <Pressable onPress={handleClose} flex={1} bg="Base.black" bgOpacity={0.1}>
+              {triggerPosition && (
+                <Box
+                  position="absolute"
+                  top={triggerPosition?.y}
+                  left={triggerPosition?.x}
+                  p={2}
+                  backgroundColor="bg.primary"
+                  borderRadius={4}
+                  {...shadows['4']}
+                >
+                  <ScrollView scrollEnabled={scrollable}>
+                    {React.Children.map(props.children, (child) => {
+                      if (React.isValidElement(child)) {
+                        return React.cloneElement(child, {
+                          ...child.props,
+                          onPress: () => {
+                            if (closeOnSelect) {
+                              handleClose()
+                            }
+                            child.props.onPress?.()
+                          },
+                        })
+                      }
+                      return child
+                    })}
+                  </ScrollView>
+                </Box>
+              )}
+            </Pressable>
           </Modal>
         </Portal>
       </>

From f218a4235c670e3752aa6cd5d54ab352cb7d30a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 14:32:09 +0100
Subject: [PATCH 10/11] update button snapshot

---
 .../components/Button/__snapshots__/Button.test.tsx.snap        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
index 2e8eb661..eba2a4ed 100644
--- a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`Button renders correctly 1`] = `
   style={
     {
       "alignItems": "center",
-      "backgroundColor": "#7A271A",
+      "backgroundColor": "#7F56D9",
       "borderColor": "#7F56D9",
       "borderRadius": 4,
       "borderWidth": 1,

From 751fde68e02794975b8cff30c49c1ee7b246aac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Baumruck?= <m.baumruck@binarapps.com>
Date: Mon, 18 Mar 2024 15:18:54 +0100
Subject: [PATCH 11/11] adjust checkbox styles

---
 .../components/BoxWithShadow.tsx              |  4 +-
 src/design-system/components/Checkbox.tsx     | 83 ++++++++++++-------
 src/design-system/components/types.ts         |  2 +-
 src/screens/SignInScreen.tsx                  |  1 -
 src/screens/SignUpScreen.tsx                  |  5 +-
 5 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/src/design-system/components/BoxWithShadow.tsx b/src/design-system/components/BoxWithShadow.tsx
index 1b32efde..2cfe4f9f 100644
--- a/src/design-system/components/BoxWithShadow.tsx
+++ b/src/design-system/components/BoxWithShadow.tsx
@@ -10,13 +10,13 @@ type BoxWithShadowProps = {
   isFocused?: boolean
 } & BoxProps
 
-export const BoxWithShadow: FC<PropsWithChildren> = ({
+export const BoxWithShadow: FC<PropsWithChildren<BoxWithShadowProps>> = ({
   children,
   isInvalid,
   isFocused,
   style,
   ...rest
-}: BoxWithShadowProps) => {
+}) => {
   const shadowProps = useMemo(
     () => (isInvalid ? errorShadow : isFocused ? focusShadow : {}),
     [isInvalid, isFocused]
diff --git a/src/design-system/components/Checkbox.tsx b/src/design-system/components/Checkbox.tsx
index 80e7f6b9..91b02831 100644
--- a/src/design-system/components/Checkbox.tsx
+++ b/src/design-system/components/Checkbox.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from '@baca/hooks'
 import { forwardRef, useCallback, useMemo } from 'react'
 import { View, Pressable, StyleSheet } from 'react-native'
 
@@ -7,76 +6,96 @@ import { Icon } from './Icon'
 import { Text } from './Text'
 import { CheckboxProps } from './types'
 
+const hitSlop = {
+  top: 5,
+  left: 5,
+  bottom: 5,
+}
+
+const checkboxSizes = {
+  sm: {
+    boxSize: 16,
+    iconSize: 12,
+  },
+  md: {
+    boxSize: 20,
+    iconSize: 14,
+  },
+} as const
+
 export const Checkbox = forwardRef<View, CheckboxProps>(
   (
     {
-      disabled,
-      value,
-      onChange,
+      checkboxes,
       checkboxText,
-      size = 22,
-      isError,
+      disabled,
       isChecked,
-      checkboxes,
+      isError,
+      onChange,
+      size = 'sm',
+      value,
       ...props
     },
     ref
   ) => {
-    const { colors } = useTheme()
+    const checkboxSize = useMemo(() => checkboxSizes[size], [size])
+
     const handleValueChange = useCallback(() => {
       return checkboxes ? onChange(value) : onChange(!value)
     }, [onChange, value, checkboxes])
 
-    const iconColor = useMemo(() => {
+    const iconColor = useMemo<ColorNames>(() => {
       if (disabled && value) {
-        return 'icon.fg.brand'
+        return 'fg.disabled_subtle'
       }
 
-      return 'text.primary'
+      return 'fg.white'
     }, [disabled, value])
 
-    const bgColor = useMemo(() => {
+    const bgColor = useMemo<ColorNames>(() => {
       if (!value) {
-        return colors.text.white
+        return 'fg.white'
       }
       if (disabled) {
-        return colors.text.placeholder
+        return 'bg.disabled_subtle'
       }
 
-      return colors.alpha.black[10]
-    }, [disabled, value, colors])
+      return 'bg.brand.solid'
+    }, [disabled, value])
 
-    const borderColor = useMemo(
-      () => (isError ? 'border.error' : disabled ? 'border.disabled' : 'border.primary'),
-      [isError, disabled]
+    const borderColor = useMemo<ColorNames>(
+      () =>
+        disabled
+          ? 'border.disabled'
+          : isError
+          ? 'border.error'
+          : value
+          ? 'bg.brand.solid'
+          : 'border.primary',
+      [value, isError, disabled]
     )
 
     return (
       <Pressable
-        ref={ref}
+        {...{ disabled, hitSlop, ref }}
         onPress={handleValueChange}
-        hitSlop={{
-          top: 5,
-          left: 5,
-          bottom: 5,
-        }}
         style={styles.mainContainer}
-        disabled={disabled}
       >
         <View style={styles.row}>
           <Box
             style={[
               styles.checkbox,
               {
-                backgroundColor: bgColor,
-                height: size,
-                width: size,
+                height: checkboxSize.boxSize,
+                width: checkboxSize.boxSize,
               },
             ]}
-            borderColor={borderColor}
-            {...props}
+            bg={bgColor}
+            {...{ ...props, borderColor }}
           >
-            {isChecked ? <Icon color={iconColor} name="check-line" size={18} /> : null}
+            {isChecked ? (
+              <Icon color={iconColor} name="check-line" size={checkboxSize.iconSize} />
+            ) : null}
           </Box>
           <Text>{checkboxText}</Text>
         </View>
diff --git a/src/design-system/components/types.ts b/src/design-system/components/types.ts
index fe1d70ec..c80cd75f 100644
--- a/src/design-system/components/types.ts
+++ b/src/design-system/components/types.ts
@@ -218,7 +218,7 @@ export type CheckboxProps = ViewProps & {
   onChange: (newValue: boolean | string[]) => void
   checkboxText?: string
   disabled?: boolean
-  size?: number
+  size?: 'sm' | 'md'
   isError?: boolean
   isChecked?: boolean
   checkboxes?: string[]
diff --git a/src/screens/SignInScreen.tsx b/src/screens/SignInScreen.tsx
index 9b142746..8e6d9650 100644
--- a/src/screens/SignInScreen.tsx
+++ b/src/screens/SignInScreen.tsx
@@ -85,7 +85,6 @@ export const SignInScreen = (): JSX.Element => {
             {...{ control, errors }}
             checkboxText={t('form.checkbox.remember_me')}
             name="confirm"
-            size={18}
             testID="confirmCheckbox"
           />
           <Button
diff --git a/src/screens/SignUpScreen.tsx b/src/screens/SignUpScreen.tsx
index cebfa27a..dee3915d 100644
--- a/src/screens/SignUpScreen.tsx
+++ b/src/screens/SignUpScreen.tsx
@@ -92,7 +92,6 @@ export const SignUpScreen = () => {
           rules={{
             required: t('form.validation.required'),
           }}
-          size={18}
         />
         <ControlledField.Checkbox
           {...{ control, errors }}
@@ -102,10 +101,8 @@ export const SignUpScreen = () => {
           rules={{
             required: t('form.validation.required'),
           }}
-          size={18}
         />
-        <Spacer y={2} />
-        <Spacer y={2} />
+        <Spacer y={4} />
         <Button disabled={isSubmitting} loading={isSubmitting} onPress={register}>
           {t('sign_up_screen.sign_up')}
         </Button>