improve table styling

NINAnor · Jul 2, 2024 · 5003371 · 5003371
1 parent a4b2526
commit 5003371
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -16,6 +16,7 @@
     "@tanstack/react-table": "^8.17.3",
     "@tanstack/react-virtual": "^3.7.0",
     "axios": "^1.7.2",
+    "classnames": "^2.5.1",
     "django-vite-plugin": "^4.0.1",
     "react": "^18.3.1",
     "react-datepicker": "^7.2.0",

diff --git a/src/frontend/src/samples/components/Cell/MultiSelectCell.jsx b/src/frontend/src/samples/components/Cell/MultiSelectCell.jsx
@@ -4,6 +4,14 @@ import AsyncSelect from "react-select/async";
 
 const datePortal = document.getElementById('date-portal');
 
+const CLASSNAMES = {
+  container: () => 'flex w-full',
+  control: (state) => 'px-4 w-full cursor-auto',
+  menu: () => 'bg-white border border-[#444] cursor-auto',
+  option: () => 'px-4 my-2 cursor-auto focus:bg-primary',
+  multiValue: () => 'bg-primary px-1 rounded cursor-auto',
+}
+
 export default function MultiSelectCell({
   getValue,
   row: { original },
@@ -42,10 +50,11 @@ export default function MultiSelectCell({
       getOptionValue={(o) => o[idField]}
       onBlur={handleBlur}
       classNamePrefix="react-select"
-      className=""
+      classNames={CLASSNAMES}
       value={value}
       onChange={setValue}
       menuPortalTarget={datePortal}
+      unstyled
     />
   );
 }
diff --git a/src/frontend/src/samples/components/Cell/SelectCell.jsx b/src/frontend/src/samples/components/Cell/SelectCell.jsx
@@ -4,6 +4,15 @@ import AsyncSelect from "react-select/async";
 
 const datePortal = document.getElementById('date-portal');
 
+
+const CLASSNAMES = {
+  container: () => 'flex w-full',
+  control: (state) => 'px-4 w-full cursor-auto',
+  menu: () => 'bg-white border border-[#444] cursor-auto',
+  option: () => 'px-4 my-2 cursor-auto hover:bg-primary',
+  multiValue: () => 'bg-primary px-1 rounded cursor-auto',
+}
+
 export default function SelectCell({
   getValue,
   row: { original },
@@ -38,10 +47,11 @@ export default function SelectCell({
       getOptionValue={(o) => o.id}
       onBlur={handleBlur}
       classNamePrefix="react-select"
-      className=""
+      classNames={CLASSNAMES}
       value={value}
       onChange={setValue}
       menuPortalTarget={datePortal}
+      unstyled
     />
   );
 }
diff --git a/src/frontend/src/samples/components/Table.jsx b/src/frontend/src/samples/components/Table.jsx
@@ -228,7 +228,7 @@ export default function Table() {
                       return (
                         <td
                           key={cell.id}
-                          className="border-b border-r first:border-l border-[#333] flex"
+                          className="border-b border-r first:border-l border-[#444] flex"
                           style={{
                             width: cell.column.getSize(),
                           }}