Skip to content

Commit

Permalink
fix up some styles
Browse files Browse the repository at this point in the history
  • Loading branch information
talentlessguy committed Nov 6, 2024
1 parent 8da0e93 commit 71671a4
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 16 deletions.
33 changes: 20 additions & 13 deletions components/src/components/molecules/Modal/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import type { BoxProps } from '../../atoms/Box/Box'
import { Box } from '../../atoms/Box/Box'
import { getValueForMode } from './utils/getValueForMode'
import { Backdrop } from '../Backdrop/Backdrop'
import { clsx } from 'clsx'
import * as styles from './styles.css'
import { assignInlineVars } from '@vanilla-extract/dynamic'

type ContainerProps = {
$state: TransitionState['status']
Expand All @@ -17,6 +20,8 @@ const Container: React.FC<BoxProps & ContainerProps> = ({
$state,
$alignTop,
$mobileOnly,
className,
style,
...props
}) => {
const mobileMode = $alignTop ? 'mobileTop' : 'mobileBottom'
Expand All @@ -41,26 +46,28 @@ const Container: React.FC<BoxProps & ContainerProps> = ({
base: getValueForMode(mobileMode, 'top'),
sm: getValueForMode(desktopMode, 'top'),
}}
transform={{
base: entered
? 'translateY(0px)'
: getValueForMode(mobileMode, 'transform'),
sm: entered
? 'translateY(0px)'
: getValueForMode(desktopMode, 'transform'),
}}

transitionDuration={300}
transitionProperty="all"
transitionTimingFunction="popIn"
translate={{
base: getValueForMode(mobileMode, 'translate'),
sm: getValueForMode(desktopMode, 'translate'),
}}
width={{
base: getValueForMode(mobileMode, 'width'),
sm: getValueForMode(desktopMode, 'width'),
}}
zIndex={9999}
className={clsx(styles.container, className)}
style={{
...style, ...assignInlineVars({
[styles.transformBase]: entered
? 'translateY(0px)'
: getValueForMode(mobileMode, 'transform'),
[styles.translateBase]: getValueForMode(mobileMode, 'translate'),
[styles.transformSm]: entered
? 'translateY(0px)'
: getValueForMode(desktopMode, 'transform'),
[styles.translateSm]: getValueForMode(desktopMode, 'translate'),
}),
}}
/>
)
}
Expand All @@ -81,7 +88,7 @@ export type ModalProps = {
renderCallback?: () => void
/** if true, modal will remain centered to bottom of page */
mobileOnly?: boolean
} & NativeDivProps
} & Omit<NativeDivProps, 'color'>

export const Modal = ({
children,
Expand Down
21 changes: 21 additions & 0 deletions components/src/components/molecules/Modal/styles.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { responsiveConditions } from '@/src/css/sprinkles.css'
import { createVar, style } from '@vanilla-extract/css'

export const transformBase = createVar()

export const transformSm = createVar()

export const translateBase = createVar()

export const translateSm = createVar()

export const container = style({
'transform': transformBase,
'translate': translateBase,
'@media': {
[responsiveConditions.sm['@media']]: {
transform: transformSm,
translate: translateSm,
},
},
})
4 changes: 2 additions & 2 deletions components/src/components/organisms/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const CloseButton = ({ className, ...props }: BoxProps) => (
transitionTimingFunction="inOut"
wh="8"
>
<Box as={<CrossSVG />} color="greyPrimary" display="block" wh="4" />
<Box as={CrossSVG} color="greyPrimary" display="block" wh="4" />
</Box>
)

Expand Down Expand Up @@ -63,7 +63,7 @@ const StyledCard = ({ className, ...props }: BoxProps) => (
type NonNullableAlert = NonNullable<WithAlert['alert']>

const Icon = ({ $alert, className, ...props }: BoxProps & { $alert: NonNullableAlert }) => {
const Icon = ['error', 'warning'].includes($alert) ? <AlertSVG /> : <EthSVG />
const Icon = ['error', 'warning'].includes($alert) ? AlertSVG : EthSVG
return (
<Box
{...props}
Expand Down
2 changes: 1 addition & 1 deletion components/src/components/organisms/Toast/Toast.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import clsx from 'clsx'
const CloseIcon = (props: BoxProps) => (
<Box
{...props}
as={<CrossSVG />}
as={CrossSVG}
cursor="pointer"
opacity={{ base: '0.5', hover: '0.7' }}
padding="1.5"
Expand Down

0 comments on commit 71671a4

Please sign in to comment.