From e1055374e13858b9cbab33a816e405d8d50f5a74 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Wed, 27 Mar 2024 16:09:14 +0100
Subject: [PATCH] feat: general polishing (#1361)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add validators link to header in alphanet

* styles: make tabs transparent background

* styles: improve landing epoch section responsiveness

* fix: use `<Link/>` instead of `<a href=...`

* styles: improve alphanet scrollbar thumb color

* wip: update styles for footer

* styles: update footer colors for alphanet

---------

Co-authored-by: Begoña Álvarez de la Cruz <balvarez@boxfish.studio>
---
 client/src/app/AppUtils.tsx                   |  5 +
 .../components/footer/ExplorerVersion.scss    |  2 +-
 client/src/app/components/footer/Footer.scss  | 18 ++--
 client/src/app/components/footer/Footer.tsx   |  2 +-
 client/src/app/components/header/Header.tsx   | 94 ++++++++++---------
 .../src/app/components/hoc/TabbedSection.scss |  2 +-
 .../nova/landing/LandingEpochSection.scss     | 20 ++--
 .../components/nova/landing/SlotTableCell.tsx |  3 +-
 client/src/index.scss                         |  2 +-
 client/src/scss/themes.scss                   | 13 +++
 10 files changed, 95 insertions(+), 66 deletions(-)

diff --git a/client/src/app/AppUtils.tsx b/client/src/app/AppUtils.tsx
index ec9d9af97..a4e9cbf08 100644
--- a/client/src/app/AppUtils.tsx
+++ b/client/src/app/AppUtils.tsx
@@ -50,6 +50,11 @@ export const getPages = (currentNetwork: INetwork | undefined, networks: INetwor
             url: `/${network}/statistics/`,
             disabled: !hasStatisticsSupport || !hasNetworks,
         },
+        {
+            label: "Validators",
+            url: `/${network}/validators/`,
+            disabled: !hasNetworks || network !== ALPHANET,
+        },
         {
             label: "Utilities",
             disabled: network !== CHRYSALIS_MAINNET || !hasNetworks,
diff --git a/client/src/app/components/footer/ExplorerVersion.scss b/client/src/app/components/footer/ExplorerVersion.scss
index 19377bce2..de0bc3f97 100644
--- a/client/src/app/components/footer/ExplorerVersion.scss
+++ b/client/src/app/components/footer/ExplorerVersion.scss
@@ -6,7 +6,7 @@
 .explorer-version {
     display: flex;
     width: 100%;
-    background-color: $gray-11;
+    background-color: var(--footer-bg-color);
     justify-content: center;
     padding-bottom: 12px;
 
diff --git a/client/src/app/components/footer/Footer.scss b/client/src/app/components/footer/Footer.scss
index c0f3b9110..699b0826c 100644
--- a/client/src/app/components/footer/Footer.scss
+++ b/client/src/app/components/footer/Footer.scss
@@ -8,7 +8,7 @@ footer {
         display: flex;
         justify-content: center;
         padding: 40px 20px 0px 20px;
-        background-color: $gray-11;
+        background-color: var(--footer-bg-color);
         color: $white;
 
         @include tablet-down {
@@ -46,7 +46,7 @@ footer {
                     @include font-size(12px, 16px);
 
                     margin-bottom: 16px;
-                    color: $gray-6;
+                    color: var(--footer-heading-color);
                     font-family: $metropolis-bold;
                     letter-spacing: 0.15em;
                     text-transform: uppercase;
@@ -64,7 +64,7 @@ footer {
                         font-weight: 500;
 
                         a {
-                            color: $gray-3;
+                            color: var(--footer-text-color);
                             font-family: inherit;
                             letter-spacing: 0.5px;
                             text-decoration: none;
@@ -79,7 +79,7 @@ footer {
                         }
 
                         &:first-child {
-                            color: $gray-3;
+                            color: var(--footer-heading-color);
                         }
 
                         .data-label {
@@ -100,7 +100,7 @@ footer {
 
                 display: flex;
                 justify-content: space-between;
-                color: $gray-6;
+                color: var(--footer-heading-color);
                 font-family: $inter;
 
                 div {
@@ -140,7 +140,7 @@ footer {
                     ul {
                         li {
                             a {
-                                color: $main-green;
+                                color: var(--link-color);
                             }
                         }
                     }
@@ -186,4 +186,10 @@ footer {
             }
         }
     }
+
+    #logo-footer {
+        path {
+            fill: var(--footer-logo-fill);
+        }
+    }
 }
diff --git a/client/src/app/components/footer/Footer.tsx b/client/src/app/components/footer/Footer.tsx
index 9826bdf22..3abf7bb0e 100644
--- a/client/src/app/components/footer/Footer.tsx
+++ b/client/src/app/components/footer/Footer.tsx
@@ -123,7 +123,7 @@ class Footer extends AsyncComponent<FooterProps, FooterState> {
                         <hr className="sep" />
                         <div className="row foundation-data">
                             <div className="margin-t-m">
-                                <LogoFooter title="IOTA Foundation" />
+                                <LogoFooter id="logo-footer" title="IOTA Foundation" />
                             </div>
                             <section className="line-breaks">{this.state.foundationData?.registeredAddress.value.join("\n")}</section>
                             <section>
diff --git a/client/src/app/components/header/Header.tsx b/client/src/app/components/header/Header.tsx
index 6d8d2187a..904c174e4 100644
--- a/client/src/app/components/header/Header.tsx
+++ b/client/src/app/components/header/Header.tsx
@@ -114,29 +114,31 @@ export default function Header({ rootPath, currentNetwork, networks, history, ac
                         </Link>
                         {routes &&
                             routes.length > 0 &&
-                            routes.map((route) =>
-                                !routeIsDropdown(route) ? (
-                                    <Link
-                                        key={route.url}
-                                        to={route.url}
-                                        target={route.isExternal ? "_blank" : undefined}
-                                        rel={route.isExternal ? "noopener noreferrer" : undefined}
-                                        onClick={closeDropdowns}
-                                        className={classNames("navigation--item", {
-                                            "active-item": route.url === window.location.pathname,
-                                        })}
-                                    >
-                                        {route.label}
-                                    </Link>
-                                ) : (
-                                    <HeaderDropdown
-                                        key={route.label}
-                                        {...route}
-                                        isExpanded={expandedDropdownLabel === route.label}
-                                        setExpandedDropdownId={setExpandedDropdownLabel}
-                                    />
-                                ),
-                            )}
+                            routes
+                                .filter((route) => !route.disabled)
+                                .map((route) =>
+                                    !routeIsDropdown(route) ? (
+                                        <Link
+                                            key={route.url}
+                                            to={route.url}
+                                            target={route.isExternal ? "_blank" : undefined}
+                                            rel={route.isExternal ? "noopener noreferrer" : undefined}
+                                            onClick={closeDropdowns}
+                                            className={classNames("navigation--item", {
+                                                "active-item": route.url === window.location.pathname,
+                                            })}
+                                        >
+                                            {route.label}
+                                        </Link>
+                                    ) : (
+                                        <HeaderDropdown
+                                            key={route.label}
+                                            {...route}
+                                            isExpanded={expandedDropdownLabel === route.label}
+                                            setExpandedDropdownId={setExpandedDropdownLabel}
+                                        />
+                                    ),
+                                )}
 
                         {isMarketed && (
                             <div className="mobile-fiat">
@@ -183,26 +185,32 @@ export default function Header({ rootPath, currentNetwork, networks, history, ac
                             <ul>
                                 {routes &&
                                     routes.length > 0 &&
-                                    routes.map((route) =>
-                                        !routeIsDropdown(route) ? (
-                                            <Link key={route.url} to={route.url} onClick={resetExpandedDropdowns}>
-                                                <li className="menu--expanded__item" key={route.url}>
-                                                    <span className={classNames({ "active-item": route.url === window.location.pathname })}>
-                                                        {route.label}
-                                                    </span>
-                                                </li>
-                                            </Link>
-                                        ) : (
-                                            <HeaderDropdown
-                                                key={route.label}
-                                                {...route}
-                                                isExpanded={route.label === expandedDropdownLabel}
-                                                setExpandedDropdownId={setExpandedDropdownLabel}
-                                                setIsMenuExpanded={setIsMenuExpanded}
-                                                mobileOnly
-                                            />
-                                        ),
-                                    )}
+                                    routes
+                                        .filter((route) => !route.disabled)
+                                        .map((route) =>
+                                            !routeIsDropdown(route) ? (
+                                                <Link key={route.url} to={route.url} onClick={resetExpandedDropdowns}>
+                                                    <li className="menu--expanded__item" key={route.url}>
+                                                        <span
+                                                            className={classNames({
+                                                                "active-item": route.url === window.location.pathname,
+                                                            })}
+                                                        >
+                                                            {route.label}
+                                                        </span>
+                                                    </li>
+                                                </Link>
+                                            ) : (
+                                                <HeaderDropdown
+                                                    key={route.label}
+                                                    {...route}
+                                                    isExpanded={route.label === expandedDropdownLabel}
+                                                    setExpandedDropdownId={setExpandedDropdownLabel}
+                                                    setIsMenuExpanded={setIsMenuExpanded}
+                                                    mobileOnly
+                                                />
+                                            ),
+                                        )}
                             </ul>
                         </div>
                     </div>
diff --git a/client/src/app/components/hoc/TabbedSection.scss b/client/src/app/components/hoc/TabbedSection.scss
index 4c56604f5..c8133552f 100644
--- a/client/src/app/components/hoc/TabbedSection.scss
+++ b/client/src/app/components/hoc/TabbedSection.scss
@@ -54,7 +54,7 @@
             }
 
             button.tab {
-                background: var(--associated-outputs-tabs-bg);
+                background: transparent;
                 color: $gray-6;
                 border-radius: 0;
                 white-space: nowrap;
diff --git a/client/src/app/components/nova/landing/LandingEpochSection.scss b/client/src/app/components/nova/landing/LandingEpochSection.scss
index 0bc4b0f05..b53d79750 100644
--- a/client/src/app/components/nova/landing/LandingEpochSection.scss
+++ b/client/src/app/components/nova/landing/LandingEpochSection.scss
@@ -41,6 +41,11 @@
             font-size: 20px;
             line-height: 28px;
             font-weight: 500;
+
+            @include tablet-down {
+                display: flex;
+                text-align: center;
+            }
         }
 
         svg#to-arrow {
@@ -84,19 +89,10 @@
     .epoch-progress__stats-wrapper {
         display: flex;
         flex-direction: row;
-        justify-content: start;
-        gap: 36px;
+        justify-content: space-between;
+        column-gap: 32px;
+        row-gap: 40px;
         flex-wrap: wrap;
-
-        @include tablet-down {
-            justify-content: space-between;
-            flex-direction: row;
-            row-gap: 40px;
-        }
-
-        .stat {
-            flex: 1;
-        }
     }
 }
 
diff --git a/client/src/app/components/nova/landing/SlotTableCell.tsx b/client/src/app/components/nova/landing/SlotTableCell.tsx
index f6b6d7d28..67798dc4c 100644
--- a/client/src/app/components/nova/landing/SlotTableCell.tsx
+++ b/client/src/app/components/nova/landing/SlotTableCell.tsx
@@ -6,6 +6,7 @@ import TruncatedId from "../../stardust/TruncatedId";
 import classNames from "classnames";
 import { useSlotManaBurned } from "~/helpers/nova/hooks/useSlotManaBurned";
 import Spinner from "../../Spinner";
+import { Link } from "react-router-dom";
 
 export enum SlotTableCellType {
     StatusPill = "status-pill",
@@ -72,7 +73,7 @@ interface ILinkCell {
 }
 
 function LinkCell({ data, href }: ILinkCell): React.JSX.Element {
-    return <a href={href}>{data}</a>;
+    return <Link to={href}>{data}</Link>;
 }
 
 interface ITextCell {
diff --git a/client/src/index.scss b/client/src/index.scss
index 19c0e962a..bd02a3da3 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -85,5 +85,5 @@ body {
 
 ::-webkit-scrollbar-thumb {
     border-radius: 0;
-    background-color: var(--header-color);
+    background-color: var(--scrollbar-thumb);
 }
diff --git a/client/src/scss/themes.scss b/client/src/scss/themes.scss
index 5ef9755f3..b218d6a6a 100644
--- a/client/src/scss/themes.scss
+++ b/client/src/scss/themes.scss
@@ -65,6 +65,11 @@
     --transparent-button-bg-hover: #{$iota2-blue-700}14;
     --transparent-button-bg-active: #{$iota2-blue-700}29;
     --icon-button-border: rgb(0 0 0 / 16%);
+    --scrollbar-thumb: var(--header-color, #{$gray-6});
+    --footer-bg-color: #{$gray-11};
+    --footer-logo-fill: rgb(246 248 252);
+    --footer-text-color: #{$gray-3};
+    --footer-heading-color: #{$gray-6};
 
     body.darkmode {
         --body-background: #091326;
@@ -124,6 +129,7 @@
         --transparent-button-bg-hover: #{$white}14;
         --transparent-button-bg-active: #{$white}29;
         --icon-button-border: rgb(255 255 255 / 16%);
+        --scrollbar-thumb: var(--header-color, #{$gray-5});
     }
 
     body.shimmer {
@@ -156,6 +162,10 @@
         --amount-color: #{$iota2-blue-700};
         --body-color: #1d1d1d;
         --header-color: #{$iota2-gray-600};
+        --footer-bg-color: #{white};
+        --footer-logo-fill: var(--body-color);
+        --footer-text-color: var(--body-color);
+        --footer-heading-color: #{$iota2-gray-400};
     }
 
     body.iota2.darkmode {
@@ -168,5 +178,8 @@
         --amount-color: #{$iota2-blue-600};
         --body-color: #{$white};
         --header-color: rgb(255 255 255 / 80%);
+        --scrollbar-thumb: #{$iota2-gray-400};
+        --footer-bg-color: #{black};
+        --footer-heading-color: rgb(255 255 255 / 48%);
     }
 }