From 79f6b4d9735f99f913d80326bcbbcd43bdf978fd Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 3 Mar 2023 20:52:59 +0800
Subject: [PATCH] Themeing, adjust modal overlay zindex to be above header

---
 .../components/elements/ModalPrimitives.tsx   |  2 +-
 .../templates/homeFeed/EditItemModals.tsx     | 20 +++++++++----------
 .../templates/reader/ReaderHeader.tsx         |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx
index a9c0975c3..c086d5d59 100644
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@@ -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, {
diff --git a/packages/web/components/templates/homeFeed/EditItemModals.tsx b/packages/web/components/templates/homeFeed/EditItemModals.tsx
index 77ad40e2f..51bdf6d81 100644
--- a/packages/web/components/templates/homeFeed/EditItemModals.tsx
+++ b/packages/web/components/templates/homeFeed/EditItemModals.tsx
@@ -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',
diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index 575ff5d6d..fad3a5b76 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -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,