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

Fix scrolling on integrations page

Browse source
This commit is contained in:
Jackson Harper 2023-06-19 21:38:48 +08:00
parent 4a4bccb6a3
commit 8da29d5a77
1 changed files with 81 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
packages/web/pages/settings/integrations.tsx
View file

@ -217,91 +217,97 @@ export default function Integrations(): JSX.Element {
top: '5rem',
}}
/>
<Header css={{ textAlign: 'center', width: '100%' }}>Integrations</Header>
<Subheader>
Connect with other applications can help enhance and streamline your
experience with Omnivore, below are some useful apps to connect your
Omnivore account to.
</Subheader>
<VStack
distribution={'start'}
css={{
width: '80%',
margin: '0 auto',
height: '800px',
'@smDown': {
width: '100%',
},
}}
>
<Header>Applications</Header>
{integrationsArray.map((item) => {
return (
<HStack
key={item.title}
css={{
width: '100%',
borderRadius: '5px',
backgroundColor: '$grayBg',
margin: '10px 0',
padding: '20px',
display: 'flex',
alignItems: 'center',
'@smDown': {
flexWrap: 'wrap',
borderRadius: 'unset',
},
}}
>
<Image
src={item.icon}
alt="integration Image"
width={75}
height={75}
/>
<Box
<VStack css={{ width: '100%', height: '100%' }}>
<Header css={{ textAlign: 'center', width: '100%' }}>
Integrations
</Header>
<Subheader>
Connect with other applications can help enhance and streamline your
experience with Omnivore, below are some useful apps to connect your
Omnivore account to.
</Subheader>
<VStack
distribution={'start'}
css={{
width: '80%',
margin: '0 auto',
height: '800px',
'@smDown': {
width: '100%',
},
}}
>
<Header>Applications</Header>
{integrationsArray.map((item) => {
return (
<HStack
key={item.title}
css={{
'@sm': {
width: '60%',
},
padding: '8px',
color: '$utilityTextDefault',
m: '10px',
'h3, p': {
margin: '0',
width: '100%',
borderRadius: '5px',
backgroundColor: '$grayBg',
margin: '10px 0',
padding: '20px',
display: 'flex',
alignItems: 'center',
'@smDown': {
flexWrap: 'wrap',
borderRadius: 'unset',
},
}}
>
<h3>{item.title}</h3>
<p>{item.subText}</p>
</Box>
<HStack css={{ '@smDown': { width: '100%' } }}>
<Button
style={
item.button.style === 'ctaDarkYellow'
? 'ctaDarkYellow'
: 'ctaWhite'
}
<Image
src={item.icon}
alt="integration Image"
width={75}
height={75}
/>
<Box
css={{
py: '10px',
px: '14px',
minWidth: '230px',
width: '100%',
'@sm': {
width: '60%',
},
padding: '8px',
color: '$utilityTextDefault',
m: '10px',
'h3, p': {
margin: '0',
},
}}
onClick={item.button.action}
>
{item.button.icon}
<SpanBox
css={{ pl: '10px', fontWeight: '600', fontSize: '16px' }}
<h3>{item.title}</h3>
<p>{item.subText}</p>
</Box>
<HStack css={{ '@smDown': { width: '100%' } }}>
<Button
style={
item.button.style === 'ctaDarkYellow'
? 'ctaDarkYellow'
: 'ctaWhite'
}
css={{
py: '10px',
px: '14px',
minWidth: '230px',
width: '100%',
}}
onClick={item.button.action}
>
{item.button.text}
</SpanBox>
</Button>
{item.button.icon}
<SpanBox
css={{ pl: '10px', fontWeight: '600', fontSize: '16px' }}
>
{item.button.text}
</SpanBox>
</Button>
</HStack>
</HStack>
</HStack>
)
})}
)
})}
</VStack>
<Box css={{ height: '400px', width: '100% ' }} />
</VStack>
</SettingsLayout>
)