feat(app-general): add input error border ui

eficode · Feb 11, 2021 · 78f0bfa · 78f0bfa
1 parent 2b185f5
commit 78f0bfa
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 8 deletions.
diff --git a/packages/game-app/src/_shared/components/Input/Input.styled.tsx b/packages/game-app/src/_shared/components/Input/Input.styled.tsx
@@ -2,14 +2,14 @@ import styled, { css } from 'styled-components';
 import { color, ColorProps, variant } from 'styled-system';
 import Icon from '../Icon';
 
-export type InputVariants = 'default' | 'clear' | 'clearRound';
+export type InputVariants = 'default' | 'defaultError' | 'clear' | 'clearRound';
 
 export const StyledInput = styled.input<{ variant: InputVariants; withIcon?: boolean } & ColorProps>`
   width: 100%;
   height: 40px;
   padding: 5px 10px;
   box-sizing: border-box;
-  border-radius: 4px;
+  border-radius: 8px;
   display: flex;
 
   &:focus {
@@ -31,6 +31,7 @@ export const StyledInput = styled.input<{ variant: InputVariants; withIcon?: boo
     variant({
       variants: {
         default: theme.input.variants.default,
+        defaultError: theme.input.variants.defaultError,
         clear: theme.input.variants.clear,
         clearRound: {
           ...theme.input.variants.clear,

diff --git a/packages/game-app/src/_shared/components/PasswordInput/PasswordInput.tsx b/packages/game-app/src/_shared/components/PasswordInput/PasswordInput.tsx
@@ -49,7 +49,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, Props>(
         </LabelContainer>
         <Input
           ref={ref}
-          variant="default"
+          variant={!!errorMessage ? 'defaultError' : 'default'}
           iconRight={
             <IconButton variant="clearSmall" onClick={toggleType}>
               <StyledIcon variant="small">{type === 'password' ? <EyeIcon /> : <HideIcon />}</StyledIcon>

diff --git a/packages/game-app/src/_shared/components/SelectInput/SelectInput.styled.tsx b/packages/game-app/src/_shared/components/SelectInput/SelectInput.styled.tsx
@@ -3,13 +3,13 @@ import Box from '../Box';
 import React from 'react';
 import dropdownArrow from '../../../assets/icons/dropdown-arrow.svg';
 
-export const Select = styled.select`
+export const Select = styled.select<{ error?: boolean }>`
   width: 100%;
   height: 40px;
   padding: 5px 10px;
   box-sizing: border-box;
-  border-radius: 4px;
-  border: 1px solid #d7d2cb;
+  border-radius: 8px;
+  border: 1px solid ${props => (props.error ? 'red' : '#d7d2cb')};
 
   &:focus {
     outline: none;

diff --git a/packages/game-app/src/_shared/components/SelectInput/SelectInput.tsx b/packages/game-app/src/_shared/components/SelectInput/SelectInput.tsx
@@ -39,7 +39,14 @@ const SelectInput: React.FC<Props> = ({
         {label}
       </Typography>
       <SelectLoadingWrapper>
-        <Select disabled={disabled || options.length === 0} name={name} id={name} value={value} onChange={onChange}>
+        <Select
+          disabled={disabled || options.length === 0}
+          name={name}
+          id={name}
+          value={value}
+          onChange={onChange}
+          error={!!errorMessage}
+        >
           {emptyOption && emptyOptionLabel ? (
             <option key="" value="">
               {emptyOptionLabel}

diff --git a/packages/game-app/src/_shared/components/TextInput/TextInput.tsx b/packages/game-app/src/_shared/components/TextInput/TextInput.tsx
@@ -32,7 +32,7 @@ const TextInput = React.forwardRef<HTMLInputElement, Props>(
         ) : null}
         <Input
           ref={ref}
-          variant="default"
+          variant={!!errorMessage ? 'defaultError' : 'default'}
           disabled={disabled}
           placeholder={placeholder}
           type={type}

diff --git a/packages/game-app/src/customeTheme.d.ts b/packages/game-app/src/customeTheme.d.ts
@@ -7,6 +7,7 @@ declare module 'styled-components' {
     input: {
       variants: {
         default: object;
+        defaultError: object;
         clear: object;
       };
     };

diff --git a/packages/game-app/src/theme.ts b/packages/game-app/src/theme.ts
@@ -6,6 +6,9 @@ const theme: DefaultTheme = {
       default: {
         border: '1px solid #D7D2CB',
       },
+      defaultError: {
+        border: '1px solid red',
+      },
       clear: {
         border: 'none',
       },