Skip to content

Commit

Permalink
Tweak textbox
Browse files Browse the repository at this point in the history
  • Loading branch information
Alder Whiteford authored and Alder Whiteford committed May 29, 2024
1 parent 5bc5644 commit 871ff2a
Show file tree
Hide file tree
Showing 7 changed files with 40 additions and 78 deletions.
15 changes: 0 additions & 15 deletions frontend/mobile/app/(design-system)/Colors.ts

This file was deleted.

22 changes: 0 additions & 22 deletions frontend/mobile/app/(design-system)/Textbox/TextboxVariants.ts

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 = ' ',
Expand All @@ -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}
Expand All @@ -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 />}
Expand All @@ -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']
}
});
4 changes: 2 additions & 2 deletions frontend/mobile/app/(design-system)/shared/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const Colors = {
yellow: '#FFB626',
white: '#FFFFFF',
black: '#000000',
disabled: '#BDBDBD'
gray: '#C3C9D0'
};

export type SACColors = keyof typeof Colors;
Expand Down Expand Up @@ -69,5 +69,5 @@ export const textColorVariants = {
yellow: 'white',
white: 'black',
black: 'white',
disabled: 'white'
gray: 'white'
} as const;
10 changes: 7 additions & 3 deletions frontend/mobile/app/(design-system)/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

0 comments on commit 871ff2a

Please sign in to comment.