change(ui): change icons, title length and button positions for bug report modal

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

@@ -176,7 +176,7 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps,
       className="bg-white overflow-y-scroll"
       style={{ maxWidth: '70vw', width: 620, height: '100vh' }}
     >
-      <div className="flex flex-col p-4 gap-4 bg-white relative" ref={reportRef}>
+      <div className="flex flex-col p-4 gap-8 bg-white relative" ref={reportRef}>
         <Title userName={account.name} />
         <MetaInfo envObject={envObject} metadata={metadata} />
         <Steps xrayProps={xrayProps} notes={notes} members={members} />

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

@@ -23,8 +23,8 @@ export default function MetaInfo({
         <SectionTitle>Environment</SectionTitle>
         {Object.keys(envObject).map((envTag) => (
           <div key={envTag} className="flex items-center">
-            <div className="py-1 px-2">{envTag}</div>
-            <div className="py-1 px-2 text-gray-medium bg-light-blue-bg rounded">
+            <div className="py-1 px-2 font-medium">{envTag}</div>
+            <div className="rounded bg-active-blue px-2 py-1 whitespace-nowrap overflow-hidden text-clip">
               <span className="text-base">
               {/* @ts-ignore */}
               {envObject[envTag]}

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

@@ -12,6 +12,19 @@ function ReportTitle() {
     bugReportStore.toggleTitleEdit(true);
   };
 
+  React.useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (bugReportStore.isTitleEdit && e.key === 'Enter') {
+        inputRef.current?.blur();
+        bugReportStore.toggleTitleEdit(false);
+      }
+    }
+
+    document.addEventListener('keydown', handler, false)
+
+    return () => document.removeEventListener('keydown', handler)
+  })
+
   React.useEffect(() => {
     if (inputRef.current && bugReportStore.isTitleEdit) {
       inputRef.current?.focus();

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from 'UI'
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { RADIUS } from '../utils';
@@ -66,13 +67,13 @@ function Steps({ xrayProps, notes, members }: Props) {
             ) : null}
           </div>
         </div>
-        <div className="text-blue cursor-pointer" id="pdf-ignore" onClick={handleStepsSelection}>
+        <Button variant="text-primary" onClick={handleStepsSelection}>
           {!shouldShowEventReset ? (
-            <span>Add {timePointer > 0 ? '' : 'All'} Steps</span>
-          ) : (
-            <span>Reset</span>
-          )}
-        </div>
+              <span>Add {timePointer > 0 ? '' : 'All'} Steps</span>
+            ) : (
+              <span>Reset</span>
+            )}
+          </Button>
       </div>
       <StepRenderer
         isDefault={bugReportStore.chosenEventSteps.length === 0}

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

@@ -51,12 +51,12 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
         <div className="rounded-3xl px-4 bg-gray-lightest relative z-10">{ind + 1}</div>
         <div className="w-full">
           <div className="flex items-center w-full gap-2">
-            {/* @ts-ignore */}
-            <Icon name={step.icon} size={16} color="gray-darkest" className="relative z-10"/>
-            <div className="px-2 text-disabled-text rounded bg-light-blue-bg">
+            <div className="px-1 text-disabled-text">
               {durationFromMs(step.time)}
             </div>
             {/* @ts-ignore */}
+            <Icon name={step.icon} size={16} color="gray-darkest" className="relative z-10"/>
+            {/* @ts-ignore */}
             <div className="font-semibold">{STEP_NAMES[step.type]}</div>
             <div className="text-gray-medium">{step.details}</div>
             <div

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Duration } from 'luxon';
 import { observer } from 'mobx-react-lite';
-import { toJS } from 'mobx'
-import { Icon } from 'UI';
+import { Icon, Button } from 'UI';
 import { useStore } from 'App/mstore';
 import { INDEXES } from 'App/constants/zindex';
 import TimelinePointer from 'App/components/Session_/OverviewPanel/components/TimelinePointer';
@@ -36,7 +35,7 @@ function XRay({ xrayProps, timePointer, stepPickRadius, clearEventSelection, set
     CLICKRAGE: eventsList.filter((item: any) => item.type === 'CLICKRAGE'),
   };
 
-  console.log(JSON.stringify(resources.CLICKRAGE, undefined, 2))
+  console.log(JSON.stringify(resources.CLICKRAGE, undefined, 2));
 
   const pickEventRadius = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
@@ -65,14 +64,14 @@ function XRay({ xrayProps, timePointer, stepPickRadius, clearEventSelection, set
 
       bugReportStore.setSteps(selectedSteps);
     }
-  }, [stepPickRadius])
+  }, [stepPickRadius]);
 
   const shouldShowPointerReset = timePointer > 0;
 
   return (
     <>
       <div className="flex items-center justify-between my-2">
-        <div className=" text-gray-dark">
+        <div className=" text-gray-dark py-2">
           XRAY
           {timePointer > 0 ? (
             <span className="text-disabled-text ml-2">
@@ -81,7 +80,10 @@ function XRay({ xrayProps, timePointer, stepPickRadius, clearEventSelection, set
           ) : null}
         </div>
         {!shouldShowPointerReset ? (
-          <div className="flex items-center gap-2 px-2 py-1 rounded bg-light-blue-bg" id="pdf-ignore">
+          <div
+            className="flex items-center gap-2 rounded bg-active-blue px-2 py-1 whitespace-nowrap overflow-hidden text-clip"
+            id="pdf-ignore"
+          >
             <Icon name="info-circle" size={16} />
             <div>
               Click anywhere on <span className="font-semibold">X-RAY</span> to drilldown and add
@@ -89,17 +91,25 @@ function XRay({ xrayProps, timePointer, stepPickRadius, clearEventSelection, set
             </div>
           </div>
         ) : (
-          <div className="text-blue py-1 cursor-pointer" onClick={clearEventSelection} id="pdf-ignore">
+          <Button variant="text-primary" onClick={clearEventSelection}>
             Clear Selection
-          </div>
+          </Button>
         )}
       </div>
-      <div
-        className="relative cursor-pointer"
-        onClick={pickEventRadius}
-        ref={xrayContainer}
-      >
-          <div id="pdf-ignore" style={{ pointerEvents: 'none', background: timePointer > 0 ? 'rgb(57, 78, 255)' : undefined, opacity: '0.07', position: 'absolute', top:0, left:0, width:'100%', height: '100%' }} />
+      <div className="relative cursor-pointer" onClick={pickEventRadius} ref={xrayContainer}>
+        <div
+          id="pdf-ignore"
+          style={{
+            pointerEvents: 'none',
+            background: timePointer > 0 ? 'rgb(57, 78, 255)' : undefined,
+            opacity: '0.07',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+          }}
+        />
         {timePointer > 0 ? (
           <div
             className="absolute h-full bg-white"

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

@@ -1,14 +1,39 @@
 import React from 'react';
 import Select from 'Shared/Select';
+import { Icon } from 'UI';
 import ReportTitle from './ReportTitle';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { SeverityLevels } from 'App/mstore/bugReportStore';
 
 const selectOptions = [
-  { label: <div className="flex items-center gap-2 cursor-pointer w-full"> <div className="p-1 bg-red rounded-full" /> HIGH</div>, value: SeverityLevels.High },
-  { label: <div className="flex items-center gap-2 cursor-pointer w-full"> <div className="p-1 bg-yellow2 rounded-full" /> MEDIUM</div>, value: SeverityLevels.Medium },
-  { label:<div className="flex items-center gap-2 cursor-pointer w-full"> <div className="p-1 bg-blue rounded-full" /> LOW</div>, value: SeverityLevels.Low },
+  {
+    label: (
+      <div className="flex items-center gap-1 cursor-pointer w-full">
+        <Icon name="arrow-up-short" color="red" size="24" />
+        HIGH
+      </div>
+    ),
+    value: SeverityLevels.High,
+  },
+  {
+    label: (
+      <div className="flex items-center gap-1 cursor-pointer w-full">
+        <Icon name="dash" size="24" color="yellow2" />
+        MEDIUM
+      </div>
+    ),
+    value: SeverityLevels.Medium,
+  },
+  {
+    label: (
+      <div className="flex items-center gap-1 cursor-pointer w-full">
+        <Icon name="arrow-down-short" color="blue" size="24" />
+        LOW
+      </div>
+    ),
+    value: SeverityLevels.Low,
+  },
 ];
 
 function Title({ userName }: { userName: string }) {

frontend/app/mstore/bugReportStore.ts

@@ -50,9 +50,10 @@ export default class BugReportStore {
   }
 
   setTitle(title: string) {
-    this.reportTitle = title;
-
-    this.bugReport = Object.assign(this.bugReport, { title: this.reportTitle });
+    if (title.length < 40) {
+      this.reportTitle = title;
+      this.bugReport = Object.assign(this.bugReport, { title: this.reportTitle });
+    }
   }
 
   setSeverity(severity: SeverityLevels) {

frontend/app/svg/icons/arrow-down-short.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"/>
+</svg>

frontend/app/svg/icons/arrow-up-short.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"/>
+</svg>

frontend/app/svg/icons/dash.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
+</svg>