From c568027952414422881dee70737afc996ffada18 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 3 Jul 2023 14:21:25 +0200
Subject: [PATCH] change(ui): updated no content titles

---
 .../app/components/Assist/RecordingsList/RecordingsList.tsx   | 4 ++--
 .../components/Assist/components/SessionList/SessionList.tsx  | 2 +-
 frontend/app/components/Client/Roles/Roles.tsx                | 2 +-
 frontend/app/components/Client/Sites/Sites.tsx                | 2 +-
 .../components/Client/Users/components/UserList/UserList.tsx  | 2 +-
 .../CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx        | 2 +-
 .../CustomMetricTableSessions/CustomMetricTableSessions.tsx   | 2 +-
 .../CustomMetricsWidgets/InsightsCard/InsightsCard.tsx        | 2 +-
 .../Dashboard/components/DashboardList/DashboardList.tsx      | 2 +-
 .../Dashboard/components/WidgetSessions/WidgetSessions.tsx    | 2 +-
 frontend/app/components/FFlags/FFlagsList.tsx                 | 2 +-
 frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx | 2 +-
 .../app/components/Session/Layout/ToolPanel/StackEvents.js    | 2 +-
 .../Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js   | 2 +-
 .../components/Session_/EventsBlock/Metadata/SessionList.js   | 2 +-
 frontend/app/components/Session_/Fetch/FetchDetails.js        | 4 ++--
 .../components/Session_/Fetch/components/Headers/Headers.tsx  | 2 +-
 .../components/SelectorsList/SelectorsList.tsx                | 2 +-
 .../components/Session_/StackEvents/StackEvents.DEPRECATED.js | 2 +-
 .../app/components/Session_/Storage/Storage.DEPRECATED.js     | 2 +-
 frontend/app/components/Session_/Storage/Storage.tsx          | 2 +-
 frontend/app/components/Session_/Storage/Storge.DEPRECATED.js | 2 +-
 .../shared/AlertTriggersModal/AlertTriggersModal.tsx          | 2 +-
 .../shared/FetchDetailsModal/components/Headers/Headers.tsx   | 2 +-
 .../app/components/shared/LiveSessionList/LiveSessionList.tsx | 2 +-
 .../shared/SessionsTabOverview/components/Notes/NoteList.tsx  | 2 +-
 .../components/SessionList/SessionList.tsx                    | 4 ++--
 .../components/shared/UserSessionsModal/UserSessionsModal.tsx | 2 +-
 28 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/frontend/app/components/Assist/RecordingsList/RecordingsList.tsx b/frontend/app/components/Assist/RecordingsList/RecordingsList.tsx
index d98d816fc..bb8c18d64 100644
--- a/frontend/app/components/Assist/RecordingsList/RecordingsList.tsx
+++ b/frontend/app/components/Assist/RecordingsList/RecordingsList.tsx
@@ -28,8 +28,8 @@ function RecordingsList() {
           <AnimatedSVG name={ICONS.NO_RECORDINGS} size={180} />
           <div className="text-center mt-4">
             {recordsSearch !== ''
-              ? 'No matching results.'
-              : 'No recordings available.'}
+              ? 'No matching results'
+              : 'No recordings available'}
           </div>
         </div>
       }
diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
index 4835cfafd..d87c01e7b 100644
--- a/frontend/app/components/Assist/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
@@ -40,7 +40,7 @@ function SessionList(props: Props) {
                         <div className="flex items-center justify-center flex-col">
                             <AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={170} />
                             <div className="mt-4" />
-                            <div className="text-center">No live sessions found.</div>
+                            <div className="text-center">No live sessions found</div>
                         </div>
                     }
                 >
