From 4d870964753887aaa24cfb981461ebbfee264cf9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= Date: Mon, 4 Dec 2023 13:15:00 +0100 Subject: [PATCH] Z-index refactor --- .../AccountsNotificationPanelAccounts.tsx | 2 +- ui/components/Claim/ClaimFooter.tsx | 2 +- ui/components/Core/CorePage.tsx | 2 +- .../DAppConnection/DAppConnectionInfoBar.tsx | 4 +-- ui/components/NFTs/NFTCollection.tsx | 2 +- ui/components/NFTs/NFTHover.tsx | 2 +- ui/components/Overview/AbilitiesHeader.tsx | 4 +-- ui/components/Shared/SharedButtonUp.tsx | 2 +- ui/components/Shared/SharedDropDown.tsx | 4 +-- ui/components/Shared/SharedInfoModal.tsx | 8 +++--- ui/components/Shared/SharedModal.tsx | 6 ++--- ui/components/Shared/SharedNetworkIcon.tsx | 2 +- ui/components/Shared/SharedSeedInput.tsx | 2 +- ui/components/Shared/SharedSelect.tsx | 4 +-- ui/components/Shared/SharedSlideUpMenu.tsx | 6 ++--- .../Shared/SharedSlideUpMenuPanel.tsx | 2 +- ui/components/Shared/SharedTooltip.tsx | 2 +- .../SpendApprovalSummary.tsx | 2 +- ui/components/Signing/index.tsx | 2 +- ui/components/Snackbar/Snackbar.tsx | 2 +- ui/components/TabBar/TabBar.tsx | 2 +- ui/components/TabBar/TabBarIconButton.tsx | 2 +- .../TopMenu/TopMenuConnectedDAppInfo.tsx | 6 ++--- .../TopMenu/TopMenuProfileTooltip.tsx | 2 +- ui/components/Wallet/WalletSubscapeLink.tsx | 2 +- ui/pages/DAppConnect/DAppConnectPage.tsx | 4 +-- ui/pages/DAppConnectRequest.tsx | 2 +- ui/pages/Earn/DepositCard.tsx | 2 +- ui/pages/Earn/PoolCard.tsx | 2 +- ui/pages/EarnDeposit.tsx | 2 +- ui/pages/NewCustomNetworkRequest.tsx | 2 +- ui/pages/Onboarding/Tabbed/Done.tsx | 2 +- ui/pages/Onboarding/Tabbed/Root.tsx | 2 +- ui/pages/Send.tsx | 2 +- ui/pages/Settings.tsx | 2 +- ui/pages/Swap.tsx | 4 +-- ui/public/index.css | 26 ++++++++++++++++--- 37 files changed, 74 insertions(+), 54 deletions(-) diff --git a/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx b/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx index 8dc5703077..f3869c5d4d 100644 --- a/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx +++ b/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx @@ -525,7 +525,7 @@ export default function AccountsNotificationPanelAccounts({ align-items: center; padding: 0px 12px; box-sizing: border-box; - z-index: 11; + z-index: var(--z-footer); } .switcher_wrap { height: 432px; diff --git a/ui/components/Claim/ClaimFooter.tsx b/ui/components/Claim/ClaimFooter.tsx index ddbb45c488..5ec944dedb 100644 --- a/ui/components/Claim/ClaimFooter.tsx +++ b/ui/components/Claim/ClaimFooter.tsx @@ -85,7 +85,7 @@ export default function ClaimFooter({ footer { position: relative; width: 352px; - z-index: 2; + z-index: var(--z-settings); display: flex; justify-content: space-between; align-items: center; diff --git a/ui/components/Core/CorePage.tsx b/ui/components/Core/CorePage.tsx index ed00cb9f83..a5496200bc 100644 --- a/ui/components/Core/CorePage.tsx +++ b/ui/components/Core/CorePage.tsx @@ -39,7 +39,7 @@ export default function CorePage(props: Props): ReactElement { height: 100%; } .top_menu_wrap { - z-index: 10; + z-index: var(--z-back-button); cursor: default; } `} diff --git a/ui/components/DAppConnection/DAppConnectionInfoBar.tsx b/ui/components/DAppConnection/DAppConnectionInfoBar.tsx index 6abd6edf3c..cd12a521ac 100644 --- a/ui/components/DAppConnection/DAppConnectionInfoBar.tsx +++ b/ui/components/DAppConnection/DAppConnectionInfoBar.tsx @@ -80,7 +80,7 @@ function DefaultConnectionPopover({ close }: PopoverProps): ReactElement { transparent 30% ); - z-index: 4; + z-index: var(--z-content; } section { @@ -170,7 +170,7 @@ function DefaultConnectionPopover({ close }: PopoverProps): ReactElement { position: fixed; top: 0; left: 0; - z-index: -1; + z-index: var(--z-backdrop); } `} diff --git a/ui/components/NFTs/NFTCollection.tsx b/ui/components/NFTs/NFTCollection.tsx index 7e59fbec21..577b49948b 100644 --- a/ui/components/NFTs/NFTCollection.tsx +++ b/ui/components/NFTs/NFTCollection.tsx @@ -188,7 +188,7 @@ export default function NFTCollection(props: { } .nft_collection.expanded { width: 352px; - z-index: 3; + z-index: var(--z-expnaded); margin: 8px -16px; padding: 8px 16px 6px; background: var(--green-120); diff --git a/ui/components/NFTs/NFTHover.tsx b/ui/components/NFTs/NFTHover.tsx index 55857fc8f2..901c73f48f 100644 --- a/ui/components/NFTs/NFTHover.tsx +++ b/ui/components/NFTs/NFTHover.tsx @@ -93,7 +93,7 @@ export default function NFTsHover(props: { font-weight: 500; line-height: 16px; letter-spacing: 3%; - z-index: 1; + z-index: var(--z-base); transition: opacity 200ms ease-in-out; } .nft_hover:hover { diff --git a/ui/components/Overview/AbilitiesHeader.tsx b/ui/components/Overview/AbilitiesHeader.tsx index 9bfc6cbf3e..afdc295a74 100644 --- a/ui/components/Overview/AbilitiesHeader.tsx +++ b/ui/components/Overview/AbilitiesHeader.tsx @@ -108,7 +108,7 @@ export default function AbilitiesHeader(): ReactElement { ); position: relative; - z-index: 1; + z-index: var(--z-base); } .small_banner:before { @@ -126,7 +126,7 @@ export default function AbilitiesHeader(): ReactElement { position: absolute; content: ""; inset: 0; - z-index: -1; + z-index: var(--z-backdrop); opacity: 0; transition: opacity 0.25s ease-in; } diff --git a/ui/components/Shared/SharedButtonUp.tsx b/ui/components/Shared/SharedButtonUp.tsx index 52bf19ebe9..3a4426bde7 100644 --- a/ui/components/Shared/SharedButtonUp.tsx +++ b/ui/components/Shared/SharedButtonUp.tsx @@ -56,7 +56,7 @@ export default function SharedButtonUp(props: { display: flex; justify-content: center; align-items: center; - z-index: 3; + z-index: var(--z-expnaded); opacity: 1; transition: opacity 100ms ease-in; } diff --git a/ui/components/Shared/SharedDropDown.tsx b/ui/components/Shared/SharedDropDown.tsx index 2c04cb84be..31587a3d80 100644 --- a/ui/components/Shared/SharedDropDown.tsx +++ b/ui/components/Shared/SharedDropDown.tsx @@ -133,7 +133,7 @@ function DropdownContent({ children }: ContentProps): ReactElement { left: 100%; transform: translateX(calc(-100%)); width: max-content; - z-index: 10; + z-index: var(--z-back-button); padding: 0; background: none; border: none; @@ -235,7 +235,7 @@ export default function SharedDropdown({ background-color: var(--green-120); width: 212px; border-radius: 4px; - z-index: 1; + z-index: var(--z-base); box-shadow: 0px 2px 4px 0px #00141357, diff --git a/ui/components/Shared/SharedInfoModal.tsx b/ui/components/Shared/SharedInfoModal.tsx index ca88badde0..7fc91547e4 100644 --- a/ui/components/Shared/SharedInfoModal.tsx +++ b/ui/components/Shared/SharedInfoModal.tsx @@ -38,7 +38,7 @@ export default function SharedInfoModal({ position: absolute; justify-content: center; align-items: center; - z-index: 3; + z-index: var(--z-expnaded); } @keyframes slideup { @@ -55,14 +55,14 @@ export default function SharedInfoModal({ height: 100vh; background: #001413; position: absolute; - z-index: 3; + z-index: var(--z-expnaded); } .content { width: 70vw; height: 70vh; padding: 24px; background: #001413; - z-index: 4; + z-index: var(--z-content; text-align: center; display: flex; flex-flow: column; @@ -93,7 +93,7 @@ export default function SharedInfoModal({ padding: 0px 17px; margin-bottom: 16px; margin-right: 8px; - z-index: 2; + z-index: var(--z-settings); } `} diff --git a/ui/components/Shared/SharedModal.tsx b/ui/components/Shared/SharedModal.tsx index 592048b8fc..0bfae7a380 100644 --- a/ui/components/Shared/SharedModal.tsx +++ b/ui/components/Shared/SharedModal.tsx @@ -60,7 +60,7 @@ export default function SharedModal({ left: 0; right: 0; bottom: 0; - z-index: 999; + z-index: var(--z-menu); align-items: center; justify-content: center; } @@ -80,7 +80,7 @@ export default function SharedModal({ position: relative; display: flex; align-items: center; - z-index: 1; + z-index: var(--z-base); box-sizing: border-box; width: ${width || "312px"}; background-color: ${bgColor || "var(--green-120)"}; @@ -104,7 +104,7 @@ export default function SharedModal({ right: 16px; top: 16px; background-color: var(--green-20); - z-index: 1; + z-index: var(--z-base); } .modal_body { min-height: 320px; diff --git a/ui/components/Shared/SharedNetworkIcon.tsx b/ui/components/Shared/SharedNetworkIcon.tsx index 6a7965e1af..cbab07099d 100644 --- a/ui/components/Shared/SharedNetworkIcon.tsx +++ b/ui/components/Shared/SharedNetworkIcon.tsx @@ -91,7 +91,7 @@ export default function SharedNetworkIcon(props: { height: ${size - padding}px; width: ${size - padding}px; border-radius: 4px; - z-index: 1; + z-index: var(--z-base); } `} diff --git a/ui/components/Shared/SharedSeedInput.tsx b/ui/components/Shared/SharedSeedInput.tsx index 3893e8411c..0701b8e7cd 100644 --- a/ui/components/Shared/SharedSeedInput.tsx +++ b/ui/components/Shared/SharedSeedInput.tsx @@ -100,7 +100,7 @@ export default function SharedSeedInput(props: Props): ReactElement { color: var(--trophy-gold); background: var(--hunter-green); transition: all 0.2s ease-in-out; - z-index: 999; + z-index: var(--z-menu); } #recovery_phrase:focus { diff --git a/ui/components/Shared/SharedSelect.tsx b/ui/components/Shared/SharedSelect.tsx index d61a733eb6..6d87454ede 100644 --- a/ui/components/Shared/SharedSelect.tsx +++ b/ui/components/Shared/SharedSelect.tsx @@ -167,7 +167,7 @@ export default function SharedSelect(props: Props): ReactElement { .button { position: relative; - z-index: 1; + z-index: var(--z-base); box-sizing: border-box; display: flex; justify-content: space-between; @@ -235,7 +235,7 @@ export default function SharedSelect(props: Props): ReactElement { transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out; - z-index: 1; + z-index: var(--z-base); } .select.bottom .options { diff --git a/ui/components/Shared/SharedSlideUpMenu.tsx b/ui/components/Shared/SharedSlideUpMenu.tsx index b3bfd4d5c7..f0caef0eec 100644 --- a/ui/components/Shared/SharedSlideUpMenu.tsx +++ b/ui/components/Shared/SharedSlideUpMenu.tsx @@ -116,7 +116,7 @@ export default function SharedSlideUpMenu(props: Props): ReactElement { left: 0px; right: 0px; bottom: 0px; - z-index: 999; + z-index: var(--z-menu); transform: translateY(0); /* open by default */ opacity: 1; transition: transform cubic-bezier(0.19, 1, 0.22, 1) @@ -138,7 +138,7 @@ export default function SharedSlideUpMenu(props: Props): ReactElement { bottom: 0; top: 0; cursor: pointer; - z-index: 998; + z-index: var(--z-below-menu); background: var(--green-120); opacity: 0.7; transition: @@ -164,7 +164,7 @@ export default function SharedSlideUpMenu(props: Props): ReactElement { } .slide_up_close { position: absolute; - z-index: 2; + z-index: var(--z-settings); top: 24px; right: 24px; } diff --git a/ui/components/Shared/SharedSlideUpMenuPanel.tsx b/ui/components/Shared/SharedSlideUpMenuPanel.tsx index cc5cb7e7f3..71122ef3de 100644 --- a/ui/components/Shared/SharedSlideUpMenuPanel.tsx +++ b/ui/components/Shared/SharedSlideUpMenuPanel.tsx @@ -43,7 +43,7 @@ export default function SharedSlideUpMenuPanel({ .header_wrap { position: sticky; margin-top: -6px; - z-index: 1; + z-index: var(--z-base); display: flex; align-items: center; diff --git a/ui/components/Shared/SharedTooltip.tsx b/ui/components/Shared/SharedTooltip.tsx index a5ca2984be..c71be1215c 100644 --- a/ui/components/Shared/SharedTooltip.tsx +++ b/ui/components/Shared/SharedTooltip.tsx @@ -134,7 +134,7 @@ export default function SharedTooltip(props: Props): ReactElement { line-height: 20px; border-radius: 3px; padding: 12px; - z-index: 20; + z-index: var(--z-tooltip); ${getVerticalPosition(verticalPosition, height, verticalShift)} ${width !== undefined ? getHorizontalPosition( diff --git a/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx b/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx index da11c65d3d..bfda73bf93 100644 --- a/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx +++ b/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx @@ -257,7 +257,7 @@ export default function SpendApprovalSummary({ margin-bottom: 16px; } .asset_icon_wrap { - z-index: 1; + z-index: var(--z-base); } .site { color: #fff; diff --git a/ui/components/Signing/index.tsx b/ui/components/Signing/index.tsx index 634d0e81c6..ac75203895 100644 --- a/ui/components/Signing/index.tsx +++ b/ui/components/Signing/index.tsx @@ -62,7 +62,7 @@ function SigningLoaded({ flex-direction: column; align-items: center; background-color: var(--green-95); - z-index: 5; + z-index: var(--z-section); } section :global(h1.title) { color: var(--trophy-gold); diff --git a/ui/components/Snackbar/Snackbar.tsx b/ui/components/Snackbar/Snackbar.tsx index cdbf8f52b5..d36e3a992f 100644 --- a/ui/components/Snackbar/Snackbar.tsx +++ b/ui/components/Snackbar/Snackbar.tsx @@ -81,7 +81,7 @@ export default function Snackbar({ {` .snackbar_container { position: fixed; - z-index: 999999999; + z-index: var(--z-overflow); bottom: 72px; left: 0; right: 0; diff --git a/ui/components/TabBar/TabBar.tsx b/ui/components/TabBar/TabBar.tsx index a3b32e7f54..73ed4304d9 100644 --- a/ui/components/TabBar/TabBar.tsx +++ b/ui/components/TabBar/TabBar.tsx @@ -76,7 +76,7 @@ export default function TabBar(): ReactElement { align-items: center; flex-shrink: 0; box-shadow: 0 0 5px rgba(0, 20, 19, 0.5); - z-index: 10; + z-index: var(--z-back-button); } `} diff --git a/ui/components/TabBar/TabBarIconButton.tsx b/ui/components/TabBar/TabBarIconButton.tsx index 0357b45981..a1ded88a6e 100644 --- a/ui/components/TabBar/TabBarIconButton.tsx +++ b/ui/components/TabBar/TabBarIconButton.tsx @@ -89,7 +89,7 @@ export default function TabBarIconButton( top: -2px; background: var(--hunter-green); position: absolute; - z-index: 1; + z-index: var(--z-base); display: flex; justify-content: center; align-items: center; diff --git a/ui/components/TopMenu/TopMenuConnectedDAppInfo.tsx b/ui/components/TopMenu/TopMenuConnectedDAppInfo.tsx index e5c50c20d1..4d69ecba2f 100644 --- a/ui/components/TopMenu/TopMenuConnectedDAppInfo.tsx +++ b/ui/components/TopMenu/TopMenuConnectedDAppInfo.tsx @@ -268,7 +268,7 @@ export default function TopMenuConnectedDAppInfo(props: { border-radius: 16px; background-color: rgba(0, 37, 34, 0.71); position: fixed; - z-index: 99999; + z-index: var(--z-99999); top: 55px; left: 0px; } @@ -302,7 +302,7 @@ export default function TopMenuConnectedDAppInfo(props: { position: absolute; right: 33px; background-color: var(--green-20); - z-index: 1; + z-index: var(--z-base); margin-top: 17px; } .void_space { @@ -311,7 +311,7 @@ export default function TopMenuConnectedDAppInfo(props: { position: fixed; top: 0; left: 0; - z-index: -1; + z-index: var(--z-backdrop); } h1 { color: var(--${isConnected ? "success" : "green-20"}); diff --git a/ui/components/TopMenu/TopMenuProfileTooltip.tsx b/ui/components/TopMenu/TopMenuProfileTooltip.tsx index 7897d6eada..3aa4d6a9cf 100644 --- a/ui/components/TopMenu/TopMenuProfileTooltip.tsx +++ b/ui/components/TopMenu/TopMenuProfileTooltip.tsx @@ -16,7 +16,7 @@ export default function TopMenuProfileTooltip(props: { display: flex; align-items: center; position: absolute; - z-index: 999999999; + z-index: var(--z-overflow); cursor: pointer; bottom: -30px; right: 0; diff --git a/ui/components/Wallet/WalletSubscapeLink.tsx b/ui/components/Wallet/WalletSubscapeLink.tsx index 2d10738d14..522c2ceb6a 100644 --- a/ui/components/Wallet/WalletSubscapeLink.tsx +++ b/ui/components/Wallet/WalletSubscapeLink.tsx @@ -45,7 +45,7 @@ export default function WalletSubspaceLink(): ReactElement { .subscape_link { cursor: pointer; position: absolute; - z-index: 998; // Above the UI, below the menu + z-index: var(--z-below-menu); // Above the UI, below the menu right: 0; top: 90; transform: translateX(0px); diff --git a/ui/pages/DAppConnect/DAppConnectPage.tsx b/ui/pages/DAppConnect/DAppConnectPage.tsx index 844033b79e..624e28cf44 100644 --- a/ui/pages/DAppConnect/DAppConnectPage.tsx +++ b/ui/pages/DAppConnect/DAppConnectPage.tsx @@ -98,7 +98,7 @@ export default function DAppConnectPage({ background-color: var(--green-95); height: 100vh; width: 100vw; - z-index: 1000; + z-index: var(--z-over-menu); } h1 { color: var(--trophy-gold); @@ -149,7 +149,7 @@ export default function DAppConnectPage({ margin-left: 28px; margin-top: -19px; margin-bottom: -10px; - z-index: 3; + z-index: var(--z-expnaded); } .footer_actions { position: fixed; diff --git a/ui/pages/DAppConnectRequest.tsx b/ui/pages/DAppConnectRequest.tsx index 8175a087f4..c2aaaeec14 100644 --- a/ui/pages/DAppConnectRequest.tsx +++ b/ui/pages/DAppConnectRequest.tsx @@ -77,7 +77,7 @@ export default function DAppConnectRequest(): ReactElement { background-color: var(--green-95); height: 100vh; width: 100%; - z-index: 1000; + z-index: var(--z-over-menu); } `} diff --git a/ui/pages/Send.tsx b/ui/pages/Send.tsx index 5d457aa4ed..a7039c4614 100644 --- a/ui/pages/Send.tsx +++ b/ui/pages/Send.tsx @@ -311,7 +311,7 @@ export default function Send(): ReactElement { position: absolute; margin-left: -1px; margin-top: -4px; - z-index: 10; + z-index: var(--z-back-button); } .header { display: flex; diff --git a/ui/pages/Settings.tsx b/ui/pages/Settings.tsx index 39fbb787b0..ab2e615b19 100644 --- a/ui/pages/Settings.tsx +++ b/ui/pages/Settings.tsx @@ -346,7 +346,7 @@ export default function Settings(): ReactElement { {` .select_wrapper { width: 118px; - z-index: 2; + z-index: var(--z-settings); } `} diff --git a/ui/pages/Swap.tsx b/ui/pages/Swap.tsx index 1d6cb22f5b..017c0777d5 100644 --- a/ui/pages/Swap.tsx +++ b/ui/pages/Swap.tsx @@ -601,7 +601,7 @@ export default function Swap(): ReactElement { margin-top: -5px; margin-bottom: -32px; position: relative; - z-index: 1; + z-index: var(--z-base); font-size: 0; } .settings_wrap { @@ -611,7 +611,7 @@ export default function Swap(): ReactElement { position: absolute; margin-left: -1px; margin-top: -4px; - z-index: 10; + z-index: var(--z-back-button); } `} diff --git a/ui/public/index.css b/ui/public/index.css index 361a61836e..0e5566b7e0 100644 --- a/ui/public/index.css +++ b/ui/public/index.css @@ -18,8 +18,8 @@ --gold-5: #fdf6ed; --white: #d6eae9; - --error: #FF6666; - --error-80: #B04443; + --error: #ff6666; + --error-80: #b04443; --error-20: #372a29; --success: #20c580; @@ -41,6 +41,22 @@ --shadow: 0px 16px 16px rgba(0, 33, 30, 0.14), 0px 6px 8px rgba(0, 33, 30, 0.24), 0px 2px 4px rgba(0, 33, 30, 0.34); + + /* z-index */ + --z-backdrop: -1; + --z-base: 1; + --z-settings: 2; + --z-expanded: 3; + --z-content: 4; + --z-section: 5; + --z-back-button: 6; + --z-footer: 7; + --z-tooltip: 8; + --z-below-menu: 9; + --z-menu: 10; + --z-over-menu: 11; + --z-99999: 12; + --z-overflow: 13; } ::-webkit-scrollbar { @@ -50,7 +66,11 @@ body { margin: 0; - font-family: "Segment", -apple-system, BlinkMacSystemFont, "Helvetica Neue", + font-family: + "Segment", + -apple-system, + BlinkMacSystemFont, + "Helvetica Neue", sans-serif; position: relative; color: var(--white);