Fixed Interaction issues a card and note in player

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>
     </>

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} />*/}

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>
       }
     >

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}

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}

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) ? (

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>