Tweak textbox

GenerateNU · May 29, 2024 · 871ff2a · 871ff2a
1 parent 5bc5644
commit 871ff2a
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 78 deletions.
diff --git a/frontend/mobile/app/(design-system)/Colors.ts b/frontend/mobile/app/(design-system)/Colors.ts
diff --git a/frontend/mobile/app/(design-system)/Textbox/TextboxVariants.ts b/frontend/mobile/app/(design-system)/Textbox/TextboxVariants.ts
diff --git 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
@@ -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/...e/app/(design-system)/Textbox/Textbox.tsx → ...gn-system)/components/Textbox/Textbox.tsx b/...e/app/(design-system)/Textbox/Textbox.tsx → ...gn-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
@@ -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
@@ -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;