Skip to content

Commit

Permalink
fix(Dashboard): improved light theme colors for graph and "..." dropd…
Browse files Browse the repository at this point in the history
…owns

Signed-off-by: Jean-Baptiste Bianchi <[email protected]>
  • Loading branch information
JBBianchi committed Oct 30, 2024
1 parent e7c6310 commit 6ba3e73
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 14 deletions.
25 changes: 17 additions & 8 deletions src/dashboard/Synapse.Dashboard/wwwroot/css/app.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/dashboard/Synapse.Dashboard/wwwroot/css/app.min.css

Large diffs are not rendered by default.

13 changes: 9 additions & 4 deletions src/dashboard/Synapse.Dashboard/wwwroot/css/graph.scss
Original file line number Diff line number Diff line change
Expand Up @@ -49,16 +49,20 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
cursor: grabbing;
}
}

:root {
--graph-symbol-color: #{$body-color-dark};
}
[data-bs-theme="dark"] {
--graph-symbol-color: #{$body-color-dark};
.graph-container, .graph-canvas {
--stroke-color: #{$mute};
--fill-color: #{$dark-bg-subtle-dark};
}
}

.graph-container, .graph-canvas {
--stroke-color: #{$mute};
--fill-color: #{$body-bg};
--stroke-color: #{$dark};
--fill-color: #{$gray-700};
display: flex;
flex-direction: column;

Expand Down Expand Up @@ -124,6 +128,7 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #{$body-color-dark};

h3 {
margin-bottom: calc($spacer / 4);
Expand Down Expand Up @@ -208,7 +213,7 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
}

.symbol {
fill: var(--bs-body-color);
fill: var(--graph-symbol-color);
}

.start-node circle {
Expand Down
3 changes: 2 additions & 1 deletion src/dashboard/Synapse.Dashboard/wwwroot/css/theme/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@ header.header.navbar {
$value: map-get($theme-colors,"light");
@include button-variant(
transparent,
$value,
transparent,
$color: $body-color,
$hover-background: shade-color($value, $btn-hover-bg-shade-amount),
$hover-border: shade-color($value, $btn-hover-border-shade-amount),
$active-background: shade-color($value, $btn-active-bg-shade-amount),
Expand Down

0 comments on commit 6ba3e73

Please sign in to comment.