fix: icon consistency for issue properties (#3065)

web/components/cycles/form.tsx

@@ -97,7 +97,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                     id="cycle_description"
                     name="description"
                     placeholder="Description..."
-                    className="h-24 w-full resize-none text-sm"
+                    className="!h-24 w-full resize-none text-sm"
                     hasError={Boolean(errors?.description)}
                     value={value}
                     onChange={onChange}
@@ -135,18 +135,12 @@ export const CycleForm: React.FC<Props> = (props) => {
           </div>
         </div>
       </div>
-      <div className="mt-5 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-100 pt-5 ">
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-100 pt-5 ">
         <Button variant="neutral-primary" size="sm" onClick={handleClose}>
           Cancel
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-          {data
+          {data ? (isSubmitting ? "Updating" : "Update cycle") : isSubmitting ? "Creating" : "Create cycle"}
-            ? isSubmitting
-              ? "Updating Cycle..."
-              : "Update Cycle"
-            : isSubmitting
-              ? "Creating Cycle..."
-              : "Create Cycle"}
         </Button>
       </div>
     </form>

web/components/issues/form.tsx

@@ -226,10 +226,9 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
 
     reset({
       ...defaultValues,
-      project: projectId,
       ...initialData,
     });
-  }, [setFocus, initialData, projectId, reset]);
+  }, [setFocus, initialData, reset]);
 
   // update projectId in form when projectId changes
   useEffect(() => {
@@ -629,8 +628,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                   ? "Updating Issue..."
                   : "Update Issue"
                 : isSubmitting
-                  ? "Adding Issue..."
+                ? "Adding Issue..."
-                  : "Add Issue"}
+                : "Add Issue"}
             </Button>
           </div>
         </div>

web/components/issues/issue-layouts/kanban/properties.tsx

@@ -124,7 +124,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
           value={issue?.start_date || null}
           onChange={(date: string) => handleStartDate(date)}
           disabled={isReadOnly}
-          placeHolder="Start date"
+          type="start_date"
         />
       )}
 
@@ -134,7 +134,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
           value={issue?.target_date || null}
           onChange={(date: string) => handleTargetDate(date)}
           disabled={isReadOnly}
-          placeHolder="Target date"
+          type="target_date"
         />
       )}
 

web/components/issues/issue-layouts/list/properties.tsx

@@ -108,7 +108,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
           value={issue?.start_date || null}
           onChange={(date: string) => handleStartDate(date)}
           disabled={isReadonly}
-          placeHolder="Start date"
+          type="start_date"
         />
       )}
 
@@ -118,7 +118,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
           value={issue?.target_date || null}
           onChange={(date: string) => handleTargetDate(date)}
           disabled={isReadonly}
-          placeHolder="Target date"
+          type="target_date"
         />
       )}
 

web/components/issues/issue-layouts/properties/assignee.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { usePopper } from "react-popper";
 import { Combobox } from "@headlessui/react";
-import { Check, ChevronDown, Search, User2 } from "lucide-react";
+import { Check, ChevronDown, CircleUser, Search } from "lucide-react";
 // ui
 import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
 // types
@@ -110,8 +110,8 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
             })}
           </AvatarGroup>
         ) : (
-          <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+          <span className="h-5 w-5 grid place-items-center">
-            <User2 className="h-4 w-4 text-custom-text-400" />
+            <CircleUser className="h-4 w-4" strokeWidth={1.5} />
           </span>
         )}
       </div>
@@ -140,7 +140,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
           ref={setReferenceElement}
           type="button"
           className={`flex w-full items-center justify-between gap-1 text-xs ${
-            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
           } ${buttonClassName}`}
           onClick={() => !projectMembers && getWorkspaceMembers()}
         >

web/components/issues/issue-layouts/properties/date.tsx

@@ -2,7 +2,7 @@ import React from "react";
 // headless ui
 import { Popover } from "@headlessui/react";
 // lucide icons
-import { Calendar, X } from "lucide-react";
+import { CalendarCheck2, CalendarClock, X } from "lucide-react";
 // react date picker
 import DatePicker from "react-datepicker";
 // mobx
@@ -18,11 +18,24 @@ export interface IIssuePropertyDate {
   value: any;
   onChange: (date: any) => void;
   disabled?: boolean;
-  placeHolder?: string;
+  type: "start_date" | "target_date";
 }
 
