Add animation for error and warning messages

oasisprotocol · Jul 7, 2023 · 0d2753f · 0d2753f
1 parent c0255ea
commit 0d2753f
Showing 1 changed file with 37 additions and 42 deletions.
diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx
@@ -20,6 +20,7 @@ import { SearchScope } from '../../../types/searchScope'
 import { textSearchMininumLength } from './search-utils'
 import Typography from '@mui/material/Typography'
 import { isValidBlockHeight } from '../../utils/helpers'
+import Collapse from '@mui/material/Collapse'
 // import { isValidMnemonic } from '../../utils/helpers'
 
 export type SearchVariant = 'button' | 'icon' | 'expandable'
@@ -233,48 +234,42 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
           value &&
           value !== valueInSearchParams && (
             <>
-              {itsTimeToAct && hasError && (
-                <>
-                  <Typography
-                    component="span"
-                    sx={{
-                      display: 'inline-flex',
-                      color: COLORS.errorIndicatorBackground,
-                      fontSize: 12,
-                      lineHeight: 2,
-                      alignItems: 'center',
-                      verticalAlign: 'middle',
-                      mt: 3,
-                      mb: 4,
-                    }}
-                  >
-                    <ErrorIcon sx={{ mr: 3 }} />
-                    {errorMessage}
-                  </Typography>
-                  <br />
-                </>
-              )}
-              {itsTimeToAct && hasWarning && (
-                <>
-                  <Typography
-                    component="span"
-                    sx={{
-                      display: 'inline-flex',
-                      color: COLORS.warningColor,
-                      fontSize: 12,
-                      lineHeight: 2,
-                      alignItems: 'center',
-                      verticalAlign: 'middle',
-                      mt: 3,
-                      mb: 4,
-                    }}
-                  >
-                    <WarningIcon sx={{ mr: 3 }} />
-                    {warningMessage}
-                  </Typography>
-                  <br />
-                </>
-              )}
+              <Collapse in={itsTimeToAct && hasError}>
+                <Typography
+                  component="span"
+                  sx={{
+                    display: 'inline-flex',
+                    color: COLORS.errorIndicatorBackground,
+                    fontSize: 12,
+                    lineHeight: 2,
+                    alignItems: 'center',
+                    verticalAlign: 'middle',
+                    mt: 3,
+                    mb: 4,
+                  }}
+                >
+                  <ErrorIcon sx={{ mr: 3 }} />
+                  {errorMessage}
+                </Typography>
+              </Collapse>
+              <Collapse in={itsTimeToAct && hasWarning}>
+                <Typography
+                  component="span"
+                  sx={{
+                    display: 'inline-flex',
+                    color: COLORS.warningColor,
+                    fontSize: 12,
+                    lineHeight: 2,
+                    alignItems: 'center',
+                    verticalAlign: 'middle',
+                    mt: 3,
+                    mb: 4,
+                  }}
+                >
+                  <WarningIcon sx={{ mr: 3 }} />
+                  {warningMessage}
+                </Typography>
+              </Collapse>
               <SearchSuggestionsButtons
                 scope={scope}
                 onClickSuggestion={suggestion => {