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

Use closebutton, smaller font on datetime picker

Browse source
This commit is contained in:
Jackson Harper 2023-03-06 10:57:27 +08:00
parent 04b7086889
commit 6453786b96
2 changed files with 15 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/web/components/elements/CloseButton.tsx
View file

@ -19,7 +19,7 @@ export function CloseButton(props: CloseButtonProps): JSX.Element {
alignItems: 'center',
justifyContent: 'center',
borderRadius: '1000px',
background: '#EBEBEB',
background: '$thBackground2',
'&:hover': {
bg: '#898989',
},

51
packages/web/components/templates/homeFeed/EditItemModals.tsx
View file

@ -3,7 +3,7 @@ import {
ModalContent,
ModalOverlay,
} from '../../elements/ModalPrimitives'
import { VStack, HStack, Box } from '../../elements/LayoutPrimitives'
import { VStack, HStack, Box, SpanBox } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { StyledText } from '../../elements/StyledText'
@ -16,6 +16,7 @@ import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
import dayjs, { Dayjs } from 'dayjs'
import { X } from 'phosphor-react'
import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
import { CloseButton } from '../../elements/CloseButton'
type EditLibraryItemModalProps = {
onOpenChange: (open: boolean) => void
@ -218,7 +219,7 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
<ModalRoot defaultOpen onOpenChange={props.onOpenChange} css={{}}>
<ModalOverlay />
<ModalContent
css={{ bg: '$grayBg', p: '20px', maxWidth: '440px' }}
css={{ bg: '$grayBg', p: '20px', maxWidth: '400px' }}
onInteractOutside={() => {
// remove focus from modal
;(document.activeElement as HTMLElement).blur()
@ -243,7 +244,10 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
const dateStr = event.target.value
setSavedAt(dayjs(dateStr))
}}
css={inputStyle}
css={{
...inputStyle,
fontSize: '14px',
}}
/>
</VStack>
<VStack css={{ width: '45%', marginLeft: 'auto' }}>
@ -260,7 +264,10 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
const dateStr = event.target.value
setPublishedAt(dayjs(dateStr))
}}
css={inputStyle}
css={{
...inputStyle,
fontSize: '14px',
}}
/>
</VStack>
</HStack>
@ -345,39 +352,9 @@ function Header(props: HeaderProps): JSX.Element {
<StyledText css={{}} style="modalHeadline">
Edit Title & Description
</StyledText>
<Box
css={{
display: 'flex',
marginLeft: 'auto',
height: '20px',
width: '20px',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '1000px',
bg: '#EBEBEB',
'&:hover': {
bg: '#898989',
},
}}
>
<Button
css={{
cursor: 'pointer',
marginLeft: 'auto',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
style="ghost"
onClick={() => {
props.onOpenChange(false)
}}
>
<X width={10} height={10} weight="bold" color="#898989" />
</Button>
</Box>
<SpanBox css={{ marginLeft: 'auto' }}>
<CloseButton close={() => props.onOpenChange(false)} />
</SpanBox>
</HStack>
)
}