prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make the help boxes nicer on small screens

Browse source
This commit is contained in:
Jackson Harper 2023-09-04 14:57:57 +08:00
parent bdaa07d6c2
commit a886876b4e
1 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/web/components/elements/FeatureHelpBox.tsx
View file

@ -35,16 +35,18 @@ export const FeatureHelpBox = (props: FeatureHelpBoxProps) => {
color: '$grayText',
px: '20px',
py: '20px',
justifyContent: 'flex-start',
'@smDown': {
flexDirection: 'column',
alignItems: 'center',
width: '100%',
},
}}
alignment="start"
distribution="start"
>
<HStack css={{ gap: '30px' }}>
<SpanBox css={{ pt: '7px', alignSelf: 'center' }}>
<SpanBox
css={{
pt: '7px',
alignSelf: 'center',
'@smDown': { display: 'none' },
}}
>
<HelpfulOwlImage width={254} height={333} />
</SpanBox>
<HelpSection {...props} />
@ -92,6 +94,7 @@ const HelpSection = (props: FeatureHelpBoxProps) => {
event.preventDefault()
}
}}
css={{ '@smDown': { display: 'none' } }}
>
{props.helpCTAText}
</Button>