From 4de0abfc22ce61d17a74e8b2b72f3543c31a0db8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 17 Mar 2023 10:39:06 +0530
Subject: [PATCH] fix: minor ui fixes (#469)

---
 apps/app/components/breadcrumbs/index.tsx          |  9 +++++----
 apps/app/components/cycles/sidebar.tsx             |  4 ++--
 apps/app/components/issues/description-form.tsx    | 10 ++++++++--
 apps/app/components/modules/sidebar.tsx            |  4 ++--
 apps/app/components/modules/single-module-card.tsx |  2 +-
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/apps/app/components/breadcrumbs/index.tsx b/apps/app/components/breadcrumbs/index.tsx
index c561514fa..0a2d36e1f 100644
--- a/apps/app/components/breadcrumbs/index.tsx
+++ b/apps/app/components/breadcrumbs/index.tsx
@@ -14,12 +14,13 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
   return (
     <>
       <div className="flex items-center">
-        <div
-          className="grid h-8 w-8 cursor-pointer place-items-center flex-shrink-0 rounded border border-gray-300 text-center text-sm hover:bg-gray-100"
+        <button
+          type="button"
+          className="grid h-8 w-8 flex-shrink-0 cursor-pointer place-items-center rounded border border-gray-300 text-center text-sm hover:bg-gray-100"
           onClick={() => router.back()}
         >
           <ArrowLeftIcon className="h-3 w-3" />
-        </div>
+        </button>
         {children}
       </div>
     </>
@@ -44,7 +45,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
         </a>
       </Link>
     ) : (
-      <div className="px-3 text-sm max-w-64">
+      <div className="max-w-64 px-3 text-sm">
         <p className={`${icon ? "flex items-center gap-2" : ""}`}>
           {icon}
           <span className="break-all">{title}</span>
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index d45e72358..44e89604d 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -150,7 +150,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
         {cycle ? (
           <>
             <div className="flex flex-col items-start justify-center">
-              <div className="flex gap-2.5 px-6 text-sm">
+              <div className="flex gap-2.5 px-5 text-sm">
                 <div className="flex items-center ">
                   <span
                     className={`flex items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
@@ -442,7 +442,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
             </div>
           </>
         ) : (
-          <Loader>
+          <Loader className="px-5">
             <div className="space-y-2">
               <Loader.Item height="15px" width="50%" />
               <Loader.Item height="15px" width="30%" />
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index f91b10f79..a4ba631e8 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -88,7 +88,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
-    <div>
+    <div className="relative">
       <div className="relative">
         <TextArea
           id="name"
@@ -152,7 +152,13 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         onHTMLChange={(html) => setValue("description_html", html)}
         editable={!isNotAllowed}
       />
-      <div className="text-right text-sm text-gray-500">{isSubmitting && "Saving..."}</div>
+      <div
+        className={`absolute -bottom-8 right-0 text-sm text-gray-500 ${
+          isSubmitting ? "block" : "hidden"
+        }`}
+      >
+        Saving...
+      </div>
     </div>
   );
 };
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index c9221dffd..5e4407841 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -206,7 +206,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
         {module ? (
           <>
             <div className="flex flex-col items-start justify-center">
-              <div className="flex gap-2.5 px-6 text-sm">
+              <div className="flex gap-2.5 px-5 text-sm">
                 <div className="flex items-center ">
                   <Controller
                     control={control}
@@ -526,7 +526,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
             </div>
           </>
         ) : (
-          <Loader>
+          <Loader className="px-5">
             <div className="space-y-2">
               <Loader.Item height="15px" width="50%" />
               <Loader.Item height="15px" width="30%" />
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index cbc9ff2e2..162dcd03d 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -265,7 +265,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
             <span>
               Progress
               <br />
-              {isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(2)}%
+              {isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%
             </span>
             <div className="bar relative mt-1 h-1 w-full rounded bg-gray-300">
               <div