Update styling

oasisprotocol · Jul 5, 2023 · fe09cdd · fe09cdd
1 parent 3adcf30
commit fe09cdd
Showing 1 changed file with 21 additions and 1 deletion.
diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx
@@ -10,12 +10,14 @@ import { COLORS } from '../../../styles/theme/colors'
 import { RouteUtils } from '../../utils/route-utils'
 import { useScreenSize } from '../../hooks/useScreensize'
 import HighlightOffIcon from '@mui/icons-material/HighlightOff'
+import ErrorIcon from '@mui/icons-material/Error'
 import IconButton from '@mui/material/IconButton'
 import { SearchSuggestionsButtons } from './SearchSuggestionsButtons'
 import { formHelperTextClasses } from '@mui/material/FormHelperText'
 import { outlinedInputClasses } from '@mui/material/OutlinedInput'
 import { SearchScope } from '../../../types/searchScope'
 import { textSearchMininumLength } from './search-utils'
+import Typography from '@mui/material/Typography'
 
 export type SearchVariant = 'button' | 'icon' | 'expandable'
 
@@ -141,6 +143,8 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
   const searchButtonContent =
     variant !== 'button' ? <SearchIcon sx={{ color: COLORS.grayMediumLight }} /> : t('search.searchBtnText')
 
+  const hasWarning = isTooShort
+
   return (
     <SearchForm
       searchVariant={variant}
@@ -149,6 +153,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
       aria-label={searchPlaceholderTranslated}
     >
       <TextField
+        sx={hasWarning ? { background: COLORS.linen } : {}}
         value={value}
         onChange={e => onChange(e.target.value)}
         onFocus={() => onFocusChange(true)}
@@ -187,7 +192,22 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
           value &&
           value !== valueInSearchParams &&
           (isTooShort ? (
-            t('search.error.tooShort')
+            <span>
+              <Typography
+                component="span"
+                sx={{
+                  display: 'inline-flex',
+                  color: COLORS.errorIndicatorBackground,
+                  fontSize: 12,
+                  alignItems: 'center',
+                  verticalAlign: 'middle',
+                }}
+              >
+                <ErrorIcon />
+                &nbsp;
+                {t('search.error.tooShort')}
+              </Typography>
+            </span>
           ) : (
             <SearchSuggestionsButtons
               scope={scope}