fix(ui): fix icons for sub report modals, fix session box hover

frontend/app/components/Session_/BugReport/components/Comments.tsx

@@ -36,7 +36,7 @@ function Comments() {
           placeholder="Comment..."
           rows={3}
           autoFocus
-          className="rounded fluid border -mx-2 px-2 py-1 w-full"
+          className="rounded fluid border -mx-2 px-2 py-1 w-full -mt-2"
           value={bugReportStore.comment}
           onChange={(e) => bugReportStore.setComment(e.target.value)}
           onBlur={() => bugReportStore.toggleCommentEditing(false)}
@@ -49,7 +49,7 @@ function Comments() {
             !commentsEnabled
               ? 'text-disabled-text border-dotted border-gray-medium'
               : 'border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium',
-            'h-8 pt-1 flex items-center w-fit',
+            'h-8 pt-1 flex items-center w-fit -mt-2',
             'cursor-pointer select-none border-b'
           )}
         >

frontend/app/components/Session_/BugReport/components/Session.tsx

@@ -1,21 +1,29 @@
 import React from 'react'
 import SectionTitle from './SectionTitle';
-import { session as sessionRoute } from 'App/routes';
 import PlayLink from 'Shared/SessionItem/PlayLink';
+import { Tooltip } from 'react-tippy'
 
 export default function Session({ user, sessionId, sessionUrl }: { user: string, sessionId: string, sessionUrl: string }) {
+
+  const onSessionClick = () => {
+    window.open(sessionUrl, '_blank').focus();
+  }
+
   return (
     <div>
       <SectionTitle>Session recording</SectionTitle>
-      <div className="border hover:border-gray-light rounded flex items-center justify-between p-2">
-        <div className="flex flex-col">
-          <div className="text-lg">{user}</div>
-          <div className="text-disabled-text">
-            <a href={sessionUrl}>{sessionUrl}</a>
+      {/* @ts-ignore */}
+      <Tooltip title="Play session in new tab">
+        <div className="border hover:border-main cursor-pointer rounded flex items-center justify-between p-2" onClick={onSessionClick}>
+          <div className="flex flex-col">
+            <div className="text-lg">{user}</div>
+            <div className="text-disabled-text">
+              {sessionUrl}
+            </div>
           </div>
+          <PlayLink newTab isAssist={false} viewed={false} sessionId={sessionId} />
         </div>
-        <PlayLink newTab isAssist={false} viewed={false} sessionId={sessionId} />
-      </div>
+      </Tooltip>
     </div>
   );
 }

frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx

@@ -7,6 +7,7 @@ import { useStore } from 'App/mstore';
 import cn from 'classnames';
 import { ErrorComp, NetworkComp, NoteComp } from './SubModalItems';
 import { durationFromMs } from 'App/date'
+import { Tooltip } from 'react-tippy'
 
 const SUBSTEP = {
   network: NetworkComp,
@@ -65,17 +66,23 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
                 menuOpen ? 'flex' : 'hidden'
               )}
             >
+              {/* @ts-ignore */}
+              <Tooltip title="Add Note, Error or Network Request" className="!flex items-center">
               <ItemMenu
                 label={
-                  <Icon name="plus" size={16} className="cursor-pointer hover:fill-gray-darkest" />
+                    <Icon name="plus" size={16} className="cursor-pointer hover:fill-gray-darkest" />
                 }
                 items={menuItems}
                 flat
                 onToggle={(isOpen) => setMenu(isOpen)}
               />
+              </Tooltip>
+              {/* @ts-ignore */}
+              <Tooltip title="Delete Step">
               <div onClick={() => bugReportStore.removeStep(step)}>
                 <Icon name="trash" size={16} className="cursor-pointer hover:fill-gray-darkest" />
               </div>
+              </Tooltip>
             </div>
           </div>
           {step.substeps?.length ? (

frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx

@@ -11,6 +11,11 @@ const Titles = {
   network: 'Fetch/XHR',
   error: 'Console Error',
 };
+const Icons = {
+  note: 'quotes' as const,
+  network: 'network' as const,
+  error: 'info-circle' as const
+}
 const Filters = {
   note: 'note message or author',
   network: 'url',
@@ -47,7 +52,7 @@ function ModalContent(props: Props) {
     <div className="flex flex-col p-4 bg-white gap-4 w-full">
       <div className="flex items-center gap-2">
         <div className="p-2 rounded-full bg-light-blue-bg">
-          <Icon name="quotes" size={18} />
+          <Icon name={Icons[props.type]} size={18} />
         </div>
         <div className="text-2xl font-semibold">{`Select ${Titles[props.type]}`}</div>
         <div className="ml-auto">

frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx

@@ -3,6 +3,7 @@ import { Checkbox } from 'UI';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import { durationFromMs } from 'App/date'
+import cn from 'classnames'
 
 interface Item {
   time: number;
@@ -107,8 +108,8 @@ export function SubModalItemContainer({
 }) {
   return (
     <div
-      className="flex items-start p-2 gap-2 shadow-border-gray hover:shadow-border-main hover:bg-active-blue cursor-pointer"
-      style={{ background: isNote ? '#FFFEF5' : undefined }}
+      className={cn("flex items-start p-2 gap-2 border-t last:border-b cursor-pointer", isNote ? 'note-hover-bg' : 'hover:bg-active-blue')}
+      // style={{ background: isNote ? '#FFFEF5' : undefined }}
       onClick={() => onChange(!isChecked)}
     >
       <Checkbox

frontend/app/components/Session_/BugReport/components/Title.tsx

@@ -28,7 +28,7 @@ const selectOptions = [
   {
     label: (
       <div className="flex items-center gap-1 cursor-pointer w-full">
-        <Icon name="arrow-down-short" color="blue" size="24" />
+        <Icon name="arrow-down-short" color="teal" size="24" />
         LOW
       </div>
     ),

frontend/app/styles/main.css

@@ -140,6 +140,11 @@
     border-color: $gray-lightest;
   }
 }
+.note-hover-bg {
+  &:hover {
+    background-color: #FFFEF5;
+  }
+}
 
 .text-dotted-underline {
   text-decoration: underline dotted !important;
@@ -154,7 +159,7 @@
 .divider-h {
   height: 1px;
   width: 100%;
-  
+
   margin: 25px 0;
   background-color: $gray-light;
 } */