From 1621125f6d83058fc7276eb7d3f692db768b4f50 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 21 Sep 2023 16:03:06 +0530
Subject: [PATCH] refactor: product updates modal layout (#2225)

---
 web/components/ui/product-updates-modal.tsx | 110 +++++++++++---------
 1 file changed, 62 insertions(+), 48 deletions(-)

diff --git a/web/components/ui/product-updates-modal.tsx b/web/components/ui/product-updates-modal.tsx
index b142f8325..4f5bad7b3 100644
--- a/web/components/ui/product-updates-modal.tsx
+++ b/web/components/ui/product-updates-modal.tsx
@@ -1,15 +1,16 @@
 import React from "react";
+
 import useSWR from "swr";
 
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// component
-import { MarkdownRenderer, Spinner } from "components/ui";
-// icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
 // services
 import workspaceService from "services/workspace.service";
-// helper
+// components
+import { Loader, MarkdownRenderer } from "components/ui";
+// icons
+import { XMarkIcon } from "@heroicons/react/20/solid";
+// helpers
 import { renderLongDateFormat } from "helpers/date-time.helper";
 
 type Props = {
@@ -34,8 +35,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
           <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="grid place-items-center min-h-full text-center p-4">
+        <div className="fixed inset-0 z-20 h-full w-full">
+          <div className="grid place-items-center h-full w-full p-4">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -45,49 +46,62 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all grid place-items-center sm:w-full sm:max-w-2xl">
-                <div className="max-h-[90vh] overflow-y-auto p-5">
-                  <div className="sm:flex sm:items-start">
-                    <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        <span>Product Updates</span>
-                        <span>
-                          <button type="button" onClick={() => setIsOpen(false)}>
-                            <XMarkIcon
-                              className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
-                              aria-hidden="true"
-                            />
-                          </button>
-                        </span>
-                      </Dialog.Title>
-                      {updates && updates.length > 0 ? (
-                        updates.map((item, index) => (
-                          <React.Fragment key={item.id}>
-                            <div className="flex items-center gap-3 text-xs text-custom-text-200">
-                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
-                                {item.tag_name}
+              <Dialog.Panel className="relative overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 shadow-custom-shadow-rg] min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
+                <div className="flex flex-col p-4 max-h-[90vh] w-full">
+                  <Dialog.Title
+                    as="h3"
+                    className="flex items-center justify-between text-lg font-semibold"
+                  >
+                    <span>Product Updates</span>
+                    <span>
+                      <button type="button" onClick={() => setIsOpen(false)}>
+                        <XMarkIcon
+                          className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </span>
+                  </Dialog.Title>
+                  {updates && updates.length > 0 ? (
+                    <div className="h-full overflow-y-auto mt-4 space-y-4">
+                      {updates.map((item, index) => (
+                        <React.Fragment key={item.id}>
+                          <div className="flex items-center gap-3 text-xs text-custom-text-200">
+                            <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
+                              {item.tag_name}
+                            </span>
+                            <span>{renderLongDateFormat(item.published_at)}</span>
+                            {index === 0 && (
+                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
+                                New
                               </span>
-                              <span>{renderLongDateFormat(item.published_at)}</span>
-                              {index === 0 && (
-                                <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
-                                  New
-                                </span>
-                              )}
-                            </div>
-                            <MarkdownRenderer markdown={item.body} />
-                          </React.Fragment>
-                        ))
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <Spinner />
-                          Loading...
-                        </div>
-                      )}
+                            )}
+                          </div>
+                          <MarkdownRenderer markdown={item.body} />
+                        </React.Fragment>
+                      ))}
                     </div>
-                  </div>
+                  ) : (
+                    <div className="grid place-items-center w-full mt-4">
+                      <Loader className="space-y-6 w-full">
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                      </Loader>
+                    </div>
+                  )}
                 </div>
               </Dialog.Panel>
             </Transition.Child>