optimize some layout styles

Cat-Family · Dec 19, 2023 · fafe6b0 · fafe6b0
1 parent 9a47bab
commit fafe6b0
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css
@@ -15,7 +15,7 @@
   position: sticky;
   top: -1px;
   z-index: 500;
-  background-color: var(--mantine-color-body);
+  background-color: rgb(245,245,245);
   transition: box-shadow 150ms ease;
 
   &::after {

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -112,6 +112,7 @@ function Table<T extends { id: string }>({
             renderColumns={renderColumns}
             setRenderColumns={setRenderColumns}
           />
+          {!noSelector &&
           <Flex justify="space-between" align="center" w="100%" mt="xs">
             <Text size="xs">Total {total} users</Text>
             <Menu shadow="lg" width={180}>
@@ -137,7 +138,7 @@ function Table<T extends { id: string }>({
                 </Menu.Item>
               </MenuDropdown>
             </Menu>
-          </Flex>
+          </Flex>}
         </>
       )}
       <ScrollArea

diff --git a/src/components/Table/TableSearch.tsx b/src/components/Table/TableSearch.tsx
@@ -44,6 +44,9 @@ function TableSearch<T>({
   const [searchItem, setSearchItem] = useState<string | null>(
     columns.filter((item) => item.searchable)[0].name
   );
+  const [searchItemUid, setSearchItemUid] = useState<keyof T | 'actions'>(
+      columns.filter((item) => item.searchable)[0].uid
+  );
   const [opened, { open, close }] = useDisclosure(false);
 
   return (
@@ -59,23 +62,24 @@ function TableSearch<T>({
           />
           <TextInput className={classes.search} placeholder={`Search by ${searchItem}...`} />
         </Group>
-        <MultiSelect
-          w={150}
-          classNames={multiSelectClasses}
-          checkIconPosition="right"
-          data={columns.map((item) => item.name)}
-          placeholder="Columns"
-          defaultValue={renderColumns}
-          onChange={setRenderColumns}
-        />
         <Group>
           <Button
             visibleFrom="sm"
             variant="outline"
+            onClick={() => sigleSearch()}
             rightSection={<IconSearch style={{ width: rem(18), height: rem(18) }} stroke={1.8} />}
           >
             Search
           </Button>
+          <MultiSelect
+            w={150}
+            classNames={multiSelectClasses}
+            checkIconPosition="right"
+            data={columns.map((item) => item.name)}
+            placeholder="Columns"
+            defaultValue={renderColumns}
+            onChange={setRenderColumns}
+          />
           <UnstyledButton
             onClick={() => {
               const formData = new FormData();