From 56180be97ed4a838257b5d287dcbba04fe28a004 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 19 Aug 2022 17:52:32 +0200
Subject: [PATCH] change(ui) - session list icon when empty

---
 .../shared/UserSessionsModal/UserSessionsModal.tsx       | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
index f0d4dd077..5a2b6f618 100644
--- a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
+++ b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
@@ -9,6 +9,7 @@ import SelectDateRange from 'Shared/SelectDateRange';
 import Period from 'Types/app/period';
 import { useObserver, observer } from 'mobx-react-lite';
 import { useModal } from 'App/components/Modal';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 const PER_PAGE = 10;
 interface Props {
@@ -61,7 +62,13 @@ function UserSessionsModal(props: Props) {
                 </div>
             </div>
 
-            <NoContent show={data.sessions.length === 0} title={<div>No recordings found.</div>}>
+            <NoContent show={data.sessions.length === 0} title={
+                <div>
+                    <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
+                    <div className="mt-2" />
+                    <div className="text-center text-gray-600">No recordings found.</div>
+                </div>
+            }>
                 <div className="border rounded m-5">
                     <Loader loading={loading}>
                         {data.sessions.map((session: any) => (