Merge pull request #59 from brown-ccv/refactor-checkbox-styling

refactor: checkbox and table styling
brown-ccv · Jun 28, 2024 · a8a59b1 · a8a59b1
2 parents b2e272d + 10fbfa4
commit a8a59b1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 27 deletions.
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
@@ -35,11 +35,11 @@ const DataTable: React.FC<DataTableProps> = ({ allFiles, updateFileList }) => {
     return (
       <tr key={i}>
         <td>
-          <div className="flex gap-4">
+          <div className="flex items-center gap-4">
             <Checkbox.Root
               name={file}
               id={file}
-              className="mx-1 w-6 h-6 border"
+              className="p-0 w-4 h-4 border"
               checked={selected}
               onClick={() => handleSelect(selected, i)}
             >
@@ -64,30 +64,32 @@ const DataTable: React.FC<DataTableProps> = ({ allFiles, updateFileList }) => {
   })
 
   return (
-    <table className="table-fixed border-spacing-2">
-      <thead>
-        <tr className="bg-neutral-100 text-left text-neutral-900">
-          <th className="flex w-[200px]">
-            <Checkbox.Root
-              name="selectAll"
-              id="selectAll"
-              className="mx-1 w-6 h-6 text-neutral-900"
-              onCheckedChange={handleSelectAll}
-            >
-              <Checkbox.Indicator>
-                <CheckIcon />
-              </Checkbox.Indicator>
-            </Checkbox.Root>
-            File Name
-          </th>
-          <th className="w-[200px]">Category</th>
-          <th>Description</th>
-          <th>File</th>
-        </tr>
-      </thead>
+    <div className="w-full overflow-x-scroll">
+      <table className="table-fixed border-spacing-2">
+        <thead>
+          <tr className="bg-neutral-100 text-left text-neutral-900">
+            <th className="flex items-center w-[200px]">
+              <Checkbox.Root
+                name="selectAll"
+                id="selectAll"
+                className="p-0 w-4 h-4 text-neutral-900 border"
+                onCheckedChange={handleSelectAll}
+              >
+                <Checkbox.Indicator>
+                  <CheckIcon />
+                </Checkbox.Indicator>
+              </Checkbox.Root>
+              File Name
+            </th>
+            <th className="w-[200px]">Category</th>
+            <th>Description</th>
+            <th>File</th>
+          </tr>
+        </thead>
 
-      <tbody>{selectedFiles}</tbody>
-    </table>
+        <tbody>{selectedFiles}</tbody>
+      </table>
+    </div>
   )
 }
 export default DataTable
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -133,11 +133,14 @@
     button[role="checkbox"] {
         @apply bg-neutral-50;
         @apply justify-center;
-        @apply shadow-md;
-        @apply rounded-md;
+        @apply rounded-none;
         @apply text-neutral-900;
     }
 
+    button[role="checkbox"]:hover {
+        @apply shadow-none;
+    }
+
     th {
         @apply font-bold;
         @apply px-4;