feat: add board background grid

src/app/boards/[...boardId]/page.tsx

@@ -163,8 +163,45 @@ export default function BoardPage() {
   };
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="relative flex h-full flex-col">
-      <div className="flex w-full justify-between p-8">
+      <div>
+        <svg
+          style={{
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            top: "0px",
+            left: "0px",
+            color: "white",
+          }}
+        >
+          <pattern
+            id="pattern"
+            x="0.034759358288862785"
+            y="3.335370511841166"
+            width="14.423223834988539"
+            height="14.423223834988539"
+            patternUnits="userSpaceOnUse"
+            patternTransform="translate(-0.45072574484339184,-0.45072574484339184)"
+          >
+            <circle
+              cx="0.45072574484339184"
+              cy="0.45072574484339184"
+              r="0.45072574484339184"
+              fill="#3e3e3e"
+            ></circle>
+          </pattern>
+          <rect
+            x="0"
+            y="0"
+            width="100%"
+            height="100%"
+            fill="url(#pattern)"
+          ></rect>
+        </svg>
+      </div>
+
+      <div className="z-10 flex w-full justify-between p-8">
         <form
           onSubmit={formik.handleSubmit}
           className="focus-visible:outline-none"
@@ -195,7 +232,7 @@ export default function BoardPage() {
         </div>
       </div>
 
-      <div className="scrollbar-w-none flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain pb-5 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-300 scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px]">
+      <div className="scrollbar-w-none z-10 flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain pb-5 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-300 scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px]">
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="all-lists" direction="horizontal" type="LIST">
             {(provided) => (

src/app/boards/components/BoardsList.tsx

@@ -19,7 +19,43 @@ export function BoardsList() {
     <div className="xxl:grid-cols-5 grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       {data?.map((board) => (
         <Link key={board.publicId} href={`boards/${board.publicId}`}>
-          <div className="align-center mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-dark-600 bg-dark-100 hover:bg-dark-200">
+          <div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-dark-600 bg-dark-100 hover:bg-dark-200">
+            <div>
+              <svg
+                style={{
+                  position: "absolute",
+                  width: "100%",
+                  height: "100%",
+                  top: "0px",
+                  left: "0px",
+                  color: "white",
+                }}
+              >
+                <pattern
+                  id="pattern"
+                  x="0.034759358288862785"
+                  y="3.335370511841166"
+                  width="14.423223834988539"
+                  height="14.423223834988539"
+                  patternUnits="userSpaceOnUse"
+                  patternTransform="translate(-0.45072574484339184,-0.45072574484339184)"
+                >
+                  <circle
+                    cx="0.45072574484339184"
+                    cy="0.45072574484339184"
+                    r="0.45072574484339184"
+                    fill="#3e3e3e"
+                  ></circle>
+                </pattern>
+                <rect
+                  x="0"
+                  y="0"
+                  width="100%"
+                  height="100%"
+                  fill="url(#pattern)"
+                ></rect>
+              </svg>
+            </div>
             <p className="text-md px-4 font-medium text-dark-1000">
               {board.name}
             </p>

src/app/components/CheckboxDropdown.tsx

@@ -36,7 +36,7 @@ export default function CheckboxDropdown({
           leaveTo="transform opacity-0 scale-95"
         >
           <Menu.Items className="absolute left-0 top-[26px] z-10 mt-2 w-56 origin-top-left rounded-md border-[1px] border-dark-500 bg-dark-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            <div className="p-2">
+            <div className="p-1">
               {items?.map((item) => (
                 <Menu.Item key={item.key}>
                   <div