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

Simplify layout of font selector

Browse source
This commit is contained in:
Jackson Harper 2022-06-21 16:53:26 -07:00
parent 3d3ddc2562
commit 28283a10fc
2 changed files with 10 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,7 +32,7 @@ function FontOption(props: FontOptionProps):JSX.Element {
return (
<HStack distribution='between' alignment='start' css={{width: '100%', pt: '14px'}}>
<StyledText
css={{ m: '0px', fontSize: 16, fontWeight: isSelected ? 'bold' : 'regular', fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
css={{ m: '0px', fontSize: 16, fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
onClick={() => props.onSelect(props.family)}
>
{props.family}
@ -58,7 +58,7 @@ export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element {
<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, fontWeight: '600', color: theme.colors.textSubtle.toString()}}>
<StyledText css={{m: 0, pt: 4, fontSize: 12, color: theme.colors.textSubtle.toString()}}>
Back
</StyledText>
</HStack>

24
packages/web/components/templates/article/ReaderSettingsControl.tsx
View file

@ -3,7 +3,7 @@ import { Button } from '../../elements/Button'
import { StyledText } from '../../elements/StyledText'
import { styled, theme } from '../../tokens/stitches.config'
import { useEffect, useState } from 'react'
import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHorizontal, CaretRight } from 'phosphor-react'
import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHorizontal, CaretRight, Cursor } from 'phosphor-react'
import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
import { showSuccessToast } from '../../../lib/toastHelpers'
import { FontFamiliesOptions } from './FontFamiliesOptions'
@ -69,24 +69,16 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
py: '12px',
width: '100%',
height: '44px',
verticalAlign: 'baseline'
verticalAlign: 'baseline',
cursor: 'pointer',
}}
onClick={() => setShowFontOptions(true)}
>
<StyledText css={{ m: '0px' }}>Font:</StyledText>
<HStack
alignment='center'
css={{cursor: 'pointer', marginLeft: 'auto' }}
onClick={() => setShowFontOptions(true)}
>
<StyledText
css={{ m: '0px', fontFamily: readeringSettings.fontFamily, textTransform: 'capitalize' }}
>
{readeringSettings.fontFamily}
</StyledText>
<Box css={{ }}>
<CaretRight width={16} height={16} color={theme.colors.grayTextContrast.toString()}/>
</Box>
</HStack>
<StyledText css={{ m: '0px', marginLeft: 'auto', pr: '4px', fontFamily: readeringSettings.fontFamily, textTransform: 'capitalize' }}>
{readeringSettings.fontFamily}
</StyledText>
<CaretRight width={16} height={16} color={theme.colors.grayTextContrast.toString()}/>
</HStack>
<HorizontalDivider css={{
'@smDown': {