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

Themeing, adjust modal overlay zindex to be above header

Browse Source
This commit is contained in:
Jackson Harper
2023-03-03 20:52:59 +08:00
parent 061c165929
commit 79f6b4d973
3 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/components/elements/ModalPrimitives.tsx
View File

@ -17,6 +17,7 @@ export const ModalOverlay = styled(Overlay, {
width: '100vw',
height: '100vh',
position: 'fixed',
zIndex: 10,
inset: 0,
'@media (prefers-reduced-motion: no-preference)': {
animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
@ -29,7 +30,6 @@ const Modal = styled(Content, {
boxShadow: theme.shadows.cardBoxShadow.toString(),
position: 'fixed',
'&:focus': { outline: 'none' },
zIndex: '1',
})
export const ModalContent = styled(Modal, {

20
packages/web/components/templates/homeFeed/EditItemModals.tsx
View File

@ -231,13 +231,13 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
css={{
mt: '1px',
borderRadius: '5px',
border: '1px solid #D9D9D9',
border: '1px solid $thBorderColor',
fontFamily: 'Inter',
fontWeight: '500',
fontSize: '12px',
height: '30px',
p: '5px',
color: '#3D3D3D',
color: '$thTextContrast2',
'&:focus': {
outline: 'none !important',
border: '1px solid $omnivoreCtaYellow',
@ -263,13 +263,13 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
css={{
mt: '1px',
borderRadius: '5px',
border: '1px solid #D9D9D9',
border: '1px solid $thBorderColor',
fontFamily: 'Inter',
fontWeight: '500',
fontSize: '12px',
height: '30px',
p: '5px',
color: '#3D3D3D',
color: '$thTextContrast2',
'&:focus': {
outline: 'none !important',
border: '1px solid $omnivoreCtaYellow',
@ -287,14 +287,14 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
onChange={(event) => setTitle(event.target.value)}
css={{
borderRadius: '5px',
border: '1px solid #D9D9D9',
border: '1px solid $thBorderColor',
width: '100%',
fontFamily: 'Inter',
fontWeight: '500',
fontSize: '12px',
height: '30px',
p: '5px',
color: '#3D3D3D',
color: '$thTextContrast2',
'&:focus': {
outline: 'none !important',
border: '1px solid $omnivoreCtaYellow',
@ -310,14 +310,14 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
onChange={(event) => setAuthor(event.target.value)}
css={{
borderRadius: '5px',
border: '1px solid #D9D9D9',
border: '1px solid $thBorderColor',
width: '100%',
fontFamily: 'Inter',
fontWeight: '500',
fontSize: '12px',
height: '30px',
p: '5px',
color: '#3D3D3D',
color: '$thTextContrast2',
'&:focus': {
outline: 'none !important',
border: '1px solid $omnivoreCtaYellow',
@ -329,14 +329,14 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
<StyledTextArea
css={{
borderRadius: '5px',
border: '1px solid #D9D9D9',
border: '1px solid $thBorderColor',
width: '100%',
fontFamily: 'Inter',
fontWeight: '500',
fontSize: '12px',
height: '120px',
p: '5px',
color: '#3D3D3D',
color: '$thTextContrast2',
mt: '2px',
'&:focus': {
outline: 'none !important',

2
packages/web/components/templates/reader/ReaderHeader.tsx
View File

@ -24,7 +24,7 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
css={{
top: '0',
left: '0',
zIndex: 5,
zIndex: 1,
position: 'fixed',
width: '100%',
height: HEADER_HEIGHT,