FIX: UI improvements

src/components/molecules/Field/Checkbox.tsx

@@ -52,7 +52,7 @@ export const Checkbox = ({
   }, [checkboxes, value, props, onChange])
 
   return (
-    <Box>
+    <Box gap={1}>
       <FormLabel label={label} isRequired={isRequired} labelStyle={labelStyle} />
       {checkboxes ? (
         renderCheckboxes

src/components/molecules/Field/Radio.tsx

@@ -10,6 +10,15 @@ import { forwardRef, useCallback, useMemo } from 'react'
 
 import { FieldRadioProps } from './types'
 
+const radioSizes = {
+  sm: {
+    boxSize: 4,
+  },
+  md: {
+    boxSize: 5,
+  },
+} as const
+
 export const Radio = forwardRef<TouchableRef, FieldRadioProps>(
   (
     {
@@ -18,20 +27,32 @@ export const Radio = forwardRef<TouchableRef, FieldRadioProps>(
       radioOptions,
       errorMessage,
       isError,
+      size = 'sm',
       onChange,
       label,
       labelStyle,
       isDisabled,
     },
     ref
   ) => {
-    const borderColor: ColorNames = useMemo(
-      () => (isError ? 'border.error' : isDisabled ? 'border.disabled' : 'border.brand'),
-      [isError, isDisabled]
-    )
-    const bgColor = useCallback(
-      (item: string): ColorNames => (item === value ? 'bg.brand.primary' : 'bg.tertiary'),
-      [value]
+    const checkboxSize = useMemo(() => radioSizes[size], [size])
+
+    const getBorderColor = useCallback(
+      (isSelected: boolean): ColorNames | undefined => {
+        if (isDisabled) {
+          return 'border.disabled'
+        }
+        if (isError) {
+          return 'border.error'
+        }
+
+        if (isSelected) {
+          return 'bg.brand.solid'
+        }
+
+        return 'border.primary'
+      },
+      [isDisabled, isError]
     )
 
     const renderRadioButtons = useMemo(
@@ -49,21 +70,17 @@ export const Radio = forwardRef<TouchableRef, FieldRadioProps>(
               <Box
                 alignItems="center"
                 borderRadius={50}
-                borderWidth={1}
-                height={22}
-                width={22}
+                height={checkboxSize.boxSize}
+                width={checkboxSize.boxSize}
                 justifyContent="center"
-                borderColor={borderColor}
-              >
-                {item === value ? (
-                  <Box borderRadius={50} height={14} width={14} bg={bgColor(item)} />
-                ) : null}
-              </Box>
+                borderColor={getBorderColor(item === value)}
+                borderWidth={item === value ? 5 : 1}
+              />
               <Text ml={4}>{item}</Text>
             </Touchable>
           )
         }),
-      [radioOptions, value, bgColor, borderColor, onChange, ref]
+      [radioOptions, ref, checkboxSize.boxSize, getBorderColor, value, onChange]
     )
 
     return (

src/design-system/components/Checkbox.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useCallback, useMemo } from 'react'
-import { View, Pressable, StyleSheet } from 'react-native'
+import { TouchableOpacity, StyleSheet } from 'react-native'
 
-import { Box } from './Box'
+import { Center } from './Center'
 import { Icon } from './Icon'
 import { Text } from './Text'
 import { CheckboxProps } from './types'
@@ -14,16 +14,16 @@ const hitSlop = {
 
 const checkboxSizes = {
   sm: {
-    boxSize: 16,
+    boxSize: 4,
     iconSize: 12,
   },
   md: {
-    boxSize: 20,
+    boxSize: 5,
     iconSize: 14,
   },
 } as const
 
-export const Checkbox = forwardRef<View, CheckboxProps>(
+export const Checkbox = forwardRef<TouchableOpacity, CheckboxProps>(
   (
     {
       checkboxes,
@@ -52,74 +52,64 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
       return 'fg.white'
     }, [disabled, value])
 
-    const bgColor = useMemo<ColorNames>(() => {
-      if (!value) {
-        return 'fg.white'
-      }
+    const bgColor = useMemo<ColorNames | undefined>(() => {
       if (disabled) {
         return 'bg.disabled_subtle'
       }
 
+      if (!isChecked) {
+        return undefined
+      }
+
       return 'bg.brand.solid'
-    }, [disabled, value])
+    }, [disabled, isChecked])
 
-    const borderColor = useMemo<ColorNames>(
-      () =>
-        disabled
-          ? 'border.disabled'
-          : isError
-          ? 'border.error'
-          : value
-          ? 'bg.brand.solid'
-          : 'border.primary',
-      [value, isError, disabled]
-    )
+    const borderColor = useMemo<ColorNames | undefined>(() => {
+      if (disabled) {
+        return 'border.disabled'
+      }
+      if (isError) {
+        return 'border.error'
+      }
+
+      if (isChecked) {
+        return 'bg.brand.solid'
+      }
+
+      return 'border.primary'
+    }, [isChecked, isError, disabled])
 
     return (
-      <Pressable
+      <TouchableOpacity
         {...{ disabled, hitSlop, ref }}
+        activeOpacity={0.5}
         onPress={handleValueChange}
         style={styles.mainContainer}
       >
-        <View style={styles.row}>
-          <Box
-            style={[
-              styles.checkbox,
-              {
-                height: checkboxSize.boxSize,
-                width: checkboxSize.boxSize,
-              },
-            ]}
-            bg={bgColor}
-            {...{ ...props, borderColor }}
-          >
-            {isChecked ? (
-              <Icon color={iconColor} name="check-line" size={checkboxSize.iconSize} />
-            ) : null}
-          </Box>
-          <Text.SmRegular>{checkboxText}</Text.SmRegular>
-        </View>
-      </Pressable>
+        <Center
+          bg={bgColor}
+          borderColor={borderColor}
+          borderRadius={4}
+          borderWidth={1}
+          height={checkboxSize.boxSize}
+          mr={2}
+          width={checkboxSize.boxSize}
+          {...{ ...props }}
+        >
+          {isChecked ? (
+            <Icon color={iconColor} name="check-line" size={checkboxSize.iconSize} />
+          ) : null}
+        </Center>
+        <Text.SmRegular>{checkboxText}</Text.SmRegular>
+      </TouchableOpacity>
     )
   }
 )
 
 const styles = StyleSheet.create({
-  checkbox: {
-    alignItems: 'center',
-    borderRadius: 4,
-    borderWidth: 1,
-    justifyContent: 'center',
-    marginRight: 8,
-  },
   mainContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  row: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'center',
   },
 })

src/design-system/components/Select.tsx

@@ -168,7 +168,7 @@ export const Select = <T extends SelectKey>({
             styles.textInput,
             isError
               ? { borderColor: colors.text.error.primary }
-              : { borderColor: colors.border.brand },
+              : { borderColor: colors.border.primary },
           ]}
           color={inputColor}
         >

src/design-system/components/types.ts

@@ -214,6 +214,7 @@ export type RadioProps = {
   radioOptions?: string[]
   isError?: boolean
   value?: string | number
+  size?: 'sm' | 'md'
 }
 
 export type CheckboxProps = ViewProps & {

src/i18n/translations/en.json

@@ -16,6 +16,14 @@
       "confirm": "Yes, delete"
     }
   },
+  "bottom_tabs": {
+    "home": "Home",
+    "categories": "Categories",
+    "example": "Example",
+    "settings": "Settings",
+    "profile": "Profile",
+    "details": "Details"
+  },
   "common": {
     "add": "Add",
     "back": "Back",

src/i18n/translations/pl.json

@@ -16,6 +16,14 @@
       "confirm": "Tak, usuń"
     }
   },
+  "bottom_tabs": {
+    "home": "Home",
+    "categories": "Kategorie",
+    "example": "Przykłady",
+    "settings": "Ustawienia",
+    "profile": "Profil",
+    "details": "Detale"
+  },
   "common": {
     "add": "Dodaj",
     "back": "Cofnij",

src/navigation/tabNavigator/components/BottomBar.tsx

@@ -1,5 +1,5 @@
 import { Column, Icon, Text } from '@baca/design-system'
-import { useTheme } from '@baca/hooks'
+import { useTheme, useTranslation } from '@baca/hooks'
 import cssStyles from '@baca/styles'
 import { Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -10,6 +10,7 @@ import { cns } from '../utils'
 
 export function BottomBar({ visible }: { visible: boolean }) {
   const { colors } = useTheme()
+  const { t } = useTranslation()
   return (
     <View
       style={[
@@ -47,7 +48,7 @@ export function BottomBar({ visible }: { visible: boolean }) {
                   size={24}
                   color={getTabColor(focused)}
                 />
-                <Text.XsMedium color={getTabColor(focused)}>{tab.displayedName}</Text.XsMedium>
+                <Text.XsMedium color={getTabColor(focused)}>{t(tab.displayedNameTx)}</Text.XsMedium>
               </Column>
             )}
           </TabBarItemWrapper>

src/navigation/tabNavigator/components/SideBar.tsx

@@ -1,4 +1,4 @@
-import { useSafeAreaInsets, useTheme } from '@baca/hooks'
+import { useSafeAreaInsets, useTheme, useTranslation } from '@baca/hooks'
 import { signOut } from '@baca/store/auth'
 import cssStyles from '@baca/styles'
 import { Platform, StyleSheet, View } from 'react-native'
@@ -13,6 +13,7 @@ const NAV_MEDIUM_WIDTH = 244
 
 export function SideBar({ visible }: { visible: boolean }) {
   const { colors } = useTheme()
+  const { t } = useTranslation()
   const { top } = useSafeAreaInsets()
   const isLarge = useUniversalWidth(1264)
 
@@ -73,7 +74,7 @@ export function SideBar({ visible }: { visible: boolean }) {
           <View style={jsStyles.sidebarTabs}>
             {upperSideTabs.map((tab) => (
               <SideBarTabItem key={tab.name} {...tab}>
-                {tab.displayedName}
+                {t(tab.displayedNameTx)}
               </SideBarTabItem>
             ))}
           </View>

src/navigation/tabNavigator/components/TabBarItemWrapper.tsx

@@ -25,19 +25,23 @@ export function TabBarItemWrapper({
   const focused = useIsTabSelected(id)
 
   if (onPress) {
-    return <Pressable onPress={onPress}>{(props) => children?.({ ...props, focused })}</Pressable>
+    return (
+      <Pressable hitSlop={5} onPress={onPress}>
+        {(props) => children?.({ ...props, focused })}
+      </Pressable>
+    )
   }
 
   if (name.startsWith('/') || name.startsWith('.')) {
     return (
       <Link href={{ pathname: name, params }} asChild style={style}>
-        <Pressable>{(props) => children?.({ ...props, focused })}</Pressable>
+        <Pressable hitSlop={5}>{(props) => children?.({ ...props, focused })}</Pressable>
       </Link>
     )
   }
   return (
     <TabbedNavigator.Link name={id} asChild style={style}>
-      <Pressable>{(props) => children?.({ ...props, focused })}</Pressable>
+      <Pressable hitSlop={5}>{(props) => children?.({ ...props, focused })}</Pressable>
     </TabbedNavigator.Link>
   )
 }