From 4424d67073871ebc02f6471c5d79800d37d0be80 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 21 Jul 2023 12:37:48 +0530
Subject: [PATCH] style: ui improvements (#1605)

* style: automation setting border

* style: sidebar ui improvement
---
 .../automation/auto-archive-automation.tsx    |  2 +-
 .../automation/auto-close-automation.tsx      |  2 +-
 .../notifications/notification-popover.tsx    | 35 +++++++++++--------
 .../app/components/workspace/help-section.tsx |  2 +-
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/apps/app/components/automation/auto-archive-automation.tsx b/apps/app/components/automation/auto-archive-automation.tsx
index 8772371c4..07ac86460 100644
--- a/apps/app/components/automation/auto-archive-automation.tsx
+++ b/apps/app/components/automation/auto-archive-automation.tsx
@@ -28,7 +28,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-7 px-6 py-5 rounded-[10px] border border-custom-border-100 bg-custom-background-90">
+      <div className="flex flex-col gap-7 px-6 py-5 rounded-[10px] border border-custom-border-300 bg-custom-background-90">
         <div className="flex items-center justify-between gap-x-8 gap-y-2">
           <div className="flex flex-col gap-2.5">
             <h4 className="text-lg font-semibold">Auto-archive closed issues</h4>
diff --git a/apps/app/components/automation/auto-close-automation.tsx b/apps/app/components/automation/auto-close-automation.tsx
index 03df06235..3023328e7 100644
--- a/apps/app/components/automation/auto-close-automation.tsx
+++ b/apps/app/components/automation/auto-close-automation.tsx
@@ -77,7 +77,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
         handleChange={handleChange}
       />
 
-      <div className="flex flex-col gap-7 px-6 py-5 rounded-[10px] border border-custom-border-100 bg-custom-background-90">
+      <div className="flex flex-col gap-7 px-6 py-5 rounded-[10px] border border-custom-border-300 bg-custom-background-90">
         <div className="flex items-center justify-between gap-x-8 gap-y-2 ">
           <div className="flex flex-col gap-2.5">
             <h4 className="text-lg font-semibold">Auto-close inactive issues</h4>
diff --git a/apps/app/components/notifications/notification-popover.tsx b/apps/app/components/notifications/notification-popover.tsx
index 255d8af04..860dc4f60 100644
--- a/apps/app/components/notifications/notification-popover.tsx
+++ b/apps/app/components/notifications/notification-popover.tsx
@@ -94,21 +94,28 @@ export const NotificationPopover = () => {
       <Popover className="relative w-full">
         {({ open: isActive, close: closePopover }) => (
           <>
-            <Popover.Button
-              className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
-                isActive
-                  ? "bg-custom-primary-100/10 text-custom-primary-100"
-                  : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-              } ${sidebarCollapse ? "justify-center" : ""}`}
+            <Tooltip
+              tooltipContent="Notifications"
+              position="right"
+              className="ml-2"
+              disabled={!sidebarCollapse}
             >
-              <NotificationsOutlined fontSize="small" />
-              {sidebarCollapse ? null : <span>Notifications</span>}
-              {totalNotificationCount && totalNotificationCount > 0 ? (
-                <span className="ml-auto bg-custom-primary-300 rounded-full text-xs text-white px-1.5">
-                  {getNumberCount(totalNotificationCount)}
-                </span>
-              ) : null}
-            </Popover.Button>
+              <Popover.Button
+                className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
+                  isActive
+                    ? "bg-custom-primary-100/10 text-custom-primary-100"
+                    : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                } ${sidebarCollapse ? "justify-center" : ""}`}
+              >
+                <NotificationsOutlined fontSize="small" />
+                {sidebarCollapse ? null : <span>Notifications</span>}
+                {totalNotificationCount && totalNotificationCount > 0 ? (
+                  <span className="ml-auto bg-custom-primary-300 rounded-full text-xs text-white px-1.5">
+                    {getNumberCount(totalNotificationCount)}
+                  </span>
+                ) : null}
+              </Popover.Button>
+            </Tooltip>
             <Transition
               as={Fragment}
               enter="transition ease-out duration-200"
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index ea7825d91..43a0e737d 100644
--- a/apps/app/components/workspace/help-section.tsx
+++ b/apps/app/components/workspace/help-section.tsx
@@ -57,7 +57,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
         }`}
       >
         {!sidebarCollapse && (
-          <div className="w-1/2 text-center rounded-md px-2.5 py-1.5 font-medium outline-none text-sm bg-green-500/10 text-green-500">
+          <div className="w-1/2 text-center cursor-default rounded-md px-2.5 py-1.5 font-medium outline-none text-sm bg-green-500/10 text-green-500">
             Free Plan
           </div>
         )}