Q&A UI updates (#2287)

* Q&A UI updates * refactor
quran · Jan 30, 2025 · f40661d · f40661d
1 parent 01e0761
commit f40661d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/src/components/QuestionAndAnswer/QuestionsModal/QuestionsModal.module.scss b/src/components/QuestionAndAnswer/QuestionsModal/QuestionsModal.module.scss
@@ -15,10 +15,10 @@
 
 .closeIcon {
     @include breakpoints.tablet {
-        display: block;
-        position: relative;
-        margin: 0;
-        padding: 0;
+        display: block !important;
+        position: relative !important;
+        margin: 0 !important;
+        padding: 0 !important;
     }
 }
 

diff --git a/src/components/QuestionAndAnswer/QuestionsModal/index.tsx b/src/components/QuestionAndAnswer/QuestionsModal/index.tsx
@@ -35,6 +35,7 @@ const QuestionsModal: React.FC<QuestionModalProps> = ({
       contentClassName={styles.contentModal}
       closeIconClassName={styles.closeIcon}
       headerClassName={styles.header}
+      shouldBeFullScreen
     >
       {isOpen && <ModalContent verseKey={verseKey} />}
     </ContentModal>

diff --git a/src/components/dls/ContentModal/ContentModal.module.scss b/src/components/dls/ContentModal/ContentModal.module.scss
@@ -69,6 +69,12 @@ $translateYDistance: 200px;
   transition: opacity var(--transition-fast) ease;
 }
 
+.fullScreen {
+  @include breakpoints.smallerThanTablet {
+    padding-block-start: 0 !important;
+  }
+}
+
 .contentWrapper {
   background: var(--color-background-default);
   box-sizing: border-box;
@@ -119,12 +125,14 @@ $translateYDistance: 200px;
 }
 
 .contentWrapper[data-state="open"] {
-  animation: contentIn var(--transition-regular) ease,
+  animation:
+    contentIn var(--transition-regular) ease,
     fadeIn var(--transition-regular) ease;
 }
 
 .contentWrapper[data-state="closed"] {
-  animation: contentOut var(--transition-regular) ease,
+  animation:
+    contentOut var(--transition-regular) ease,
     fadeOut var(--transition-regular) ease;
 }
 

diff --git a/src/components/dls/ContentModal/ContentModal.tsx b/src/components/dls/ContentModal/ContentModal.tsx
@@ -32,6 +32,7 @@ type ContentModalProps = {
   headerClassName?: string;
   size?: ContentModalSize;
   isFixedHeight?: boolean;
+  shouldBeFullScreen?: boolean;
 };
 
 const SCROLLBAR_WIDTH = 15;
@@ -51,6 +52,7 @@ const ContentModal = ({
   isFixedHeight,
   hasHeader = true,
   onClick,
+  shouldBeFullScreen = false,
 }: ContentModalProps) => {
   const overlayRef = useRef<HTMLDivElement>();
   const { locale } = useRouter();
@@ -92,7 +94,10 @@ const ContentModal = ({
   return (
     <Dialog.Root open={isOpen}>
       <Dialog.Portal>
-        <Dialog.Overlay className={styles.overlay} ref={overlayRef}>
+        <Dialog.Overlay
+          className={classNames(styles.overlay, { [styles.fullScreen]: shouldBeFullScreen })}
+          ref={overlayRef}
+        >
           <Dialog.Content
             {...(onClick && { onClick })}
             className={classNames(styles.contentWrapper, {