From 262472c4fa53b069d88e381fd5844d647992753f Mon Sep 17 00:00:00 2001
From: Kingsley Solomon <kinxly@gmail.com>
Date: Sun, 28 Jul 2024 22:41:55 +0100
Subject: [PATCH 1/3] feat: added notification view

---
 .../_components/layout/navbar/index.tsx       |  12 +-
 src/app/dashboard/(user-dashboard)/layout.tsx |   2 +-
 .../_components/layout/sidebar/index.tsx      |   2 +-
 .../(user-dashboard)/settings/layout.tsx      |   4 +-
 .../notification/_components/header.tsx       |  15 +++
 .../_components/notification-switch-box.tsx   |  22 ++++
 .../settings/notification/page.tsx            | 107 +++++++++++++++++-
 src/app/layout.tsx                            |   2 +-
 src/email/templates/invoice/image.tsx         |  99 ++++++++++++++++
 tsconfig.json                                 |   2 +-
 10 files changed, 255 insertions(+), 12 deletions(-)
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx
 create mode 100644 src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx
 create mode 100644 src/email/templates/invoice/image.tsx

diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
index 935806e9c..40307f740 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -10,8 +10,8 @@ import {
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
+import DashboardLogo from "~/app/dashboard/(admin)/_components/layout/logo";
 import UnreadNotificationCard from "~/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard";
-import Logo from "~/components/common/logo";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import {
   Popover,
@@ -47,21 +47,21 @@ const UserNavbar = () => {
   const currentPath = pathname?.split("/")[2];
   return (
     <nav
-      className="border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
+      className="bg-white px-5 py-2.5 md:left-[220px] lg:left-[252px]"
       role="navbar"
     >
       <div className="flex items-center justify-between gap-2">
         <div className="flex w-full max-w-[470px] justify-between gap-1">
+          {/* <Menu className="h-[18px] w-[18px] text-neutral-dark-2 transition-all duration-300 hover:text-neutral-dark-2/50" /> */}
           <div className="flex w-full max-w-[200px] items-center justify-start gap-1">
-            <Menu className="h-[18px] w-[18px] text-neutral-dark-2 transition-all duration-300 hover:text-neutral-dark-2/50" />
-            <Logo />
+            <DashboardLogo />
           </div>
-          <div className="flex w-full max-w-[290px] items-center justify-between gap-1">
+          <div className="hidden w-full max-w-[290px] items-center justify-between gap-1 lg:flex">
             {navlinks.map((item, index) => (
               <Link
                 key={index}
                 href={item.link}
-                className={`text-sm font-bold transition-all duration-200 hover:text-primary ${currentPath === item.id ? "text-primary" : "text-neutral-dark-2"}`}
+                className={`text-xs font-bold transition-all duration-200 hover:text-primary ${currentPath === item.id ? "text-primary" : "text-neutral-dark-2"}`}
               >
                 {item.route}
               </Link>
diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
index 3ff9e35b6..5c4b1925c 100644
--- a/src/app/dashboard/(user-dashboard)/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -10,7 +10,7 @@ export default function AdminLayout({
   return (
     <div className="grid grid-rows-[auto_1fr]">
       <UserNavbar />
-      <div className="relative w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
+      <div className="relative mx-auto w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
         <Suspense>{children}</Suspense>
       </div>
     </div>
diff --git a/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx b/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx
index 4d20d5cff..84b9fb5a0 100644
--- a/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx
@@ -94,7 +94,7 @@ const SettingsSidebar: FC<Iproperties> = ({ sideNavitems = sideItems }) => {
   const organizationPath = pathname?.split("/")[4];
 
   return (
-    <div className="h-screen w-[50px] flex-col items-center justify-center bg-[#FDFDFD] pt-6 md:block md:w-[260px] md:justify-start md:px-4">
+    <div className="h-screen w-[50px] flex-col items-center justify-center bg-[#FAFAFA] pt-6 md:block md:w-[304px] md:justify-start md:px-4">
       <div className="mb-6 flex items-center justify-center md:justify-start md:gap-2">
         <ChevronLeft className="h-5 w-5 text-neutral-dark-2" />
         <h2 className="hidden text-xl text-neutral-dark-2 md:block">
diff --git a/src/app/dashboard/(user-dashboard)/settings/layout.tsx b/src/app/dashboard/(user-dashboard)/settings/layout.tsx
index b6b98a2bd..bef3e0f8d 100644
--- a/src/app/dashboard/(user-dashboard)/settings/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/layout.tsx
@@ -9,7 +9,9 @@ const layout: FC<Iproperties> = ({ children }) => {
   return (
     <div className="grid grid-cols-[auto_1fr]">
       <SettingsSidebar />
-      <div className="">{children}</div>
+      <div className="mx-[41px] my-[30px] 2xl:mx-auto 2xl:max-w-[975px]">
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx
new file mode 100644
index 000000000..b66562fe0
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx
@@ -0,0 +1,15 @@
+interface IProperties {
+  notificationTitle: string;
+}
+
+const NotificationHeader = ({ notificationTitle }: IProperties) => {
+  return (
+    <h4 className="mb-[17px] text-[24px] font-[700]">{notificationTitle}</h4>
+  );
+};
+
+NotificationHeader.PreviewProps = {
+  notificationTitle: `Notification Alert`,
+} satisfies IProperties;
+
+export default NotificationHeader;
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx
new file mode 100644
index 000000000..9ef72b82d
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx
@@ -0,0 +1,22 @@
+import { Switch } from "~/components/ui/switch";
+
+interface IProperties {
+  title: string;
+  description: string;
+}
+
+const NotificationSwitchBox = ({ title, description }: IProperties) => {
+  return (
+    <section className="flex w-full items-center justify-between">
+      <div className="w-[55%]">
+        <p className="mb-[8px] font-[600]">{title}</p>
+        <p className="text-[14px] text-neutral-dark-1">{description}</p>
+      </div>
+      <div>
+        <Switch />
+      </div>
+    </section>
+  );
+};
+
+export default NotificationSwitchBox;
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
index db4d38750..3c74ad1ac 100644
--- a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
@@ -1,5 +1,110 @@
+import { Check } from "lucide-react";
+
+import CustomButton from "~/components/common/common-button/common-button";
+import NotificationHeader from "./_components/header";
+import NotificationSwitchBox from "./_components/notification-switch-box";
+
 const page = () => {
-  return <div>page</div>;
+  return (
+    <main className="text-neutral-dark-2">
+      {/* NOTIFICATION ALERT */}
+      <section>
+        <NotificationHeader notificationTitle={"Notification Alert"} />
+        <NotificationSwitchBox
+          title={"Mobile push notifications"}
+          description={
+            "Receive push notifications on mentions and comments via your mobile app"
+          }
+        />
+      </section>
+      {/* EMAIL NOTIFICATION */}
+      <section className="my-[30px]">
+        <NotificationHeader notificationTitle={"Email notifications"} />
+        <section className="flex flex-col gap-[24px]">
+          {/* option 1 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Activity in your workspace"}
+              description={
+                "Receive emails when you get comments, mentions, page invites, reminders, access requests, and property changes"
+              }
+            />
+          </div>
+          {/* option 2 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Activity in your workspace"}
+              description={
+                "Receive emails about activity in your workspace, even when you are active on the app"
+              }
+            />
+          </div>
+          {/* option 3 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Email digests"}
+              description={
+                "Receive email digest every 8 hours for changes to pages you are subscribed to"
+              }
+            />
+          </div>
+          {/* option 4 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Announcements and update emails"}
+              description={
+                "Receive occasional emails about product launches and new features from notion"
+              }
+            />
+          </div>
+        </section>
+      </section>
+      {/* SLACK NOTIFICATIONS */}
+      <section className="my-[30px]">
+        <NotificationHeader notificationTitle={"Slack notifications"} />
+        <section className="flex flex-col gap-[24px]">
+          {/* option 1 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Activity in your workspace"}
+              description={
+                "Receive emails when you get comments, mentions, page invites, reminders, access requests, and property changes"
+              }
+            />
+          </div>
+          {/* option 2 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Always send email notifications"}
+              description={
+                "Receive emails about activity in your workspace, even when you are active on the app"
+              }
+            />
+          </div>
+          {/* option 3 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Announcements and update emails"}
+              description={
+                "Receive email digest every 8 hours for changes to pages you are subscribed to"
+              }
+            />
+          </div>
+        </section>
+      </section>
+      <section className="text-end">
+        <CustomButton
+          variant="primary"
+          icon={<Check />}
+          isLeftIconVisible={true}
+          isLoading={false}
+          isDisabled={false}
+        >
+          Save Changes
+        </CustomButton>
+      </section>
+    </main>
+  );
 };
 
 export default page;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a8a667d28..38fe4626a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <div className="mx-auto w-full max-w-[1440px]">
+        <div className="mx-auto w-full">
           <Providers />
           {children}
           <Toaster />
diff --git a/src/email/templates/invoice/image.tsx b/src/email/templates/invoice/image.tsx
new file mode 100644
index 000000000..2552abb36
--- /dev/null
+++ b/src/email/templates/invoice/image.tsx
@@ -0,0 +1,99 @@
+import {
+  Button,
+  Container,
+  Heading,
+  Img,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+import Layout from "../_components/layout/layout";
+
+interface InvoiceTemplateProperties {
+  title: string;
+  username: string;
+  image: string;
+  description: string;
+  descriptionOne: string;
+  link: string;
+}
+
+const InvoiceTemplate = ({
+  title,
+  username,
+  image,
+  description,
+  descriptionOne,
+  link,
+}: InvoiceTemplateProperties) => {
+  return (
+    <Layout>
+      <Preview>t{username}, your invoice reciept.</Preview>
+      <Section className="my-[56px]">
+        <Section className="mx-auto flex items-center justify-center md:w-[316px]">
+          <Img src={image} alt="hello" className="h-[100%] w-[100%]" />
+        </Section>
+
+        <Container className="max-w-[680px] px-[48px] md:px-0">
+          <Section className="mt-[56px] flex flex-col items-center justify-center">
+            <Heading
+              as="h5"
+              className="my-0 mb-[56px] text-center text-[24px] leading-[28px] text-[#121212]"
+            >
+              {title}
+            </Heading>
+
+            <Section>
+              <Text className="md:text-[18px]mt-[32px] my-0 text-[16px] font-[600] text-[#121212]">
+                Hi {username},
+              </Text>
+              <Text className="text-justify text-[14px] leading-[19.36px] text-[#525252] md:text-[16px]">
+                {description}
+              </Text>
+              <Text className="text-justify text-[14px] leading-[19.36px] text-[#525252] md:text-[16px]">
+                {descriptionOne}
+              </Text>
+            </Section>
+          </Section>
+        </Container>
+
+        <Section className="text-center">
+          <Section className="mt-[32px] w-[100%] text-center">
+            <Container className="mb-[40px] max-w-[680px] px-[48px] md:px-0">
+              <Button
+                target={"_blank"}
+                className="w-[100%] rounded-[8px] bg-[#F97316] py-[16px] text-[#FAFAFA] md:w-fit md:px-[2rem]"
+                href={link}
+              >
+                Activate Account
+              </Button>
+            </Container>
+          </Section>
+        </Section>
+        <Section className="mt-[28px]">
+          <Container className="max-w-[680px] px-[48px] md:px-0">
+            <Text className="my-0 font-[600] text-[#121212]">
+              Regards,
+              <br />
+              Boilerplate
+            </Text>
+          </Container>
+        </Section>
+      </Section>
+    </Layout>
+  );
+};
+
+InvoiceTemplate.PreviewProps = {
+  title: "Invoice",
+  username: "John Doe",
+  image: "https://imgur.com/a4XiXxo.png",
+  link: "www.boilerplate.com",
+  description:
+    "We hope you are doing well. Thank you for your recent purchase from Boilerplate. Please find your invoice attached to this email.",
+  descriptionOne:
+    "To activate your account and secure it, please click the button below:",
+} satisfies InvoiceTemplateProperties;
+
+export default InvoiceTemplate;
diff --git a/tsconfig.json b/tsconfig.json
index 62e9bc113..5fc51ec50 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,7 +35,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
-  ],
+, "src/app/dashboard/(user-dashboard)/settings/notification/_components"  ],
   "exclude": [
     "node_modules"
   ]

From 35c6b76dc3e2aa2ca59889f0e4a2332439334cec Mon Sep 17 00:00:00 2001
From: Kingsley Solomon <kinxly@gmail.com>
Date: Mon, 29 Jul 2024 04:26:00 +0100
Subject: [PATCH 2/3] fix: fixed the settings layout responsiveness

---
 .../(admin)/_components/layout/logo/index.tsx | 20 ++++++++++---------
 .../_components/layout/navbar/index.tsx       | 10 +++++-----
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/app/dashboard/(admin)/_components/layout/logo/index.tsx b/src/app/dashboard/(admin)/_components/layout/logo/index.tsx
index 91298a4ea..5cd558f9f 100644
--- a/src/app/dashboard/(admin)/_components/layout/logo/index.tsx
+++ b/src/app/dashboard/(admin)/_components/layout/logo/index.tsx
@@ -5,16 +5,18 @@ const DashboardLogo = () => {
   return (
     <Link
       href="/"
-      className="flex w-full max-w-[24px] items-center justify-center gap-2.5 py-[14px] md:justify-start"
+      className="flex w-full items-center justify-center gap-2.5 py-[14px] md:justify-start"
     >
-      <Image
-        src="/logo/logo.png"
-        alt="Hgn boiler plate logo"
-        height={24}
-        width={24}
-        data-testid="admin-logo"
-        className="h-full w-full object-contain"
-      />
+      <div>
+        <Image
+          src="/logo/logo.png"
+          alt="Hgn boiler plate logo"
+          height={24}
+          width={24}
+          data-testid="admin-logo"
+          className="h-full w-full object-contain"
+        />
+      </div>
       <span
         className="neutral-dark hidden text-2xl font-semibold md:block"
         data-testid="admin-logo-text"
diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
index 40307f740..693fca210 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -51,12 +51,12 @@ const UserNavbar = () => {
       role="navbar"
     >
       <div className="flex items-center justify-between gap-2">
-        <div className="flex w-full max-w-[470px] justify-between gap-1">
-          {/* <Menu className="h-[18px] w-[18px] text-neutral-dark-2 transition-all duration-300 hover:text-neutral-dark-2/50" /> */}
-          <div className="flex w-full max-w-[200px] items-center justify-start gap-1">
+        <div className="flex gap-[50px]">
+          <div className="flex w-full items-center justify-start gap-[15px]">
+            <Menu className="h-[30px] w-[30px] text-neutral-dark-2 transition-all duration-300 hover:text-neutral-dark-2/50" />
             <DashboardLogo />
           </div>
-          <div className="hidden w-full max-w-[290px] items-center justify-between gap-1 lg:flex">
+          <div className="hidden items-center justify-between gap-[22px] lg:flex">
             {navlinks.map((item, index) => (
               <Link
                 key={index}
@@ -68,7 +68,7 @@ const UserNavbar = () => {
             ))}
           </div>
         </div>
-        <div className="flex w-full max-w-[440px] items-center justify-between gap-2 bg-[#FDFDFD]">
+        <div className="flex items-center justify-between gap-2 bg-[#FDFDFD]">
           <div className="flex h-10 items-center justify-between gap-2 rounded-[6px] border border-border bg-white px-3 text-sm font-normal placeholder:text-sm">
             <SearchIcon
               data-testid="search"

From 159e4ac2e4d6b79cc4200ff5d284ae5824209a77 Mon Sep 17 00:00:00 2001
From: Kingsley Solomon <kinxly@gmail.com>
Date: Mon, 29 Jul 2024 12:01:33 +0100
Subject: [PATCH 3/3] fix: fixed the modal overlay

---
 .../settings/notification/page.tsx            | 21 +++++++++++++++++--
 .../notification-settings-saved/index.tsx     | 10 ++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
index 3c74ad1ac..e6f20ba1f 100644
--- a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
@@ -1,10 +1,20 @@
+"use client";
+
 import { Check } from "lucide-react";
+import { useState } from "react";
 
 import CustomButton from "~/components/common/common-button/common-button";
+import NotificationSettingSavedModal from "~/components/common/modals/notification-settings-saved";
 import NotificationHeader from "./_components/header";
 import NotificationSwitchBox from "./_components/notification-switch-box";
 
-const page = () => {
+const NotificationPage = () => {
+  const [isOpen, setOpen] = useState(false);
+
+  const handleOpenModal = () => {
+    setOpen(true);
+  };
+
   return (
     <main className="text-neutral-dark-2">
       {/* NOTIFICATION ALERT */}
@@ -99,12 +109,19 @@ const page = () => {
           isLeftIconVisible={true}
           isLoading={false}
           isDisabled={false}
+          onClick={handleOpenModal}
         >
           Save Changes
         </CustomButton>
+        <NotificationSettingSavedModal
+          show={isOpen}
+          onClose={function (): void {
+            setOpen(false);
+          }}
+        />
       </section>
     </main>
   );
 };
 
-export default page;
+export default NotificationPage;
diff --git a/src/components/common/modals/notification-settings-saved/index.tsx b/src/components/common/modals/notification-settings-saved/index.tsx
index b46652e1b..843b23578 100644
--- a/src/components/common/modals/notification-settings-saved/index.tsx
+++ b/src/components/common/modals/notification-settings-saved/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { usePathname } from "next/navigation";
 import React from "react";
 
 import CustomButton from "~/components/common/common-button/common-button";
@@ -20,11 +21,18 @@ const NotificationSettingSavedModal: React.FC<ModalProperties> = ({
   show,
   onClose,
 }) => {
+  const pathname = usePathname();
+  /**
+   * @kinxlo
+   * check if pathname == "notification", apply the blur effect
+   */
+  const isNotificationPath = pathname.includes("notification");
+
   return (
     <Dialog open={show} onOpenChange={onClose}>
       <DialogOverlay
         data-testid="overlay"
-        className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+        className={`fixed inset-0 z-50 flex items-center justify-center ${isNotificationPath ? "bg-transparent backdrop-blur-sm" : "bg-black bg-opacity-50"}`}
       />
       <DialogContent
         className="mx-10 rounded-md bg-white p-6 shadow-md"