+const DATE_OPTIONS = {
+  start_date: {
+    key: "start_date",
+    placeholder: "Start date",
+    icon: CalendarClock,
+  },
+  target_date: {
+    key: "target_date",
+    placeholder: "Target date",
+    icon: CalendarCheck2,
+  },
+};
+
 export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props) => {
-  const { value, onChange, disabled, placeHolder } = props;
+  const { value, onChange, disabled, type } = props;
 
   const dropdownBtn = React.useRef<any>(null);
   const dropdownOptions = React.useRef<any>(null);
@@ -31,6 +44,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
 
   useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
+  const dateOptionDetails = DATE_OPTIONS[type];
+
   return (
     <Popover as="div" className="relative">
       {({ open }) => {
@@ -49,10 +64,10 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
               }`}
             >
               <div className="flex items-center justify-center gap-2 overflow-hidden">
-                <Calendar className="h-3 w-3" strokeWidth={2} />
+                <dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
                 {value && (
                   <>
-                    <Tooltip tooltipHeading={placeHolder} tooltipContent={value ?? "None"}>
+                    <Tooltip tooltipHeading={dateOptionDetails.placeholder} tooltipContent={value ?? "None"}>
                       <div className="text-xs">{value}</div>
                     </Tooltip>
 

web/components/issues/issue-layouts/properties/labels.tsx

@@ -6,7 +6,7 @@ import { usePopper } from "react-popper";
 // components
 import { Combobox } from "@headlessui/react";
 import { Tooltip } from "@plane/ui";
-import { Check, ChevronDown, Search } from "lucide-react";
+import { Check, ChevronDown, Search, Tags } from "lucide-react";
 // types
 import { Placement } from "@popperjs/core";
 import { RootStore } from "store/root";
@@ -25,6 +25,7 @@ export interface IIssuePropertyLabels {
   placement?: Placement;
   maxRender?: number;
   noLabelBorder?: boolean;
+  placeholderText?: string;
 }
 
 export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@@ -41,6 +42,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     placement,
     maxRender = 2,
     noLabelBorder = false,
+    placeholderText,
   } = props;
 
   const {
@@ -144,11 +146,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
         )
       ) : (
         <div
-          className={`flex h-full items-center justify-center rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
+          className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
             noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
           }`}
         >
-          Select labels
+          <Tags className="h-3.5 w-3.5" strokeWidth={2} />
+          {placeholderText}
         </div>
       )}
     </div>
@@ -171,8 +174,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             disabled
               ? "cursor-not-allowed text-custom-text-200"
               : value.length <= maxRender
-                ? "cursor-pointer"
+              ? "cursor-pointer"
-                : "cursor-pointer hover:bg-custom-background-80"
+              : "cursor-pointer hover:bg-custom-background-80"
           }  ${buttonClassName}`}
           onClick={() => !storeLabels && fetchLabels()}
         >

web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx

@@ -31,10 +31,10 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
         onChange={(data) => onChange({ labels: data })}
         className="h-full w-full"
         buttonClassName="px-2.5 h-full"
-        noLabelBorder
         hideDropdownArrow
         maxRender={1}
         disabled={disabled}
+        placeholderText="Select labels"
       />
 
       {isExpanded &&

web/components/issues/select/project.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import type { FieldError } from "react-hook-form";
 // mobx store
@@ -23,9 +22,6 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
   const { value, onChange } = props;
   const [query, setQuery] = useState("");
 
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
@@ -33,13 +29,13 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
     placement: "bottom-start",
   });
 
-  const { project: projectStore } = useMobxStore();
+  const {
+    project: { joinedProjects },
+  } = useMobxStore();
 
-  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+  const selectedProject = joinedProjects?.find((i) => i.id === value);
 
-  const selectedProject = projects?.find((i) => i.id === value);
+  const options = joinedProjects?.map((project) => ({
-
-  const options = projects?.map((project) => ({
     value: project.id,
     query: project.name,
     content: (
@@ -61,8 +57,8 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
         {selectedProject.emoji
           ? renderEmoji(selectedProject.emoji)
           : selectedProject.icon_prop
-            ? renderEmoji(selectedProject.icon_prop)
+          ? renderEmoji(selectedProject.icon_prop)
-            : null}
+          : null}
       </span>
       <div className="truncate">{selectedProject.identifier}</div>
     </div>

web/components/issues/view-select/due-date.tsx

@@ -1,7 +1,7 @@
 // ui
 import { CustomDatePicker } from "components/ui";
 import { Tooltip } from "@plane/ui";
-import { CalendarDays } from "lucide-react";
+import { CalendarCheck } from "lucide-react";
 // helpers
 import {
   findHowManyDaysLeft,
@@ -51,8 +51,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
           issue.target_date === null
             ? ""
             : issue.target_date < new Date().toISOString()
-              ? "text-red-600"
+            ? "text-red-600"
-              : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+            : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
         }`}
       >
         <CustomDatePicker
@@ -67,7 +67,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
             >
               {issue.target_date ? (
                 <>
-                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <CalendarCheck className="h-3.5 w-3.5 flex-shrink-0" />
                   <span>
                     {areYearsEqual
                       ? renderShortDate(issue.target_date ?? "", "_ _")
@@ -76,7 +76,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
                 </>
               ) : (
                 <>
-                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <CalendarCheck className="h-3.5 w-3.5 flex-shrink-0" />
                   <span>Due Date</span>
                 </>
               )}

web/components/issues/view-select/start-date.tsx

@@ -1,7 +1,7 @@
 // ui
 import { CustomDatePicker } from "components/ui";
 import { Tooltip } from "@plane/ui";
-import { CalendarDays } from "lucide-react";
+import { CalendarClock } from "lucide-react";
 // helpers
 import { renderShortDate, renderShortDateWithYearFormat, renderShortMonthDate } from "helpers/date-time.helper";
 // types
@@ -55,7 +55,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
             >
               {issue?.start_date ? (
                 <>
-                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <CalendarClock className="h-3.5 w-3.5 flex-shrink-0" />
                   <span>
                     {areYearsEqual
                       ? renderShortDate(issue?.start_date, "_ _")
@@ -64,7 +64,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
                 </>
               ) : (
                 <>
-                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <CalendarClock className="h-3.5 w-3.5 flex-shrink-0" />
                   <span>Start Date</span>
                 </>
               )}

web/constants/spreadsheet.ts

@@ -1,6 +1,6 @@
 import { TIssueOrderByOptions } from "types";
 import { LayersIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
-import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip } from "lucide-react";
+import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarClock, CalendarCheck } from "lucide-react";
 import { FC } from "react";
 import { ISvgIcons } from "@plane/ui/src/icons/type";
 
@@ -36,7 +36,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "target_date",
     descendingOrderTitle: "Old",
-    icon: CalendarDays,
+    icon: CalendarCheck,
   },
   estimate: {
     title: "Estimate",
@@ -68,7 +68,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "start_date",
     descendingOrderTitle: "Old",
-    icon: CalendarDays,
+    icon: CalendarClock,
   },
   state: {
     title: "State",