Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode audit style updates #2152

Merged
merged 11 commits into from
Jun 12, 2024
Merged

Dark mode audit style updates #2152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b330d40
Update Menu component border
laurakwhit Jun 10, 2024
f127998
Add border and make cancel a ghost button by default in Modal component
laurakwhit Jun 10, 2024
deca758
Update border in DayOfMonthPicker component
laurakwhit Jun 10, 2024
df22900
Audit and update Badge types and colors
laurakwhit Jun 10, 2024
ed0c0bb
Add interactive-table-hover background color and update table row hov…
laurakwhit Jun 10, 2024
1d825f8
Revert green status color
laurakwhit Jun 10, 2024
7b367a7
Keep text and background color in dark mode for timeline
laurakwhit Jun 11, 2024
3ce7c07
Add light prop to Link component to set text to off white
laurakwhit Jun 12, 2024
acff917
Remove shadow and fix border width on TopNav
laurakwhit Jun 12, 2024
d9a254f
Fix various border colors and radius
laurakwhit Jun 12, 2024
eb354c0
Fix interactive ghost hover color
laurakwhit Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/lib/components/batch-operations/header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@

const jobStateToBadgeType: Record<BatchOperationState, BadgeType> = {
Completed: 'success',
Running: 'running',
Failed: 'error',
Unspecified: 'unspecified',
Running: 'primary',
Failed: 'danger',
Unspecified: undefined,
};
</script>

Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/batch-operations/table.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@

const jobStateToBadgeType: Record<BatchOperationState, BadgeType> = {
Completed: 'success',
Running: 'running',
Failed: 'error',
Unspecified: 'unspecified',
Running: 'primary',
Failed: 'danger',
Unspecified: undefined,
};
</script>

Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/event/event-group-details.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,11 @@

<style lang="postcss">
.row:hover {
@apply surface-subtle cursor-pointer bg-fixed;
@apply cursor-pointer bg-interactive-table-hover bg-fixed;
}

.active {
@apply surface-subtle;
@apply bg-interactive-table-hover;
}

.failure {
Expand Down
36 changes: 18 additions & 18 deletions src/lib/components/event/event-history-timeline.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
const link = renderComponentToHTML(Link, {
href,
text: sanitizeHtml(groupName),
class: 'flex gap-2 items-center',
class: 'flex gap-2 items-center !text-space-black',
});
return link;
}
Expand Down Expand Up @@ -337,7 +337,7 @@
display: flex;
align-items: center;

@apply !text-primary;
@apply !text-space-black;
}

:global(.vis-timeline) {
Expand All @@ -358,7 +358,7 @@
}

:global(.vis-content, .vis-group) {
@apply surface-secondary;
@apply bg-off-white;
}

