Merge branch 'feat/nova-visualizer/update-block-colors' of github.com…

…:iotaledger/explorer into feat/nova-visualizer/update-block-colors
iotaledger · Feb 28, 2024 · d1cc4e9 · d1cc4e9
2 parents cee811e + 5eb6b4d
commit d1cc4e9
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 11 deletions.
diff --git a/api/src/models/db/uiTheme.ts b/api/src/models/db/uiTheme.ts
@@ -1,6 +1,7 @@
 export const IOTA_UI = "iota_ui";
+export const IOTA2_UI = "iota2_ui";
 export const SHIMMER_UI = "shimmer_ui";
 
-const themes = [IOTA_UI, SHIMMER_UI] as const;
+const themes = [IOTA_UI, IOTA2_UI, SHIMMER_UI] as const;
 
 export type Theme = (typeof themes)[number];
diff --git a/client/src/app/App.tsx b/client/src/app/App.tsx
@@ -14,6 +14,7 @@ import { isShimmerUiTheme } from "~helpers/networkHelper";
 import { scrollToTop } from "~helpers/pageUtils";
 import { INetwork } from "~models/config/INetwork";
 import { MAINNET } from "~models/config/networkType";
+import { IOTA_UI, IOTA2_UI, SHIMMER_UI } from "~models/config/uiTheme";
 import { NOVA, STARDUST } from "~models/config/protocolVersion";
 import { NetworkService } from "~services/networkService";
 import { NodeInfoService as NodeInfoServiceStardust } from "~services/stardust/nodeInfoService";
