jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: dark mode fixes

Browse source
This commit is contained in:
nick-delirium 2025-05-20 12:11:55 +02:00
parent 2d58cf2da4
commit 3431c97712
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
27 changed files with 212 additions and 465 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js
View file

@ -3,7 +3,7 @@ import { Tag } from 'antd';
function MethodType({ data }) { function MethodType({ data }) {
return ( return (
<Tag bordered={false} className="rounded-lg bg-indigo-50"> <Tag bordered={false} className="rounded-lg bg-indigo-lightest">
{data.method} {data.method}
</Tag> </Tag>
); );

4
frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx
View file

@ -47,7 +47,7 @@ function AddCardSelectionModal(props: Props) {
<Row gutter={16} justify="center" className="py-5"> <Row gutter={16} justify="center" className="py-5">
<Col span={12}> <Col span={12}>
<div <div
className="flex flex-col items-center justify-center hover:bg-indigo-50 border rounded-lg shadow-sm cursor-pointer gap-3" className="flex flex-col items-center justify-center hover:bg-indigo-lightest border rounded-lg shadow-sm cursor-pointer gap-3"
style={{ height: '80px' }} style={{ height: '80px' }}
onClick={() => onClick(true)} onClick={() => onClick(true)}
> >
@ -57,7 +57,7 @@ function AddCardSelectionModal(props: Props) {
</Col> </Col>
<Col span={12}> <Col span={12}>
<div <div
className="flex flex-col items-center justify-center hover:bg-indigo-50 border rounded-lg shadow-sm cursor-pointer gap-3" className="flex flex-col items-center justify-center hover:bg-indigo-lightest border rounded-lg shadow-sm cursor-pointer gap-3"
style={{ height: '80px' }} style={{ height: '80px' }}
onClick={() => onClick(false)} onClick={() => onClick(false)}
> >

2
frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
View file

@ -123,7 +123,7 @@ function AlertListItem(props: Props) {
<div className="col-span-2"> <div className="col-span-2">
<div className="flex items-center"> <div className="flex items-center">
<Tag <Tag
className="rounded-full bg-indigo-50 cap-first text-base" className="rounded-full bg-indigo-lightest cap-first text-base"
bordered={false} bordered={false}
> >
{alert.detectionMethod} {alert.detectionMethod}

2
frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
View file

@ -15,7 +15,7 @@ function CardIssueItem(props: Props) {
title={issue.name} title={issue.name}
description={<div className="text-nowrap truncate">{issue.source}</div>} description={<div className="text-nowrap truncate">{issue.source}</div>}
avatar={<Icon name={issue.icon} size="24" />} avatar={<Icon name={issue.icon} size="24" />}
className="cursor-pointer hover:bg-indigo-50" className="cursor-pointer hover:bg-indigo-lightest"
/> />
<div>{issue.sessionCount}</div> <div>{issue.sessionCount}</div>
</> </>

2
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx
View file

@ -60,7 +60,7 @@ function CardsLibrary(props: Props) {
onClick={(e) => onItemClick(e, metric.metricId)} onClick={(e) => onItemClick(e, metric.metricId)}
/> />
<Card <Card
className="border border-transparent hover:border-indigo-50 hover:shadow-sm rounded-lg" className="border border-transparent hover:border-indigo-lightest hover:shadow-sm rounded-lg"
style={{ style={{
border: selectedList.includes(metric.metricId) border: selectedList.includes(metric.metricId)
? '1px solid #1890ff' ? '1px solid #1890ff'

2
frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSelectedFilters/FunnelIssuesSelectedFilters.tsx
View file

@ -21,7 +21,7 @@ function FunnelIssuesSelectedFilters(props: Props) {
key={index} key={index}
closable closable
onClose={() => removeSelectedValue(option.value)} onClose={() => removeSelectedValue(option.value)}
className="select-none rounded-lg text-base gap-1 bg-indigo-50 flex items-center" className="select-none rounded-lg text-base gap-1 bg-indigo-lightest flex items-center"
> >
{option.label} {option.label}
</Tag> </Tag>

2
frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
View file

@ -199,6 +199,8 @@ function BottomBlock({ panelHeight, block }: { panelHeight: number; block: numbe
return <BackendLogsPanel />; return <BackendLogsPanel />;
case LONG_TASK: case LONG_TASK:
return <LongTaskPanel />; return <LongTaskPanel />;
case OVERVIEW:
return <OverviewPanel />;
default: default:
return null; return null;
} }

1
frontend/app/components/Session/Player/SharedComponents/BackendLogs/StatusMessages.tsx
View file

@ -13,6 +13,7 @@ export function LoadingFetch({ provider }: { provider: string }) {
<LoadingOutlined size={32} /> <LoadingOutlined size={32} />
<div> <div>
{t('Fetching logs from')} {t('Fetching logs from')}
&nbsp;
{provider} {provider}
... ...
</div> </div>

2
frontend/app/components/Session_/Highlight/HighlightPanel.tsx
View file

@ -206,7 +206,7 @@ function HighlightPanel({ onClose }: { onClose: () => void }) {
<Tag <Tag
onClick={() => addTag(tag)} onClick={() => addTag(tag)}
key={tag} key={tag}
className="cursor-pointer rounded-lg hover:bg-indigo-50 mr-0" className="cursor-pointer rounded-lg hover:bg-indigo-lightest mr-0"
color={tagProps[tag]} color={tagProps[tag]}
bordered={false} bordered={false}
> >

2
frontend/app/components/Session_/Subheader.tsx
View file

@ -142,7 +142,7 @@ function SubHeader(props) {
currentLocation={currentLocation} currentLocation={currentLocation}
version={currentSession?.trackerVersion ?? ''} version={currentSession?.trackerVersion ?? ''}
containerStyle={{ position: 'relative', left: 0, top: 0, transform: 'none', zIndex: 10 }} containerStyle={{ position: 'relative', left: 0, top: 0, transform: 'none', zIndex: 10 }}
trackerWarnStyle={{ backgroundColor: 'var(--color-yellow)' }} trackerWarnStyle={{ backgroundColor: 'var(--color-yellow)', color: 'black' }}
virtualElsFailed={showVModeBadge} virtualElsFailed={showVModeBadge}
onVMode={onVMode} onVMode={onVMode}
/> />

4
frontend/app/components/Spots/SpotPlayer/components/AccessModal.tsx
View file

@ -121,7 +121,7 @@ function AccessModal() {
<div className="text-black/50"> <div className="text-black/50">
{t('Link for internal team members')} {t('Link for internal team members')}
</div> </div>
<div className="px-2 py-1 rounded-lg bg-indigo-50 whitespace-nowrap overflow-ellipsis overflow-hidden"> <div className="px-2 py-1 rounded-lg bg-indigo-lightest whitespace-nowrap overflow-ellipsis overflow-hidden">
{spotLink} {spotLink}
</div> </div>
</div> </div>
@ -155,7 +155,7 @@ function AccessModal() {
<div className="text-black/50"> <div className="text-black/50">
{t('Anyone with the following link can access this Spot')} {t('Anyone with the following link can access this Spot')}
</div> </div>
<div className="px-2 py-1 rounded-lg bg-indigo-50 whitespace-nowrap overflow-ellipsis overflow-hidden"> <div className="px-2 py-1 rounded-lg bg-indigo-lightest whitespace-nowrap overflow-ellipsis overflow-hidden">
{spotLink} {spotLink}
</div> </div>
</div> </div>

2
frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx
View file

@ -201,7 +201,7 @@ function SpotVideoContainer({
> >
{processingState === ProcessingState.Processing ? ( {processingState === ProcessingState.Processing ? (
<Alert <Alert
className="trimIsProcessing rounded-lg shadow-sm border-indigo-500 bg-indigo-50" className="trimIsProcessing rounded-lg shadow-sm border-indigo-500 bg-indigo-lightest"
message="You’re viewing the original recording. Processed Spot will be available here shortly." message="You’re viewing the original recording. Processed Spot will be available here shortly."
showIcon showIcon
type="info" type="info"

2
frontend/app/components/UsabilityTesting/TestOverview.tsx
View file

@ -408,7 +408,7 @@ const TaskSummary = observer(() => {
<Typography.Title level={5}>{t('Task Summary')}</Typography.Title> <Typography.Title level={5}>{t('Task Summary')}</Typography.Title>
{uxtestingStore.taskStats.length ? ( {uxtestingStore.taskStats.length ? (
<div className="p-2 rounded-lg bg-indigo-50 flex items-center gap-1 px-4"> <div className="p-2 rounded-lg bg-indigo-lightest flex items-center gap-1 px-4">
<ClockCircleOutlined rev={undefined} /> <ClockCircleOutlined rev={undefined} />
<Typography.Text> <Typography.Text>
{t('Average completion time of all tasks:')} {t('Average completion time of all tasks:')}

14
frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
View file

@ -23,7 +23,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
<div className="flex items-start py-1"> <div className="flex items-start py-1">
<div className="font-medium w-36">{t('Name')}</div> <div className="font-medium w-36">{t('Name')}</div>
<Tag <Tag
className="text-base rounded-lg bg-indigo-50 whitespace-normal break-words" className="text-base rounded-lg bg-indigo-lightest whitespace-normal break-words"
bordered={false} bordered={false}
style={{ maxWidth: '300px' }} style={{ maxWidth: '300px' }}
> >
@ -35,7 +35,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
<div className="flex items-center py-1"> <div className="flex items-center py-1">
<div className="font-medium w-36">{t('Request Method')}</div> <div className="font-medium w-36">{t('Request Method')}</div>
<Tag <Tag
className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-ellipsis" className="text-base rounded-lg bg-indigo-lightest whitespace-nowrap overflow-hidden text-ellipsis"
bordered={false} bordered={false}
> >
{resource.method} {resource.method}
@ -49,7 +49,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
<Tag <Tag
bordered={false} bordered={false}
className={cn( className={cn(
'text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-ellipsis flex items-center', 'text-base rounded-lg bg-indigo-lightest whitespace-nowrap overflow-hidden text-ellipsis flex items-center',
{ 'error color-red': !resource.success }, { 'error color-red': !resource.success },
)} )}
> >
@ -61,7 +61,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
<div className="flex items-center py-1"> <div className="flex items-center py-1">
<div className="font-medium w-36">{t('Type')}</div> <div className="font-medium w-36">{t('Type')}</div>
<Tag <Tag
className="text-base capitalize rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-ellipsis" className="text-base capitalize rounded-lg bg-indigo-lightest whitespace-nowrap overflow-hidden text-ellipsis"
bordered={false} bordered={false}
> >
{resource.type} {resource.type}
@ -72,7 +72,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
<div className="flex items-center py-1"> <div className="flex items-center py-1">
<div className="font-medium w-36">{t('Size')}</div> <div className="font-medium w-36">{t('Size')}</div>
<Tag <Tag
className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-ellipsis" className="text-base rounded-lg bg-indigo-lightest whitespace-nowrap overflow-hidden text-ellipsis"
bordered={false} bordered={false}
> >
{formatBytes(resource.decodedBodySize)} {formatBytes(resource.decodedBodySize)}
@ -84,7 +84,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
<div className="flex items-center py-1"> <div className="flex items-center py-1">
<div className="font-medium w-36">{t('Duration')}</div> <div className="font-medium w-36">{t('Duration')}</div>
<Tag <Tag
className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-ellipsis" className="text-base rounded-lg bg-indigo-lightest whitespace-nowrap overflow-hidden text-ellipsis"
bordered={false} bordered={false}
> >
{_duration}&nbsp;{t('ms')} {_duration}&nbsp;{t('ms')}
@ -96,7 +96,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
<div className="flex items-center py-1"> <div className="flex items-center py-1">
<div className="font-medium w-36">{t('Time')}</div> <div className="font-medium w-36">{t('Time')}</div>
<Tag <Tag
className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-ellipsis" className="text-base rounded-lg bg-indigo-lightest whitespace-nowrap overflow-hidden text-ellipsis"
bordered={false} bordered={false}
> >
{timestamp} {timestamp}

6
frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTimings.tsx
View file

@ -128,7 +128,7 @@ function FetchTimings({ timings }: { timings: Record<string, number> }) {
key={index} key={index}
className="grid grid-cols-12 items-center gap-2 space-y-2" className="grid grid-cols-12 items-center gap-2 space-y-2"
> >
<div className="col-span-4 text-sm text-neutral-950 font-medium flex items-center gap-2"> <div className="col-span-4 text-sm text-black font-medium flex items-center gap-2">
<Tooltip title={phase.description}> <Tooltip title={phase.description}>
<HelpCircle size={12} /> <HelpCircle size={12} />
</Tooltip> </Tooltip>
@ -160,11 +160,11 @@ function FetchTimings({ timings }: { timings: Record<string, number> }) {
))} ))}
<div className="grid grid-cols-12 items-center gap-2 pt-2 border-t border-t-gray-light mt-2"> <div className="grid grid-cols-12 items-center gap-2 pt-2 border-t border-t-gray-light mt-2">
<div className="col-span-3 text-sm text-neutral-950 font-semibold"> <div className="col-span-3 text-sm text-black font-semibold">
Total: Total:
</div> </div>
<div className="col-span-7"></div> <div className="col-span-7"></div>
<div className="col-span-2 text-right font-mono text-sm text-neutral-950 font-semibold"> <div className="col-span-2 text-right font-mono text-sm text-black font-semibold">
{formatTime(total)}{' '} {formatTime(total)}{' '}
{isAdjusted ? ( {isAdjusted ? (
<span className="ml-1 text-xs text-yellow"> <span className="ml-1 text-xs text-yellow">

6
frontend/app/layout/SupportModal.tsx
View file

@ -29,7 +29,7 @@ function SupportModal(props: Props) {
className="!bg-stone-50" className="!bg-stone-50"
> >
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<div className="p-3 bg-white flex rounded-lg shadow-sm hover:bg-indigo-50"> <div className="p-3 bg-white flex rounded-lg shadow-sm hover:bg-indigo-lightest">
<div className="shrink-0 w-10 mt-2"> <div className="shrink-0 w-10 mt-2">
<Icon name="bookmark" size={18} /> <Icon name="bookmark" size={18} />
</div> </div>
@ -61,7 +61,7 @@ function SupportModal(props: Props) {
</div> </div>
</div> </div>
<div className="p-3 bg-white flex rounded-lg shadow-sm hover:bg-indigo-50"> <div className="p-3 bg-white flex rounded-lg shadow-sm hover:bg-indigo-lightest">
<div className="shrink-0 w-10 mt-2"> <div className="shrink-0 w-10 mt-2">
<Icon name="slack" size={18} /> <Icon name="slack" size={18} />
</div> </div>
@ -92,7 +92,7 @@ function SupportModal(props: Props) {
</div> </div>
</div> </div>
<div className="p-3 bg-white flex rounded-lg shadow-sm hover:bg-indigo-50"> <div className="p-3 bg-white flex rounded-lg shadow-sm hover:bg-indigo-lightest">
<div className="shrink-0 w-10 mt-2"> <div className="shrink-0 w-10 mt-2">
<Icon name="github" size={18} /> <Icon name="github" size={18} />
</div> </div>

2
frontend/app/player-ui/PlayButton.tsx
View file

@ -44,7 +44,7 @@ export function PlayButton({ togglePlay, iconSize, state }: IProps) {
> >
<div <div
onClick={togglePlay} onClick={togglePlay}
className="hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50" className="hover-main color-main cursor-pointer rounded-full hover:bg-indigo-lightest"
> >
<Icon name={icon} size={iconSize} color="inherit" /> <Icon name={icon} size={iconSize} color="inherit" />
</div> </div>

24
frontend/app/styles/colors-autogen.css
View file

@ -28,6 +28,7 @@
.fill-green-dark { fill: var(--color-green-dark) } .fill-green-dark { fill: var(--color-green-dark) }
.fill-red { fill: var(--color-red) } .fill-red { fill: var(--color-red) }
.fill-red2 { fill: var(--color-red2) } .fill-red2 { fill: var(--color-red2) }
.fill-red-light { fill: var(--color-red-light) }
.fill-red-lightest { fill: var(--color-red-lightest) } .fill-red-lightest { fill: var(--color-red-lightest) }
.fill-blue { fill: var(--color-blue) } .fill-blue { fill: var(--color-blue) }
.fill-blue2 { fill: var(--color-blue2) } .fill-blue2 { fill: var(--color-blue2) }
@ -47,12 +48,15 @@
.fill-transparent { fill: var(--color-transparent) } .fill-transparent { fill: var(--color-transparent) }
.fill-cyan { fill: var(--color-cyan) } .fill-cyan { fill: var(--color-cyan) }
.fill-amber { fill: var(--color-amber) } .fill-amber { fill: var(--color-amber) }
.fill-amber-medium { fill: var(--color-amber-medium) }
.fill-glassWhite { fill: var(--color-glassWhite) } .fill-glassWhite { fill: var(--color-glassWhite) }
.fill-glassMint { fill: var(--color-glassMint) } .fill-glassMint { fill: var(--color-glassMint) }
.fill-glassLavander { fill: var(--color-glassLavander) } .fill-glassLavander { fill: var(--color-glassLavander) }
.fill-blueLight { fill: var(--color-blueLight) } .fill-blueLight { fill: var(--color-blueLight) }
.fill-offWhite { fill: var(--color-offWhite) } .fill-offWhite { fill: var(--color-offWhite) }
.fill-disabled-text { fill: var(--color-disabled-text) } .fill-disabled-text { fill: var(--color-disabled-text) }
.fill-indigo-lightest { fill: var(--color-indigo-lightest) }
.fill-indigo { fill: var(--color-indigo) }
.fill-figmaColors-accent-secondary { fill: var(--color-figmaColors-accent-secondary) } .fill-figmaColors-accent-secondary { fill: var(--color-figmaColors-accent-secondary) }
.fill-figmaColors-main { fill: var(--color-figmaColors-main) } .fill-figmaColors-main { fill: var(--color-figmaColors-main) }
.fill-figmaColors-primary-outlined-hover-background { fill: var(--color-figmaColors-primary-outlined-hover-background) } .fill-figmaColors-primary-outlined-hover-background { fill: var(--color-figmaColors-primary-outlined-hover-background) }
@ -89,6 +93,7 @@
.hover-fill-green-dark:hover svg { fill: var(--color-green-dark) } .hover-fill-green-dark:hover svg { fill: var(--color-green-dark) }
.hover-fill-red:hover svg { fill: var(--color-red) } .hover-fill-red:hover svg { fill: var(--color-red) }
.hover-fill-red2:hover svg { fill: var(--color-red2) } .hover-fill-red2:hover svg { fill: var(--color-red2) }
.hover-fill-red-light:hover svg { fill: var(--color-red-light) }
.hover-fill-red-lightest:hover svg { fill: var(--color-red-lightest) } .hover-fill-red-lightest:hover svg { fill: var(--color-red-lightest) }
.hover-fill-blue:hover svg { fill: var(--color-blue) } .hover-fill-blue:hover svg { fill: var(--color-blue) }
.hover-fill-blue2:hover svg { fill: var(--color-blue2) } .hover-fill-blue2:hover svg { fill: var(--color-blue2) }
@ -108,12 +113,15 @@
.hover-fill-transparent:hover svg { fill: var(--color-transparent) } .hover-fill-transparent:hover svg { fill: var(--color-transparent) }
.hover-fill-cyan:hover svg { fill: var(--color-cyan) } .hover-fill-cyan:hover svg { fill: var(--color-cyan) }
.hover-fill-amber:hover svg { fill: var(--color-amber) } .hover-fill-amber:hover svg { fill: var(--color-amber) }
.hover-fill-amber-medium:hover svg { fill: var(--color-amber-medium) }
.hover-fill-glassWhite:hover svg { fill: var(--color-glassWhite) } .hover-fill-glassWhite:hover svg { fill: var(--color-glassWhite) }
.hover-fill-glassMint:hover svg { fill: var(--color-glassMint) } .hover-fill-glassMint:hover svg { fill: var(--color-glassMint) }
.hover-fill-glassLavander:hover svg { fill: var(--color-glassLavander) } .hover-fill-glassLavander:hover svg { fill: var(--color-glassLavander) }
.hover-fill-blueLight:hover svg { fill: var(--color-blueLight) } .hover-fill-blueLight:hover svg { fill: var(--color-blueLight) }
.hover-fill-offWhite:hover svg { fill: var(--color-offWhite) } .hover-fill-offWhite:hover svg { fill: var(--color-offWhite) }
.hover-fill-disabled-text:hover svg { fill: var(--color-disabled-text) } .hover-fill-disabled-text:hover svg { fill: var(--color-disabled-text) }
.hover-fill-indigo-lightest:hover svg { fill: var(--color-indigo-lightest) }
.hover-fill-indigo:hover svg { fill: var(--color-indigo) }
.hover-fill-figmaColors-accent-secondary:hover svg { fill: var(--color-figmaColors-accent-secondary) } .hover-fill-figmaColors-accent-secondary:hover svg { fill: var(--color-figmaColors-accent-secondary) }
.hover-fill-figmaColors-main:hover svg { fill: var(--color-figmaColors-main) } .hover-fill-figmaColors-main:hover svg { fill: var(--color-figmaColors-main) }
.hover-fill-figmaColors-primary-outlined-hover-background:hover svg { fill: var(--color-figmaColors-primary-outlined-hover-background) } .hover-fill-figmaColors-primary-outlined-hover-background:hover svg { fill: var(--color-figmaColors-primary-outlined-hover-background) }
@ -152,6 +160,7 @@
.color-green-dark { color: var(--color-green-dark) } .color-green-dark { color: var(--color-green-dark) }
.color-red { color: var(--color-red) } .color-red { color: var(--color-red) }
.color-red2 { color: var(--color-red2) } .color-red2 { color: var(--color-red2) }
.color-red-light { color: var(--color-red-light) }
.color-red-lightest { color: var(--color-red-lightest) } .color-red-lightest { color: var(--color-red-lightest) }
.color-blue { color: var(--color-blue) } .color-blue { color: var(--color-blue) }
.color-blue2 { color: var(--color-blue2) } .color-blue2 { color: var(--color-blue2) }
@ -171,12 +180,15 @@
.color-transparent { color: var(--color-transparent) } .color-transparent { color: var(--color-transparent) }
.color-cyan { color: var(--color-cyan) } .color-cyan { color: var(--color-cyan) }
.color-amber { color: var(--color-amber) } .color-amber { color: var(--color-amber) }
.color-amber-medium { color: var(--color-amber-medium) }
.color-glassWhite { color: var(--color-glassWhite) } .color-glassWhite { color: var(--color-glassWhite) }
.color-glassMint { color: var(--color-glassMint) } .color-glassMint { color: var(--color-glassMint) }
.color-glassLavander { color: var(--color-glassLavander) } .color-glassLavander { color: var(--color-glassLavander) }
.color-blueLight { color: var(--color-blueLight) } .color-blueLight { color: var(--color-blueLight) }
.color-offWhite { color: var(--color-offWhite) } .color-offWhite { color: var(--color-offWhite) }
.color-disabled-text { color: var(--color-disabled-text) } .color-disabled-text { color: var(--color-disabled-text) }
.color-indigo-lightest { color: var(--color-indigo-lightest) }
.color-indigo { color: var(--color-indigo) }
.color-figmaColors-accent-secondary { color: var(--color-figmaColors-accent-secondary) } .color-figmaColors-accent-secondary { color: var(--color-figmaColors-accent-secondary) }
.color-figmaColors-main { color: var(--color-figmaColors-main) } .color-figmaColors-main { color: var(--color-figmaColors-main) }
.color-figmaColors-primary-outlined-hover-background { color: var(--color-figmaColors-primary-outlined-hover-background) } .color-figmaColors-primary-outlined-hover-background { color: var(--color-figmaColors-primary-outlined-hover-background) }
@ -215,6 +227,7 @@
.hover-green-dark:hover { color: var(--color-green-dark) } .hover-green-dark:hover { color: var(--color-green-dark) }
.hover-red:hover { color: var(--color-red) } .hover-red:hover { color: var(--color-red) }
.hover-red2:hover { color: var(--color-red2) } .hover-red2:hover { color: var(--color-red2) }
.hover-red-light:hover { color: var(--color-red-light) }
.hover-red-lightest:hover { color: var(--color-red-lightest) } .hover-red-lightest:hover { color: var(--color-red-lightest) }
.hover-blue:hover { color: var(--color-blue) } .hover-blue:hover { color: var(--color-blue) }
.hover-blue2:hover { color: var(--color-blue2) } .hover-blue2:hover { color: var(--color-blue2) }
@ -234,12 +247,15 @@
.hover-transparent:hover { color: var(--color-transparent) } .hover-transparent:hover { color: var(--color-transparent) }
.hover-cyan:hover { color: var(--color-cyan) } .hover-cyan:hover { color: var(--color-cyan) }
.hover-amber:hover { color: var(--color-amber) } .hover-amber:hover { color: var(--color-amber) }
.hover-amber-medium:hover { color: var(--color-amber-medium) }
.hover-glassWhite:hover { color: var(--color-glassWhite) } .hover-glassWhite:hover { color: var(--color-glassWhite) }
.hover-glassMint:hover { color: var(--color-glassMint) } .hover-glassMint:hover { color: var(--color-glassMint) }
.hover-glassLavander:hover { color: var(--color-glassLavander) } .hover-glassLavander:hover { color: var(--color-glassLavander) }
.hover-blueLight:hover { color: var(--color-blueLight) } .hover-blueLight:hover { color: var(--color-blueLight) }
.hover-offWhite:hover { color: var(--color-offWhite) } .hover-offWhite:hover { color: var(--color-offWhite) }
.hover-disabled-text:hover { color: var(--color-disabled-text) } .hover-disabled-text:hover { color: var(--color-disabled-text) }
.hover-indigo-lightest:hover { color: var(--color-indigo-lightest) }
.hover-indigo:hover { color: var(--color-indigo) }
.hover-figmaColors-accent-secondary:hover { color: var(--color-figmaColors-accent-secondary) } .hover-figmaColors-accent-secondary:hover { color: var(--color-figmaColors-accent-secondary) }
.hover-figmaColors-main:hover { color: var(--color-figmaColors-main) } .hover-figmaColors-main:hover { color: var(--color-figmaColors-main) }
.hover-figmaColors-primary-outlined-hover-background:hover { color: var(--color-figmaColors-primary-outlined-hover-background) } .hover-figmaColors-primary-outlined-hover-background:hover { color: var(--color-figmaColors-primary-outlined-hover-background) }
@ -278,6 +294,7 @@
.border-green-dark { border-color: var(--color-green-dark) } .border-green-dark { border-color: var(--color-green-dark) }
.border-red { border-color: var(--color-red) } .border-red { border-color: var(--color-red) }
.border-red2 { border-color: var(--color-red2) } .border-red2 { border-color: var(--color-red2) }
.border-red-light { border-color: var(--color-red-light) }
.border-red-lightest { border-color: var(--color-red-lightest) } .border-red-lightest { border-color: var(--color-red-lightest) }
.border-blue { border-color: var(--color-blue) } .border-blue { border-color: var(--color-blue) }
.border-blue2 { border-color: var(--color-blue2) } .border-blue2 { border-color: var(--color-blue2) }
@ -297,12 +314,15 @@
.border-transparent { border-color: var(--color-transparent) } .border-transparent { border-color: var(--color-transparent) }
.border-cyan { border-color: var(--color-cyan) } .border-cyan { border-color: var(--color-cyan) }
.border-amber { border-color: var(--color-amber) } .border-amber { border-color: var(--color-amber) }
.border-amber-medium { border-color: var(--color-amber-medium) }
.border-glassWhite { border-color: var(--color-glassWhite) } .border-glassWhite { border-color: var(--color-glassWhite) }
.border-glassMint { border-color: var(--color-glassMint) } .border-glassMint { border-color: var(--color-glassMint) }
.border-glassLavander { border-color: var(--color-glassLavander) } .border-glassLavander { border-color: var(--color-glassLavander) }
.border-blueLight { border-color: var(--color-blueLight) } .border-blueLight { border-color: var(--color-blueLight) }
.border-offWhite { border-color: var(--color-offWhite) } .border-offWhite { border-color: var(--color-offWhite) }
.border-disabled-text { border-color: var(--color-disabled-text) } .border-disabled-text { border-color: var(--color-disabled-text) }
.border-indigo-lightest { border-color: var(--color-indigo-lightest) }
.border-indigo { border-color: var(--color-indigo) }
.border-figmaColors-accent-secondary { border-color: var(--color-figmaColors-accent-secondary) } .border-figmaColors-accent-secondary { border-color: var(--color-figmaColors-accent-secondary) }
.border-figmaColors-main { border-color: var(--color-figmaColors-main) } .border-figmaColors-main { border-color: var(--color-figmaColors-main) }
.border-figmaColors-primary-outlined-hover-background { border-color: var(--color-figmaColors-primary-outlined-hover-background) } .border-figmaColors-primary-outlined-hover-background { border-color: var(--color-figmaColors-primary-outlined-hover-background) }
@ -341,6 +361,7 @@
.bg-green-dark { background-color: var(--color-green-dark) } .bg-green-dark { background-color: var(--color-green-dark) }
.bg-red { background-color: var(--color-red) } .bg-red { background-color: var(--color-red) }
.bg-red2 { background-color: var(--color-red2) } .bg-red2 { background-color: var(--color-red2) }
.bg-red-light { background-color: var(--color-red-light) }
.bg-red-lightest { background-color: var(--color-red-lightest) } .bg-red-lightest { background-color: var(--color-red-lightest) }
.bg-blue { background-color: var(--color-blue) } .bg-blue { background-color: var(--color-blue) }
.bg-blue2 { background-color: var(--color-blue2) } .bg-blue2 { background-color: var(--color-blue2) }
@ -360,12 +381,15 @@
.bg-transparent { background-color: var(--color-transparent) } .bg-transparent { background-color: var(--color-transparent) }
.bg-cyan { background-color: var(--color-cyan) } .bg-cyan { background-color: var(--color-cyan) }
.bg-amber { background-color: var(--color-amber) } .bg-amber { background-color: var(--color-amber) }
.bg-amber-medium { background-color: var(--color-amber-medium) }
.bg-glassWhite { background-color: var(--color-glassWhite) } .bg-glassWhite { background-color: var(--color-glassWhite) }
.bg-glassMint { background-color: var(--color-glassMint) } .bg-glassMint { background-color: var(--color-glassMint) }
.bg-glassLavander { background-color: var(--color-glassLavander) } .bg-glassLavander { background-color: var(--color-glassLavander) }
.bg-blueLight { background-color: var(--color-blueLight) } .bg-blueLight { background-color: var(--color-blueLight) }
.bg-offWhite { background-color: var(--color-offWhite) } .bg-offWhite { background-color: var(--color-offWhite) }
.bg-disabled-text { background-color: var(--color-disabled-text) } .bg-disabled-text { background-color: var(--color-disabled-text) }
.bg-indigo-lightest { background-color: var(--color-indigo-lightest) }
.bg-indigo { background-color: var(--color-indigo) }
.bg-figmaColors-accent-secondary { background-color: var(--color-figmaColors-accent-secondary) } .bg-figmaColors-accent-secondary { background-color: var(--color-figmaColors-accent-secondary) }
.bg-figmaColors-main { background-color: var(--color-figmaColors-main) } .bg-figmaColors-main { background-color: var(--color-figmaColors-main) }
.bg-figmaColors-primary-outlined-hover-background { background-color: var(--color-figmaColors-primary-outlined-hover-background) } .bg-figmaColors-primary-outlined-hover-background { background-color: var(--color-figmaColors-primary-outlined-hover-background) }

12
frontend/app/styles/general.css
View file

@ -29,23 +29,23 @@
.info.info.info.info.info { /* BAD HACK >:) */ .info.info.info.info.info { /* BAD HACK >:) */
background-color: rgba(242, 248, 255, 0.6); background-color: var(--color-glassMint);
&:hover { &:hover {
background-color: rgba(242, 248, 255, 1); background-color: var(--color-indigo-lightest);
} }
} }
.warn.warn.warn.warn { .warn.warn.warn.warn {
background-color: rgba(253, 248, 240, 0.6); background-color: var(--color-amber);
&:hover { &:hover {
background-color: rgba(253, 248, 240, 1); background-color: var(--color-amber-medium);
} }
} }
.error.error.error.error { .error.error.error.error {
background-color: rgba(252, 242, 242, 0.6); background-color: var(--color-red-light);
&:hover { &:hover {
background-color: rgba(252, 242, 242, 1); background-color: var(--color-red-lightest);
} }
} }

11
frontend/app/theme/colors.js
View file

@ -25,7 +25,8 @@ module.exports = {
'green-dark': '#2C9848', 'green-dark': '#2C9848',
red: '#cc0000', red: '#cc0000',
red2: '#F5A623', red2: '#F5A623',
'red-lightest': 'rgba(204, 0, 0, 0.1)', 'red-light': 'oklch(93.6% 0.032 17.717)',
'red-lightest': 'oklch(97.1% 0.013 17.38)',
blue: '#366CD9', blue: '#366CD9',
blue2: '#0076FF', blue2: '#0076FF',
'active-blue': '#F6F7FF', 'active-blue': '#F6F7FF',
@ -46,12 +47,15 @@ module.exports = {
transparent: 'transparent', transparent: 'transparent',
cyan: '#EBF4F5', cyan: '#EBF4F5',
amber: 'oklch(98.7% 0.022 95.277)', amber: 'oklch(98.7% 0.022 95.277)',
'amber-medium': 'oklch(96.2% 0.059 95.617)',
glassWhite: 'rgba(255, 255, 255, 0.5)', glassWhite: 'rgba(255, 255, 255, 0.5)',
glassMint: 'rgba(248, 255, 254, 0.5)', glassMint: 'rgba(248, 255, 254, 0.5)',
glassLavander: 'rgba(243, 241, 255, 0.5)', glassLavander: 'rgba(243, 241, 255, 0.5)',
blueLight: 'rgba(235, 235, 255, 1)', blueLight: 'rgba(235, 235, 255, 1)',
offWhite: 'rgba(250, 250, 255, 1)', offWhite: 'rgba(250, 250, 255, 1)',
'disabled-text': 'rgba(0,0,0, 0.38)', 'disabled-text': 'rgba(0,0,0, 0.38)',
'indigo-lightest': 'oklch(96.2% 0.018 272.314)',
'indigo': 'oklch(58.5% 0.233 277.117)',
figmaColors: { figmaColors: {
'accent-secondary': 'rgba(62, 170, 175, 1)', 'accent-secondary': 'rgba(62, 170, 175, 1)',
@ -79,6 +83,11 @@ module.exports = {
'background': 'oklch(20.5% 0 0)', 'background': 'oklch(20.5% 0 0)',
'surface': '#1E1E1E', 'surface': '#1E1E1E',
amber: 'oklch(41.4% 0.112 45.904)', amber: 'oklch(41.4% 0.112 45.904)',
'amber-medium': 'oklch(55.5% 0.163 48.998)',
'red-lightest': 'oklch(25.8% 0.092 26.042)',
'indigo-lightest': 'oklch(35.9% 0.144 278.697)',
'indigo': 'oklch(58.5% 0.233 277.117)',
'red-light': 'oklch(39.6% 0.141 25.723)',
'gray-light-shade': 'oklch(37.1% 0 0)', 'gray-light-shade': 'oklch(37.1% 0 0)',
'gray-lightest': 'oklch(26.9% 0 0)', 'gray-lightest': 'oklch(26.9% 0 0)',

6
frontend/tests/mocks/sessionResponse.js
View file

@ -1292,7 +1292,7 @@ export const session = {
sessionId: 8119081922378909, sessionId: 8119081922378909,
messageId: 37522, messageId: 37522,
timestamp: 1673887715900, timestamp: 1673887715900,
label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50', label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-lightest',
url: 'app.openreplay.com/5095/session/8118843021704432', url: 'app.openreplay.com/5095/session/8118843021704432',
selector: selector:
'#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade', '#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade',
@ -2780,7 +2780,7 @@ export const session = {
sessionId: 8119081922378909, sessionId: 8119081922378909,
messageId: 67718, messageId: 67718,
timestamp: 1673888012602, timestamp: 1673888012602,
label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50', label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-lightest',
url: 'app.openreplay.com/5095/session/8118633985734291', url: 'app.openreplay.com/5095/session/8118633985734291',
selector: selector:
'#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade', '#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade',
@ -4046,7 +4046,7 @@ export const session = {
sessionId: 8119081922378909, sessionId: 8119081922378909,
messageId: 90402, messageId: 90402,
timestamp: 1673888133249, timestamp: 1673888133249,
label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50', label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-lightest',
url: 'app.openreplay.com/5095/session/8118556979885624', url: 'app.openreplay.com/5095/session/8118556979885624',
selector: selector:
'#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade', '#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade',

537
frontend/yarn.lock
View file

File diff suppressed because it is too large Load diff

2
spot/entrypoints/audio/index.html
View file

@ -8,7 +8,7 @@
<link href="../../assets/main.css" rel="stylesheet" /> <link href="../../assets/main.css" rel="stylesheet" />
</head> </head>
<body> <body>
<div class="w-full h-screen flex flex-col justify-center items-center bg-indigo-50 p-10 gap-5"> <div class="w-full h-screen flex flex-col justify-center items-center bg-indigo-lightest p-10 gap-5">

2
spot/entrypoints/content/SavingControls.tsx
View file

@ -380,7 +380,7 @@ function SavingControls({
) : null} ) : null}
<div class={"flex items-center gap-2"}> <div class={"flex items-center gap-2"}>
<div <div
class={`${playing() ? "" : "bg-indigo-100"} cursor-pointer btn btn-ghost btn-circle btn-sm hover:bg-indigo-50 border border-slate-100`} class={`${playing() ? "" : "bg-indigo-100"} cursor-pointer btn btn-ghost btn-circle btn-sm hover:bg-indigo-lightest border border-slate-100`}
> >
{playing() ? ( {playing() ? (
<div <div

10
spot/entrypoints/popup/Settings.tsx
View file

@ -109,7 +109,7 @@ function Settings({ goBack }: { goBack: () => void }) {
<div class={"flex flex-col"}> <div class={"flex flex-col"}>
<div class={"flex gap-2 items-center justify-between p-4"}> <div class={"flex gap-2 items-center justify-between p-4"}>
<button <button
class="btn btn-xs btn-circle bg-white hover:bg-indigo-50" class="btn btn-xs btn-circle bg-white hover:bg-indigo-lightest"
onClick={goBack} onClick={goBack}
> >
<img src={arrowLeft} alt={"Go back"} /> <img src={arrowLeft} alt={"Go back"} />
@ -124,7 +124,7 @@ function Settings({ goBack }: { goBack: () => void }) {
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="p-4 border-b border-slate-300 hover:bg-indigo-50"> <div class="p-4 border-b border-slate-300 hover:bg-indigo-lightest">
<div class="flex flex-row justify-between items-center"> <div class="flex flex-row justify-between items-center">
<p class="font-semibold mb-1 flex items-center">View Recording</p> <p class="font-semibold mb-1 flex items-center">View Recording</p>
@ -142,7 +142,7 @@ function Settings({ goBack }: { goBack: () => void }) {
</p> </p>
</div> </div>
<div class="flex flex-col border-b border-slate-300 cursor-default justify-between p-4 hover:bg-indigo-50"> <div class="flex flex-col border-b border-slate-300 cursor-default justify-between p-4 hover:bg-indigo-lightest">
<div class="flex flex-row justify-between items-center"> <div class="flex flex-row justify-between items-center">
<p class="font-semibold mb-1 flex items-center"> <p class="font-semibold mb-1 flex items-center">
<span>Include DevTools</span> <span>Include DevTools</span>
@ -164,7 +164,7 @@ function Settings({ goBack }: { goBack: () => void }) {
</p> </p>
</div> </div>
<div class="p-4 border-b border-slate-300 hover:bg-indigo-50 cursor-default"> <div class="p-4 border-b border-slate-300 hover:bg-indigo-lightest cursor-default">
<div class="flex flex-row justify-between items-center"> <div class="flex flex-row justify-between items-center">
<p class="font-semibold mb-1 flex items-center"> <p class="font-semibold mb-1 flex items-center">
<span>Use Debugger</span> <span>Use Debugger</span>
@ -185,7 +185,7 @@ function Settings({ goBack }: { goBack: () => void }) {
</p> </p>
</div> </div>
<div class="p-4 hover:bg-indigo-50 cursor-default"> <div class="p-4 hover:bg-indigo-lightest cursor-default">
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">
<p class="font-semibold mb-1">Ingest Point</p> <p class="font-semibold mb-1">Ingest Point</p>
<div> <div>

2
spot/entrypoints/popup/components/AudioPicker.tsx
View file

@ -19,7 +19,7 @@ const AudioPicker: Component<AudioPickerProps> = (props) => {
return ( return (
<div class="inline-flex items-center gap-1 text-xs"> <div class="inline-flex items-center gap-1 text-xs">
<div <div
class="p-1 cursor-pointer btn btn-xs bg-white hover:bg-indigo-50 pointer-events-auto tooltip tooltip-right text-sm font-normal" class="p-1 cursor-pointer btn btn-xs bg-white hover:bg-indigo-lightest pointer-events-auto tooltip tooltip-right text-sm font-normal"
data-tip={props.mic() ? "Switch Off Mic" : "Switch On Mic"} data-tip={props.mic() ? "Switch Off Mic" : "Switch On Mic"}
onClick={props.onMicToggle} onClick={props.onMicToggle}
> >

6
spot/entrypoints/popup/components/Header.tsx
View file

@ -35,7 +35,7 @@ const Header: Component<HeaderProps> = (props) => {
<div class="ml-auto flex items-center gap-2"> <div class="ml-auto flex items-center gap-2">
<div class="text-sm tooltip tooltip-bottom" data-tip="My Spots"> <div class="text-sm tooltip tooltip-bottom" data-tip="My Spots">
<div onClick={openHomePage}> <div onClick={openHomePage}>
<div class="cursor-pointer p-2 hover:bg-indigo-50 rounded-full"> <div class="cursor-pointer p-2 hover:bg-indigo-lightest rounded-full">
<HomePageSvg /> <HomePageSvg />
</div> </div>
</div> </div>
@ -50,7 +50,7 @@ const Header: Component<HeaderProps> = (props) => {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div class="cursor-pointer p-2 hover:bg-indigo-50 rounded-full"> <div class="cursor-pointer p-2 hover:bg-indigo-lightest rounded-full">
<SlackSvg /> <SlackSvg />
</div> </div>
</a> </a>
@ -61,7 +61,7 @@ const Header: Component<HeaderProps> = (props) => {
data-tip="Settings" data-tip="Settings"
onClick={props.openSettings} onClick={props.openSettings}
> >
<div class="cursor-pointer p-2 hover:bg-indigo-50 rounded-full"> <div class="cursor-pointer p-2 hover:bg-indigo-lightest rounded-full">
<SettingsSvg /> <SettingsSvg />
</div> </div>
</div> </div>