From 1364c842e0b6b3553f9ec354830e29454777f638 Mon Sep 17 00:00:00 2001
From: anmolsinghbhatia <anmolsinghbhatia@caravel.tech>
Date: Tue, 25 Apr 2023 17:33:53 +0530
Subject: [PATCH] feat: product updates button added

---
 .../command-palette/command-pallette.tsx          |  8 --------
 apps/app/components/command-palette/index.ts      |  1 -
 apps/app/components/ui/index.ts                   |  1 +
 .../product-updates-modal.tsx                     | 12 ++++++------
 apps/app/pages/[workspaceSlug]/index.tsx          | 15 ++++++++++++---
 5 files changed, 19 insertions(+), 18 deletions(-)
 rename apps/app/components/{command-palette => ui}/product-updates-modal.tsx (89%)

diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx
index 101ae25fd..26555ddf1 100644
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ b/apps/app/components/command-palette/command-pallette.tsx
@@ -45,7 +45,6 @@ import {
   ChangeIssuePriority,
   ChangeIssueAssignee,
   ChangeInterfaceTheme,
-  ProductUpdatesModal,
 } from "components/command-palette";
 import { BulkDeleteIssuesModal } from "components/core";
 import { CreateUpdateCycleModal } from "components/cycles";
@@ -75,7 +74,6 @@ export const CommandPalette: React.FC = () => {
   const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
   const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
   const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
-  const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
   const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
   const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
   const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false);
@@ -223,8 +221,6 @@ export const CommandPalette: React.FC = () => {
           setIsCreateCycleModalOpen(true);
         } else if (keyPressed === "m") {
           setIsCreateModuleModalOpen(true);
-        } else if (keyPressed === "u") {
-          setIsProductUpdatesModalOpen(true);
         }
       }
     },
@@ -328,10 +324,6 @@ export const CommandPalette: React.FC = () => {
   return (
     <>
       <ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
-      <ProductUpdatesModal
-        isOpen={isProductUpdatesModalOpen}
-        setIsOpen={setIsProductUpdatesModalOpen}
-      />
       {workspaceSlug && (
         <CreateProjectModal isOpen={isProjectModalOpen} setIsOpen={setIsProjectModalOpen} />
       )}
diff --git a/apps/app/components/command-palette/index.ts b/apps/app/components/command-palette/index.ts
index 27bad1357..858aba401 100644
--- a/apps/app/components/command-palette/index.ts
+++ b/apps/app/components/command-palette/index.ts
@@ -4,4 +4,3 @@ export * from "./change-issue-state";
 export * from "./change-issue-priority";
 export * from "./change-issue-assignee";
 export * from "./change-interface-theme";
-export * from "./product-updates-modal";
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 5c23ecdf5..3f50d1a21 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -21,3 +21,4 @@ export * from "./spinner";
 export * from "./tooltip";
 export * from "./toggle-switch";
 export * from "./markdown-to-component";
+export * from "./product-updates-modal";
diff --git a/apps/app/components/command-palette/product-updates-modal.tsx b/apps/app/components/ui/product-updates-modal.tsx
similarity index 89%
rename from apps/app/components/command-palette/product-updates-modal.tsx
rename to apps/app/components/ui/product-updates-modal.tsx
index c099cf505..b37517343 100644
--- a/apps/app/components/command-palette/product-updates-modal.tsx
+++ b/apps/app/components/ui/product-updates-modal.tsx
@@ -18,7 +18,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   console.log("updates:", updates);
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20 max-h-96 overflow-y-auto" onClose={setIsOpen}>
+      <Dialog as="div" className="relative z-20" onClose={setIsOpen}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -28,7 +28,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -42,19 +42,19 @@ 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-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="max-h-[600px] overflow-y-auto bg-white p-5">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="max-h-[600px] overflow-y-auto bg-brand-surface-2 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-gray-900"
+                        className="flex justify-between text-lg font-medium leading-6 text-brand-base"
                       >
                         <span>Product Updates</span>
                         <span>
                           <button type="button" onClick={() => setIsOpen(false)}>
                             <XMarkIcon
-                              className="h-6 w-6 text-gray-400 hover:text-gray-500"
+                              className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
                               aria-hidden="true"
                             />
                           </button>
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index adf893f88..a39bc163a 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -15,6 +15,7 @@ import {
   IssuesPieChart,
   IssuesStats,
 } from "components/workspace";
+import { ProductUpdatesModal } from "components/ui";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -22,6 +23,7 @@ import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
 
 const WorkspacePage: NextPage = () => {
   const [month, setMonth] = useState(new Date().getMonth() + 1);
+  const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -39,6 +41,10 @@ const WorkspacePage: NextPage = () => {
 
   return (
     <WorkspaceAuthorizationLayout noHeader>
+      <ProductUpdatesModal
+        isOpen={isProductUpdatesModalOpen}
+        setIsOpen={setIsProductUpdatesModalOpen}
+      />
       <div className="h-full w-full">
         <div className="flex flex-col gap-8">
           <div
@@ -49,9 +55,12 @@ const WorkspacePage: NextPage = () => {
               Plane is open source, support us by starring us on GitHub.
             </p>
             <div className="flex items-center gap-2">
-              {/* <a href="#" target="_blank" rel="noopener noreferrer">
-                View roadmap
-              </a> */}
+              <button
+                onClick={() => setIsProductUpdatesModalOpen(true)}
+                className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
+              >
+                What's New?
+              </button>
               <a
                 href="https://github.com/makeplane/plane"
                 target="_blank"