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

@@ -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 && (

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 />

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
+          <Tooltip tooltipContent="Shortcuts">
-            type="button"
+            <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 ${
+              type="button"
-              isCollapsed ? "w-full" : ""
+              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)}
+              }`}
-          >
+              onClick={() => toggleShortcutModal(true)}
-            <Zap className="h-3.5 w-3.5" />
+            >
-          </button>
+              <Zap className="h-3.5 w-3.5" />
-          <button
+            </button>
-            type="button"
+          </Tooltip>
-            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 ${
+          <Tooltip tooltipContent="Help">
-              isCollapsed ? "w-full" : ""
+            <button
-            }`}
+              type="button"
-            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+              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" : ""
-            <HelpCircle className="h-3.5 w-3.5" />
+              }`}
-          </button>
+              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"
+          <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`}>
-            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 ${
+            <button
-              isCollapsed ? "w-full" : ""
+              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 ${
-            onClick={() => toggleSidebar()}
+                isCollapsed ? "w-full" : ""
-          >
+              }`}
-            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
+              onClick={() => toggleSidebar()}
-          </button>
+            >
+              <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
+            </button>
+          </Tooltip>
         </div>
 
         <div className="relative">