change(ui) - no content text and date range in sessions

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

@@ -26,7 +26,7 @@ function DashboardList() {
       }
       subtext={
         <div>
-          A Dashboard is a collection of <Tooltip title={<div className="text-center">Utilize cards to capture key interactions and track KPIs effectively.</div>} className="text-center"><span className="underline decoration-dotted">Cards</span></Tooltip> that can be shared across teams.
+          A Dashboard is a collection of <Tooltip title={<div className="text-center">Utilize cards to visualize key user interactions or product performance metrics.</div>} className="text-center"><span className="underline decoration-dotted">Cards</span></Tooltip> that can be shared across teams.
         </div>
       }
     >

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

@@ -59,7 +59,7 @@ function MetricsList({
           </div>
         </div>
       }
-      subtext="Utilize cards to capture key interactions and track KPIs effectively."
+      subtext="Utilize cards to visualize key user interactions or product performance metrics."
     >
       {listView ? (
         <ListView

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

@@ -28,7 +28,7 @@ function NotesList({ members }: { members: Array<Record<string, any>> }) {
         }
         subtext={
           <div className="text-center flex justify-center items-center flex-col">
-            Create notes when replaying sessions and share your insights with the team.
+            Note observations during session replays and share them with your team.
           </div>
         }
       >

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Period from 'Types/app/period';
+import { applyFilter } from 'Duck/search';
+import SelectDateRange from 'Shared/SelectDateRange';
+
+interface Props {
+  filter: any;
+  applyFilter: (filter: any) => void;
+}
+function SessionDateRange(props: Props) {
+  const {
+    filter: { startDate, endDate, rangeValue },
+  } = props;
+  const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
+  const isCustom = period.rangeName === 'CUSTOM_RANGE'
+  const onDateChange = (e: any) => {
+    const dateValues = e.toJSON();
+    props.applyFilter(dateValues);
+  };
+  return (
+    <div className="flex items-center">
+      <span className="mr-1">No sessions {isCustom ? 'between' : 'in the'}</span>
+      <div className="border rounded"><SelectDateRange period={period} onChange={onDateChange} right={true} /></div>
+    </div>
+  );
+}
+
+export default connect(
+  (state: any) => ({
+    filter: state.getIn(['search', 'instance']),
+  }),
+  { applyFilter }
+)(SessionDateRange);

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

@@ -15,6 +15,7 @@ import {
 import { numberWithCommas } from 'App/utils';
 import { fetchListActive as fetchMetadata } from 'Duck/customField';
 import { toggleFavorite } from 'Duck/sessions';
+import SessionDateRange from './SessionDateRange';
 
 enum NoContentType {
   Bookmarked,
@@ -80,7 +81,7 @@ function SessionList(props: Props) {
     setNoContentType(NoContentType.ToDate);
     return {
       icon: ICONS.NO_SESSIONS,
-      message: 'No relevant sessions found for the selected time period.',
+      message: <SessionDateRange />,
     };
   }, [isBookmark, isVault, activeTab]);
 
@@ -152,11 +153,11 @@ function SessionList(props: Props) {
             <div className="mt-4" />
             <div className="text-center relative">
               {NO_CONTENT.message}
-              {noContentType === NoContentType.ToDate ? (
+              {/* {noContentType === NoContentType.ToDate ? (
                 <div style={{ position: 'absolute', right: -160, top: -170 }}>
                   <Icon name="pointer-sessions-search" size={250} width={240} />
                 </div>
-              ) : null}
+              ) : null} */}
             </div>
           </div>
         }
@@ -165,8 +166,8 @@ function SessionList(props: Props) {
             {(isVault || isBookmark) && (
               <div>
                 {isVault
-                  ? 'Add any session to your vault from the replay page and retain it longer.'
-                  : 'Bookmark important sessions in player screen and quickly find them here.'}
+                  ? 'Extend the retention period of any session by adding it to your vault directly from the player screen.'
+                  : 'Effortlessly find important sessions by bookmarking them directly from the player screen.'}
               </div>
             )}
             <Button