style: image picker, spreadsheet view title, icons (#2988)

* style: image picker, spreadsheet view title, icons

* fix: build error fix

web/components/core/image-picker-popover.tsx

@@ -324,7 +324,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                       File formats supported- .jpeg, .jpg, .png, .webp, .svg
                     </p>
 
-                    <div className="flex items-center justify-end gap-2">
+                    <div className="flex items-start h-12 justify-end gap-2">
                       <Button
                         variant="neutral-primary"
                         onClick={() => {

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

@@ -111,12 +111,8 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
             })}
           </AvatarGroup>
         ) : (
-          <span
+          <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
-            className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded duration-300 focus:outline-none ${
+            <User2 className="h-4 w-4 text-custom-text-400" />
-              noLabelBorder ? "" : " px-2.5 py-1 border-[0.5px] border-custom-border-300"
-            }`}
-          >
-            <User2 className="h-3 w-3" />
           </span>
         )}
       </div>

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

@@ -85,14 +85,17 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
           customButton={
             <div className="flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-2">
               <div className="flex items-center gap-1.5">
+                {<propertyDetails.icon className="h-4 w-4 text-custom-text-400" />}
+                {propertyDetails.title}
+              </div>
+              <div className="flex ml-3">
                 {activeSortingProperty === property && (
                   <div className="rounded-full flex items-center justify-center h-3.5 w-3.5">
                     <ListFilter className="h-3 w-3" />
                   </div>
                 )}
-                {propertyDetails.title}
+                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
               </div>
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
             </div>
           }
           width="xl"

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -8,7 +8,7 @@ import {
   SpreadsheetIssuesColumn,
   SpreadsheetQuickAddIssueForm,
 } from "components/issues";
-import { Spinner } from "@plane/ui";
+import { Spinner, LayersIcon } from "@plane/ui";
 // types
 import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState, IUserLite } from "types";
 import { EIssueActions } from "../types";
@@ -95,9 +95,14 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                 >
                   <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
                     {displayProperties.key && (
-                      <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
+                      <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
+                        <span className="mr-1.5 text-custom-text-400">#</span>ID
+                      </span>
                     )}
-                    <span className="flex items-center justify-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
+                    <span className="flex items-center justify-center px-4 py-2.5 h-full w-full flex-grow">
+                      <LayersIcon className="h-4 w-4 text-custom-text-400 mr-1.5" />
+                      Issue
+                    </span>
                   </div>
 
                   {issues.map((issue, index) =>

web/components/issues/issue-peek-overview/properties.tsx

@@ -5,8 +5,8 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui icons
-import { DiceIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
+import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon } from "@plane/ui";
-import { CalendarDays, ContrastIcon, Link2, Plus, Signal, Tag, Triangle, User2 } from "lucide-react";
+import { CalendarDays, Link2, Plus, Signal, Tag, Triangle, LayoutPanelTop } from "lucide-react";
 import {
   SidebarAssigneeSelect,
   SidebarCycleSelect,
@@ -289,7 +289,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           {/* parent */}
           <div className="flex items-center gap-2 w-full">
             <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
-              <User2 className="h-4 w-4 flex-shrink-0" />
+              <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
               <p>Parent</p>
             </div>
             <div>

web/components/issues/sidebar.tsx

@@ -32,7 +32,7 @@ import {
 // ui
 import { CustomDatePicker } from "components/ui";
 // icons
-import { Bell, CalendarDays, LinkIcon, Plus, Signal, Tag, Trash2, Triangle, User2 } from "lucide-react";
+import { Bell, CalendarDays, LinkIcon, Plus, Signal, Tag, Trash2, Triangle, LayoutPanelTop } from "lucide-react";
 import { Button, ContrastIcon, DiceIcon, DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
@@ -421,7 +421,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <User2 className="h-4 w-4 flex-shrink-0" />
+                      <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
                       <p>Parent</p>
                     </div>
                     <div className="sm:basis-1/2">

web/constants/spreadsheet.ts

@@ -1,4 +1,8 @@
 import { TIssueOrderByOptions } from "types";
+import { LayersIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
+import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip } from "lucide-react";
+import { FC } from "react";
+import { ISvgIcons } from "@plane/ui/src/icons/type";
 
 export const SPREADSHEET_PROPERTY_DETAILS: {
   [key: string]: {
@@ -7,6 +11,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: string;
     descendingOrderKey: TIssueOrderByOptions;
     descendingOrderTitle: string;
+    icon: FC<ISvgIcons>;
   };
 } = {
   assignee: {
@@ -15,6 +20,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "A",
     descendingOrderKey: "-assignees__first_name",
     descendingOrderTitle: "Z",
+    icon: UserGroupIcon,
   },
   created_on: {
     title: "Created on",
@@ -22,6 +28,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "created_at",
     descendingOrderTitle: "Old",
+    icon: CalendarDays,
   },
   due_date: {
     title: "Due date",
@@ -29,6 +36,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "target_date",
     descendingOrderTitle: "Old",
+    icon: CalendarDays,
   },
   estimate: {
     title: "Estimate",
@@ -36,6 +44,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "Low",
     descendingOrderKey: "-estimate_point",
     descendingOrderTitle: "High",
+    icon: Triangle,
   },
   labels: {
     title: "Labels",
@@ -43,6 +52,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "A",
     descendingOrderKey: "-labels__name",
     descendingOrderTitle: "Z",
+    icon: Tag,
   },
   priority: {
     title: "Priority",
@@ -50,6 +60,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "None",
     descendingOrderKey: "-priority",
     descendingOrderTitle: "Urgent",
+    icon: Signal,
   },
   start_date: {
     title: "Start date",
@@ -57,6 +68,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "start_date",
     descendingOrderTitle: "Old",
+    icon: CalendarDays,
   },
   state: {
     title: "State",
@@ -64,6 +76,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "A",
     descendingOrderKey: "-state__name",
     descendingOrderTitle: "Z",
+    icon: DoubleCircleIcon,
   },
   updated_on: {
     title: "Updated on",
@@ -71,6 +84,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "updated_at",
     descendingOrderTitle: "Old",
+    icon: CalendarDays,
   },
   link: {
     title: "Link",
@@ -78,6 +92,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "Most",
     descendingOrderKey: "link_count",
     descendingOrderTitle: "Least",
+    icon: Link2,
   },
   attachment_count: {
     title: "Attachment",
@@ -85,6 +100,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "Most",
     descendingOrderKey: "attachment_count",
     descendingOrderTitle: "Least",
+    icon: Paperclip,
   },
   sub_issue_count: {
     title: "Sub-issue",
@@ -92,5 +108,6 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "Most",
     descendingOrderKey: "sub_issues_count",
     descendingOrderTitle: "Least",
+    icon: LayersIcon,
   },
 };