feat: update branding, genesis hash, and fix UI issues

- Update PEZKUWI_GENESIS to correct hash (0x1fc56b6a5fcd50358707f69b2b0bb0c8ab1fea2bcfc5eba7279efbcafef642af) - Change highlight color from pink/orange to Kurdistan green (#86e62a) - Add critical CSS in index.html to fix initial theme load issue - Fix metadata badge showing incorrectly on every page load - Fix block time text rendering vertically in explorer - Update SVG logos with correct branding colors
2026-04-27 23:47:57 +00:00 · 2026-01-30 11:10:18 +03:00
parent 7e3a96ef5a
commit b2e2798d8c
15 changed files with 208 additions and 44 deletions
@@ -3,21 +3,148 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="theme-color" content="#211b25">
+    <meta name="theme-color" content="#86e62a">
+    <meta name="description" content="PezkuwiChain Explorer">
    <link rel="manifest" href="manifest.json">
    <link rel="shortcut icon" href="favicon.ico">
    <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
    <script type="text/javascript" src="env-config.js"></script>
+    <script>
+      (function() {
+        // Read theme from localStorage
+        var themeName = 'light';
+        try {
+          var settings = localStorage.getItem('settings');
+          if (settings) {
+            var parsed = JSON.parse(settings);
+            if (parsed && parsed.uiTheme === 'dark') {
+              themeName = 'dark';
+            }
+          }
+        } catch (e) {}
+
+        // Apply theme attribute immediately
+        document.documentElement.setAttribute('data-theme', themeName);
+        document.documentElement.className = 'theme--' + themeName;
+      })();
+    </script>
    <style>
-      .--absolute { position: absolute; }
-      .--digits { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
-      .--hidden { display: none; }
-      .--relative { position: relative; }
-      .--tmp { background: grey; filter: blur(2px); opacity: 0.15; }
+      :root {
+        --highlight-color: #86e62a;
+        --highlight-contrast: #1a1b20;
+      }
+
+      /* Dark theme variables */
+      html[data-theme="dark"],
+      .theme--dark {
+        --bg-page: #1a1b20;
+        --bg-table: #26272c;
+        --bg-input: #38393f;
+        --bg-menu: #26272c;
+        --bg-tabs: #38393f;
+        --bg-sidebar: #1a1b20;
+        --color-text: rgba(244, 242, 240, 0.8);
+        --color-label: rgba(244, 242, 240, 0.6);
+        --border-table: #343536;
+      }
+
+      /* Light theme variables */
+      html[data-theme="light"],
+      .theme--light {
+        --bg-page: #f5f3f1;
+        --bg-table: #ffffff;
+        --bg-input: #ffffff;
+        --bg-menu: #ffffff;
+        --bg-tabs: #ffffff;
+        --bg-sidebar: #fafafa;
+        --color-text: rgba(78, 78, 78, 0.8);
+        --color-label: rgba(78, 78, 78, 0.6);
+        --border-table: #efedeb;
+      }
+
+      html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      }
+
+      body {
+        background: var(--bg-page) !important;
+        color: var(--color-text) !important;
+      }
+
+      #root {
+        min-height: 100vh;
+        background: var(--bg-page) !important;
+        color: var(--color-text) !important;
+      }
+
+      /* Override semantic-ui defaults */
+      .ui.segment,
+      .ui.segments,
+      .ui.form,
+      .ui.menu,
+      .ui.table,
+      .ui.card,
+      .ui.cards > .card {
+        background: var(--bg-table) !important;
+        color: var(--color-text) !important;
+      }
+
+      .ui.table thead th {
+        background: var(--bg-tabs) !important;
+        color: var(--color-text) !important;
+      }
+
+      .ui.input > input,
+      .ui.form input,
+      .ui.form textarea,
+      .ui.selection.dropdown {
+        background: var(--bg-input) !important;
+        color: var(--color-text) !important;
+      }
+
+      /* Critical: Menu highlight background */
+      .highlight--bg {
+        background: var(--highlight-color) !important;
+      }
+
+      /* Critical: Toggle switches */
+      .ui--Toggle.isChecked:not(.isRadio) .ui--Toggle-Slider {
+        background: var(--highlight-color) !important;
+      }
+      .ui--Toggle.isChecked:not(.isRadio) .ui--Toggle-Slider::before {
+        border-color: var(--highlight-color) !important;
+      }
+
+      /* Critical: Buttons */
+      .ui--Button:hover:not(.isDisabled):not(.isReadOnly),
+      .ui--Button.isSelected {
+        background: var(--highlight-color) !important;
+        color: var(--highlight-contrast) !important;
+      }
+
+      /* Critical: Tabs active indicator */
+      .ui--Tabs .active .tabLinkText::after {
+        background: var(--highlight-color) !important;
+      }
+
+      /* Critical: Primary buttons */
+      .ui.primary.button,
+      .ui.buttons .primary.button {
+        background: var(--highlight-color) !important;
+        color: var(--highlight-contrast) !important;
+      }
+
+      /* Critical: Badge on menu */
+      .ui--MenuItem.isActive .ui--Badge {
+        background: var(--highlight-color);
+      }
    </style>
  </head>
  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript>JavaScript is required to run this application.</noscript>
    <div id="root"></div>
    <div id="tooltips"></div>
    <script>