feat: general polishing (#1361)

* 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 <[email protected]>
iotaledger · Mar 27, 2024 · e105537 · e105537
1 parent afbd280
commit e105537
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 66 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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%);
     }
 }