style: ui improvements (#1605)

* style: automation setting border * style: sidebar ui improvement
makeplane · Jul 21, 2023 · 4424d67 · 4424d67 · vercel · Jul 21, 2023
1 parent 26eb3b5
commit 4424d67
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
         )}