diff --git a/frontend/app/components/Client/Roles/Roles.tsx b/frontend/app/components/Client/Roles/Roles.tsx
index 42b51df06..94199a9a9 100644
--- a/frontend/app/components/Client/Roles/Roles.tsx
+++ b/frontend/app/components/Client/Roles/Roles.tsx
@@ -75,7 +75,7 @@ function Roles(props: Props) {
                         </div>
                     </div>
 
-                    <NoContent title="No roles are available." size="small" show={false}>
+                    <NoContent title="No roles are available" size="small" show={false}>
                         <div className={''}>
                             <div className={cn('flex items-start py-3 border-b px-5 pr-20 font-medium')}>
                                 <div className="" style={{ width: '20%' }}>
diff --git a/frontend/app/components/Client/Sites/Sites.tsx b/frontend/app/components/Client/Sites/Sites.tsx
index 51a9a4d85..46226e07e 100644
--- a/frontend/app/components/Client/Sites/Sites.tsx
+++ b/frontend/app/components/Client/Sites/Sites.tsx
@@ -158,7 +158,7 @@ const Sites = ({
               <div className='flex flex-col items-center justify-center'>
                 <AnimatedSVG name={ICONS.NO_PROJECTS} size={170} />
                 <div className='text-center text-gray-600 my-4'>
-                  No matching results.
+                  No matching results
                 </div>
               </div>
             }
diff --git a/frontend/app/components/Client/Users/components/UserList/UserList.tsx b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
index 572cf3492..c62f41101 100644
--- a/frontend/app/components/Client/Users/components/UserList/UserList.tsx
+++ b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
@@ -46,7 +46,7 @@ function UserList(props: Props) {
                 title={
                     <div className="flex flex-col items-center justify-center">
                     <AnimatedSVG name={ICONS.NO_AUDIT_TRAIL} size={80} />
-                    <div className="text-center my-4">No matching results.</div>
+                    <div className="text-center my-4">No matching results</div>
                     </div>
                 }
                 size="small"
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
index c77dbcd95..f12510fac 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
@@ -47,7 +47,7 @@ function ClickMapCard({
                 title={
                     <div className="flex items-center relative">
                         <Icon name="info-circle" className="mr-2" size="18" />
-                        No data for selected period or URL.
+                        No data for selected period or URL
                         <div style={{ position: 'absolute', right: -240, top: -110 }}>
                             <Icon name="pointer-sessions-search" size={250} width={240} />
                         </div>
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
index 1e8ef2d69..05d6b538c 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
@@ -29,7 +29,7 @@ function CustomMetricTableSessions(props: Props) {
           <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
           <div className="mt-4" />
           <div className="text-center">
-            No relevant sessions found for the selected time period.
+            No relevant sessions found for the selected time period
           </div>
         </div>
       }
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
index a12449437..caa16e0c4 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
@@ -61,7 +61,7 @@ function InsightsCard({ data }: any) {
       title={
         <div className="flex items-center">
           <Icon name="info-circle" className="mr-2" size="18" />
-          No data for selected period.
+          No data for selected period
         </div>
       }
       show={data.issues && data.issues.length === 0}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index 950e30c4d..efd9a51d8 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -20,7 +20,7 @@ function DashboardList() {
         <div className="flex flex-col items-center justify-center">
           <AnimatedSVG name={ICONS.NO_DASHBOARDS} size={180} />
           <div className="text-center mt-4">
-            {dashboardsSearch !== '' ? 'No matching results' : "You haven't created any dashboards yet."}
+            {dashboardsSearch !== '' ? 'No matching results' : "You haven't created any dashboards yet"}
           </div>
         </div>
       }
diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index 7d6a60e1b..bb4a023a7 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -142,7 +142,7 @@ function WidgetSessions(props: Props) {
                 <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
                 <div className="mt-4" />
                 <div className="text-center">
-                  No relevant sessions found for the selected time period.
+                  No relevant sessions found for the selected time period
                 </div>
               </div>
             }
diff --git a/frontend/app/components/FFlags/FFlagsList.tsx b/frontend/app/components/FFlags/FFlagsList.tsx
index 4ea928a57..712824554 100644
--- a/frontend/app/components/FFlags/FFlagsList.tsx
+++ b/frontend/app/components/FFlags/FFlagsList.tsx
@@ -63,7 +63,7 @@ function FFlagsList({ siteId }: { siteId: string }) {
                 <AnimatedSVG name={ICONS.NO_FFLAGS} size={285} />
                 <div className="text-center text-gray-600 mt-4">
                   {featureFlagsStore.sort.query === ''
-                    ? "You haven't created any feature flags yet."
+                    ? "You haven't created any feature flags yet"
                     : 'No matching results'}
                 </div>
               </div>
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 146b90159..a4b54e7b1 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -35,7 +35,7 @@ function FunnelWidget(props: Props) {
             title={
                 <div className="flex items-center">
                     <Icon name="info-circle" className="mr-2" size="18" />
-                    No data for selected period.
+                    No data for selected period
                 </div>
             }
             show={!stages || stages.length === 0}
diff --git a/frontend/app/components/Session/Layout/ToolPanel/StackEvents.js b/frontend/app/components/Session/Layout/ToolPanel/StackEvents.js
index c66c7d7c2..0735e9b4f 100644
--- a/frontend/app/components/Session/Layout/ToolPanel/StackEvents.js
+++ b/frontend/app/components/Session/Layout/ToolPanel/StackEvents.js
@@ -37,7 +37,7 @@ function StackEvents({
       </PanelLayout.Header>
       <PanelLayout.Body>
         <NoContent
-          title="Nothing to display yet."
+          title="Nothing to display yet"
           subtext={ !hintIsHidden
             ?
               <>
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js
index 92ac93432..5279c6390 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js
+++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js
@@ -30,7 +30,7 @@ class SessionList extends React.PureComponent {
                         <div className="flex items-center justify-center flex-col">
                             <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
                             <div className="mt-2" />
-                            <div className="text-center text-gray-600">No sessions found.</div>
+                            <div className="text-center text-gray-600">No sessions found</div>
                         </div>
                     }
                 >
diff --git a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
index 92ac93432..5279c6390 100644
--- a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
+++ b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
@@ -30,7 +30,7 @@ class SessionList extends React.PureComponent {
                         <div className="flex items-center justify-center flex-col">
                             <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
                             <div className="mt-2" />
-                            <div className="text-center text-gray-600">No sessions found.</div>
+                            <div className="text-center text-gray-600">No sessions found</div>
                         </div>
                     }
                 >
diff --git a/frontend/app/components/Session_/Fetch/FetchDetails.js b/frontend/app/components/Session_/Fetch/FetchDetails.js
index 944a01e8e..81dc5a848 100644
--- a/frontend/app/components/Session_/Fetch/FetchDetails.js
+++ b/frontend/app/components/Session_/Fetch/FetchDetails.js
@@ -45,7 +45,7 @@ export default class FetchDetails extends React.PureComponent {
             title={
 				<div className="flex flex-col items-center justify-center">
 					<AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-					<div className="mt-4">Body is Empty.</div>
+					<div className="mt-4">Body is Empty</div>
 				</div>
 			}
             size="small"
@@ -69,7 +69,7 @@ export default class FetchDetails extends React.PureComponent {
             title={
 				<div className="flex flex-col items-center justify-center">
 					<AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-					<div className="mt-4">Body is Empty.</div>
+					<div className="mt-4">Body is Empty</div>
 				</div>
 			}
             size="small"
diff --git a/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx b/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx
index 9e0ace287..4f5b2db43 100644
--- a/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx
+++ b/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx
@@ -10,7 +10,7 @@ function Headers(props) {
         title={
           <div className="flex flex-col items-center justify-center">
             <AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-            <div className="mt-4">No data available.</div>
+            <div className="mt-4">No data available</div>
           </div>
         }
         size="small"
diff --git a/frontend/app/components/Session_/PageInsightsPanel/components/SelectorsList/SelectorsList.tsx b/frontend/app/components/Session_/PageInsightsPanel/components/SelectorsList/SelectorsList.tsx
index 183b9754e..2514ee983 100644
--- a/frontend/app/components/Session_/PageInsightsPanel/components/SelectorsList/SelectorsList.tsx
+++ b/frontend/app/components/Session_/PageInsightsPanel/components/SelectorsList/SelectorsList.tsx
@@ -11,7 +11,7 @@ function SelectorsList() {
     const { markedTargets: targets, activeTargetIndex } = store.get()
 
     return (
-        <NoContent title="No data available." size="small" show={targets && targets.length === 0}>
+        <NoContent title="No data available" size="small" show={targets && targets.length === 0}>
             <div className={stl.wrapper}>
                 {targets && targets.map((target, index) => <React.Fragment key={index}><SelectorCard target={target} index={index} showContent={activeTargetIndex === index} /></React.Fragment>)}
             </div>
diff --git a/frontend/app/components/Session_/StackEvents/StackEvents.DEPRECATED.js b/frontend/app/components/Session_/StackEvents/StackEvents.DEPRECATED.js
index 3ed7bab84..66850af2e 100644
--- a/frontend/app/components/Session_/StackEvents/StackEvents.DEPRECATED.js
+++ b/frontend/app/components/Session_/StackEvents/StackEvents.DEPRECATED.js
@@ -121,7 +121,7 @@ export default class StackEvents extends React.PureComponent {
           </BottomBlock.Header>
           <BottomBlock.Content>
             <NoContent
-              title="Nothing to display yet."
+              title="Nothing to display yet"
               subtext={
                 !hintIsHidden ? (
                   <>
diff --git a/frontend/app/components/Session_/Storage/Storage.DEPRECATED.js b/frontend/app/components/Session_/Storage/Storage.DEPRECATED.js
index e0fbb73f6..f9bf13b6b 100644
--- a/frontend/app/components/Session_/Storage/Storage.DEPRECATED.js
+++ b/frontend/app/components/Session_/Storage/Storage.DEPRECATED.js
@@ -265,7 +265,7 @@ export default class Storage extends React.PureComponent {
         </BottomBlock.Header>
         <BottomBlock.Content className="flex">
           <NoContent
-            title="Nothing to display yet."
+            title="Nothing to display yet"
             subtext={
               !hintIsHidden ? (
                 <>
diff --git a/frontend/app/components/Session_/Storage/Storage.tsx b/frontend/app/components/Session_/Storage/Storage.tsx
index d433135ac..05713bfd9 100644
--- a/frontend/app/components/Session_/Storage/Storage.tsx
+++ b/frontend/app/components/Session_/Storage/Storage.tsx
@@ -263,7 +263,7 @@ function Storage(props: Props) {
       </BottomBlock.Header>
       <BottomBlock.Content className="flex">
         <NoContent
-          title="Nothing to display yet."
+          title="Nothing to display yet"
           subtext={
             !hintIsHidden ? (
               <>
diff --git a/frontend/app/components/Session_/Storage/Storge.DEPRECATED.js b/frontend/app/components/Session_/Storage/Storge.DEPRECATED.js
index fc5b19416..0fc65c90a 100644
--- a/frontend/app/components/Session_/Storage/Storge.DEPRECATED.js
+++ b/frontend/app/components/Session_/Storage/Storge.DEPRECATED.js
@@ -242,7 +242,7 @@ export default class Storage extends React.PureComponent {
 				</BottomBlock.Header>
 				<BottomBlock.Content className="flex" >
 					<NoContent
-            title="Nothing to display yet."
+            title="Nothing to display yet"
             subtext={ !hintIsHidden
               ?
                 <>
diff --git a/frontend/app/components/shared/AlertTriggersModal/AlertTriggersModal.tsx b/frontend/app/components/shared/AlertTriggersModal/AlertTriggersModal.tsx
index 4f6ee030d..3e73b8dad 100644
--- a/frontend/app/components/shared/AlertTriggersModal/AlertTriggersModal.tsx
+++ b/frontend/app/components/shared/AlertTriggersModal/AlertTriggersModal.tsx
@@ -58,7 +58,7 @@ function AlertTriggersModal(props: Props) {
                                 <AnimatedSVG name={ICONS.EMPTY_STATE} size="100" />
                             </div>
                         }
-                        subtext="There are no alerts to show."
+                        subtext="There are no alerts to show"
                         show={ !loading && list.length === 0 }
                         size="small"
                     >
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx b/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx
index dbfdf81a8..5ebb8b474 100644
--- a/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx
@@ -14,7 +14,7 @@ function Headers(props: Props) {
         title={
           <div className="flex flex-col items-center justify-center">
             <AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-            <div className="mt-6 text-2xl">No data available.</div>
+            <div className="mt-6 text-2xl">No data available</div>
           </div>
         }
         size="small"
diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index a2587ce3a..5385e14df 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -120,7 +120,7 @@ function LiveSessionList(props: Props) {
               <div className="flex items-center justify-center flex-col">
                 <AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={180} />
                 <div className="mt-4" />
-                <div className="text-center">No live sessions found.</div>
+                <div className="text-center">No live sessions found</div>
               </div>
             }
             subtext={
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx
index cd006762a..75f523e3f 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx
@@ -23,7 +23,7 @@ function NotesList({ members }: { members: Array<Record<string, any>> }) {
           <div className="flex flex-col items-center justify-center">
             {/* <Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" /> */}
             <AnimatedSVG name={ICONS.NO_NOTES} size={180} />
-            <div className="text-center mt-4">No notes yet.</div>
+            <div className="text-center mt-4">No notes yet</div>
           </div>
         }
         subtext={
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
index b1f3417da..6a7e3529b 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
@@ -90,13 +90,13 @@ function SessionList(props: Props) {
       setNoContentType(NoContentType.Bookmarked);
       return {
         icon: ICONS.NO_BOOKMARKS,
-        message: 'No sessions bookmarked.'
+        message: 'No sessions bookmarked'
       };
     } else if (isVault) {
       setNoContentType(NoContentType.Vaulted);
       return {
         icon: ICONS.NO_SESSIONS_IN_VAULT,
-        message: 'No sessions found in vault.'
+        message: 'No sessions found in vault'
       };
     }
     setNoContentType(NoContentType.ToDate);
diff --git a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
index 5ed66d93a..1b709a6a6 100644
--- a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
+++ b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
@@ -63,7 +63,7 @@ function UserSessionsModal(props: Props) {
                 <div>
                     <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
                     <div className="mt-4" />
-                    <div className="text-center">No recordings found.</div>
+                    <div className="text-center">No recordings found</div>
                 </div>
             }>
                 <div className="border rounded m-5 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 85px)'}}>