Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Z-index refactor #3689

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Z-index refactor #3689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4d87096
Z-index refactor
xpaczka Dec 4, 2023
935d597
Merge branch 'main' into z-index
xpaczka Dec 15, 2023
ee79776
Bring back previous `z-index` values
xpaczka Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ui/components/Claim/ClaimFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ui/components/Core/CorePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`}
Expand Down
4 changes: 2 additions & 2 deletions ui/components/DAppConnection/DAppConnectionInfoBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ function DefaultConnectionPopover({ close }: PopoverProps): ReactElement {
transparent 30%
);

z-index: 4;
z-index: var(--z-content;
}

section {
Expand Down Expand Up @@ -170,7 +170,7 @@ function DefaultConnectionPopover({ close }: PopoverProps): ReactElement {
position: fixed;
top: 0;
left: 0;
z-index: -1;
z-index: var(--z-backdrop);
}
`}</style>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/components/NFTs/NFTCollection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion ui/components/NFTs/NFTHover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions ui/components/Overview/AbilitiesHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export default function AbilitiesHeader(): ReactElement {
);

position: relative;
z-index: 1;
z-index: var(--z-base);
}

.small_banner:before {
Expand All @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion ui/components/Shared/SharedButtonUp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function SharedButtonUp<T extends HTMLElement>(props: {
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
z-index: var(--z-expnaded);
opacity: 1;
transition: opacity 100ms ease-in;
}
Expand Down
4 changes: 2 additions & 2 deletions ui/components/Shared/SharedDropDown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
8 changes: 4 additions & 4 deletions ui/components/Shared/SharedInfoModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
`}</style>
</>
Expand Down
6 changes: 3 additions & 3 deletions ui/components/Shared/SharedModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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)"};
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ui/components/Shared/SharedNetworkIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
`}</style>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/components/Shared/SharedSeedInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions ui/components/Shared/SharedSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions ui/components/Shared/SharedSlideUpMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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:
Expand All @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion ui/components/Shared/SharedSlideUpMenuPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ui/components/Shared/SharedTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion ...eDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ui/components/Signing/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function SigningLoaded<T extends SignOperationType>({
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);
Expand Down
2 changes: 1 addition & 1 deletion ui/components/Snackbar/Snackbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ui/components/TabBar/TabBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
`}
</style>
Expand Down
2 changes: 1 addition & 1 deletion ui/components/TabBar/TabBarIconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions ui/components/TopMenu/TopMenuConnectedDAppInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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"});
Expand Down
2 changes: 1 addition & 1 deletion ui/components/TopMenu/TopMenuProfileTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ui/components/Wallet/WalletSubscapeLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions ui/pages/DAppConnect/DAppConnectPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/DAppConnectRequest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
`}</style>
<style jsx global>{`
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/Earn/DepositCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export default function EarnDepositedCard({
display: flex;
}
.single_icon_first {
z-index: 2;
z-index: var(--z-settings);
}
.multiple_icons div {
margin: 0 -8px;
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/Earn/PoolCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export default function EarnCard({ vault }: EarnCardProps): ReactElement {
display: flex;
}
.single_icon_first {
z-index: 2;
z-index: var(--z-settings);
}
.multiple_icons div {
margin: 0 -8px;
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/EarnDeposit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -561,7 +561,7 @@ export default function EarnDeposit(): ReactElement | null {
display: flex;
}
.single_icon_first {
z-index: 2;
z-index: var(--z-settings);
}
.multiple_icons div {
margin: 0 -8px;
Expand Down
Loading
Loading