feat: update warning icons

subsquid · Jul 2, 2024 · 7118c95 · 7118c95
1 parent 0f92433
commit 7118c95
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 35 deletions.
diff --git a/src/icons/WarningIcon.tsx b/src/icons/WarningIcon.tsx
@@ -1,42 +1,37 @@
-import { styled } from '@mui/material';
-import classNames from 'classnames';
-
-const Svg = styled('svg')({
-  '&.error': {
-    path: {
-      fill: '#FF8F88 !important',
-    },
-  },
-  '&.warning': {
-    path: {
-      fill: '#FFC83D !important',
-    },
-  },
-});
-
 export function WarningIcon({
   className,
   color = 'warning',
+  size = 24,
 }: {
   className?: string;
   size?: number;
   color?: 'error' | 'warning';
 }) {
-  return (
-    <Svg
-      className={classNames([className, color])}
-      width="18"
-      height="17"
-      viewBox="0 0 18 17"
+  return color === 'warning' ? (
+    <svg
+      width={size}
+      height={size}
+      viewBox="-2 -2 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M17.6344 12.4222L11.5583 1.50726C10.4499 -0.496087 7.54018 -0.490847 6.43474 1.50726L0.365954 12.4294C-0.707863 14.3648 0.711514 16.721 2.93153 16.721H15.0687C17.2821 16.721 18.7099 14.3764 17.6344 12.4222Z"
-        fill="#FFC36D"
+        d="M1.72497 18C1.54164 18 1.37497 17.9542 1.22497 17.8625C1.07497 17.7708 0.958306 17.65 0.874973 17.5C0.791639 17.35 0.745806 17.1875 0.737473 17.0125C0.729139 16.8375 0.774973 16.6667 0.874973 16.5L10.125 0.5C10.225 0.333333 10.3541 0.208333 10.5125 0.125C10.6708 0.0416667 10.8333 0 11 0C11.1666 0 11.3291 0.0416667 11.4875 0.125C11.6458 0.208333 11.775 0.333333 11.875 0.5L21.125 16.5C21.225 16.6667 21.2708 16.8375 21.2625 17.0125C21.2541 17.1875 21.2083 17.35 21.125 17.5C21.0416 17.65 20.925 17.7708 20.775 17.8625C20.625 17.9542 20.4583 18 20.275 18H1.72497ZM11 15C11.2833 15 11.5208 14.9042 11.7125 14.7125C11.9041 14.5208 12 14.2833 12 14C12 13.7167 11.9041 13.4792 11.7125 13.2875C11.5208 13.0958 11.2833 13 11 13C10.7166 13 10.4791 13.0958 10.2875 13.2875C10.0958 13.4792 9.99997 13.7167 9.99997 14C9.99997 14.2833 10.0958 14.5208 10.2875 14.7125C10.4791 14.9042 10.7166 15 11 15ZM11 12C11.2833 12 11.5208 11.9042 11.7125 11.7125C11.9041 11.5208 12 11.2833 12 11V8C12 7.71667 11.9041 7.47917 11.7125 7.2875C11.5208 7.09583 11.2833 7 11 7C10.7166 7 10.4791 7.09583 10.2875 7.2875C10.0958 7.47917 9.99997 7.71667 9.99997 8V11C9.99997 11.2833 10.0958 11.5208 10.2875 11.7125C10.4791 11.9042 10.7166 12 11 12Z"
+        fill="#FFA800"
       />
-      <path d="M9 5.0022L9 9.0022" stroke="#1D1D1F" strokeWidth="2" strokeLinecap="round" />
-      <circle cx="9" cy="12.0022" r="1" fill="#1D1D1F" />
-    </Svg>
+    </svg>
+  ) : (
+    <svg
+      width={size}
+      height={size}
+      viewBox="-3 -3 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.25 18L0 12.75V5.25L5.25 0H12.75L18 5.25V12.75L12.75 18H5.25ZM6.15 13.25L9 10.4L11.85 13.25L13.25 11.85L10.4 9L13.25 6.15L11.85 4.75L9 7.6L6.15 4.75L4.75 6.15L7.6 9L4.75 11.85L6.15 13.25Z"
+        fill="#FF2B00"
+      />
+    </svg>
   );
 }
diff --git a/src/pages/WorkersPage/WorkerVersion.tsx b/src/pages/WorkersPage/WorkerVersion.tsx
@@ -7,6 +7,7 @@ import { WarningIcon } from '@icons/WarningIcon';
 export const WorkerVersionName = styled(Box, {
   name: 'WorkerVersionName',
 })(() => ({
+  display: 'flex',
   whiteSpace: 'nowrap',
 }));
 
@@ -16,15 +17,17 @@ export const WorkerVersion = ({ worker }: { worker: Pick<Worker, 'version'> }) =
   return (
     <>
       {worker.version ? (
-        <Stack spacing={1} direction="row" alignItems="center">
+        <Stack spacing={1} direction="row" alignItems="flex-start">
           <WorkerVersionName>{worker.version}</WorkerVersionName>
-          {!satisfies(worker.version, recommendedWorkerVersion) ? (
-            !satisfies(worker.version, minimalWorkerVersion) ? (
-              <WarningIcon color="error" />
-            ) : (
-              <WarningIcon color="warning" />
-            )
-          ) : null}
+          <Box display="flex">
+            {!satisfies(worker.version, recommendedWorkerVersion) ? (
+              !satisfies(worker.version, minimalWorkerVersion) ? (
+                <WarningIcon color="error" />
+              ) : (
+                <WarningIcon color="warning" />
+              )
+            ) : null}
+          </Box>
         </Stack>
       ) : (
         <Box>-</Box>