From 9b1ae6bcd49ba188b7a552782b0f89a785d82fda Mon Sep 17 00:00:00 2001
From: Kunal Vishwakarma <116634168+kunalv17@users.noreply.github.com>
Date: Sat, 8 Apr 2023 13:55:30 +0530
Subject: [PATCH] fix: inconsistency in styles (#734)

---
 .../estimates/estimate-points-modal.tsx       |  3 +--
 .../components/estimates/single-estimate.tsx  |  4 +--
 apps/app/components/issues/form.tsx           |  2 +-
 .../app/components/issues/select/estimate.tsx | 26 +++++++++++++++----
 .../issues/sidebar-select/estimate.tsx        |  2 +-
 .../[projectId]/settings/estimates.tsx        |  2 +-
 6 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/apps/app/components/estimates/estimate-points-modal.tsx b/apps/app/components/estimates/estimate-points-modal.tsx
index 149eec583..67bcafe9d 100644
--- a/apps/app/components/estimates/estimate-points-modal.tsx
+++ b/apps/app/components/estimates/estimate-points-modal.tsx
@@ -184,8 +184,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
   };
 
   useEffect(() => {
-    if (!data) return;
-
+    if(!data) return
     reset({
       ...defaultValues,
       ...data,
diff --git a/apps/app/components/estimates/single-estimate.tsx b/apps/app/components/estimates/single-estimate.tsx
index 4e52146f2..d20ef1db8 100644
--- a/apps/app/components/estimates/single-estimate.tsx
+++ b/apps/app/components/estimates/single-estimate.tsx
@@ -83,7 +83,7 @@ export const SingleEstimate: React.FC<Props> = ({
         estimate={estimate}
         onClose={() => setIsEstimatePointsModalOpen(false)}
       />
-      <div className="gap-2 space-y-3 bg-white">
+      <div className="gap-2 space-y-3 my-3 bg-white">
         <div className="flex justify-between items-center">
           <div className="items-start">
             <h6 className="font-medium text-base w-[40vw] truncate">{estimate.name}</h6>
@@ -129,7 +129,7 @@ export const SingleEstimate: React.FC<Props> = ({
           </div>
         </div>
         {estimatePoints && estimatePoints.length > 0 ? (
-          <div className="flex gap-2 mt-2">
+          <div className="flex gap-2">
             {estimatePoints.length > 0 && "Estimate points ("}
             {estimatePoints.map((point, i) => (
               <h6 key={point.id}>
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 9051ed2a5..8e42754d4 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -405,7 +405,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                     control={control}
                     name="estimate_point"
                     render={({ field: { value, onChange } }) => (
-                      <IssueEstimateSelect value={value} onChange={onChange} />
+                      <IssueEstimateSelect chevron={false} value={value} onChange={onChange} />
                     )}
                   />
                 </div>
diff --git a/apps/app/components/issues/select/estimate.tsx b/apps/app/components/issues/select/estimate.tsx
index 2fe043303..6f63b2330 100644
--- a/apps/app/components/issues/select/estimate.tsx
+++ b/apps/app/components/issues/select/estimate.tsx
@@ -10,15 +10,17 @@ import estimatesService from "services/estimates.service";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
+import { PlayIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 // fetch-keys
 import { ESTIMATE_POINTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   value: number;
   onChange: (value: number) => void;
+  chevron: boolean;
 };
 
-export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
+export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange, chevron }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -47,20 +49,34 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
     <CustomSelect
       value={value}
       label={
-        <div className="flex items-center  gap-2 text-xs w-[111px]">
+        <div className="flex items-center  gap-2 text-xs min-w-[calc(100%+10px)]">
+          <span>
+            <PlayIcon className="h-4 w-4 text-gray-700 -rotate-90" />
+          </span>
           <span className={`${value ? "text-gray-600" : "text-gray-500"}`}>
             {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate points"}
           </span>
+          {chevron && (
+            <span className="w-full flex justify-end pr-3">
+              <ChevronDownIcon className="h-[9px] w-[9px] text-black" />
+            </span>
+          )}
         </div>
       }
       onChange={onChange}
       position="right"
-      width="w-full"
+      width="w-full min-w-[111px]"
+      noChevron={!chevron}
     >
       {estimatePoints &&
         estimatePoints.map((point) => (
-          <CustomSelect.Option className="w-full" key={point.key} value={point.key}>
-            {point.value}
+          <CustomSelect.Option className="w-full " key={point.key} value={point.key}>
+            <>
+              <span>
+                <PlayIcon className="h-4 w-4 -rotate-90" />
+              </span>
+              {point.value}
+            </>
           </CustomSelect.Option>
         ))}
     </CustomSelect>
diff --git a/apps/app/components/issues/sidebar-select/estimate.tsx b/apps/app/components/issues/sidebar-select/estimate.tsx
index 1f0646fb6..9b24a529d 100644
--- a/apps/app/components/issues/sidebar-select/estimate.tsx
+++ b/apps/app/components/issues/sidebar-select/estimate.tsx
@@ -28,7 +28,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, userAu
         <p>Estimate</p>
       </div>
       <div className="sm:basis-1/2">
-        <IssueEstimateSelect value={value} onChange={onChange} />
+        <IssueEstimateSelect chevron={true} value={value} onChange={onChange} />
       </div>
     </div>
   );
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 7d1bd500d..5ee1b5268 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -124,7 +124,7 @@ const EstimatesSettings: NextPage = () => {
         </section>
         <hr className="h-[1px] w-full mt-4" />
         {estimatesList && estimatesList.length > 0 && (
-          <section className="mt-4 divide-y px-6 py-4 mb-8 rounded-xl border bg-white">
+          <section className="mt-4 divide-y px-6 mb-8 rounded-xl border bg-white">
             <>
               {estimatesList ? (
                 estimatesList.map((estimate) => (