chore: UI/UX improvements (#3319)

* chore: add proper message for cycle/ module having start & end date but isn't active yet.

* fix: infinite loader after updating workspace settings.

* fix: user profile icon dropdown doesn't closes automatically.

* style: fix inconsistent padding in cycle empty state.

* chore: remove multiple `empty state` in labels settings and improve add label logic.

* style: fix inconsistent padding in project label, integration and estimates empty state.

* style: fix integrations settings breadcrumb title.

* style: add proper `disabled` styles for email field in profile settings.

* style: fix cycle layout height.

web/components/common/new-empty-state.tsx

@@ -43,7 +43,7 @@ export const NewEmptyState: React.FC<Props> = ({
   return (
     <div className="flex items-center justify-center overflow-y-auto">
       <div className=" flex h-full w-full flex-col items-center justify-center ">
-        <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-16">
+        <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-8">
           <h3 className="text-2xl font-semibold">{title}</h3>
           {description && <p className=" text-lg">{description}</p>}
           <div className="relative w-full max-w-6xl">

web/components/cycles/sidebar.tsx

@@ -539,7 +539,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                         <div className="flex items-center gap-1">
                           <AlertCircle height={14} width={14} className="text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
-                            Invalid date. Please enter valid date.
+                            {cycleDetails?.start_date && cycleDetails?.end_date
+                              ? "This cycle isn't active yet."
+                              : "Invalid date. Please enter valid date."}
                           </span>
                         </div>
                       )}

web/components/estimates/estimates-list.tsx

@@ -102,7 +102,7 @@ export const EstimatesList: React.FC = observer(() => {
             ))}
           </section>
         ) : (
-          <div className="h-full w-full overflow-y-auto">
+          <div className="w-full py-8">
             <EmptyState
               title="No estimates yet"
               description="Estimates help you communicate the complexity of an issue."

web/components/labels/project-setting-label-list.tsx

@@ -96,9 +96,9 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
           Add label
         </Button>
       </div>
-      <div className="w-full">
+      <div className="w-full py-8">
         {showLabelForm && (
-          <div className="w-full rounded border border-custom-border-200 px-3.5 py-2">
+          <div className="w-full rounded border border-custom-border-200 px-3.5 py-2 my-2">
             <CreateUpdateLabelInline
               labelForm={showLabelForm}
               setLabelForm={setLabelForm}
@@ -112,7 +112,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
           </div>
         )}
         {projectLabels ? (
-          projectLabels.length === 0 ? (
+          projectLabels.length === 0 && !showLabelForm ? (
             <EmptyState
               title="No labels yet"
               description="Create labels to help organize and filter issues in you project"
@@ -203,25 +203,14 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
             )
           )
         ) : (
-          <Loader className="space-y-5">
-            <Loader.Item height="42px" />
-            <Loader.Item height="42px" />
-            <Loader.Item height="42px" />
-            <Loader.Item height="42px" />
-          </Loader>
-        )}
-
-        {/* empty state */}
-        {projectLabels && projectLabels.length === 0 && (
-          <EmptyState
-            title="No labels yet"
-            description="Create labels to help organize and filter issues in your project."
-            image={emptyLabel}
-            primaryButton={{
-              text: "Add label",
-              onClick: () => newLabel(),
-            }}
-          />
+          !showLabelForm && (
+            <Loader className="space-y-5">
+              <Loader.Item height="42px" />
+              <Loader.Item height="42px" />
+              <Loader.Item height="42px" />
+              <Loader.Item height="42px" />
+            </Loader>
+          )
         )}
       </div>
     </>

web/components/modules/sidebar.tsx

@@ -550,7 +550,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                         <div className="flex items-center gap-1">
                           <AlertCircle height={14} width={14} className="text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
-                            Invalid date. Please enter valid date.
+                            {moduleDetails?.start_date && moduleDetails?.target_date
+                              ? "This module isn't active yet."
+                              : "Invalid date. Please enter valid date."}
                           </span>
                         </div>
                       )}

web/components/workspace/sidebar-dropdown.tsx

@@ -278,14 +278,14 @@ export const WorkspaceSidebarDropdown = observer(() => {
               <div className="flex flex-col gap-2.5 pb-2">
                 <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
                 {profileLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => (
-                  <Menu.Item key={index} as="button" type="button">
-                    <Link href={link.link}>
+                  <Link key={index} href={link.link}>
+                    <Menu.Item key={index} as="div">
                       <span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
                         <link.icon className="h-4 w-4 stroke-[1.5]" />
                         {link.name}
                       </span>
-                    </Link>
-                  </Menu.Item>
+                    </Menu.Item>
+                  </Link>
                 ))}
               </div>
               <div className={`pt-2 ${isUserInstanceAdmin ? "pb-2" : ""}`}>
@@ -301,13 +301,13 @@ export const WorkspaceSidebarDropdown = observer(() => {
               </div>
               {isUserInstanceAdmin && (
                 <div className="p-2 pb-0">
-                  <Menu.Item as="button" type="button" className="w-full">
-                    <Link href="/god-mode">
+                  <Link href="/god-mode">
+                    <Menu.Item as="button" type="button" className="w-full">
                       <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
                         Enter God Mode
                       </span>
-                    </Link>
-                  </Menu.Item>
+                    </Menu.Item>
+                  </Link>
                 </div>
               )}
             </Menu.Items>