change(ui): assist no content message styles and icons

frontend/app/components/Assist/Assist.tsx

@@ -37,10 +37,10 @@ function Assist(props: Props) {
             <SideMenuitem
               active={isRecords}
               id="menu-rec"
-              title="Recordings"
-              iconName="record-circle"
+              title="Offline Playback"
+              iconName="file-play"
               onClick={() => redirect(recordings())}
-              disabled={!isEnterprise}
+              // disabled={!isEnterprise}
               tooltipTitle={ENTERPRISE_REQUEIRED}
             />
           </div>

frontend/app/components/Assist/RecordingsList/Recordings.tsx

@@ -19,8 +19,8 @@ function Recordings(props: Props) {
   const { recordingsStore } = useStore();
 
   const recordingsOwner = [
-    { value: '0', label: 'All Recordings' },
-    { value: userId, label: 'My Recordings' }
+    { value: '0', label: 'All Videos' },
+    { value: userId, label: 'My Videos' }
   ];
 
   const onDateChange = (e: any) => {
@@ -31,7 +31,7 @@ function Recordings(props: Props) {
     <div style={{ maxWidth: '1300px', margin: 'auto' }} className='bg-white rounded py-4 border'>
       <div className='flex items-center mb-4 justify-between px-6'>
         <div className='flex items-baseline mr-3'>
-          <PageTitle title='Recordings' />
+          <PageTitle title='Offline Playback' />
         </div>
         <div className='ml-auto flex items-center gap-4'>
           <SelectDateRange period={recordingsStore.period} onChange={onDateChange} right={true} />

frontend/app/components/Assist/RecordingsList/RecordingsList.tsx

@@ -24,44 +24,42 @@ function RecordingsList() {
     <NoContent
       show={length === 0}
       title={
-        <div className='flex flex-col items-center justify-center'>
+        <div className="flex flex-col items-center justify-center">
           <AnimatedSVG name={ICONS.NO_RECORDINGS} size={180} />
-          <div className='text-center text-gray-600 mt-4'>
-            {recordsSearch !== '' ? 'No matching results' : 'No recordings available yet.'}
+          <div className="text-center mt-4">
+            {recordsSearch !== ''
+              ? 'No matching results'
+              : 'No videos available for offline playback.'}
           </div>
         </div>
       }
       subtext={
-        <div className='text-center flex justify-center items-center flex-col'>
+        <div className="text-center flex justify-center items-center flex-col">
           <span>
-            Record your co-browsing sessions and share them with your team for product feedback or
-            training purposes.
+          Capture and share video recordings of co-browsing sessions with your team for product feedback and training.
           </span>
         </div>
       }
     >
-      <div className='mt-3 border-b'>
+      <div className="mt-3 border-b">
         <Loader loading={recordingsStore.loading}>
-          <div className='grid grid-cols-12 py-2 font-medium px-6'>
-            <div className='col-span-8'>Name</div>
-            <div className='col-span-4'>Recorded by</div>
+          <div className="grid grid-cols-12 py-2 font-medium px-6">
+            <div className="col-span-8">Name</div>
+            <div className="col-span-4">Recorded by</div>
           </div>
 
-          {recordings.map(
-            (record: any) => (
-              <React.Fragment key={record.recordId}>
-                <RecordsListItem record={record} />
-              </React.Fragment>
-            )
-          )}
+          {recordings.map((record: any) => (
+            <React.Fragment key={record.recordId}>
+              <RecordsListItem record={record} />
+            </React.Fragment>
+          ))}
         </Loader>
       </div>
 
-      <div className='w-full flex items-center justify-between pt-4 px-6'>
-        <div className='text-disabled-text'>
-          Showing{' '}
-          <span className='font-semibold'>{Math.min(length, pageSize)}</span>{' '}
-          out of <span className='font-semibold'>{total}</span> Recording
+      <div className="w-full flex items-center justify-between pt-4 px-6">
+        <div className="text-disabled-text">
+          Showing <span className="font-semibold">{Math.min(length, pageSize)}</span> out of{' '}
+          <span className="font-semibold">{total}</span> Recording
         </div>
         <Pagination
           page={page}

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

@@ -119,18 +119,17 @@ function LiveSessionList(props: Props) {
             title={
               <div className="flex items-center justify-center flex-col">
                 <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 className="mt-4" />
+                <div className="text-center">No live sessions found.</div>
               </div>
             }
             subtext={
               <div className="text-center flex justify-center items-center flex-col">
                 <span>
-                  Assist is the best way to support you users while they're browsing your site,
-                  {' '}through live replay, co-browsing and video conferencing capabilities. {' '}
+                  Support users with live sessions, co-browsing, and video calls.
                   <a
                     target="_blank"
-                    className="link"
+                    className="link ml-1"
                     href="https://docs.openreplay.com/plugins/assist"
                   >
                     {'Learn More'}

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

@@ -149,8 +149,8 @@ function SessionList(props: Props) {
         title={
           <div className="flex items-center justify-center flex-col">
             <AnimatedSVG name={NO_CONTENT.icon} size={180} />
-            <div className="mt-2" />
-            <div className="text-center text-gray-600 relative">
+            <div className="mt-4" />
+            <div className="text-center relative">
               {NO_CONTENT.message}
               {noContentType === NoContentType.ToDate ? (
                 <div style={{ position: 'absolute', right: -160, top: -170 }}>

frontend/app/components/ui/NoContent/noContent.module.css

@@ -7,7 +7,6 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  color: $gray-dark;
   /* font-weight: 500; */
   transition: all 0.2s;
   padding: 40px;
@@ -24,13 +23,15 @@
 }
 
 .title {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 500;
+  color: #000;
   /* margin-bottom: 15px; */
 }
 
 .subtext {
-  font-size: 14px;
+  font-size: 16px;
+  color: $gray-dark;
   /* margin-bottom: 20px; */
 }
 

frontend/app/routes.js

@@ -84,7 +84,7 @@ export const onboarding = (tab = routerOBTabString) => `/onboarding/${ tab }`;
 
 export const sessions = params => queried('/sessions', params);
 export const assist = params => queried('/assist', params);
-export const recordings = params => queried("/recordings", params);
+export const recordings = params => queried("/offline-playback", params);
 export const multiviewIndex = params => queried('/multiview', params);
 export const multiview = (sessionsQuery = ':sessionsquery', hash) => hashed(`/multiview/${sessionsQuery}`, hash);
 export const session = (sessionId = ':sessionId', hash) => hashed(`/session/${ sessionId }`, hash);

frontend/app/svg/icons/file-play.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-file-play" viewBox="0 0 16 16">
+  <path d="M6 10.117V5.883a.5.5 0 0 1 .757-.429l3.528 2.117a.5.5 0 0 1 0 .858l-3.528 2.117a.5.5 0 0 1-.757-.43z"/>
+  <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
+</svg>