[WEB-1274] chore: issue spreadsheet enhancement (#4423)

* chore: border and background remove from cycle and module select

* choe: indentation improvement

web/components/dropdowns/module/index.tsx

@@ -73,7 +73,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
     return (
       <>
         {showCount ? (
-          <div className="relative flex max-w-full items-center gap-1">
+          <div className="relative flex items-center max-w-full gap-1">
             {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
             {(value.length > 0 || !!placeholder) && (
               <div className="max-w-40 flex-grow truncate">

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

@@ -57,7 +57,7 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
         placeholder="Select cycle"
         buttonVariant="transparent-with-text"
         buttonContainerClassName="w-full relative flex items-center p-2"
-        buttonClassName="relative border-[0.5px] border-custom-border-400 h-4.5"
+        buttonClassName="relative leading-4 h-4.5 bg-transparent"
         onClose={onClose}
       />
     </div>

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

@@ -68,7 +68,7 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
         placeholder="Select modules"
         buttonVariant="transparent-with-text"
         buttonContainerClassName="w-full relative flex items-center p-2"
-        buttonClassName="relative border-[0.5px] border-custom-border-400 h-4.5"
+        buttonClassName="relative leading-4 h-4.5 bg-transparent"
         onClose={onClose}
         multiple
         showCount

web/components/issues/issue-layouts/spreadsheet/index.ts

@@ -2,3 +2,4 @@ export * from "./columns";
 export * from "./roots";
 export * from "./spreadsheet-view";
 export * from "./quick-add-issue-form";
+export * from "./spreadsheet-header-column";

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

@@ -50,7 +50,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     containerRef,
     issueIds,
     spreadsheetColumnsList,
-    spacingLeft = 14,
+    spacingLeft = 6,
   } = props;
 
   const [isExpanded, setExpanded] = useState<boolean>(false);
@@ -96,7 +96,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             quickActions={quickActions}
             canEditProperties={canEditProperties}
             nestingLevel={nestingLevel + 1}
-            spacingLeft={spacingLeft + (displayProperties.key ? 16 : 28)}
+            spacingLeft={spacingLeft + (displayProperties.key ? 12 : 28)}
             isEstimateEnabled={isEstimateEnabled}
             updateIssue={updateIssue}
             portalElement={portalElement}
@@ -140,7 +140,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
     isExpanded,
     setExpanded,
     spreadsheetColumnsList,
-    spacingLeft = 14,
+    spacingLeft = 6,
   } = props;
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
@@ -218,19 +218,23 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
           disabled={!!issueDetail?.tempId}
         >
           <div
-            className="flex min-w-min items-center gap-1 px-4 py-2.5 pr-0"
+            className="flex min-w-min items-center gap-0.5 px-4 py-2.5 pl-1.5 pr-0"
             style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
           >
-            <div className="flex h-5 w-5 items-center justify-center">
+            <div className="flex items-center">
+              {/* bulk ops */}
+              <span className="size-3.5" />
+              <div className="flex size-4 items-center justify-center">
                 {issueDetail.sub_issues_count > 0 && (
                   <button
-                  className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
+                    className="flex items-center justify-center size-4 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
                     onClick={handleToggleExpand}
                   >
-                  <ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
+                    <ChevronRight className={`size-4 ${isExpanded ? "rotate-90" : ""}`} />
                   </button>
                 )}
               </div>
+            </div>
 
             <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
               <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">

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

@@ -1,10 +1,9 @@
 // ui
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+// types
 import { LayersIcon } from "@plane/ui";
-// constants
 // components
-import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+import { SpreadsheetHeaderColumn } from "@/components/issues/issue-layouts";
-import { SpreadsheetHeaderColumn } from "./spreadsheet-header-column";
 
 interface Props {
   displayProperties: IIssueDisplayProperties;
@@ -25,13 +24,8 @@ export const SpreadsheetHeader = (props: Props) => {
           className="sticky left-0 z-[15] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-custom-border-100"
           tabIndex={-1}
         >
-          <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
+          <span className="flex h-full w-full flex-grow items-center pl-5 px-4 py-2.5">
-            <span className="flex h-full w-24 flex-shrink-0 items-center px-4 py-2.5">
+            <LayersIcon className="mr-1 h-4 w-4 text-custom-text-400" />
-              <span className="mr-1.5 text-custom-text-400">#</span>ID
-            </span>
-          </WithDisplayPropertiesHOC>
-          <span className="flex h-full w-full flex-grow items-center justify-center px-4 py-2.5">
-            <LayersIcon className="mr-1.5 h-4 w-4 text-custom-text-400" />
             Issue
           </span>
         </th>