client: New icon added

Magpie-Monitor · Oct 27, 2024 · c8bce5b · c8bce5b
1 parent 1d3efac
commit c8bce5b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/client/src/assets/fire-icon.svg b/client/src/assets/fire-icon.svg
diff --git a/client/src/components/SVGIcon/SVGIcon.scss b/client/src/components/SVGIcon/SVGIcon.scss
@@ -91,3 +91,16 @@
   @extend .svg-icon;
   mask: url('/src/assets/closed-eye-icon.svg') no-repeat center;
 }
+
+.fire-icon {
+  @extend .svg-icon;
+  mask: url('/src/assets/fire-icon.svg') no-repeat center;
+  width: 25px;
+  height: 25px;
+  margin-right: 3px;
+  .svg-icon {
+    background-color: $red;
+    width: 25px;
+    height: 25px;
+  }
+}
diff --git a/client/src/pages/Home/components/ImportantFindings/ImportantFindings.scss b/client/src/pages/Home/components/ImportantFindings/ImportantFindings.scss
@@ -9,9 +9,6 @@
     margin: 12px;
   }
 
-  &__table-label {
-  }
-
   &__columns {
     display: grid;
     grid-template-columns: 1fr 1fr 2fr 1fr;
@@ -43,6 +40,8 @@
 
     &__category {
       color: $red;
+      display: flex;
+      align-items: center;
     }
   }
 }
diff --git a/client/src/pages/Home/components/ImportantFindings/ImportantFindings.tsx b/client/src/pages/Home/components/ImportantFindings/ImportantFindings.tsx
@@ -1,3 +1,4 @@
+import SVGIcon from 'components/SVGIcon/SVGIcon.tsx';
 import './ImportantFindings.scss';
 
 const ImportantFindings = () => {
@@ -16,7 +17,7 @@ const ImportantFindings = () => {
                     Postgres:12.19-bullseye
                 </div>
                 <div className="important-findings__finding__category">
-                    Database outage
+                    <SVGIcon iconName={'fire-icon'} /> Database outage
                 </div>
                 <div className="important-findings__finding__summary">
                     Multiple failed authentication attempts after an update
@@ -30,7 +31,7 @@ const ImportantFindings = () => {
                     OpenJDK:24-ea-8-jdk
                 </div>
                 <div className="important-findings__finding__category">
-                    Internal service issue
+                    <SVGIcon iconName={'fire-icon'}/> Internal service issue
                 </div>
                 <div className="important-findings__finding__summary">
                     Abnormal amount of failed requests due to CORS
@@ -44,7 +45,7 @@ const ImportantFindings = () => {
                     Kubernetes CNI
                 </div>
                 <div className="important-findings__finding__category">
-                    Internal network error
+                    <SVGIcon iconName={'fire-icon'}/> Internal network error
                 </div>
                 <div className="important-findings__finding__summary">
                     Couldn’t start internal DNS server due to configuration error