fix: inconsistency in styles (#734)

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,

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}>

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>

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}>
+          <CustomSelect.Option className="w-full " key={point.key} value={point.key}>
-            {point.value}
+            <>
+              <span>
+                <PlayIcon className="h-4 w-4 -rotate-90" />
+              </span>
+              {point.value}
+            </>
           </CustomSelect.Option>
         ))}
     </CustomSelect>

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>
   );

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) => (