From d19adbed4455c75fc41f5d1eaca0e72d5d340210 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 23 Aug 2022 16:32:03 +0200
Subject: [PATCH] change(ui) - alert list no content icon

---
 .../components/Dashboard/components/Alerts/AlertsList.tsx    | 4 ++--
 frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx   | 5 ++++-
 frontend/app/svg/ca-no-alerts.svg                            | 4 ++++
 3 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 frontend/app/svg/ca-no-alerts.svg

diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
index 18019db9d..68443d3d0 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
@@ -5,7 +5,7 @@ import { sliceListPerPage } from 'App/utils';
 import { fetchList } from 'Duck/alerts';
 import { connect } from 'react-redux';
 import { fetchList as fetchWebhooks } from 'Duck/webhook';
-
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import AlertListItem from './AlertListItem'
 
 const pageSize = 10;
@@ -35,7 +35,7 @@ function AlertsList({ fetchList, list: alertsList, alertsSearch, siteId, init, f
       show={lenth === 0}
       title={
         <div className="flex flex-col items-center justify-center">
-          <Icon name="bell" size={80} color="figmaColors-accent-secondary" />
+          <AnimatedSVG name={ICONS.NO_ANNOUNCEMENTS} size={80} />
           <div className="text-center text-gray-600 my-4">
             {alertsSearch !== '' ? 'No matching results' : "You haven't created any alerts yet"}
           </div>
diff --git a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
index 6da744291..65545ca99 100644
--- a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
+++ b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
@@ -15,6 +15,7 @@ import NoMetadata from '../../../svg/ca-no-metadata.svg';
 import NoIssues from '../../../svg/ca-no-issues.svg';
 import NoAuditTrail from '../../../svg/ca-no-audit-trail.svg';
 import NoAnnouncements from '../../../svg/ca-no-announcements.svg';
+import NoAlerts from '../../../svg/ca-no-alerts.svg';
 
 export enum ICONS {
     DASHBOARD_ICON = 'dashboard-icn',
@@ -30,10 +31,10 @@ export enum ICONS {
     NO_SESSIONS_IN_VAULT = 'ca-no-sessions-in-vault',
     NO_WEBHOOKS = 'ca-no-webhooks',
     NO_METADATA = 'ca-no-metadata',
-    NO_SESSIONS_IN_VAULT = 'ca-no-sessions-in-vault',
     NO_ISSUES = 'ca-no-issues',
     NO_AUDIT_TRAIL = 'ca-no-audit-trail',
     NO_ANNOUNCEMENTS = 'ca-no-announcements',
+    NO_ALERTS = 'ca-no-alerts',
 }
 
 interface Props {
@@ -76,6 +77,8 @@ function AnimatedSVG(props: Props) {
                 return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoAuditTrail} />;
             case ICONS.NO_ANNOUNCEMENTS:
                 return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoAnnouncements} />;
+            case ICONS.NO_ALERTS:
+                return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoAlerts} />;
             default:
                 return null;
         }
diff --git a/frontend/app/svg/ca-no-alerts.svg b/frontend/app/svg/ca-no-alerts.svg
new file mode 100644
index 000000000..998ba4e05
--- /dev/null
+++ b/frontend/app/svg/ca-no-alerts.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="13.1579" fill="#3EAAAF" fill-opacity="0.08"/>
+<path d="M39.7195 69.75H75.375C74.2911 69.0286 73.3559 67.7454 72.5475 66.125C69.285 59.6 68.125 47.565 68.125 44.375C68.125 43.418 68.0525 42.4791 67.9075 41.562L64.5072 44.9623C64.5797 47.5288 65.0764 52.7705 66.1639 57.9398C66.7475 60.7201 67.5305 63.6165 68.5672 66.125H43.3445L39.7195 69.75ZM59.9506 33.8263C57.9857 31.9692 55.5391 30.7008 52.8891 30.165L50 29.5741L47.1109 30.1578C43.8331 30.8256 40.8869 32.6057 38.771 35.1966C36.6551 37.7874 35.4995 41.0299 35.5 44.375C35.5 46.6515 35.0143 52.3391 33.8361 57.9398C33.6549 58.8025 33.4555 59.6761 33.2344 60.5425L27.2423 66.5346C27.3148 66.4005 27.3873 66.2664 27.4561 66.125C30.7114 59.6 31.875 47.565 31.875 44.375C31.875 35.6025 38.11 28.28 46.3931 26.6089C46.3425 26.1049 46.3981 25.5958 46.5564 25.1146C46.7146 24.6333 46.9719 24.1906 47.3118 23.815C47.6516 23.4393 48.0664 23.139 48.5295 22.9335C48.9925 22.728 49.4934 22.6219 50 22.6219C50.5066 22.6219 51.0075 22.728 51.4705 22.9335C51.9336 23.139 52.3484 23.4393 52.6882 23.815C53.0281 24.1906 53.2854 24.6333 53.4436 25.1146C53.6019 25.5958 53.6575 26.1049 53.6069 26.6089C57.0216 27.2976 60.0884 28.947 62.5135 31.2634L59.9506 33.8263V33.8263ZM57.25 73.375C57.25 75.2978 56.4862 77.1419 55.1265 78.5015C53.7669 79.8612 51.9228 80.625 50 80.625C48.0772 80.625 46.2331 79.8612 44.8735 78.5015C43.5138 77.1419 42.75 75.2978 42.75 73.375H57.25ZM23.2656 75.6406C22.9051 76.0012 22.7026 76.4902 22.7026 77C22.7026 77.5099 22.9051 77.9989 23.2656 78.3594C23.6262 78.7199 24.1151 78.9225 24.625 78.9225C25.1349 78.9225 25.6238 78.7199 25.9844 78.3594L79.4531 24.8906C79.6316 24.7121 79.7732 24.5002 79.8699 24.267C79.9665 24.0337 80.0162 23.7837 80.0162 23.5313C80.0162 23.2788 79.9665 23.0288 79.8699 22.7956C79.7732 22.5623 79.6316 22.3504 79.4531 22.1719C79.2746 21.9934 79.0627 21.8518 78.8294 21.7552C78.5962 21.6586 78.3462 21.6088 78.0937 21.6088C77.8413 21.6088 77.5913 21.6586 77.3581 21.7552C77.1248 21.8518 76.9129 21.9934 76.7344 22.1719L23.2656 75.6406Z" fill="#3EAAAF" fill-opacity="0.5"/>
+</svg>