Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use same checkmark as labels for font selection. Clean up layout of title

Browse Source
This commit is contained in:
Jackson Harper
2022-06-21 17:04:59 -07:00
parent 28283a10fc
commit d5939b3fec
1 changed files with 7 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/web/components/templates/article/FontFamiliesOptions.tsx
View File

@ -1,7 +1,7 @@
import { HStack, Box } from '../../elements/LayoutPrimitives'
import { StyledText } from '../../elements/StyledText'
import { theme } from '../../tokens/stitches.config'
import { CaretLeft, CheckCircle } from 'phosphor-react'
import { CaretLeft, Check, CheckCircle } from 'phosphor-react'
const FONT_FAMILIES = [
'Inter',
@ -38,7 +38,7 @@ function FontOption(props: FontOptionProps):JSX.Element {
{props.family}
</StyledText>
{isSelected && (
<CheckCircle color={theme.colors.grayTextContrast.toString()} />
<Check color={theme.colors.grayTextContrast.toString()} weight='bold' />
)}
</HStack>
)
@ -48,24 +48,19 @@ export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element {
return (
<>
<Box css={{borderBottom: `1px solid ${theme.colors.grayLine.toString()}`, width: '100%'}}>
<HStack alignment='center' distribution='between' css={{width: '70%', py: 10, px: 15}}>
<HStack alignment='center' distribution='between' css={{width: '100%', py: 10, px: 15}}>
<HStack
alignment='center'
distribution='start'
css={{cursor: 'pointer'}}
css={{ cursor: 'pointer', py: '4px', width: '100%' }}
onClick={() => props.setShowFontFamilies(false)}
>
<Box css={{position: 'relative', top: 2, right: 5}}>
<CaretLeft color={theme.colors.textSubtle.toString()} size={15} />
</Box>
<StyledText css={{m: 0, pt: 4, fontSize: 12, color: theme.colors.textSubtle.toString()}}>
Back
</StyledText>
<CaretLeft color={theme.colors.textSubtle.toString()} size={15} />
<StyledText css={{ textAlign: 'center', m: 0, fontSize: 14, fontWeight: 'bold', width: '100%', wordWrap: 'revert' }}>Choose Font</StyledText>
</HStack>
{/* <StyledText css={{m: 0, fontSize: 16, fontWeight: '600'}}>Select Font</StyledText> */}
</HStack>
</Box>
<Box css={{px: 15, width: '100%', pb: 15}}>
<Box css={{ pl: 15, pb: 15}}>
{FONT_FAMILIES.map((family) => (
<FontOption selected={props.selected} family={family} onSelect={props.onSelect} key={`font-${family}`} />
))}