From 1d1ed616b689818eefd7b4a80ba8933c454afe27 Mon Sep 17 00:00:00 2001 From: JCNoguera Date: Wed, 24 Apr 2024 11:17:49 +0200 Subject: [PATCH 1/5] feat: improve block colors in visualizer nova --- client/src/app/components/nova/StatusPill.scss | 8 ++++---- .../visualizer-vivagraph/Visualizer.scss | 2 +- .../definitions/constants.ts | 18 +++++++++--------- client/src/scss/variables.scss | 5 +++++ 4 files changed, 19 insertions(+), 14 deletions(-) diff --git a/client/src/app/components/nova/StatusPill.scss b/client/src/app/components/nova/StatusPill.scss index 6467cdc5b..d166bd7d6 100644 --- a/client/src/app/components/nova/StatusPill.scss +++ b/client/src/app/components/nova/StatusPill.scss @@ -25,8 +25,8 @@ &.status__ { &success { - background-color: var(--message-confirmed-bg); - color: $mint-green-7; + background-color: $block-confirmed; + color: #3b3b3b; } &error { @@ -34,8 +34,8 @@ } &pending { - background-color: var(--light-bg); - color: #8493ad; + background-color: $block-pending; + color: white; } } } diff --git a/client/src/features/visualizer-vivagraph/Visualizer.scss b/client/src/features/visualizer-vivagraph/Visualizer.scss index 318546499..f5c1efdbd 100644 --- a/client/src/features/visualizer-vivagraph/Visualizer.scss +++ b/client/src/features/visualizer-vivagraph/Visualizer.scss @@ -50,7 +50,7 @@ left: 0; width: 100%; height: 100%; - background: var(---body-background); + background: var(--footer-bg-color); } .selected-node { diff --git a/client/src/features/visualizer-vivagraph/definitions/constants.ts b/client/src/features/visualizer-vivagraph/definitions/constants.ts index 64785d282..f1e9b0d72 100644 --- a/client/src/features/visualizer-vivagraph/definitions/constants.ts +++ b/client/src/features/visualizer-vivagraph/definitions/constants.ts @@ -4,7 +4,8 @@ import { ThemeMode } from "./enums"; export const MAX_VISIBLE_BLOCKS = 2500; // colors -export const ACCEPTED_BLOCK_COLORS: string[] = ["#0101FF", "#0000DB", "#0101AB"]; +export const PENDING_BLOCK_COLOR = "#5C84FA"; +export const ACCEPTED_BLOCK_COLOR = "#C026D3"; export const CONFIRMED_BLOCK_COLOR = "#3CE5E1"; export const ORPHANED_BLOCK_COLOR = "#C026D3"; export const DROPPED_BLOCK_COLOR = ORPHANED_BLOCK_COLOR; @@ -18,23 +19,22 @@ export const EDGE_COLOR_BEFORE: number = 0x0000ff55; // colors by theme export const PENDING_BLOCK_COLOR_LIGHTMODE = "#A6C3FC"; export const PENDING_BLOCK_COLOR_DARKMODE = "#5C84FA"; -export const FINALIZED_BLOCK_COLOR_LIGHTMODE = "#5C84FA"; -export const FINALIZED_BLOCK_COLOR_DARKMODE = "#000081"; +export const FINALIZED_BLOCK_COLOR = "#0000DB"; export const THEME_BLOCK_COLORS: Record> = { [ThemeMode.Dark]: { - accepted: ACCEPTED_BLOCK_COLORS, - pending: PENDING_BLOCK_COLOR_DARKMODE, + accepted: ACCEPTED_BLOCK_COLOR, + pending: PENDING_BLOCK_COLOR, confirmed: CONFIRMED_BLOCK_COLOR, - finalized: FINALIZED_BLOCK_COLOR_DARKMODE, + finalized: FINALIZED_BLOCK_COLOR, dropped: DROPPED_BLOCK_COLOR, orphaned: ORPHANED_BLOCK_COLOR, }, [ThemeMode.Light]: { - accepted: ACCEPTED_BLOCK_COLORS, - pending: PENDING_BLOCK_COLOR_LIGHTMODE, + accepted: ACCEPTED_BLOCK_COLOR, + pending: PENDING_BLOCK_COLOR, confirmed: CONFIRMED_BLOCK_COLOR, - finalized: FINALIZED_BLOCK_COLOR_LIGHTMODE, + finalized: FINALIZED_BLOCK_COLOR, dropped: DROPPED_BLOCK_COLOR, orphaned: ORPHANED_BLOCK_COLOR, }, diff --git a/client/src/scss/variables.scss b/client/src/scss/variables.scss index 323012aa8..3832d9f27 100644 --- a/client/src/scss/variables.scss +++ b/client/src/scss/variables.scss @@ -77,3 +77,8 @@ $iota2-red-600: #e73131; $iota2-red-700: #cf1919; $iota2-red-800: #8e0b0b; $iota2-red-900: #8a0000; + +$block-pending: #5c84fa; +$block-accepted: #c026d3; +$block-confirmed: #3ce5e1; +$block-finalized: #0000db; From 3c3f1cb1e496472c1a49b3cd66a184f982319bb2 Mon Sep 17 00:00:00 2001 From: JCNoguera Date: Wed, 24 Apr 2024 11:25:12 +0200 Subject: [PATCH 2/5] fix: remove whitespace --- client/src/scss/variables.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/scss/variables.scss b/client/src/scss/variables.scss index 3832d9f27..0e654617d 100644 --- a/client/src/scss/variables.scss +++ b/client/src/scss/variables.scss @@ -77,7 +77,6 @@ $iota2-red-600: #e73131; $iota2-red-700: #cf1919; $iota2-red-800: #8e0b0b; $iota2-red-900: #8a0000; - $block-pending: #5c84fa; $block-accepted: #c026d3; $block-confirmed: #3ce5e1; From 547322122ddc512bd487d683264ace571fb3bde0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= Date: Wed, 24 Apr 2024 18:23:25 +0200 Subject: [PATCH 3/5] empty-commit From 1ce9a563422bbaa0fe2c7e053b2c67becb0ef12c Mon Sep 17 00:00:00 2001 From: JCNoguera Date: Thu, 25 Apr 2024 10:43:12 +0200 Subject: [PATCH 4/5] styles: improve status pill by adding a nova success color --- client/src/app/components/nova/StatusPill.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/app/components/nova/StatusPill.scss b/client/src/app/components/nova/StatusPill.scss index d166bd7d6..3cfa27635 100644 --- a/client/src/app/components/nova/StatusPill.scss +++ b/client/src/app/components/nova/StatusPill.scss @@ -25,8 +25,8 @@ &.status__ { &success { - background-color: $block-confirmed; - color: #3b3b3b; + background-color: #0000db; + color: white; } &error { @@ -34,8 +34,8 @@ } &pending { - background-color: $block-pending; - color: white; + background-color: var(--light-bg); + color: #8493ad; } } } From 3ad34daf34e6a35b90cdeb4310c3baf2fb9be85e Mon Sep 17 00:00:00 2001 From: JCNoguera Date: Thu, 25 Apr 2024 10:43:44 +0200 Subject: [PATCH 5/5] chore: revert variables --- client/src/scss/variables.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/src/scss/variables.scss b/client/src/scss/variables.scss index 0e654617d..323012aa8 100644 --- a/client/src/scss/variables.scss +++ b/client/src/scss/variables.scss @@ -77,7 +77,3 @@ $iota2-red-600: #e73131; $iota2-red-700: #cf1919; $iota2-red-800: #8e0b0b; $iota2-red-900: #8a0000; -$block-pending: #5c84fa; -$block-accepted: #c026d3; -$block-confirmed: #3ce5e1; -$block-finalized: #0000db;