chore(settings): animate warning icon

AXeL-dev · Oct 1, 2022 · 13589d4 · 13589d4
1 parent 3c68426
commit 13589d4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/ui/components/shared/Sidebar/WarningIcon.tsx b/src/ui/components/shared/Sidebar/WarningIcon.tsx
@@ -0,0 +1,19 @@
+import { styled, keyframes } from '@mui/material/styles';
+import WarningIcon from '@mui/icons-material/Warning';
+
+const blink = keyframes`
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+  25%, 75% {
+    opacity: 0;
+  }
+`;
+
+const Icon = styled(WarningIcon)`
+  animation: ${blink} 2s infinite both;
+`;
+
+Icon.defaultProps = { color: 'warning' };
+
+export default Icon;
diff --git a/src/ui/components/shared/Sidebar/index.tsx b/src/ui/components/shared/Sidebar/index.tsx
@@ -5,7 +5,7 @@ import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
 import SettingsIcon from '@mui/icons-material/Settings';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ContactSupportIcon from '@mui/icons-material/ContactSupport';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import WarningIcon from './WarningIcon';
 import ListItemLink from './ListItemLink';
 import Header from './Header';
 import { useAppSelector } from 'store';
@@ -74,7 +74,7 @@ export function Sidebar(props: SidebarProps) {
                 selected ? (
                   <SettingsActions />
                 ) : app.loaded && !settings.apiKey ? (
-                  <ErrorOutlineIcon sx={{ ml: 3 }} color="warning" />
+                  <WarningIcon />
                 ) : null
               }
             />