@@ -58,10 +59,19 @@ const App: React.FC<RouteComponentProps<AppRouteProps>> = ({
     }
 
     const body = document.querySelector("body");
-    if (isShimmer) {
-        body?.classList.add("shimmer");
-    } else {
-        body?.classList.remove("shimmer");
+    switch (networkConfig?.uiTheme) {
+        case SHIMMER_UI:
+            body?.classList.add("shimmer");
+            body?.classList.remove("iota2");
+            break;
+        case IOTA_UI:
+            body?.classList.remove("shimmer");
+            body?.classList.remove("iota2");
+            break;
+        case IOTA2_UI:
+            body?.classList.remove("shimmer");
+            body?.classList.add("iota2");
+            break;
     }
 
     const routes = buildAppRoutes(networkConfig?.protocolVersion ?? "", withNetworkContext);

diff --git a/client/src/app/routes.tsx b/client/src/app/routes.tsx
@@ -43,7 +43,7 @@ import StardustSearch from "./routes/stardust/Search";
 import StardustStatisticsPage from "./routes/stardust/statistics/StatisticsPage";
 import StardustTransactionPage from "./routes/stardust/TransactionPage";
 import { Visualizer as StardustVisualizer } from "./routes/stardust/Visualizer";
-import NovaVisualizerWrapper from "../features/visualizer-threejs/NovaVisualizerWrapper";
+import NovaVisualizer from "../features/visualizer-threejs/NovaVisualizer";
 import StreamsV0 from "./routes/StreamsV0";
 import { StreamsV0RouteProps } from "./routes/StreamsV0RouteProps";
 import { VisualizerRouteProps } from "./routes/VisualizerRouteProps";
@@ -176,7 +176,7 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
     const novaRoutes = [
         <Route exact path="/:network" key={keys.next().value} component={NovaLanding} />,
         <Route path="/:network/addr/:address" key={keys.next().value} component={NovaAddressPage} />,
-        <Route path="/:network/visualizer/" key={keys.next().value} component={NovaVisualizerWrapper} />,
+        <Route path="/:network/visualizer/" key={keys.next().value} component={NovaVisualizer} />,
         <Route path="/:network/block/:blockId" key={keys.next().value} component={NovaBlockPage} />,
         <Route path="/:network/output/:outputId" key={keys.next().value} component={NovaOutputPage} />,
         <Route path="/:network/search/:query?" key={keys.next().value} component={NovaSearch} />,

diff --git a/...ualizer-threejs/NovaVisualizerWrapper.tsx → ...res/visualizer-threejs/NovaVisualizer.tsx b/...ualizer-threejs/NovaVisualizerWrapper.tsx → ...res/visualizer-threejs/NovaVisualizer.tsx
@@ -2,10 +2,10 @@ import React from "react";
 import { useGetThemeMode } from "~/helpers/hooks/useGetThemeMode.js";
 import { VisualizerRouteProps } from "~/app/routes/VisualizerRouteProps.js";
 import { RouteComponentProps } from "react-router-dom";
-import NovaVisualizer from "./VisualizerInstance";
+import VisualizerInstance from "./VisualizerInstance";
 
-export default function NovaVisualizerWrapper(props: RouteComponentProps<VisualizerRouteProps>): React.JSX.Element {
+export default function NovaVisualizer(props: RouteComponentProps<VisualizerRouteProps>): React.JSX.Element {
     const theme = useGetThemeMode();
 
-    return <NovaVisualizer key={theme} {...props} />;
+    return <VisualizerInstance key={theme} {...props} />;
 }
diff --git a/client/src/models/config/uiTheme.ts b/client/src/models/config/uiTheme.ts
@@ -1,4 +1,5 @@
 export const IOTA_UI = "iota_ui";
+export const IOTA2_UI = "iota2_ui";
 export const SHIMMER_UI = "shimmer_ui";
 
-export type Theme = typeof IOTA_UI | typeof SHIMMER_UI;
+export type Theme = typeof IOTA_UI | typeof IOTA2_UI | typeof SHIMMER_UI;
diff --git a/client/src/scss/themes.scss b/client/src/scss/themes.scss
@@ -131,4 +131,26 @@
         --header-bg: #00121f;
         --navbar-bg: #00121f;
     }
+
+    body.iota2 {
+        --link-color: #{$iota2-blue-700};
+        --link-highlight: #{$iota2-blue-700};
+        --associated-outputs-tabs-active: #{iota2-gray-300};
+        --tabbed-section-tab-active: #{$iota2-blue-700};
+        --pagination-bg-hover-color: #{iota2-gray-300};
+        --pagination-bg-selected-color: #{$iota2-blue-600};
+        --header-bg: #f2f6f9;
+        --navbar-bg: rgb(255 255 255 / 20%);
+        --amount-color: #{$iota2-blue-700};
+    }
+
+    body.iota2.darkmode {
+        --body-background: #000000;
+        --header-bg: #000000;
+        --navbar-bg: #000000;
+        --link-color: #{$iota2-blue-600};
+        --link-highlight: #{$iota2-blue-600};
+        --tabbed-section-tab-active: #{$iota2-blue-600};
+        --amount-color: #{$iota2-blue-600};
+    }
 }
diff --git a/client/src/scss/variables.scss b/client/src/scss/variables.scss
@@ -35,3 +35,45 @@ $navbar-height-desktop: 80px;
 $navbar-height-mobile: 56px;
 $border-width: 1px;
 $inner-padding: 24px;
+
+// IOTA 2.0 colors
+$iota2-blue-50: #f0f4ff;
+$iota2-blue-100: #e0eaff;
+$iota2-blue-200: #c8dafe;
+$iota2-blue-300: #a6c3fc;
+$iota2-blue-400: #82a5f8;
+$iota2-blue-500: #5c84fa;
+$iota2-blue-600: #2559f5;
+$iota2-blue-700: #0101ff;
+$iota2-blue-800: #0000db;
+$iota2-blue-900: #0101ab;
+$iota2-teal-50: #ecffff;
+$iota2-teal-100: #befffd;
+$iota2-teal-200: #7dfffc;
+$iota2-teal-300: #38fffa;
+$iota2-teal-400: #00e5e0;
+$iota2-teal-500: #00ccc7;
+$iota2-teal-600: #009a97;
+$iota2-teal-700: #007b78;
+$iota2-teal-800: #006664;
+$iota2-teal-900: #005654;
+$iota2-gray-50: #f8fafc;
+$iota2-gray-100: #f1f5f9;
+$iota2-gray-200: #e1e7ef;
+$iota2-gray-300: #cbd5e1;
+$iota2-gray-400: #94a3b8;
+$iota2-gray-500: #65758b;
+$iota2-gray-600: #48566a;
+$iota2-gray-700: #344256;
+$iota2-gray-800: #1d283a;
+$iota2-gray-900: #0f1729;
+$iota2-red-50: #fff8f8;
+$iota2-red-100: #ffe9e9;
+$iota2-red-200: #ffd3d3;
+$iota2-red-300: #ffb1b1;
+$iota2-red-400: #ff8383;
+$iota2-red-500: #ff5050;
+$iota2-red-600: #e73131;
+$iota2-red-700: #cf1919;
+$iota2-red-800: #8e0b0b;
+$iota2-red-900: #8a0000;