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

Move + button up on mobile, consistent design for labels and emails

Browse source
This commit is contained in:
Jackson Harper 2022-04-05 13:44:59 -07:00
parent 52d1d761e4
commit 8439be6c97
2 changed files with 56 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
packages/web/pages/settings/emails.tsx
View file

@ -18,7 +18,7 @@ import {
VStack,
} from '../../components/elements/LayoutPrimitives'
import { useCopyLink } from '../../lib/hooks/useCopyLink'
import { toast, Toaster } from 'react-hot-toast'
import { Toaster } from 'react-hot-toast'
import { useCallback } from 'react'
import { StyledText } from '../../components/elements/StyledText'
import { applyStoredTheme } from '../../lib/themeUpdater'
@ -36,7 +36,7 @@ type CopyTextButtonProps = {
}
const HeaderWrapper = styled(Box, {
width: '863px',
width: '100%',
'@md': {
display: 'block',
},
@ -55,7 +55,6 @@ const TableCard = styled(Box, {
},
'@md': {
paddingLeft: '0',
width: '863px',
},
})
@ -66,7 +65,7 @@ const TableHeading = styled(Box, {
alignItems: 'center',
padding: '14px 0 14px 40px',
borderRadius: '5px 5px 0px 0px',
width: '863px',
width: '100%',
'@md': {
display: 'flex',
}
@ -89,16 +88,6 @@ const CopyTextBtnWrapper = styled(Box, {
border: '1px solid rgba(0, 0, 0, 0.06)',
})
const MobileBtnWrapper = styled(Box, {
display: 'flex',
position: 'fixed',
bottom: '16px',
right: '25px',
'@md': {
display: 'none',
},
})
const InfoIcon = styled(Info, {
marginTop: '8px',
'&:hover': {
@ -209,11 +198,9 @@ export default function EmailsPage(): JSX.Element {
color: '$grayText',
paddingBottom: '5rem',
paddingTop: '2rem',
'@md': {
m: '16px',
alignSelf: 'center',
maxWidth: '72%',
mx: '42px',
paddingTop: '0',
},
@ -242,27 +229,36 @@ export default function EmailsPage(): JSX.Element {
</a>
</Link>
</Box>
<Box css={{
display: 'none',
'@md': {
display: 'unset',
},
}}>
<Button
onClick={createEmail}
style="ctaDarkYellow"
css={{
<Button
onClick={createEmail}
style="ctaDarkYellow"
css={{
display: 'flex',
alignItems: 'center',
marginLeft: 'auto',
}}
>
<SpanBox css={{
display: 'none',
'@md': {
display: 'flex',
alignItems: 'center',
}}
>
<Plus size={18} style={{ marginRight: '6.5px' }} />
},
}}>
<SpanBox>Add Email</SpanBox>
</Button>
</Box>
</SpanBox>
<SpanBox css={{
p: '0',
display: 'flex',
'@md': {
display: 'none',
},
}}>
<Plus size={24} />
</SpanBox>
</Button>
</Box>
<TableHeading>
<Box
<Box
css={{
flex: '49%',
}}
@ -312,8 +308,8 @@ export default function EmailsPage(): JSX.Element {
<Box
css={{
display: 'flex',
flexDirection: 'column',
width: '100%',
flexDirection: 'column',
'@md': {
flexDirection: 'row',
},
@ -354,6 +350,7 @@ export default function EmailsPage(): JSX.Element {
</CopyTextBtnWrapper>
<Box
css={{
marginLeft: 'auto',
textAlign: 'right',
display: 'flex',
'@md': {
@ -373,6 +370,7 @@ export default function EmailsPage(): JSX.Element {
borderRadius: '6px',
padding: '8px 4px 4px 7px',
'@md': {
padding: 'unset',
backgroundColor: 'transparent',
},
}}
@ -387,7 +385,9 @@ export default function EmailsPage(): JSX.Element {
<Box>
<CopyTextBtnWrapper
css={{
border: 'none',
'@mdDown': {
border: 'none',
}
}}
>
<CopyTextButton
@ -400,7 +400,7 @@ export default function EmailsPage(): JSX.Element {
</HStack>
)}
</Box>
<HStack distribution={'start'}>
<HStack distribution={'start'} css={{ marginLeft: 'auto' }}>
<Box
css={{
textAlign: 'right',
@ -416,19 +416,6 @@ export default function EmailsPage(): JSX.Element {
</TableCard>
)
})}
<MobileBtnWrapper>
<Button
onClick={createEmail}
style="ctaDarkYellow"
css={{
display: 'flex',
border: '1px solid $grayBorder',
borderRadius: '8px',
}}
>
<Plus size={24} />
</Button>
</MobileBtnWrapper>
</VStack>
</PrimaryLayout>
)

51
packages/web/pages/settings/labels.tsx
View file

@ -147,16 +147,6 @@ const IconButton = styled(Button, {
},
})
const MobileBtnWrapper = styled(Box, {
display: 'flex',
position: 'fixed',
bottom: '16px',
right: '25px',
'@md': {
display: 'none',
},
})
const Input = styled('input', { ...inputStyles })
const TextArea = styled('textarea', { ...inputStyles })
@ -273,7 +263,7 @@ export default function LabelsPage(): JSX.Element {
<Box style={{ flex: '1' }}>
<StyledText style="fixedHeadline">Labels</StyledText>
</Box>
<Box css={{ minWidth: '178px', display: 'flex', justifyContent: 'flex-end' }}>
<Box css={{display: 'flex', justifyContent: 'flex-end' }}>
{isCreateMode ? null : (
<>
<Button
@ -283,29 +273,28 @@ export default function LabelsPage(): JSX.Element {
}}
style="ctaDarkYellow"
css={{
display: 'none',
display: 'flex',
alignItems: 'center',
}}
>
<SpanBox css={{
display: 'none',
'@md': {
display: 'flex',
},
}}
>
<Plus size={18} style={{ marginRight: '6.5px' }} />
<SpanBox>Add Label</SpanBox>
</Button>
<MobileBtnWrapper>
<Button
onClick={() => setIsCreateMode(true)}
style="ctaDarkYellow"
css={{
display: 'flex',
border: '1px solid $grayBorder',
borderRadius: '8px',
}}
>
}}>
<SpanBox>Add Label</SpanBox>
</SpanBox>
<SpanBox css={{
p: '0',
display: 'flex',
'@md': {
display: 'none',
},
}}>
<Plus size={24} />
</Button>
</MobileBtnWrapper>
</SpanBox>
</Button>
</>
)}
</Box>
@ -497,8 +486,8 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
display: 'grid',
width: '100%',
gridGap: '$1',
height: '56px',
gridTemplateColumns: '3fr 1fr',
height: editingLabelId === label?.id ? '280px' : '56px',
'.showHidden': {
display: 'none',
},
@ -511,7 +500,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
},
},
'@md': {
// gridTemplateColumns: '20% 15% 1fr 1fr 1fr',
height: '56px',
gridTemplateColumns: '20% 28% 1fr 1fr',
},
}}