From 1d3745157db136bfa5f9dba8c4ee817e1b636eea Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 11 Dec 2023 22:27:28 +0530
Subject: [PATCH] style: cycle and module sidebar improvement (#3076)

* style: cycle and module sidebar improvement

* chore: issue attachment error message updated
---
 web/components/cycles/sidebar.tsx                | 10 +++++-----
 .../issues/attachment/attachment-upload.tsx      |  6 +++---
 web/components/modules/sidebar.tsx               | 16 ++++++++++------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 834f20397..4ae5c9d8b 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -281,10 +281,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
     cycleDetails.total_issues === 0
       ? "0 Issue"
       : cycleDetails.total_issues === cycleDetails.completed_issues
-        ? cycleDetails.total_issues > 1
-          ? `${cycleDetails.total_issues}`
-          : `${cycleDetails.total_issues}`
-        : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+      ? cycleDetails.total_issues > 1
+        ? `${cycleDetails.total_issues}`
+        : `${cycleDetails.total_issues}`
+      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
 
   return (
     <>
@@ -468,7 +468,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
                     <div className="flex items-center gap-2.5">
                       {progressPercentage ? (
-                        <span className="flex h-5 w-9 items-center justify-center rounded bg-amber-50 text-xs font-medium text-amber-500">
+                        <span className="flex h-5 w-9 items-center justify-center rounded bg-amber-500/20 text-xs font-medium text-amber-500">
                           {progressPercentage ? `${progressPercentage}%` : ""}
                         </span>
                       ) : (
diff --git a/web/components/issues/attachment/attachment-upload.tsx b/web/components/issues/attachment/attachment-upload.tsx
index b1608eacb..c1b323e74 100644
--- a/web/components/issues/attachment/attachment-upload.tsx
+++ b/web/components/issues/attachment/attachment-upload.tsx
@@ -84,10 +84,10 @@ export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
     disabled: isLoading || disabled,
   });
 
+  const maxFileSize = envConfig?.file_size_limit ?? MAX_FILE_SIZE;
+
   const fileError =
-    fileRejections.length > 0
-      ? `Invalid file type or size (max ${envConfig?.file_size_limit ?? MAX_FILE_SIZE / 1024 / 1024} MB)`
-      : null;
+    fileRejections.length > 0 ? `Invalid file type or size (max ${maxFileSize / 1024 / 1024} MB)` : null;
 
   return (
     <div
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index c0408e7f3..b0c4b5e33 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -256,10 +256,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     moduleDetails.total_issues === 0
       ? "0 Issue"
       : moduleDetails.total_issues === moduleDetails.completed_issues
-        ? moduleDetails.total_issues > 1
-          ? `${moduleDetails.total_issues}`
-          : `${moduleDetails.total_issues}`
-        : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
+      ? moduleDetails.total_issues > 1
+        ? `${moduleDetails.total_issues}`
+        : `${moduleDetails.total_issues}`
+      : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
 
   return (
     <>
@@ -311,7 +311,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                 <CustomSelect
                   customButton={
                     <span
-                      className={`flex h-6 w-20 cursor-default items-center justify-center rounded-sm text-sm ${moduleStatus?.textColor} ${moduleStatus?.bgColor}`}
+                      className="flex h-6 w-20 cursor-default items-center justify-center rounded-sm text-center text-xs"
+                      style={{
+                        color: moduleStatus ? moduleStatus.color : "#a3a3a2",
+                        backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
+                      }}
                     >
                       {moduleStatus?.label ?? "Backlog"}
                     </span>
@@ -459,7 +463,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
 
                     <div className="flex items-center gap-2.5">
                       {progressPercentage ? (
-                        <span className="flex h-5 w-9 items-center justify-center rounded bg-amber-50 text-xs font-medium text-amber-500">
+                        <span className="flex h-5 w-9 items-center justify-center rounded bg-amber-500/20 text-xs font-medium text-amber-500">
                           {progressPercentage ? `${progressPercentage}%` : ""}
                         </span>
                       ) : (