fix: combo list styles

La-Fresca · Dec 2, 2024 · 39d1d42 · 39d1d42
1 parent b39f17a
commit 39d1d42
Showing 1 changed file with 33 additions and 17 deletions.
diff --git a/src/components/BranchManager/Tables/NextTable/ComboList.tsx b/src/components/BranchManager/Tables/NextTable/ComboList.tsx
@@ -204,10 +204,11 @@ export default function ComboList() {
   const topContent = useMemo(() => {
     return (
       <div className="flex flex-col gap-4">
+        <h1 className="text-2xl text-white font-bold">Food Combo List</h1>
         <div className="flex justify-between gap-3 items-end">
           <Input
             isClearable
-            className="w-full sm:max-w-[44%]"
+            className="w-full sm:max-w-[44%] dark:bg-[#ffffff14] rounded-lg border bg-[#aaaaaa14] border-[#aaaaaa66] dark:border-[#54545466]"
             placeholder="Search by name..."
             startContent={<SearchIcon />}
             value={filterValue}
@@ -220,6 +221,7 @@ export default function ComboList() {
                 <Button
                   endContent={<ChevronDownIcon className="text-small" />}
                   variant="flat"
+                  className="rounded-xl dark:bg-[#ffffff1e] border bg-[#aaaaaa20] border-[#aaaaaa66] dark:text-[#bcbcbc] text-black hover:bg-[#aaaaaa49] hover:dark:bg-[#404040]"
                 >
                   Columns
                 </Button>
@@ -231,35 +233,47 @@ export default function ComboList() {
                 selectedKeys={visibleColumns}
                 selectionMode="multiple"
                 onSelectionChange={setVisibleColumns}
-                className="bg-black text-white"
+                className="dark:bg-[#373737] bg-whiten rounded-lg dark:text-white text-[#3a3a3a] border border-[#b3b3b360]"
               >
                 {columns.map((column) => (
-                  <DropdownItem key={column.uid} className="capitalize">
+                  <DropdownItem
+                    key={column.uid}
+                    className="capitalize hover:bg-[#aaaaaa17] rounded-lg"
+                  >
                     {capitalize(column.name)}
                   </DropdownItem>
                 ))}
               </DropdownMenu>
             </Dropdown>
             <Button
-              className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg"
-              color="primary"
+              className="text-white bg-gradient-to-r from-orange-600 to-orange-400 hover:from-orange-400 hover:to-orange-600 rounded-xl"
               endContent={<PlusIcon />}
               onClick={() => navigate('add')}
             >
               Add New
             </Button>
           </div>
         </div>
-        <div className="flex justify-end items-center">
+        <div className="flex justify-between items-center">
+          <span className="text-default-400 text-small">
+            Total {filteredItems.length} Combos
+          </span>
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-none text-default-400 text-small"
+              className="bg-transparent outline-none text-default-400 text-small hover:bg-[#373737]"
               onChange={onRowsPerPageChange}
+              value={rowsPerPage}
             >
-              <option value="5">5</option>
-              <option value="10">10</option>
-              <option value="15">15</option>
+              <option value="5" className="bg-[#373737] text-white">
+                5
+              </option>
+              <option value="10" className="bg-[#373737] text-white">
+                10
+              </option>
+              <option value="15" className="bg-[#373737] text-white">
+                15
+              </option>
             </select>
           </label>
         </div>
@@ -270,8 +284,8 @@ export default function ComboList() {
     visibleColumns,
     onSearchChange,
     onRowsPerPageChange,
-    combos.length,
-    hasSearchFilter,
+    filteredItems.length,
+    rowsPerPage,
   ]);
 
   const bottomContent = useMemo(() => {
@@ -288,13 +302,16 @@ export default function ComboList() {
           page={page}
           total={pages}
           onChange={setPage}
+          radius="full"
+          className="text-[#c6c6c6]"
         />
         <div className="hidden sm:flex w-[30%] justify-end gap-2">
           <Button
             isDisabled={pages === 1}
             size="sm"
             variant="flat"
             onPress={onPreviousPage}
+            className="rounded-xl dark:bg-[#ffffff1e] border bg-[#aaaaaa20] border-[#aaaaaa66] dark:text-[#bcbcbc] text-black hover:bg-[#aaaaaa49] hover:dark:bg-[#404040] py-[18px]"
           >
             Previous
           </Button>
@@ -303,6 +320,7 @@ export default function ComboList() {
             size="sm"
             variant="flat"
             onPress={onNextPage}
+            className="rounded-xl dark:bg-[#ffffff1e] border bg-[#aaaaaa20] border-[#aaaaaa66] dark:text-[#bcbcbc] text-black hover:bg-[#aaaaaa49] hover:dark:bg-[#404040] py-[18px]"
           >
             Next
           </Button>
@@ -314,15 +332,13 @@ export default function ComboList() {
   const classNames = useMemo(
     () => ({
       wrapper: ['max-h-[382px]', 'max-w-3xl'],
-      th: ['bg-transparent', 'text-default-500', 'border-b', 'border-divider'],
+      th: [
+        'dark:bg-[#373737] translate-y-[-16px] bg-[#aaaaaa20] dark:text-white text-[#3a3a3a] h-[45px]',
+      ],
       td: [
-        // changing the rows border radius
-        // first
         'group-data-[first=true]:first:before:rounded-none',
         'group-data-[first=true]:last:before:rounded-none',
-        // middle
         'group-data-[middle=true]:before:rounded-none',
-        // last
         'group-data-[last=true]:first:before:rounded-none',
         'group-data-[last=true]:last:before:rounded-none',
       ],