From f05055f9b76133b046ae5cea2cad8d011f89dce6 Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Tue, 9 Jul 2024 20:32:15 +0530
Subject: [PATCH] Fixed Interaction issues a card and note in player

---
 .../components/CardIssues/CardIssueItem.tsx   |  1 +
 .../components/CardIssues/CardIssues.tsx      | 19 ++++++++++++++-----
 .../FunnelIssuesList/FunnelIssuesList.tsx     |  5 ++---
 .../Session_/EventsBlock/EventGroupWrapper.js |  3 ++-
 .../Session_/EventsBlock/NoteEvent.tsx        |  6 +++---
 .../Player/Controls/components/CreateNote.tsx |  4 +++-
 .../components/Notes/NoteItem.tsx             |  3 ++-
 7 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx b/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
index 87a51d99c..4b6074723 100644
--- a/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
+++ b/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
@@ -15,6 +15,7 @@ function CardIssueItem(props: Props) {
         title={issue.name}
         description={<div className="text-nowrap truncate">{issue.source}</div>}
         avatar={<Icon name={issue.icon} size="24" />}
+        className='cursor-pointer hover:bg-indigo-50'
       />
       <div>{issue.sessionCount}</div>
     </>
diff --git a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
index 4d619bdfd..304593727 100644
--- a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
+++ b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useStore } from 'App/mstore';
 import { observer, useObserver } from 'mobx-react-lite';
 import { Button, Loader, NoContent, Pagination } from 'UI';
-
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { debounce } from 'App/utils';
 import useIsMounted from 'App/hooks/useIsMounted';
 import CardIssueItem from './CardIssueItem';
@@ -90,12 +91,12 @@ function CardIssues() {
   };
 
   return useObserver(() => (
-    <div className="bg-white rounded p-4 border">
+    <div className="bg-white rounded-lg shadow-sm p-4 border">
       <div className="flex justify-between">
         <div className="flex items-center">
-          <h1 className="font-medium text-2xl">Issues</h1>
+          <h2 className="font-normal text-xl">Issues</h2>
           {!!filter.filters[1] && (
-            <div className="text-disabled-text ml-3">
+            <div className="ml-3 pt-1">
               Showing issues of <span className="font-medium">{filter.filters[0].value}</span>
               <span className="mx-1">to</span>
               <span className="font-medium">{filter.filters[1].value}</span>
@@ -109,7 +110,15 @@ function CardIssues() {
       </div>
 
       <Loader loading={loading}>
-        <NoContent show={data.issues.length == 0} title="No data!">
+        <NoContent show={data.issues.length == 0} 
+         title={
+          <div className="flex flex-col items-center justify-center">
+          <AnimatedSVG name={ICONS.NO_RESULTS} size={60} />
+          <div className="text-center my-4 text-base"><InfoCircleOutlined />  No data available.</div>
+          </div>
+      }
+        
+        >
           {/*{data.issues.map((item: any, index: any) => (*/}
           {/*  <div onClick={() => handleClick(item)} key={index}>*/}
           {/*    <CardIssueItem issue={item} />*/}
diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
index a8b7f549e..8eb4a508c 100644
--- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
+++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
@@ -7,9 +7,8 @@ import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { useModal } from 'App/components/Modal';
 import { useStore } from 'App/mstore';
 import { NoContent } from 'UI';
-
+import { InfoCircleOutlined } from '@ant-design/icons';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
-
 import FunnelIssueModal from '../FunnelIssueModal';
 import FunnelIssuesListItem from '../FunnelIssuesListItem';
 
@@ -117,7 +116,7 @@ function FunnelIssuesList(props: RouteComponentProps<Props>) {
       title={
         <div className="flex flex-col items-center justify-center">
           <AnimatedSVG name={ICONS.NO_ISSUES} size={60} />
-          <div className="mt-4">No issues found</div>
+          <div className="mt-4 text-base"><InfoCircleOutlined /> No issues found</div>
         </div>
       }
     >
diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
index 4ae9e6676..9323c637b 100644
--- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
+++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
@@ -142,12 +142,13 @@ class EventGroupWrapper extends React.Component {
              style={{
                position: 'absolute',
                top: '50%',
-               left: -7,
+               left: -10,
                width: 10,
                height: 10,
                transform: 'rotate(45deg) translate(0, -50%)',
                background: '#394EFF',
                zIndex: 99,
+               borderRadius: '.15rem',
             }}
             />
           ) : null}
diff --git a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
index 18481da51..ef0cdb002 100644
--- a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
+++ b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
@@ -76,7 +76,7 @@ function NoteEvent(props: Props) {
     { icon: 'trash', text: 'Delete', onClick: onDelete },
   ];
   return (
-    <div className="flex items-start flex-col p-2 border rounded" style={{ background: '#FFFEF5' }}>
+    <div className="flex items-start flex-col p-2 border rounded ps-4" style={{ background: '#FFFEF5' }}>
       <div className="flex items-center w-full relative">
         <div className="p-3 bg-gray-light rounded-full">
           <Icon name="quotes" color="main" />
@@ -93,7 +93,7 @@ function NoteEvent(props: Props) {
           >
             {props.note.userName}
           </div>
-          <div className="text-disabled-text text-sm">
+          <div className="text-disabled-text text-xs">
             {formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
           </div>
         </div>
@@ -110,7 +110,7 @@ function NoteEvent(props: Props) {
       <div>
         <div className="flex items-center flex-wrap w-full">
           {props.note.tag ? (
-            <Tag color={tagProps[props.note.tag]}>
+            <Tag color={tagProps[props.note.tag]} bordered={false} className='rounded-lg'>
               {props.note.tag}
             </Tag>
           ) : null}
diff --git a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
index a6627fec8..3da4a31d7 100644
--- a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
@@ -241,8 +241,10 @@ function CreateNote({
             <Tag
               onClick={() => addTag(tag)}
               key={tag}
-              className={'cursor-pointer'}
+              className='cursor-pointer rounded-lg hover:bg-indigo-50'
               color={tagActive(tag) ? tagProps[tag] : undefined}
+              bordered={false}
+
             >
               <div className={'flex items-center gap-2'}>
                 {tagActive(tag) ? (
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
index f21e4f060..a1be32388 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
@@ -65,12 +65,13 @@ function NoteItem(props: Props) {
               <Tag
                 color={tagProps[props.note.tag]}
                 className='border-0 rounded-lg hover:inherit gap-2 w-14 text-center'
+                bordered={false}
               >
                 {props.note.tag}
               </Tag>
             ) : null}
 
-            <div className='cap-first font-medium'>
+            <div className='cap-first font-normal'>
             {safeStrMessage}
             </div>
           </div>