From 779983b4872745c1a2a779a348eeb14c34ceddb4 Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Fri, 5 Jul 2024 16:30:01 +0530
Subject: [PATCH] UI Improvements

---
 .../components/DashboardList/DashboardList.tsx    |  2 +-
 .../Player/Controls/components/KeyboardHelp.tsx   |  4 ++--
 .../FetchBasicDetails/FetchBasicDetails.tsx       |  8 ++++----
 .../components/Notes/NoteItem.tsx                 | 15 ++++++++-------
 frontend/app/components/ui/ItemMenu/ItemMenu.tsx  |  3 ++-
 frontend/app/components/ui/Link/Link.js           |  2 +-
 frontend/app/player-ui/PlayButton.tsx             |  2 +-
 frontend/app/svg/ghost.svg                        |  6 +++---
 frontend/tests/mocks/sessionResponse.js           |  6 +++---
 9 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index 7661d58cc..55d8f588f 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -22,7 +22,7 @@ function DashboardList({ siteId }: { siteId: string }) {
     const history = useHistory();
 
     // Define custom width and height for each scenario
-    const searchImageDimensions = { width: 200, height: 'auto' };
+    const searchImageDimensions = { width: 60, height: 'auto' };
     const defaultImageDimensions = { width: 600, height: 'auto' };
 
     const tableConfig: TableColumnsType<Dashboard> = [
diff --git a/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx b/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
index e33a73083..f6bc094f7 100644
--- a/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
@@ -4,7 +4,7 @@ import {Keyboard} from 'lucide-react'
 import { Button, Tooltip } from 'antd';
 import { useModal } from "../../../../Modal";
 
-const Key = ({ label }: { label: string }) => <div style={{ minWidth: 52 }} className="whitespace-nowrap font-bold bg-gray-lightest rounded shadow px-2 py-1 text-figmaColors-text-primary text-center">{label}</div>;
+const Key = ({ label }: { label: string }) => <div style={{ minWidth: 52 }} className="whitespace-nowrap font-normal bg-indigo-50 rounded-lg px-2 py-1 text-figmaColors-text-primary text-center font-mono">{label}</div>;
 function Cell({ shortcut, text }: any) {
   return (
     <div className="flex items-center gap-2 justify-start rounded">
@@ -68,7 +68,7 @@ function KeyboardHelp() {
       size={'small'}
       className={'flex items-center justify-center'}
       onClick={() => {
-        showModal(<ShortcutGrid />, { right: true, width: 420 })
+        showModal(<ShortcutGrid />, { right: true, width: 320 })
       }}
     >
       <Keyboard size={18}/>
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
index 601aa5520..57e750e00 100644
--- a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
@@ -63,7 +63,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
 
       <div className="flex items-center py-1">
         <div className="font-medium w-36">Type</div>
-        <Tag className="text-base capitalize rounded-lg bg-indgo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
+        <Tag className="text-base capitalize rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
           {resource.type}
         </Tag>
       </div>
@@ -71,7 +71,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
       {!!resource.decodedBodySize && (
         <div className="flex items-center py-1">
           <div className="font-medium w-36">Size</div>
-          <Tag className="text-base rounded-lg bg-indgo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
+          <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
             {formatBytes(resource.decodedBodySize)}
           </Tag>
         </div>
@@ -82,7 +82,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
       {!!_duration && (
         <div className="flex items-center py-1">
           <div className="font-medium w-36">Duration</div>
-          <Tag className="text-base rounded-lg bg-indgo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
+          <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
             {_duration} ms
           </Tag>
         </div>
@@ -91,7 +91,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
       {timestamp && (
         <div className="flex items-center py-1">
         <div className="font-medium w-36">Time</div>
-        <Tag className="text-base rounded-lg bg-indgo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
+        <Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
           {timestamp}
         </Tag>
       </div>
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
index 0c365f833..f21e4f060 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
@@ -48,9 +48,9 @@ function NoteItem(props: Props) {
   const safeStrMessage =
     props.note.message.length > 150 ? props.note.message.slice(0, 150) + '...' : props.note.message;
   return (
-    <div className="flex items-center px-2 border-b">
+    <div className="flex items-center px-2 border-b hover:bg-amber-50 justify-between py-2">
       <Link
-        style={{ width: '90%' }}
+        style={{ width: '90%',  }}
         to={
               session(props.note.sessionId) +
               (props.note.timestamp > 0
@@ -58,7 +58,7 @@ function NoteItem(props: Props) {
                 : `?note=${props.note.noteId}`)
             }
           >
-        <div className="flex flex-col p-2 rounded cursor-pointer">
+        <div className="flex flex-col p-2 rounded cursor-pointer justify-between">
           <div className="flex py-1 text-base">
             
           {props.note.tag ? (
@@ -70,14 +70,14 @@ function NoteItem(props: Props) {
               </Tag>
             ) : null}
 
-            <div className='cap-first'>
+            <div className='cap-first font-medium'>
             {safeStrMessage}
             </div>
           </div>
           <div className="flex items-center">
             
-            <div className="flex items-center text-sm">
-              <span className="text-gray-600 mr-1 capitalize">By </span>
+            <div className="flex items-center text-sm text-start">
+              <span className="text-gray-600 mr-1 capitalize text-start">By </span>
               {props.note.userName},{' '}
               {formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
               <div className="mx-2" />
@@ -86,9 +86,10 @@ function NoteItem(props: Props) {
           </div>
         </div>
       </Link>
+{/* 
       <div className="ml-auto">
         <PlayLink isAssist={false} viewed={false} sessionId={props.note.sessionId} />
-      </div>
+      </div> */}
       <div className="ml-2 cursor-pointer">
         <ItemMenu bold items={menuItems} />
       </div>
diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
index 6a1e23179..62e3ccc2f 100644
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
@@ -98,9 +98,10 @@ export default class ItemMenu extends React.PureComponent<Props> {
       >
         
             <Button
+              type="text"
               className={cn("select-none", !this.props.flat ? parentStyles : "", {
                 "": !this.props.flat && displayed && label,
-              }, ' shadow-sm')}
+              })}
             >
               {label && (
                 <span className={cn("font-medium")}>
diff --git a/frontend/app/components/ui/Link/Link.js b/frontend/app/components/ui/Link/Link.js
index 34ccc8cb6..108db2562 100644
--- a/frontend/app/components/ui/Link/Link.js
+++ b/frontend/app/components/ui/Link/Link.js
@@ -8,7 +8,7 @@ import styles from './link.module.css';
 const OpenReplayLink = ({ siteId, to, className="", dispatch, ...other })  => (
   <Link 
     { ...other } 
-    className={ cn(className, styles.link , 'px-2', 'rounded-lg', 'hover:text-inherit', 'hover:bg-amber-50', 'hover:shadow-sm') }
+    className={ cn(className, styles.link , 'px-2', 'hover:text-inherit') }
     to={ withSiteId(to, siteId) }
   />
 );
diff --git a/frontend/app/player-ui/PlayButton.tsx b/frontend/app/player-ui/PlayButton.tsx
index 8c4f889f8..c4b5fedca 100644
--- a/frontend/app/player-ui/PlayButton.tsx
+++ b/frontend/app/player-ui/PlayButton.tsx
@@ -44,7 +44,7 @@ export function PlayButton({ togglePlay, iconSize, state }: IProps) {
     >
       <div
         onClick={togglePlay}
-        className="hover-main color-main cursor-pointer rounded hover:bg-gray-light-shade"
+        className="hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50"
       >
         <Icon name={icon} size={iconSize} color="inherit" />
       </div>
diff --git a/frontend/app/svg/ghost.svg b/frontend/app/svg/ghost.svg
index 6a52f2814..1e88e013c 100644
--- a/frontend/app/svg/ghost.svg
+++ b/frontend/app/svg/ghost.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="23 10.5 104 129">
-<path d="M75 12.5C61.7392 12.5 49.0215 17.7678 39.6447 27.1447C30.2678 36.5215 25 49.2392 25 62.5V137.5L43.75 118.75L59.375 134.375L75 118.75L90.625 134.375L106.25 118.75L125 137.5V62.5C125 49.2392 119.732 36.5215 110.355 27.1447C100.979 17.7678 88.2608 12.5 75 12.5Z" fill="#E2E4F6" stroke="#394EFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M56.25 62.5H56.3133" stroke="#394EFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M93.75 62.5H93.8133" stroke="#394EFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M75 12.5C61.7392 12.5 49.0215 17.7678 39.6447 27.1447C30.2678 36.5215 25 49.2392 25 62.5V137.5L43.75 118.75L59.375 134.375L75 118.75L90.625 134.375L106.25 118.75L125 137.5V62.5C125 49.2392 119.732 36.5215 110.355 27.1447C100.979 17.7678 88.2608 12.5 75 12.5Z" fill="#E2E4F6" stroke="#394EFF" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M56.25 62.5H56.3133" stroke="#394EFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M93.75 62.5H93.8133" stroke="#394EFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/tests/mocks/sessionResponse.js b/frontend/tests/mocks/sessionResponse.js
index 6064aec0a..d7f269362 100644
--- a/frontend/tests/mocks/sessionResponse.js
+++ b/frontend/tests/mocks/sessionResponse.js
@@ -1292,7 +1292,7 @@ export const session = {
         sessionId: 8119081922378909,
         messageId: 37522,
         timestamp: 1673887715900,
-        label: 'hover-main color-main cursor-pointer rounded hover:bg-gray-light-shade',
+        label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50',
         url: 'app.openreplay.com/5095/session/8118843021704432',
         selector:
           '#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade',
@@ -2780,7 +2780,7 @@ export const session = {
         sessionId: 8119081922378909,
         messageId: 67718,
         timestamp: 1673888012602,
-        label: 'hover-main color-main cursor-pointer rounded hover:bg-gray-light-shade',
+        label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50',
         url: 'app.openreplay.com/5095/session/8118633985734291',
         selector:
           '#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade',
@@ -4046,7 +4046,7 @@ export const session = {
         sessionId: 8119081922378909,
         messageId: 90402,
         timestamp: 1673888133249,
-        label: 'hover-main color-main cursor-pointer rounded hover:bg-gray-light-shade',
+        label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50',
         url: 'app.openreplay.com/5095/session/8118556979885624',
         selector:
           '#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade',