From 336c97d3364f37af19a913c909c6fa55a8b55a45 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 25 Jan 2024 14:23:55 +0530
Subject: [PATCH] chore: bug fixes and ui improvements (#3468)

* chore: empty state improvement

* chore: app sidebar improvement

* chore: dashboard empty state improvement
---
 web/components/empty-state/empty-state.tsx    | 12 +++-
 .../page-views/workspace-dashboard.tsx        | 22 ++++---
 web/components/workspace/help-section.tsx     | 64 +++++++++++--------
 3 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/web/components/empty-state/empty-state.tsx b/web/components/empty-state/empty-state.tsx
index 5416eef43..a74502f4d 100644
--- a/web/components/empty-state/empty-state.tsx
+++ b/web/components/empty-state/empty-state.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 // components
 import { ComicBoxButton } from "./comic-box-button";
 // ui
@@ -51,8 +52,6 @@ export const EmptyState: React.FC<Props> = ({
     </>
   );
 
-  const imageElement = <img src={image} sizes="100%" alt={primaryButton?.text || "button image"} />;
-
   const secondaryButtonElement = secondaryButton && (
     <Button
       size={size === "sm" ? "md" : "lg"}
@@ -75,7 +74,14 @@ export const EmptyState: React.FC<Props> = ({
       >
         <div className="flex flex-col gap-1.5 flex-shrink-0">{emptyStateHeader}</div>
 
-        {imageElement}
+        <Image
+          src={image}
+          alt={primaryButton?.text || "button image"}
+          width={384}
+          height={250}
+          layout="responsive"
+          lazyBoundary="100%"
+        />
 
         <div className="relative flex items-center justify-center gap-2 flex-shrink-0 w-full">
           {primaryButton && (
diff --git a/web/components/page-views/workspace-dashboard.tsx b/web/components/page-views/workspace-dashboard.tsx
index 6e185e2d0..fa5f7c2c1 100644
--- a/web/components/page-views/workspace-dashboard.tsx
+++ b/web/components/page-views/workspace-dashboard.tsx
@@ -55,17 +55,19 @@ export const WorkspaceDashboardView = observer(() => {
 
   return (
     <>
-      <IssuePeekOverview />
-      {currentUser && !currentUser.is_tour_completed && (
-        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
-          <TourRoot onComplete={handleTourCompleted} />
-        </div>
-      )}
       {homeDashboardId && joinedProjectIds ? (
-        <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
-          {currentUser && <UserGreetingsView user={currentUser} />}
+        <>
           {joinedProjectIds.length > 0 ? (
-            <DashboardWidgets />
+            <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
+              <IssuePeekOverview />
+              {currentUser && <UserGreetingsView user={currentUser} />}
+              {currentUser && !currentUser.is_tour_completed && (
+                <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
+                  <TourRoot onComplete={handleTourCompleted} />
+                </div>
+              )}
+              <DashboardWidgets />
+            </div>
           ) : (
             <EmptyState
               image={emptyStateImage}
@@ -85,7 +87,7 @@ export const WorkspaceDashboardView = observer(() => {
               disabled={!isEditingAllowed}
             />
           )}
-        </div>
+        </>
       ) : (
         <div className="h-full w-full grid place-items-center">
           <Spinner />
diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
index aa58fcd65..0bde9d1a5 100644
--- a/web/components/workspace/help-section.tsx
+++ b/web/components/workspace/help-section.tsx
@@ -7,7 +7,7 @@ import { useApplication } from "hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // icons
 import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
-import { DiscordIcon, GithubIcon } from "@plane/ui";
+import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
 // assets
 import packageJson from "package.json";
 
@@ -67,24 +67,29 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           </div>
         )}
         <div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "w-1/2 justify-evenly"}`}>
-          <button
-            type="button"
-            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-              isCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => toggleShortcutModal(true)}
-          >
-            <Zap className="h-3.5 w-3.5" />
-          </button>
-          <button
-            type="button"
-            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-              isCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
-          >
-            <HelpCircle className="h-3.5 w-3.5" />
-          </button>
+          <Tooltip tooltipContent="Shortcuts">
+            <button
+              type="button"
+              className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+                isCollapsed ? "w-full" : ""
+              }`}
+              onClick={() => toggleShortcutModal(true)}
+            >
+              <Zap className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip>
+          <Tooltip tooltipContent="Help">
+            <button
+              type="button"
+              className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+                isCollapsed ? "w-full" : ""
+              }`}
+              onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+            >
+              <HelpCircle className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip>
+
           <button
             type="button"
             className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
@@ -92,15 +97,18 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           >
             <MoveLeft className="h-3.5 w-3.5" />
           </button>
-          <button
-            type="button"
-            className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
-              isCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => toggleSidebar()}
-          >
-            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
-          </button>
+
+          <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`}>
+            <button
+              type="button"
+              className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
+                isCollapsed ? "w-full" : ""
+              }`}
+              onClick={() => toggleSidebar()}
+            >
+              <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
+            </button>
+          </Tooltip>
         </div>
 
         <div className="relative">