Skip to content

Commit

Permalink
Z-index refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@xpaczka
xpaczka committed Dec 4, 2023
1 parent 014a028 commit 4d87096
Show file tree
Hide file tree
Showing 37 changed files with 74 additions and 54 deletions.
2 changes: 1 addition & 1 deletion ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx
View file
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

0 comments on commit 4d87096

Please sign in to comment.