From a9990e4c1221c2dc125873d836f91c6ed8a850a1 Mon Sep 17 00:00:00 2001
From: Manish Gupta <manishiwa@gmail.com>
Date: Thu, 12 Sep 2024 15:18:43 +0200
Subject: [PATCH] landing - top spacing fix 75px -> 30px, notification - height
 28px -> 36px

---
 app/(layout)/page.tsx       |   2 +-
 components/Notification.tsx | 102 ++++++++++++++++--------------------
 2 files changed, 45 insertions(+), 59 deletions(-)

diff --git a/app/(layout)/page.tsx b/app/(layout)/page.tsx
index f09ad1e6..b4dd4025 100644
--- a/app/(layout)/page.tsx
+++ b/app/(layout)/page.tsx
@@ -26,7 +26,7 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function Page() {
   return (
     <>
-      <Container className="flex flex-col flex-1 w-full mt-[65px] md:mt-[70px] gap-y-[10px]">
+      <Container className="flex flex-col flex-1 w-full mt-[65px] md:mt-[30px] gap-y-[10px]">
         <Heading
           className="font-bold leading-[1.2] text-[24px] sm:text-[32px] md:text-[36px] max-w-[900px]"
           as="h1"
diff --git a/components/Notification.tsx b/components/Notification.tsx
index dc332056..ff3ffeac 100644
--- a/components/Notification.tsx
+++ b/components/Notification.tsx
@@ -132,18 +132,16 @@ const Notification = () => {
             >
               <div
                 key={item.id + item.url}
-                className={`flex items-center pl-[12px] pr-[10px] relative pt-[10px] gap-x-[12px] ${
-                  i >= filteredData.length - 1
-                    ? "pb-[10px]"
-                    : "pb-[10px] border-b border-dashed border-forest-1000 dark:border-forest-500"
-                } w-auto ${item.url ? "cursor-pointer" : "cursor-normal"} flex`}
+                className={`flex items-center pl-[12px] pr-[10px] relative pt-[10px] gap-x-[12px] ${i >= filteredData.length - 1
+                  ? "pb-[10px]"
+                  : "pb-[10px] border-b border-dashed border-forest-1000 dark:border-forest-500"
+                  } w-auto ${item.url ? "cursor-pointer" : "cursor-normal"} flex`}
               >
                 <div className="w-[12px] h-[12px]">
                   <Icon
                     icon={item.icon ? item.icon : "feather:bell"}
-                    className={`w-[12px] h-[12px] text-forest-1000 dark:text-forest-800 dark:group-hover:text-forest-200  ${
-                      item.icon ? "visible" : "invisible"
-                    }`}
+                    className={`w-[12px] h-[12px] text-forest-1000 dark:text-forest-800 dark:group-hover:text-forest-200  ${item.icon ? "visible" : "invisible"
+                      }`}
                   />
                 </div>
                 <div className={`flex w-full flex-col z-20`}>
@@ -155,9 +153,8 @@ const Notification = () => {
                   </div>
                 </div>
                 <div
-                  className={`w-[24px] h-[24px]  ${
-                    item.url ? "visible" : "invisible"
-                  }`}
+                  className={`w-[24px] h-[24px]  ${item.url ? "visible" : "invisible"
+                    }`}
                 >
                   <Icon
                     icon="feather:chevron-right"
@@ -244,9 +241,8 @@ const Notification = () => {
       {filteredData && (
         <>
           <div
-            className={`hidden md:flex w-full relative ${
-              openNotif ? "z-[110]" : "z-10"
-            }`}
+            className={`hidden md:flex w-full relative ${openNotif ? "z-[110]" : "z-10"
+              }`}
             onMouseEnter={() => {
               handleShowNotifications();
             }}
@@ -255,7 +251,7 @@ const Notification = () => {
             }}
           >
             <div
-              className={`hidden mb-[10px] lg:mb-0 md:flex items-center gap-x-[10px] overflow-hidden w-[305px] mdl:w-[343px] xl:w-[600px] 2xl:w-[770px] border-[1px] h-[28px] rounded-full px-[10px] relative z-30 border-forest-1000 dark:border-forest-500 hover:dark:!bg-[#1F2726] hover:!bg-[#FFFFFF] hover:dark:!border-[#CDD8D3] hover:!border-[#151A19] tansition-all duration-300`}
+              className={`hidden mb-[10px] lg:mb-0 md:flex items-center gap-x-[10px] overflow-hidden w-[305px] mdl:w-[343px] xl:w-[600px] 2xl:w-[770px] border-[1px] h-[36px] rounded-full px-[10px] relative z-30 border-forest-1000 dark:border-forest-500 hover:dark:!bg-[#1F2726] hover:!bg-[#FFFFFF] hover:dark:!border-[#CDD8D3] hover:!border-[#151A19] tansition-all duration-300`}
               style={{
                 borderColor: currentItemTextColor,
                 backgroundColor: currentItemBackgroundColor,
@@ -263,9 +259,8 @@ const Notification = () => {
               ref={ref}
             >
               <div
-                className={`w-full flex items-center justify-between ${
-                  openNotif || filteredData.length === 0 ? "block" : "hidden"
-                }`}
+                className={`w-full flex items-center justify-between ${openNotif || filteredData.length === 0 ? "block" : "hidden"
+                  }`}
               >
                 <div className="flex items-center gap-x-[10px]">
                   <div className="w-[16px] h-[16px] relative">
@@ -276,11 +271,10 @@ const Notification = () => {
               </div>
               {filteredData.length > 0 && (
                 <div
-                  className={`${
-                    !openNotif && filteredData.length > 0
-                      ? "relative flex items-center gap-x-[10px] text-[12px] leading-[1.5] w-full overflow-hidden transition-opacity duration-300"
-                      : "hidden"
-                  } ${hideText ? "opacity-0" : "opacity-100"}`}
+                  className={`${!openNotif && filteredData.length > 0
+                    ? "relative flex items-center gap-x-[10px] text-[12px] leading-[1.5] w-full overflow-hidden transition-opacity duration-300"
+                    : "hidden"
+                    } ${hideText ? "opacity-0" : "opacity-100"}`}
                   style={{
                     color: currentItemTextColor,
                   }}
@@ -290,15 +284,14 @@ const Notification = () => {
                   >
                     {hasUnseenNotifications && (
                       <div
-                        className={`w-[6px] h-[6px] bg-red-500 rounded-full absolute -top-0 right-[1px] border tansition-colors duration-300 ${
-                          (!filteredData[currentIndex] ||
-                            !filteredData[currentIndex]["backgroundColor"]) &&
+                        className={`w-[6px] h-[6px] bg-red-500 rounded-full absolute -top-0 right-[1px] border tansition-colors duration-300 ${(!filteredData[currentIndex] ||
+                          !filteredData[currentIndex]["backgroundColor"]) &&
                           "border-white dark:border-[#1F2726]"
-                        }`}
+                          }`}
                         style={{
                           borderColor:
                             filteredData[currentIndex] &&
-                            filteredData[currentIndex]["backgroundColor"]
+                              filteredData[currentIndex]["backgroundColor"]
                               ? filteredData[currentIndex]["backgroundColor"]
                               : undefined,
                         }}
@@ -307,7 +300,7 @@ const Notification = () => {
                     <Icon
                       icon={
                         filteredData[currentIndex] &&
-                        filteredData[currentIndex].icon
+                          filteredData[currentIndex].icon
                           ? filteredData[currentIndex].icon
                           : "feather:bell"
                       }
@@ -325,14 +318,14 @@ const Notification = () => {
                   >
                     <div className="font-semibold">
                       {filteredData[currentIndex] &&
-                      filteredData[currentIndex].desc
+                        filteredData[currentIndex].desc
                         ? filteredData[currentIndex].desc
                         : ""}
                     </div>
                     <div>-</div>
                     <ReactMarkdown>
                       {filteredData[currentIndex] &&
-                      filteredData[currentIndex].body
+                        filteredData[currentIndex].body
                         ? filteredData[currentIndex].body
                         : ""}
                     </ReactMarkdown>
@@ -342,9 +335,8 @@ const Notification = () => {
               <div className={`w-[24px] h-[24px] z-30`}>
                 <Icon
                   icon="feather:chevron-right"
-                  className={`w-[24px] h-[24px] transition-transform duration-300 ${
-                    openNotif ? "rotate-90" : "rotate-0"
-                  }`}
+                  className={`w-[24px] h-[24px] transition-transform duration-300 ${openNotif ? "rotate-90" : "rotate-0"
+                    }`}
                   onClick={() => {
                     track("clicked Notification Center", {
                       location: "desktop header",
@@ -362,9 +354,8 @@ const Notification = () => {
               </div>
             </div>
             <div
-              className={`absolute top-[14px] hidden mb-[10px] lg:mb-0 md:flex flex-col w-[305px] mdl:w-[343px] xl:w-[600px] 2xl:w-[770px] dark:bg-[#1F2726] bg-white border-forest-1000 dark:border-forest-500 rounded-b-xl z-1 overflow-hidden transition-all duration-300 ease-in-out ${
-                openNotif ? "border" : "border-0"
-              }`}
+              className={`absolute top-[18px] hidden mb-[10px] lg:mb-0 md:flex flex-col w-[305px] mdl:w-[343px] xl:w-[600px] 2xl:w-[770px] dark:bg-[#1F2726] bg-white border-forest-1000 dark:border-forest-500 rounded-b-xl z-1 overflow-hidden transition-all duration-300 ease-in-out ${openNotif ? "border" : "border-0"
+                }`}
               style={{
                 maxHeight: openNotif ? filteredData.length * 200 + "px" : "0",
               }}
@@ -390,9 +381,8 @@ const Notification = () => {
           </div>
           <div className="md:hidden">
             <div
-              className={`relative flex md:hidden top-0.5 mr-10 justify-self-end hover:pointer cursor-pointer p-3 rounded-full ${
-                openNotif ? "dark:bg-[#1F2726] bg-forst-50 z-40" : ""
-              }
+              className={`relative flex md:hidden top-0.5 mr-10 justify-self-end hover:pointer cursor-pointer p-3 rounded-full ${openNotif ? "dark:bg-[#1F2726] bg-forst-50 z-40" : ""
+                }
                 `}
               onClick={() => {
                 handleShowNotifications(true);
@@ -407,11 +397,10 @@ const Notification = () => {
             </div>
 
             <div
-              className={`fixed top-[80px] left-0 right-0 w-[95%] h-auto bg-white dark:bg-[#1F2726] rounded-2xl transition-max-height border-forest-1000 dark:border-forest-500 overflow-hidden break-inside-avoid ${
-                openNotif
-                  ? "bg-blend-darken duration-300 ease-in-out z-40 border-[1px]"
-                  : "bg-blend-normal duration-300 ease-in-out border-[0px] "
-              }`}
+              className={`fixed top-[80px] left-0 right-0 w-[95%] h-auto bg-white dark:bg-[#1F2726] rounded-2xl transition-max-height border-forest-1000 dark:border-forest-500 overflow-hidden break-inside-avoid ${openNotif
+                ? "bg-blend-darken duration-300 ease-in-out z-40 border-[1px]"
+                : "bg-blend-normal duration-300 ease-in-out border-[0px] "
+                }`}
               style={{
                 maxHeight: openNotif ? "100vh" : "0",
                 margin: "auto",
@@ -430,11 +419,10 @@ const Notification = () => {
                     <div key={item.id}>
                       {item.url ? (
                         <Link
-                          className={`flex border-forest-1000 dark:border-forest-500 border-dashed w-full mt-[8px] hover:cursor-pointer  ${
-                            index < filteredData.length - 1
-                              ? "border-b pb-1"
-                              : "border-b-0 pb-1"
-                          }`}
+                          className={`flex border-forest-1000 dark:border-forest-500 border-dashed w-full mt-[8px] hover:cursor-pointer  ${index < filteredData.length - 1
+                            ? "border-b pb-1"
+                            : "border-b-0 pb-1"
+                            }`}
                           href={item.url}
                           rel="noopener noreferrer"
                           target="_blank"
@@ -453,11 +441,10 @@ const Notification = () => {
                         </Link>
                       ) : (
                         <div
-                          className={`flex border-forest-1000 dark:border-forest-500 border-dashed w-full mt-[8px] ${
-                            index < filteredData.length - 1
-                              ? "border-b pb-1"
-                              : "border-b-0 pb-1"
-                          }`}
+                          className={`flex border-forest-1000 dark:border-forest-500 border-dashed w-full mt-[8px] ${index < filteredData.length - 1
+                            ? "border-b pb-1"
+                            : "border-b-0 pb-1"
+                            }`}
                         >
                           <div className="flex flex-col w-full pl-[35px] pb-[8px] gap-y-[8px] ">
                             <div className="h-[17px] font-bold text-[16px]">
@@ -479,9 +466,8 @@ const Notification = () => {
       )}
 
       <div
-        className={`fixed inset-0 bg-black transition-opacity duration-300 ${
-          openNotif ? "opacity-30  z-30" : "opacity-0 pointer-events-none"
-        }`}
+        className={`fixed inset-0 bg-black transition-opacity duration-300 ${openNotif ? "opacity-30  z-30" : "opacity-0 pointer-events-none"
+          }`}
         // style={{ opacity: 0.3 }}
         onClick={() => {
           setOpenNotif(!openNotif);