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

Update list of fonts

Browse source
This commit is contained in:
Jackson Harper 2022-06-15 12:38:36 -07:00
parent 702329cf3f
commit 7a2b1ca940
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/web/components/templates/article/FontFamiliesOptions.tsx
View file

@ -3,8 +3,16 @@ import { StyledText } from '../../elements/StyledText'
import { theme } from '../../tokens/stitches.config'
import { CaretLeft, CheckCircle } from 'phosphor-react'
const DEFAULT_FONT_FAMILY = 'Inter'
const GOOGLE_FONT_FAMILIES = ['Lyon', 'Tisa', 'Merriweather']
const FONT_FAMILIES = [
'Inter',
'System Default',
'Merriweather',
'Lora',
'Open Sans',
'Roboto',
'Crimson Text',
'Source Serif Pro'
]
type FontFamiliesListProps = {
selected: string
@ -19,15 +27,16 @@ type FontOptionProps = {
}
function FontOption(props: FontOptionProps):JSX.Element {
const isSelected = props.selected === props.family
return (
<HStack distribution='between' alignment='start' css={{width: '100%', pt: '14px'}}>
<StyledText
css={{ m: '0px', fontSize: 16, fontWeight: '600', fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
css={{ m: '0px', fontSize: 16, fontWeight: isSelected ? 'bold' : 'regular', fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
onClick={() => props.onSelect(props.family)}
>
{props.family}
</StyledText>
{props.selected === props.family && (
{isSelected && (
<CheckCircle color={theme.colors.grayTextContrast.toString()} />
)}
</HStack>
@ -56,10 +65,7 @@ export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element {
</HStack>
</Box>
<Box css={{px: 15, width: '100%', pb: 15}}>
<StyledText css={{m: 0, fontSize: 10, fontWeight: '600', pt: 14, color: theme.colors.textSubtle.toString()}}>DEFAULT</StyledText>
<FontOption selected={props.selected} family={DEFAULT_FONT_FAMILY} onSelect={props.onSelect} key={`font-${DEFAULT_FONT_FAMILY}`} />
<StyledText css={{m: 0, fontSize: 10, fontWeight: '600', pt: 14, color: theme.colors.textSubtle.toString()}}>GOOGLE FONTS</StyledText>
{GOOGLE_FONT_FAMILIES.map((family) => (
{FONT_FAMILIES.map((family) => (
<FontOption selected={props.selected} family={family} onSelect={props.onSelect} key={`font-${family}`} />
))}
</Box>