change(ui) - no content illustrations

frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx

@@ -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">
-          <AnimatedSVG name={ICONS.NO_ALERTS} size={80} />
+          <AnimatedSVG name={ICONS.NO_ALERTS} size={180} />
           <div className="text-center text-gray-600 my-4">
             {alertsSearch !== '' ? 'No matching results' : "You haven't created any alerts yet"}
           </div>

frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx

@@ -5,6 +5,7 @@ import { useStore } from 'App/mstore';
 import { filterList } from 'App/utils';
 import { sliceListPerPage } from 'App/utils';
 import DashboardListItem from './DashboardListItem';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 function DashboardList() {
   const { dashboardStore } = useStore();
@@ -36,9 +37,10 @@ function DashboardList() {
               </div>
             )}
           </div>
-          <div className="my-2 bg-active-blue rounded flex items-center justify-center px-80 py-20">
+          <AnimatedSVG name={ICONS.NO_DASHBOARDS} size={180} />
+          {/* <div className="my-2 bg-active-blue rounded flex items-center justify-center px-80 py-20">
             <Icon name="grid-1x2" size={40} color="figmaColors-accent-secondary" />
-          </div>
+          </div> */}
         </div>
       }
     >

frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx

@@ -7,6 +7,7 @@ import { sliceListPerPage } from 'App/utils';
 import Widget from 'App/mstore/types/widget';
 import GridView from './GridView';
 import ListView from './ListView';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 function MetricsList({
   siteId,
@@ -62,9 +63,9 @@ function MetricsList({
       show={lenth === 0}
       title={
         <div className="flex flex-col items-center justify-center">
-          <Icon name="no-metrics" size={80} color="figmaColors-accent-secondary" />
+          <AnimatedSVG name={ICONS.NO_CARDS} size={180} />
           <div className="text-center text-gray-600 my-4">
-            {metricsSearch !== '' ? 'No matching results' : "You haven't created any metrics yet"}
+            {metricsSearch !== '' ? 'No matching results' : "You haven't created any cards yet"}
           </div>
         </div>
       }

frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx

@@ -16,6 +16,10 @@ 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';
+import NoNotes from '../../../svg/ca-no-notes.svg';
+import NoCards from '../../../svg/ca-no-cards.svg';
+import NoSearchResults from '../../../svg/ca-no-search-results.svg';
+import NoDashboards from '../../../svg/ca-no-dashboards.svg';
 
 export enum ICONS {
     DASHBOARD_ICON = 'dashboard-icn',
@@ -35,6 +39,10 @@ export enum ICONS {
     NO_AUDIT_TRAIL = 'ca-no-audit-trail',
     NO_ANNOUNCEMENTS = 'ca-no-announcements',
     NO_ALERTS = 'ca-no-alerts',
+    NO_NOTES = 'ca-no-notes',
+    NO_CARDS = 'ca-no-cards',
+    NO_SEARCH_RESULTS = 'ca-no-search-results',
+    NO_DASHBOARDS = 'ca-no-dashboards',
 }
 
 interface Props {
@@ -79,6 +87,14 @@ function AnimatedSVG(props: Props) {
                 return <img style={{ width: size + 'px' }} src={NoAnnouncements} />;
             case ICONS.NO_ALERTS:
                 return <img style={{ width: size + 'px' }} src={NoAlerts} />;
+            case ICONS.NO_NOTES:
+                return <img style={{ width: size + 'px' }} src={NoNotes} />;
+            case ICONS.NO_CARDS:
+                return <img style={{ width: size + 'px' }} src={NoCards} />;
+            case ICONS.NO_SEARCH_RESULTS:
+                return <img style={{ width: size + 'px' }} src={NoSearchResults} />;
+            case ICONS.NO_DASHBOARDS:
+                return <img style={{ width: size + 'px' }} src={NoDashboards} />;
             default:
                 return null;
         }

frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import cn from 'classnames';
 import stl from './FilterModal.module.css';
 import { filtersMap } from 'Types/filter/newFilter';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 export const getMatchingEntries = (searchQuery: string, filters: Record<string, any>) => {
   const matchingCategories: string[] = [];
@@ -85,8 +86,8 @@ function FilterModal(props: Props) {
         <Loader size="small" loading={fetchingFilterSearchList}>
           <div className="-mx-6 px-6">
             {isResultEmpty && !fetchingFilterSearchList ? (
-              <div className="flex items-center">
-                <Icon className="color-gray-medium" name="binoculars" size="24" />
+              <div className="flex items-center flex-col">
+                <AnimatedSVG name={ICONS.NO_SEARCH_RESULTS} size={180} />
                 <div className="color-gray-medium font-medium px-3"> No Suggestions Found </div>
               </div>
             ) : Object.keys(filterSearchList).map((key, index) => {

frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx

@@ -118,7 +118,7 @@ function LiveSessionList(props: Props) {
           <NoContent
             title={
               <div className="flex items-center justify-center flex-col">
-                <AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={170} />
+                <AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={180} />
                 <div className="mt-2" />
                 <div className="text-center text-gray-600">No live sessions found.</div>
               </div>

frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx

@@ -4,6 +4,7 @@ import { sliceListPerPage } from 'App/utils';
 import NoteItem from './NoteItem';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 function NotesList({ members }: { members: Array<Record<string, any>> }) {
   const { notesStore } = useStore();
@@ -20,7 +21,8 @@ function NotesList({ members }: { members: Array<Record<string, any>> }) {
         show={list.length === 0}
         title={
           <div className="flex flex-col items-center justify-center">
-            <Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" />
+            {/* <Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" /> */}
+            <AnimatedSVG name={ICONS.NO_NOTES} size={180} />
             <div className="text-center text-gray-600 my-4">No notes yet</div>
           </div>
         }

frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx

@@ -137,13 +137,13 @@ function SessionList(props: Props) {
       <NoContent
         title={
           <div className="flex items-center justify-center flex-col">
-            <AnimatedSVG name={NO_CONTENT.icon} size={170} />
+            <AnimatedSVG name={NO_CONTENT.icon} size={180} />
             <div className="mt-2" />
             <div className="text-center text-gray-600 relative">
               {NO_CONTENT.message}
               {noContentType === NoContentType.ToDate ? (
-                <div style={{ position: 'absolute', right: -170, top: -110 }}>
-                  <Icon name="list-arrow" size={130} width={150} />
+                <div style={{ position: 'absolute', right: -200, top: -170 }}>
+                  <Icon name="pointer-sessions-search" size={250} width={240} />
                 </div>
               ) : null}
             </div>

frontend/app/svg/icons/pointer-sessions-search.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 157 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M156.877 1.64707C156.914 0.898282 156.144 0.376269 155.462 0.687692L151.61 2.44671C150.865 2.78695 150.823 3.82961 151.538 4.22925L155.2 6.27642C155.848 6.63833 156.65 6.19411 156.687 5.45327L156.877 1.64707ZM0.371826 100.542C7.55254 99.968 15.7724 100.132 24.1312 100.173C32.4654 100.214 40.9251 100.134 48.4931 99.0527C56.0574 97.9722 62.8178 95.8818 67.6883 91.8446C72.5816 87.7878 75.4799 81.8404 75.4799 73.2182H74.0852C74.0852 81.5822 71.2859 87.1788 66.7306 90.955C62.152 94.7504 55.7115 96.782 48.269 97.845C40.8302 98.9071 32.4775 98.9907 24.1391 98.9495C15.8249 98.9083 7.63855 99.9611 0.371826 100.542ZM68.0514 86.3092C70.9892 88.8626 74.6421 89.6433 78.719 88.9095C82.7546 88.183 87.2025 85.9768 91.8679 82.5856C101.206 75.798 111.628 64.106 121.647 49.2607C121.647 49.2607 121.608 48.8808 121.139 48.6374C111.156 63.4289 100.138 74.9847 90.9781 81.6434C86.394 84.9754 82.1543 87.8167 78.4382 88.4857C74.7635 89.1473 71.6011 88.4469 69.0333 86.215L68.0514 86.3092ZM121.647 49.2607C147.109 11.5346 146.27 15.5123 154.168 4.98484L153.696 4.31224C145.876 14.7349 146.614 10.8914 121.139 48.6374C121.608 48.8808 121.647 49.2607 121.647 49.2607ZM75.4799 73.2182C75.4799 72.7895 75.4325 72.4126 75.3242 72.0969C75.2168 71.7832 75.0327 71.4851 74.723 71.2815C74.0475 70.8378 73.2543 71.1004 72.7178 71.3974C71.583 72.0263 70.2547 73.5012 69.143 75.2197C68.0165 76.9617 67.0397 79.0652 66.6771 81.0438C66.3186 82.9988 66.5353 84.9913 68.0514 86.3092L69.0333 86.215C67.9989 85.316 67.7208 83.0559 68.0542 81.238C68.3834 79.4433 68.593 77.4789 69.6638 75.8237C70.7498 74.1449 72.6304 72.8931 73.4626 72.4322C73.9099 72.1842 73.9629 72.311 73.8876 72.2613C73.8783 72.2552 73.9327 72.2866 73.9885 72.4497C74.0442 72.6112 74.0852 72.8588 74.0852 73.2182H75.4799Z" fill="black"/>
+</svg>