From 09ae0ff9d34bdb7cee7f3003d53dde477078c33d Mon Sep 17 00:00:00 2001 From: sylenien Date: Fri, 4 Nov 2022 12:00:16 +0100 Subject: [PATCH] change(ui): change icons, title length and button positions for bug report modal --- .../Session_/BugReport/BugReportModal.tsx | 2 +- .../BugReport/components/MetaInfo.tsx | 4 +- .../BugReport/components/ReportTitle.tsx | 13 +++++++ .../Session_/BugReport/components/Steps.tsx | 13 ++++--- .../components/StepsComponents/EventStep.tsx | 6 +-- .../components/StepsComponents/XRay.tsx | 38 ++++++++++++------- .../Session_/BugReport/components/Title.tsx | 31 +++++++++++++-- frontend/app/components/ui/SVG.tsx | 5 ++- frontend/app/mstore/bugReportStore.ts | 7 ++-- frontend/app/svg/icons/arrow-down-short.svg | 3 ++ frontend/app/svg/icons/arrow-up-short.svg | 3 ++ frontend/app/svg/icons/dash.svg | 3 ++ 12 files changed, 95 insertions(+), 33 deletions(-) create mode 100644 frontend/app/svg/icons/arrow-down-short.svg create mode 100644 frontend/app/svg/icons/arrow-up-short.svg create mode 100644 frontend/app/svg/icons/dash.svg diff --git a/frontend/app/components/Session_/BugReport/BugReportModal.tsx b/frontend/app/components/Session_/BugReport/BugReportModal.tsx index 07d6d2104..9d4f729a2 100644 --- a/frontend/app/components/Session_/BugReport/BugReportModal.tsx +++ b/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' }} > -
+
<MetaInfo envObject={envObject} metadata={metadata} /> <Steps xrayProps={xrayProps} notes={notes} members={members} /> diff --git a/frontend/app/components/Session_/BugReport/components/MetaInfo.tsx b/frontend/app/components/Session_/BugReport/components/MetaInfo.tsx index 7adcf4786..09746dcfb 100644 --- a/frontend/app/components/Session_/BugReport/components/MetaInfo.tsx +++ b/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]} diff --git a/frontend/app/components/Session_/BugReport/components/ReportTitle.tsx b/frontend/app/components/Session_/BugReport/components/ReportTitle.tsx index 41abc672d..36d9c9877 100644 --- a/frontend/app/components/Session_/BugReport/components/ReportTitle.tsx +++ b/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(); diff --git a/frontend/app/components/Session_/BugReport/components/Steps.tsx b/frontend/app/components/Session_/BugReport/components/Steps.tsx index 8fb17f518..a64f36d0b 100644 --- a/frontend/app/components/Session_/BugReport/components/Steps.tsx +++ b/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} diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx index 2ed6cff5c..30157ef97 100644 --- a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx +++ b/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 diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx index d3f2772b6..843007dd5 100644 --- a/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx +++ b/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" diff --git a/frontend/app/components/Session_/BugReport/components/Title.tsx b/frontend/app/components/Session_/BugReport/components/Title.tsx index 405c9e192..ffd2cc30f 100644 --- a/frontend/app/components/Session_/BugReport/components/Title.tsx +++ b/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 }) { diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx index 9536cf2fa..0ec433721 100644 --- a/frontend/app/components/ui/SVG.tsx +++ b/frontend/app/components/ui/SVG.tsx @@ -1,7 +1,7 @@ import React from 'react'; -export type IconNames = 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cubes' | 'dashboard-icn' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope' | 'errors-icon' | 'event/click' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/link' | 'event/location' | 'event/resize' | 'event/view' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/vuejs' | 'journal-code' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'percent' | 'performance-icon' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plus-circle' | 'plus' | 'prev1' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sliders' | 'social/slack' | 'social/trello' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in'; +export type IconNames = 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-down-short' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cubes' | 'dash' | 'dashboard-icn' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope' | 'errors-icon' | 'event/click' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/link' | 'event/location' | 'event/resize' | 'event/view' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/vuejs' | 'journal-code' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'percent' | 'performance-icon' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plus-circle' | 'plus' | 'prev1' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sliders' | 'social/slack' | 'social/trello' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in'; interface Props { name: IconNames; @@ -23,11 +23,13 @@ const SVG = (props: Props) => { case 'arrow-alt-square-right': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48C21.5 32 0 53.5 0 80zm400-16c8.8 0 16 7.2 16 16v352c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352zm-208 64v64H88c-13.2 0-24 10.8-24 24v80c0 13.2 10.8 24 24 24h104v64c0 28.4 34.5 42.8 54.6 22.6l128-128c12.5-12.5 12.5-32.8 0-45.3l-128-128c-20.1-20-54.6-5.8-54.6 22.7zm160 128L224 384v-96H96v-64h128v-96l128 128z"/></svg>; case 'arrow-bar-left': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5zM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5z"/></svg>; case 'arrow-clockwise': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></svg>; + case 'arrow-down-short': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path 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>; case 'arrow-down': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="m443.5 248.5-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L241 419.9V44c0-6.6-5.4-12-12-12h-10c-6.6 0-12 5.4-12 12v375.9L28.5 241.4c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.8 4.8-12.3.1-17z"/></svg>; case 'arrow-repeat': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/><path d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/></svg>; case 'arrow-right-short': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>; case 'arrow-square-left': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/></svg>; case 'arrow-square-right': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4.5 5.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg>; + case 'arrow-up-short': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path 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>; case 'arrow-up': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="m4.465 263.536 7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L207 92.113V468c0 6.627 5.373 12 12 12h10c6.627 0 12-5.373 12-12V92.113l178.494 178.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.05c-4.686-4.686-12.284-4.686-16.971 0L4.465 246.566c-4.687 4.686-4.687 12.284 0 16.97z"/></svg>; case 'arrows-angle-extend': return <svg viewBox="0 0 27 27" width={ `${ width }px` } height={ `${ height }px` } ><path clipRule="evenodd" d="M9.804 17.143a.845.845 0 0 0-1.195 0l-6.92 6.92v-4.676a.845.845 0 0 0-1.689 0v6.715a.845.845 0 0 0 .845.845H7.56a.844.844 0 1 0 0-1.69H2.884l6.92-6.92a.845.845 0 0 0 0-1.194Zm7.339-7.34a.845.845 0 0 0 1.194 0l6.92-6.92V7.56a.845.845 0 0 0 1.69 0V.845A.844.844 0 0 0 26.102 0h-6.715a.845.845 0 0 0 0 1.69h4.676l-6.92 6.92a.845.845 0 0 0 0 1.194Z"/></svg>; case 'avatar/icn_bear': return <svg viewBox="0 0 100 100" width={ `${ width }px` } height={ `${ height }px` } ><path d="M89.8 37.7c-.3-1.5-1.4-5.1-4.7-7.4-1-.7-2-1.3-2.9-1.8.1-.4.2-.7.2-1.1 0-2.4-2-4.4-4.6-4.4-2.3 0-4.2 1.6-4.5 3.7h-9.4l-11.7-4.6-11.5 3-5.9-.3c-.6 0-1.2-.1-1.8-.3-3.7-.9-12.9-2.6-20 2.4-4.6 3.3-7.3 8.6-8 16v.2c0 .4.2 8.8 3.4 17.8 2.7 7.4 3.7 12.6 4 13.7v10.6h20.8v-9.4l-4.9-2.1 1-6.7c4 .4 11.8 1 17.8-.4l1.5 5.5v13.1h19.2v-9.5l-5.2-2.5c.2-1.7.4-4.3.8-7.1 1.2-7.9 2.3-9.7 2.5-9.9 2.4-1.6 3-1.5 4.8-1.2 2.4.3 8.9-1.4 12.8-2.6l7.4.1 4-7.2-5.1-7.6z"/></svg>; @@ -133,6 +135,7 @@ const SVG = (props: Props) => { case 'copy': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="m433.941 65.941-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM352 32.491a15.88 15.88 0 0 1 7.431 4.195l51.882 51.883A15.885 15.885 0 0 1 415.508 96H352V32.491zM288 464c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V144c0-8.822 7.178-16 16-16h80v240c0 26.51 21.49 48 48 48h112v48zm128-96c0 8.822-7.178 16-16 16H176c-8.822 0-16-7.178-16-16V48c0-8.822 7.178-16 16-16h144v72c0 13.2 10.8 24 24 24h72v240z"/></svg>; case 'credit-card-front': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1H2zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7z"/><path d="M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1z"/></svg>; case 'cubes': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/><path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>; + case 'dash': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><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>; case 'dashboard-icn': return <svg viewBox="0 0 276 241" width={ `${ width }px` } height={ `${ height }px` } ><g filter="url(#a)"><rect x="6" y="4" width="264" height="229" rx="6" fill="#fff"/></g><g opacity=".7"><rect x="141" y="14" width="119" height="101" rx="4.244" fill="#000" fillOpacity=".08"/><rect x="141.5" y="14.5" width="118" height="100" rx="3.744" stroke="#000" stroke-opacity=".12"/></g><g opacity=".3"><rect x="16" y="14" width="119" height="101" rx="4.244" fill="#000" fillOpacity=".08"/><rect x="16.5" y="14.5" width="118" height="100" rx="3.744" stroke="#000" stroke-opacity=".12"/></g><g opacity=".46"><rect x="16" y="122" width="244" height="99" rx="4.244" fill="#000" fillOpacity=".08"/><rect x="16.5" y="122.5" width="243" height="98" rx="3.744" stroke="#000" stroke-opacity=".12"/></g><rect opacity=".2" x="149" y="85" width="15" height="20" rx="2" fill="#3EAAAF"/><rect opacity=".4" x="178" y="54" width="15" height="51" rx="2" fill="#3EAAAF"/><rect opacity=".6" x="207" y="62" width="15" height="43" rx="2" fill="#3EAAAF"/><rect opacity=".4" x="236" y="45" width="15" height="60" rx="2" fill="#3EAAAF"/><path opacity=".6" d="M109 62a32.997 32.997 0 0 1-56.334 23.335l9.16-9.162A20.044 20.044 0 0 0 96.045 62H109Z" fill="#3EAAAF"/><path opacity=".2" d="M51.09 83.645a33.002 33.002 0 0 1-6.892-30.457l12.582 3.486a19.945 19.945 0 0 0 4.165 18.408l-9.855 8.563Z" fill="#3EAAAF"/><path opacity=".4" d="M44.652 51.688a33 33 0 0 1 64.32 8.95l-12.948.535a20.04 20.04 0 0 0-39.061-5.435l-12.31-4.05Z" fill="#3EAAAF"/><path d="M150.176 79.433a1 1 0 0 0 1.648 1.134l-1.648-1.134ZM247 29l-11.457 1.437 6.972 9.204L247 29Zm-35.954 23.046-.552.834.552-.834Zm5.777-.185-.604-.797.604.797Zm-36.606-14.317-.823-.567.823.567Zm6.877-1.336-.551.834.551-.834Zm-35.27 44.359 29.217-42.457-1.647-1.133-29.218 42.456 1.648 1.134Zm34.719-43.525 23.951 15.838 1.103-1.668-23.951-15.839-1.103 1.669Zm30.884 15.616 23.003-17.426-1.208-1.594-23.003 17.426 1.208 1.594Zm-6.933.222a6 6 0 0 0 6.933-.222l-1.208-1.594a4 4 0 0 1-4.622.148l-1.103 1.668Zm-29.453-14.77a4 4 0 0 1 5.502-1.068l1.103-1.669a6 6 0 0 0-8.252 1.604l1.647 1.133Z" fill="#3EAAAF"/><rect opacity=".2" x="60" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/><rect opacity=".3" x="72" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/><rect opacity=".6" x="84" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/><path clipRule="evenodd" d="M17 187.928c0-1.01 1.326-1.383 1.853-.522l1.777 2.906c3.63 5.938 11.092 17.813 18.352 19 7.26 1.188 14.721-8.312 21.981-20.187C68.425 177.25 75.685 163 82.945 163c7.462 0 14.722 14.25 21.982 21.375 7.461 7.125 14.721 7.125 21.981 2.375 7.462-4.75 14.722-14.25 22.184-14.25 7.26 0 14.52 9.5 21.981 16.625 7.26 7.125 14.52 11.875 21.982 8.313 7.26-3.563 14.52-15.438 21.982-14.25 7.26 1.187 14.721 15.437 21.981 16.624 7.26 1.188 14.722-10.687 18.352-16.624l1.777-2.907c.527-.861 1.853-.488 1.853.522V217a3 3 0 0 1-3 3H20a3 3 0 0 1-3-3v-29.072Z" fill="url(#b)"/><path d="M258 180.5c-7 11-17.882 29.121-29 14-12.5-17-21.333-11.5-24.5-8-16.5 21.5-30.5 10.5-43-6-10-13.2-19.833-7.833-23.5-3.5-22.5 28-35.5 3.5-48.5-11.5C79 154 67 179 59 194c-8 13.5-21 29.5-41-6.5" stroke="#3EAAAF" stroke-width="2" stroke-linecap="round"/><circle cx="42" cy="206" r="7" fill="#fff" stroke="#3EAAAF" stroke-width="2"/><circle cx="117" cy="187" r="7" fill="#fff" stroke="#3EAAAF" stroke-width="2"/><circle cx="212" cy="183" r="7" fill="#fff" stroke="#3EAAAF" stroke-width="2"/><defs><linearGradient id="b" x1="138" y1="163" x2="138.49" y2="224" gradientUnits="userSpaceOnUse"><stop stopColor="#86C6C9"/><stop offset="1" stopColor="#F6F6F6"/></linearGradient><filter id="a" x="0" y="0" width="276" height="241" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="3"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_59_3139"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_59_3139" result="shape"/></filter></defs></svg>; case 'desktop': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145z"/></svg>; case 'device': return <svg viewBox="0 0 1000 1000" width={ `${ width }px` } height={ `${ height }px` } ><path d="M702.5 826.7H598V722.1h107.8v-68.6H78.6V157h816.7v277.7h55.5c3.3 0 9.8 0 13.1 3.3V134.1c0-26.1-19.6-45.7-45.7-45.7H55.7C29.6 88.4 10 108 10 134.1v542.3c0 26.1 19.6 45.7 45.7 45.7h323.4v104.5H255c-22.9 0-42.5 19.6-42.5 42.5s19.6 42.5 42.5 42.5h460.6c-6.5-9.8-9.8-19.6-9.8-29.4v-55.5h-3.3z"/><path d="M960.6 457.5H767.9c-16.3 0-29.4 13.1-29.4 29.4v392c0 16.3 13.1 29.4 29.4 29.4h192.7c16.3 0 29.4-13.1 29.4-29.4v-392c0-13-13.1-29.4-29.4-29.4zm-98 434.5c-6.5 0-13.1-6.5-13.1-13.1s6.5-13.1 13.1-13.1c6.5 0 13.1 6.5 13.1 13.1s-6.6 13.1-13.1 13.1zm107.8-42.5H754.8V522.9h215.6v326.6z"/></svg>; diff --git a/frontend/app/mstore/bugReportStore.ts b/frontend/app/mstore/bugReportStore.ts index 69685ef62..3feb927ff 100644 --- a/frontend/app/mstore/bugReportStore.ts +++ b/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) { diff --git a/frontend/app/svg/icons/arrow-down-short.svg b/frontend/app/svg/icons/arrow-down-short.svg new file mode 100644 index 000000000..cd096ca80 --- /dev/null +++ b/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> diff --git a/frontend/app/svg/icons/arrow-up-short.svg b/frontend/app/svg/icons/arrow-up-short.svg new file mode 100644 index 000000000..434482f9f --- /dev/null +++ b/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> diff --git a/frontend/app/svg/icons/dash.svg b/frontend/app/svg/icons/dash.svg new file mode 100644 index 000000000..7a80c4088 --- /dev/null +++ b/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>