Skip to content

Commit

Permalink
feat: add modal zIndex to theme definition (#439)
Browse files Browse the repository at this point in the history
  • Loading branch information
just-toby authored Feb 1, 2023
1 parent ca3ac72 commit e65f52e
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/components/BottomSheetModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const BottomSheetModalBackdrop = styled.div<{ className?: string }>`
top: 0;
transition: visibility 0s linear 0s, opacity ${AnimationSpeed.Medium};
visibility: visible;
z-index: ${({ theme }) => theme.zIndex.modal - 1};
`

const Wrapper = styled.div<{ open: boolean }>`
Expand All @@ -43,7 +44,9 @@ const Wrapper = styled.div<{ open: boolean }>`
left: 0;
margin: 0;
overflow: hidden;
position: absolute;
right: 0;
z-index: ${({ theme }) => theme.zIndex.modal};
@supports (overflow: clip) {
overflow: clip;
Expand Down
4 changes: 4 additions & 0 deletions src/theme/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { mix, rgba, transparentize } from 'polished'
import { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
import { DefaultTheme, ThemeProvider as StyledProvider } from 'styled-components/macro'

import { Layer } from './layer'
import type { Colors, Theme, ThemeBorderRadius } from './theme'

export * from './animations'
Expand Down Expand Up @@ -98,6 +99,9 @@ const defaultBorderRadius = {

export const defaultTheme = {
borderRadius: defaultBorderRadius,
zIndex: {
modal: Layer.DIALOG,
},
fontFamily: {
font: '"Inter", sans-serif',
variable: '"InterVariable", sans-serif',
Expand Down
5 changes: 5 additions & 0 deletions src/theme/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,13 @@ export type ThemeBorderRadius = {
small: number
}

export type ZIndex = {
modal: number
}

export interface Attributes {
borderRadius: ThemeBorderRadius
zIndex: ZIndex
fontFamily:
| string
| {
Expand Down

1 comment on commit e65f52e

@vercel
Copy link

@vercel vercel bot commented on e65f52e Feb 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

widgets – ./

widgets-git-main-uniswap.vercel.app
widgets-seven-tau.vercel.app
widgets-uniswap.vercel.app

Please sign in to comment.