refactor: review updates

components/Downloads/ChangelogModal/index.module.css

@@ -1,67 +1,98 @@
-svg {
-  @apply h-4
-    w-4
-    text-neutral-600;
-}
-
-.dialogOverlay {
+.overlay {
   @apply fixed
     inset-0
+    flex
+    justify-center
     bg-white
     bg-opacity-90
     backdrop-blur-lg
-    dark:bg-neutral-900
+    dark:bg-neutral-950
     dark:bg-opacity-80;
 
-  .dialogContent {
-    @apply fixed
-    left-[50%]
-    top-[40%]
-    inline-flex
-    max-h-[85vh]
-    w-3/4
-    translate-x-[-50%]
-    translate-y-[-50%]
-    flex-col
-    overflow-scroll
-    rounded
-    border
-    border-neutral-200
-    bg-white
-    p-12
-    focus:outline-none
-    dark:bg-neutral-900;
+  .content {
+    @apply relative
+      mx-4
+      my-4
+      inline-flex
+      w-full
+      flex-col
+      overflow-scroll
+      rounded
+      border
+      border-neutral-200
+      bg-white
+      p-8
+      focus:outline-none
+      dark:bg-neutral-950
+      sm:mt-20
+      sm:w-1/2
+      sm:p-12;
+
+    .trigger {
+      @apply absolute
+        right-3
+        top-3
+        block
+        h-6
+        w-6
+        cursor-pointer
+        sm:hidden;
+    }
   }
 
-  .dialogTitle {
+  .title {
     @apply mb-2
-    text-3xl
-    font-semibold
-    leading-9
-    text-neutral-900
-    dark:text-white;
+      text-3xl
+      font-semibold
+      text-neutral-900
+      dark:text-white;
   }
 
-  .dialogDescription {
-    @apply mb-2
-    font-open-sans
-    text-lg
-    font-regular
-    leading-normal
-    text-neutral-800
-    dark:text-neutral-200;
+  .description {
+    @apply mb-4
+      text-lg
+      font-regular
+      text-neutral-800
+      dark:text-neutral-200;
   }
 
-  .authorsContainer {
-    @apply flex
-    items-center;
+  .authors {
+    @apply mb-8
+      flex
+      flex-wrap
+      items-center
+      gap-4;
 
     a {
-      @apply ml-2
-      text-xs
-      text-neutral-600
-      underline
-      visited:text-neutral-600;
+      @apply flex
+        items-center
+        gap-1
+        text-xs
+        text-neutral-600
+        underline
+        visited:text-neutral-600;
+    }
+
+    svg {
+      @apply h-3
+        w-3
+        text-neutral-600;
+    }
+  }
+
+  .wrapper {
+    @apply flex
+      flex-col
+      gap-4;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p {
+      @apply text-neutral-900
+        dark:text-white;
     }
   }
 }

components/Downloads/ChangelogModal/index.tsx

@@ -1,4 +1,4 @@
-import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
+import { ArrowUpRightIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useTranslations } from 'next-intl';
 import type { FC, PropsWithChildren, ReactNode, ComponentProps } from 'react';
@@ -24,26 +24,28 @@ const ChangelogModal: FC<PropsWithChildren<ChangelogModalProps>> = ({
   children,
 }) => {
   const t = useTranslations();
+
   return (
     <Dialog.Root>
       <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Overlay className={styles.dialogOverlay}>
-          <Dialog.Content className={styles.dialogContent}>
-            <Dialog.Title className={styles.dialogTitle}>
-              {heading}
-            </Dialog.Title>
-            <Dialog.Description className={styles.dialogDescription}>
+        <Dialog.Overlay className={styles.overlay}>
+          <Dialog.Content className={styles.content}>
+            <Dialog.Trigger className={styles.trigger}>
+              <XMarkIcon />
+            </Dialog.Trigger>
+            <Dialog.Title className={styles.title}>{heading}</Dialog.Title>
+            <Dialog.Description className={styles.description}>
               {subheading}
             </Dialog.Description>
-            <div className={styles.authorsContainer}>
+            <div className={styles.authors}>
               <AvatarGroup avatars={avatars} />
               <Link href="/get-involved">
                 {t('components.downloads.changelogModal.startContributing')}
+                <ArrowUpRightIcon />
               </Link>
-              <ArrowUpRightIcon />
             </div>
-            {children}
+            <div className={styles.wrapper}>{children}</div>
             <Dialog.Close />
           </Dialog.Content>
         </Dialog.Overlay>