From 871ff2ada6e1c2f4ace7ed632445db0744212c7c Mon Sep 17 00:00:00 2001
From: Alder Whiteford <alderwhiteford@Alders-MacBook-Pro-2.local>
Date: Wed, 29 May 2024 00:11:41 -0400
Subject: [PATCH] Tweak textbox

---
 frontend/mobile/app/(design-system)/Colors.ts | 15 ------
 .../Textbox/TextboxVariants.ts                | 22 --------
 .../components/Button/Button.tsx              |  4 +-
 .../components/Text/TextVariants.ts           | 13 ++---
 .../{ => components}/Textbox/Textbox.tsx      | 50 +++++++++----------
 .../app/(design-system)/shared/colors.ts      |  4 +-
 frontend/mobile/app/(design-system)/theme.ts  | 10 ++--
 7 files changed, 40 insertions(+), 78 deletions(-)
 delete mode 100644 frontend/mobile/app/(design-system)/Colors.ts
 delete mode 100644 frontend/mobile/app/(design-system)/Textbox/TextboxVariants.ts
 rename frontend/mobile/app/(design-system)/{ => components}/Textbox/Textbox.tsx (61%)

diff --git a/frontend/mobile/app/(design-system)/Colors.ts b/frontend/mobile/app/(design-system)/Colors.ts
deleted file mode 100644
index 59743120..00000000
--- a/frontend/mobile/app/(design-system)/Colors.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// TODO: We will have to change these
-export const Colors = {
-    darkBlue: '#0C3354',
-    darkRed: '#C8102E',
-    green: '#14AC3F',
-    blue: '#2663FF',
-    aqua: '#35B8E2',
-    purple: '#9226FF',
-    red: '#EC2215',
-    orange: '#FF7426',
-    yellow: '#FFB626',
-    gray: '#C3C9D0',
-    white: '#FFFFFF',
-    black: '#000000'
-};
diff --git a/frontend/mobile/app/(design-system)/Textbox/TextboxVariants.ts b/frontend/mobile/app/(design-system)/Textbox/TextboxVariants.ts
deleted file mode 100644
index a6bc6285..00000000
--- a/frontend/mobile/app/(design-system)/Textbox/TextboxVariants.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { TextVariants } from '../Text/TextVariants';
-
-export const TextBoxColorVariants = {
-    error: {
-        borderColor: 'darkRed'
-    }
-};
-
-export const TextBoxVariants = {
-    defaults: {
-        borderWidth: 1,
-        borderRadius: 8,
-        borderColor: 'gray',
-        backgroundColor: 'white',
-        padding: 'm',
-        marginBottom: 'xs',
-        marginTop: 'xs',
-        ...TextVariants['body-1'],
-        minWidth: '100%'
-    },
-    ...TextBoxColorVariants
-};
diff --git a/frontend/mobile/app/(design-system)/components/Button/Button.tsx b/frontend/mobile/app/(design-system)/components/Button/Button.tsx
index b02ab0e2..08db025e 100644
--- a/frontend/mobile/app/(design-system)/components/Button/Button.tsx
+++ b/frontend/mobile/app/(design-system)/components/Button/Button.tsx
@@ -53,7 +53,7 @@ const StandardButton: React.FC<
 }) => {
     return (
         <BaseButton
-            backgroundColor={disabled ? 'disabled' : color}
+            backgroundColor={disabled ? 'gray' : color}
             disabled={disabled}
             onPress={disabled ? undefined : onPress}
             {...styles.standardButton}
@@ -83,7 +83,7 @@ const IconButton: React.FC<
 
     return (
         <BaseButton
-            backgroundColor={disabled ? 'disabled' : color}
+            backgroundColor={disabled ? 'gray' : color}
             justifyContent={justify}
             disabled={disabled}
             onPress={disabled ? undefined : onPress}
diff --git a/frontend/mobile/app/(design-system)/components/Text/TextVariants.ts b/frontend/mobile/app/(design-system)/components/Text/TextVariants.ts
index 3913d0d6..2e8fcfde 100644
--- a/frontend/mobile/app/(design-system)/components/Text/TextVariants.ts
+++ b/frontend/mobile/app/(design-system)/components/Text/TextVariants.ts
@@ -10,30 +10,25 @@ const Texts = {
         fontFamily: 'DMSans-Medium',
         fontSize: 24,
         fontStyle: 'normal',
-        fontWeight: '500',
-        lineHeight: 'normal',
-        color: '#000'
+        fontWeight: '500'
     },
     'body-1': {
         fontFamily: 'DMSans-Regular',
         fontSize: 16,
         fontStyle: 'normal',
-        fontWeight: '400',
-        lineHeight: 'normal'
+        fontWeight: '400'
     },
     'caption-1': {
         fontFamily: 'DMSans-Regular',
         fontSize: 12,
         fontStyle: 'normal',
-        fontWeight: '200',
-        lineHeight: 'normal'
+        fontWeight: '200'
     },
     'caption-2': {
         fontFamily: 'DMSans-Regular',
         fontSize: 10,
         fontStyle: 'normal',
-        fontWeight: '200',
-        lineHeight: 'normal'
+        fontWeight: '200'
     }
 } as const;
 
diff --git a/frontend/mobile/app/(design-system)/Textbox/Textbox.tsx b/frontend/mobile/app/(design-system)/components/Textbox/Textbox.tsx
similarity index 61%
rename from frontend/mobile/app/(design-system)/Textbox/Textbox.tsx
rename to frontend/mobile/app/(design-system)/components/Textbox/Textbox.tsx
index fe19c62a..71b500f2 100644
--- a/frontend/mobile/app/(design-system)/Textbox/Textbox.tsx
+++ b/frontend/mobile/app/(design-system)/components/Textbox/Textbox.tsx
@@ -1,16 +1,13 @@
 import React from 'react';
 import { TextInput } from 'react-native';
 
-import {
-    VariantProps,
-    createRestyleComponent,
-    createVariant
-} from '@shopify/restyle';
+import { BoxProps, createBox } from '@shopify/restyle';
 
-import { Box } from '@/app/(design-system)/Box';
-import { Text } from '@/app/(design-system)/Text/Text';
 import ErrorIcon from '@/app/(design-system)/assets/svg/Error.svg';
-import { Theme } from '@/app/(design-system)/theme';
+import { Box } from '@/app/(design-system)/components/Box/Box';
+import { Text } from '@/app/(design-system)/components/Text/Text';
+import { TextVariants } from '@/app/(design-system)/components/Text/TextVariants';
+import { Theme, createStyles } from '@/app/(design-system)/theme';
 
 type TextboxProps = {
     title?: string;
@@ -24,23 +21,12 @@ type TextboxProps = {
     value?: string;
     maxLength?: number;
     secureTextEntry?: boolean;
-};
-
-const textBoxVariant = createVariant<Theme, 'textBoxVariants'>({
-    themeKey: 'textBoxVariants'
-});
+    children?: React.ReactNode;
+} & BoxProps<Theme>;
 
-type TextBoxVariantProps = VariantProps<Theme, 'textBoxVariants'> &
-    TextboxProps & {
-        children?: React.ReactNode;
-    };
+const BaseTextInput = createBox<Theme, TextboxProps>(TextInput);
 
-const TextInputBase = createRestyleComponent<TextBoxVariantProps, Theme>(
-    [textBoxVariant],
-    TextInput
-);
-
-export const TextBox: React.FC<TextBoxVariantProps> = ({
+export const TextBox: React.FC<TextboxProps> = ({
     title,
     placeholder,
     helperText = ' ',
@@ -58,8 +44,7 @@ export const TextBox: React.FC<TextBoxVariantProps> = ({
             <Text color="black" variant="body-1">
                 {title}
             </Text>
-            <TextInputBase
-                variant={error ? 'error' : undefined}
+            <BaseTextInput
                 placeholder={placeholder}
                 autoFocus={autoFocus}
                 readOnly={readOnly}
@@ -68,6 +53,8 @@ export const TextBox: React.FC<TextBoxVariantProps> = ({
                 value={value}
                 maxLength={maxLength}
                 secureTextEntry={secureTextEntry}
+                {...styles.textInput}
+                borderColor={error ? 'darkRed' : 'gray'}
             />
             <Box gap="xxs" flexDirection="row" alignItems="center">
                 {error && <ErrorIcon />}
@@ -78,3 +65,16 @@ export const TextBox: React.FC<TextBoxVariantProps> = ({
         </Box>
     );
 };
+
+const styles = createStyles({
+    textInput: {
+        borderWidth: 1,
+        borderRadius: 'base',
+        backgroundColor: 'white',
+        padding: 'm',
+        marginBottom: 'xs',
+        marginTop: 'xs',
+        minWidth: '100%',
+        ...TextVariants['body-1']
+    }
+});
diff --git a/frontend/mobile/app/(design-system)/shared/colors.ts b/frontend/mobile/app/(design-system)/shared/colors.ts
index e7e5c8cc..a3d041db 100644
--- a/frontend/mobile/app/(design-system)/shared/colors.ts
+++ b/frontend/mobile/app/(design-system)/shared/colors.ts
@@ -11,7 +11,7 @@ export const Colors = {
     yellow: '#FFB626',
     white: '#FFFFFF',
     black: '#000000',
-    disabled: '#BDBDBD'
+    gray: '#C3C9D0'
 };
 
 export type SACColors = keyof typeof Colors;
@@ -69,5 +69,5 @@ export const textColorVariants = {
     yellow: 'white',
     white: 'black',
     black: 'white',
-    disabled: 'white'
+    gray: 'white'
 } as const;
diff --git a/frontend/mobile/app/(design-system)/theme.ts b/frontend/mobile/app/(design-system)/theme.ts
index 2ecaaec3..33d54b5e 100644
--- a/frontend/mobile/app/(design-system)/theme.ts
+++ b/frontend/mobile/app/(design-system)/theme.ts
@@ -4,14 +4,18 @@ import { TextVariants } from './components/Text/TextVariants';
 import { Border } from './shared/border';
 import { Colors } from './shared/colors';
 import { Spacing } from './shared/spacing';
-import { TextBoxVariants } from './Textbox/TextboxVariants';
 
 export const theme = createTheme({
     colors: Colors,
     spacing: Spacing,
     borderRadii: Border,
-    textVariants: TextVariants,
-    textBoxVariants: TextBoxVariants
+    textVariants: TextVariants
 });
 
+export const createStyles = <Keys extends string>(
+    styles: Record<Keys, AllProps<Theme>>
+): Record<Keys, AllProps<Theme>> => {
+    return styles;
+};
+
 export type Theme = typeof theme;