XS-1121 Add Dashboard table view and Column customization icon

index.d.ts

@@ -84,6 +84,7 @@ export {
     CrmIcon,
     CrownIcon,
     Currency,
+    CustomizeColumnsIcon,
     DashboardIcon,
     dateFromObjectId,
     DatePicker,
@@ -243,6 +244,7 @@ export {
     Tabs,
     Tag,
     TaxIcon,
+    TableIcon,
     Textarea,
     theme,
     ThumbsDownIcon,

src/icons/index.js

@@ -69,6 +69,7 @@ export { CompassIcon } from "./src/CompassIcon";
 export { ComputerImage } from "./src/images/ComputerImage";
 export { CopyIcon } from "./src/CopyIcon";
 export { CouponIcon } from "./src/CouponIcon";
+export { CustomizeColumnsIcon } from "./src/CustomizeColumnsIcon";
 export { CrmIcon } from "./src/CrmIcon";
 export { CrownIcon } from "./src/CrownIcon";
 export { DashboardIcon } from "./src/DashboardIcon";
@@ -179,6 +180,7 @@ export { StackIcon } from "./src/StackIcon";
 export { StarFilledIcon } from "./src/StarFilledIcon";
 export { StarIcon } from "./src/StarIcon";
 export { StoreCreditIcon } from "./src/StoreCreditIcon";
+export { TableIcon } from "./src/TableIcon";
 export { TaxIcon } from "./src/TaxIcon";
 export { ThumbsDownIcon } from "./src/ThumbsDownIcon";
 export { ThumbsUpIcon } from "./src/ThumbsUpIcon";

src/icons/src/CloseIcon.jsx

@@ -2,13 +2,15 @@
 import { createIcon } from "./helpers/icon";
 
 export const CloseIcon = createIcon((props) => {
+    const clipPathId = `close-icon-clip-${Math.random().toString(36).substr(2, 9)}`;
+
     return (
         <svg width={14} height={14} fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" {...props}>
-            <g clipPath="url(#prefix__clip0_5_1805)" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
+            <g clipPath={`url(#${clipPathId})`} stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
                 <path d="M11.148 3.147l-8.295 8.295M11.147 11.442L2.853 3.147" />
             </g>
             <defs>
-                <clipPath id="prefix__clip0_5_1805">
+                <clipPath id={clipPathId}>
                     <path fill="#fff" d="M0 0h14v14H0z" />
                 </clipPath>
             </defs>

src/icons/src/CustomizeColumnsIcon.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { createIcon } from "./helpers/icon";
+
+export const CustomizeColumnsIcon = createIcon((props) => {
+    return (
+        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M13 11.5V15.5" stroke="#222324" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M11 13.5H15" stroke="#222324" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
+            <rect
+                x="2.5"
+                y="3.5"
+                width="5"
+                height="12"
+                rx="1"
+                stroke="#222324"
+                strokeWidth="1.3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M15.5 9.5V4.5C15.5 3.94772 15.0523 3.5 14.5 3.5H13H11.5C10.9477 3.5 10.5 3.94772 10.5 4.5V9.5"
+                stroke="#222324"
+                strokeWidth="1.3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+});
+
+CustomizeColumnsIcon.tags = ["column customization", "table"];

src/icons/src/TableIcon.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { createIcon } from "./helpers/icon";
+
+export const TableIcon = createIcon((props) => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g clipPath="url(#clip0_14653_14821)">
+                <path d="M3 9H21" stroke="#222324" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path
+                    d="M19 4H5C3.895 4 3 4.895 3 6V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V6C21 4.895 20.105 4 19 4Z"
+                    stroke="#222324"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path d="M9 9V21" stroke="#222324" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M15 9V21" stroke="#222324" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M3 15H21" stroke="#222324" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_14653_14821">
+                    <rect width="24" height="24" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+});
+
+TableIcon.tags = ["table", "dashboard"];

tailwind.config.js

@@ -17,6 +17,7 @@ const colors = {
     },
 
     blue: {
+        medium: "#B0C7F1",
         lighter: "#D1E1FF",
         light: "#2979D0",
         DEFAULT: "#1352C6",