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%); } }