:global(.vis-timeline .vis-item) {
Expand Down Expand Up @@ -394,7 +394,7 @@
border-color: theme(colors.off-black);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.workflow) {
Expand All @@ -408,7 +408,7 @@
border-color: theme(colors.red.300);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.Failed) {
Expand All @@ -420,7 +420,7 @@
border-color: theme(colors.yellow.300);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.Terminated, .vis-item.vis-point.CancelRequested) {
Expand All @@ -432,7 +432,7 @@
border-color: theme(colors.orange.300);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.TimedOut) {
Expand All @@ -444,7 +444,7 @@
border-color: theme(colors.slate.100);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.Canceled, .vis-item.vis-point.Unspecified) {
Expand All @@ -456,7 +456,7 @@
border-color: theme(colors.pink.300);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.Fired) {
Expand All @@ -468,7 +468,7 @@
border-color: theme(colors.indigo.300);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.Scheduled) {
Expand All @@ -485,7 +485,7 @@
border-color: theme(colors.blue.300);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(
Expand All @@ -508,31 +508,31 @@
border-color: theme(colors.purple.300);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.ContinuedAsNew) {
color: theme(colors.purple.300);
}

:global(.vis-item.vis-range.Completed, .vis-item.vis-range.Open) {
background-color: #71d375;
border-color: #71d375;
background-color: theme(colors.green.300);
border-color: theme(colors.green.300);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.Completed, .vis-item.vis-point.Open) {
color: #71d375;
color: theme(colors.green.300);
}

:global(.vis-item.vis-range.Signaled) {
background-color: theme(colors.pink.200);
border-color: theme(colors.pink.200);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.Signaled) {
Expand All @@ -544,7 +544,7 @@
border-color: theme(colors.yellow.200);
border-radius: 9999px;
border-width: 2px;
color: theme(colors.black);
color: theme(colors.space-black);
}

:global(.vis-item.vis-point.Paused) {
Expand Down
12 changes: 6 additions & 6 deletions src/lib/components/event/event-summary-row.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,11 +189,11 @@
}

.row:hover {
@apply cursor-pointer bg-gradient-to-br from-blue-100 to-purple-100 bg-fixed dark:surface-subtle dark:bg-none;
@apply cursor-pointer bg-interactive-table-hover dark:bg-none;
}

.expanded.row {
@apply bg-blue-50 dark:surface-subtle;
@apply bg-interactive-table-hover;
}

.failure {
Expand Down Expand Up @@ -237,21 +237,21 @@
}

.active {
@apply cursor-pointer bg-gradient-to-br from-blue-100 to-purple-100 bg-fixed dark:surface-subtle dark:bg-none;
@apply cursor-pointer bg-interactive-table-hover bg-fixed dark:bg-none;
}

.canceled:hover,
.active.canceled {
@apply bg-gradient-to-br from-yellow-100 to-yellow-200 bg-fixed dark:bg-yellow-600 dark:bg-none;
@apply bg-yellow-200 bg-fixed dark:bg-yellow-600 dark:bg-none;
}

.failure:hover,
.active.failure {
@apply bg-gradient-to-br from-red-100 to-red-200 bg-fixed dark:bg-red-900 dark:bg-none;
@apply bg-red-200 bg-fixed dark:bg-red-900 dark:bg-none;
}

.terminated:hover,
.active.terminated {
@apply bg-gradient-to-br from-pink-100 to-pink-200 bg-fixed dark:bg-pink-500 dark:bg-none;
@apply bg-pink-200 bg-fixed dark:bg-pink-500 dark:bg-none;
}
</style>
6 changes: 3 additions & 3 deletions src/lib/components/lines-and-dots/svg/group-details-text.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
{/if} -->
{:else if shouldDisplayAsExecutionLink(key)}
<Link
inverse
light
href={routeForEventHistory({
namespace,
workflow,
Expand All @@ -111,15 +111,15 @@
>
{:else if shouldDisplayChildWorkflowLink(key, attributes)}
<Link
inverse
light
href={routeForEventHistory({
namespace: attributes?.namespace || namespace,
workflow: attributes.workflowExecutionWorkflowId,
run: attributes.workflowExecutionRunId,
})}>{value}</Link
>
{:else if shouldDisplayAsTaskQueueLink(key)}
<Link inverse href={routeForTaskQueue({ namespace, queue: value })}
<Link light href={routeForTaskQueue({ namespace, queue: value })}
>{value}</Link
>
{:else}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/schedule/schedule-form-view.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@
<h1 class="font-base text-2xl">{title}</h1>
</header>
<form class="mb-4 flex w-full flex-col gap-4 md:w-2/3 xl:w-1/2">
<Alert intent="error" title="" hidden={!$error} bold>
<Alert intent="error" title="" hidden={!$error}>
{$error}
</Alert>
<div class="w-full">
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/top-nav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
<svelte:window bind:innerWidth={screenWidth} />

<nav
class="surface-primary sticky top-0 z-40 flex w-full flex-col items-center justify-end border-b-2 border-subtle p-1 px-4 shadow-md md:flex-row md:px-8"
class="surface-primary sticky top-0 z-40 flex w-full flex-col items-center justify-end border-b border-subtle p-1 px-4 md:flex-row md:px-8"
data-testid="top-nav"
class:bg-red-50={$dataEncoder.hasError && showNamespaceSpecificNav}
aria-label={translate('common.main')}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/workflow-status.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
status: {
Running: 'bg-blue-300',
TimedOut: 'bg-orange-300',
Completed: 'bg-[#71D375]',
Completed: 'bg-green-300',
Failed: 'bg-red-300',
ContinuedAsNew: 'bg-purple-300',
Canceled: 'bg-slate-100',
Expand All @@ -59,7 +59,7 @@
Unspecified: 'bg-slate-100',
Scheduled: 'bg-indigo-300',
Started: 'bg-blue-300',
Open: 'bg-[#71D375]',
Open: 'bg-green-300',
New: 'bg-blue-300',
Initiated: 'bg-blue-300',
Fired: 'bg-pink-300',
Expand Down
8 changes: 4 additions & 4 deletions src/lib/components/workflow/pending-activities.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
<h4 class="pending-activity-detail-header">
{translate('workflows.activity-type')}
</h4>
<Badge type={failed ? 'error' : undefined}>
<Badge type={failed ? 'danger' : undefined}>
{pendingActivity.activityType}
</Badge>
</div>
Expand All @@ -85,7 +85,7 @@
<h4 class="pending-activity-detail-header">
{translate('workflows.attempt')}
</h4>
<Badge type={failed ? 'error' : undefined}>
<Badge type={failed ? 'danger' : undefined}>
{#if failed}
<Icon name="retry" />
{/if}
Expand All @@ -96,7 +96,7 @@
<h4 class="pending-activity-detail-header">
{translate('workflows.attempts-left')}
</h4>
<Badge type={failed ? 'error' : undefined}>
<Badge type={failed ? 'danger' : undefined}>
{formatAttemptsLeft(
pendingActivity.maximumAttempts,
pendingActivity.attempt,
Expand All @@ -108,7 +108,7 @@
<h4 class="pending-activity-detail-header">
{translate('workflows.next-retry')}
</h4>
<Badge type={failed ? 'error' : undefined}>
<Badge type={failed ? 'danger' : undefined}>
{toTimeDifference({
date: pendingActivity.scheduledTime,
negativeDefault: 'None',
Expand Down
1 change: 0 additions & 1 deletion src/lib/components/workflow/workflow-call-stack-error.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
{#if runningWithNoWorkers}
<div class="mb-4" in:fly={{ duration: 200, delay: 100 }}>
<Alert
bold
icon="warning"
intent="warning"
title={translate('workflows.workflow-error-no-workers-title')}
Expand Down
1 change: 0 additions & 1 deletion src/lib/components/workflow/workflow-compatibility-error.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
{#if !runningWithNoWorkers && runningWithNoCompatibleWorkers}
<div class="mb-4" in:fly={{ duration: 200, delay: 100 }}>
<Alert
bold
icon="warning"
intent="warning"
title={translate('workflows.workflow-error-no-compatible-workers-title')}
Expand Down
1 change: 0 additions & 1 deletion src/lib/components/workflow/workflow-typed-error.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@

{#if cause}
<Alert
bold
icon="warning"
intent="warning"
title={translate(`typed-errors.${cause}.title`)}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/workflow/workflows-summary-row.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
};
</script>

<TableRow class="hover:surface-subtle">
<TableRow class="hover:bg-interactive-table-hover">
<td>
<WorkflowStatus
status={workflow.status}
Expand Down
Loading
Loading