From ccab382d7de3fe92f5f87bce80b4ac90c10bfb9f Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 19 Jul 2023 12:16:39 +0530
Subject: [PATCH] chore: add dashboard navbar (#1560)

---
 .../components/ui/product-updates-modal.tsx   |  6 +-
 apps/app/pages/[workspaceSlug]/index.tsx      | 61 ++++++++++++-------
 2 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/apps/app/components/ui/product-updates-modal.tsx b/apps/app/components/ui/product-updates-modal.tsx
index 5ae3ac461..b142f8325 100644
--- a/apps/app/components/ui/product-updates-modal.tsx
+++ b/apps/app/components/ui/product-updates-modal.tsx
@@ -35,7 +35,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <div className="grid place-items-center min-h-full text-center p-4">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -45,8 +45,8 @@ 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-80 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-custom-background-80 p-5">
+              <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
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 0492f2bfe..a02a157a1 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -2,9 +2,12 @@ import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 import Image from "next/image";
+import Link from "next/link";
 
 import useSWR, { mutate } from "swr";
 
+// next-themes
+import { useTheme } from "next-themes";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // services
@@ -21,9 +24,11 @@ import {
 } from "components/workspace";
 import { TourRoot } from "components/onboarding";
 // ui
-import { PrimaryButton, ProductUpdatesModal } from "components/ui";
+import { Icon, PrimaryButton, ProductUpdatesModal } from "components/ui";
 // images
 import emptyDashboard from "public/empty-state/dashboard.svg";
+import githubBlackImage from "/public/logos/github-black.png";
+import githubWhiteImage from "/public/logos/github-white.png";
 // helpers
 import { render12HourFormatTime, renderShortDate } from "helpers/date-time.helper";
 // types
@@ -41,6 +46,8 @@ const WorkspacePage: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { theme } = useTheme();
+
   const { user } = useUser();
   const { projects } = useProjects();
 
@@ -60,7 +67,36 @@ const WorkspacePage: NextPage = () => {
   }, [month, workspaceSlug]);
 
   return (
-    <WorkspaceAuthorizationLayout noHeader>
+    <WorkspaceAuthorizationLayout
+      left={
+        <div className="flex items-center gap-2 px-3">
+          <Icon iconName="grid_view" />
+          Dashboard
+        </div>
+      }
+      right={
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setIsProductUpdatesModalOpen(true)}
+            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded"
+          >
+            <Icon iconName="bolt" className="!text-base -my-1" />
+            What{"'"}s New?
+          </button>
+          <Link href="https://github.com/makeplane/plane" target="_blank" rel="noopener noreferrer">
+            <a className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded">
+              <Image
+                src={theme === "dark" ? githubWhiteImage : githubBlackImage}
+                height={16}
+                width={16}
+                alt="GitHub Logo"
+              />
+              Star us on GitHub
+            </a>
+          </Link>
+        </div>
+      }
+    >
       {isProductUpdatesModalOpen && (
         <ProductUpdatesModal
           isOpen={isProductUpdatesModalOpen}
@@ -93,27 +129,6 @@ const WorkspacePage: NextPage = () => {
         projects.length > 0 ? (
           <div className="p-8">
             <div className="flex flex-col gap-8">
-              <div className="text-custom-text-200 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-200 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
-                <p className="font-medium text-custom-text-100">
-                  Plane is open source, support us by starring us on GitHub.
-                </p>
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => setIsProductUpdatesModalOpen(true)}
-                    className="rounded-md border-2 border-custom-border-200 px-3 py-1.5 text-sm font-medium hover:text-custom-text-100 duration-300"
-                  >
-                    What{"'"}s New?
-                  </button>
-                  <a
-                    href="https://github.com/makeplane/plane"
-                    target="_blank"
-                    className="rounded-md border-2 border-custom-border-200 px-3 py-1.5 text-sm font-medium hover:text-custom-text-100 duration-300"
-                    rel="noopener noreferrer"
-                  >
-                    Star us on GitHub
-                  </a>
-                </div>
-              </div>
               <IssuesStats data={workspaceDashboardData} />
               <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
                 <IssuesList issues={workspaceDashboardData?.overdue_issues} type="overdue" />