OKish UI

Author: ciur

frontend/apps/ui/src/components/Header/Header.tsx

@@ -4,10 +4,10 @@ import logoURL from "/logo_transparent_bg.svg"
 import {ColorSchemeToggle} from "@/components/ColorSchemeToggle/ColorSchemeToggle"
 import classes from "./Header.module.css"
 
+import LanguageMenu from "./LanguageMenu"
 import Search from "./Search"
 import SidebarToggle from "./SidebarToggle"
 import UserMenu from "./UserMenu"
-import LanguageMenu from "./LanguageMenu"
 
 function Header() {
   const theme = useMantineTheme()

frontend/apps/ui/src/components/Header/SidebarToggle.tsx

@@ -11,7 +11,21 @@ export default function SidebarToggle() {
     dispatch(toggleNavBar())
   }
   return (
-    <UnstyledButton onClick={() => onClick()}>
+    <UnstyledButton
+      onClick={() => onClick()}
+      style={{
+        outline: "none",
+        boxShadow: "none",
+        "&:focus": {
+          outline: "none",
+          boxShadow: "none"
+        },
+        "&:active": {
+          outline: "none",
+          boxShadow: "none"
+        }
+      }}
+    >
       <IconMenu2 />
     </UnstyledButton>
   )

frontend/apps/ui/src/features/audit/components/FiltersCollapse.tsx

@@ -1,4 +1,4 @@
-import {Box, Paper, Stack, UnstyledButton} from "@mantine/core"
+import {Box, Group, Paper, UnstyledButton} from "@mantine/core"
 import {IconChevronDown} from "@tabler/icons-react"
 import React, {useState} from "react"
 import {DropdownConfig} from "../types"
@@ -48,10 +48,26 @@ export default function FiltersCollapse({filters, className}: Args) {
     <Paper
       className={`filters-collapse ${className}`}
       withBorder
-      radius="sm"
+      radius={"xs"}
       style={{overflow: "hidden"}}
     >
-      <UnstyledButton onClick={toggleExpanded} w="100%" p="xs">
+      <UnstyledButton
+        onClick={toggleExpanded}
+        w="100%"
+        p="xs"
+        style={{
+          outline: "none",
+          boxShadow: "none",
+          "&:focus": {
+            outline: "none",
+            boxShadow: "none"
+          },
+          "&:active": {
+            outline: "none",
+            boxShadow: "none"
+          }
+        }}
+      >
         <Box
           style={{
             display: "flex",
@@ -71,7 +87,9 @@ export default function FiltersCollapse({filters, className}: Args) {
 
       {expanded && (
         <Box p="sm">
-          <Stack gap="sm">{filterComponents}</Stack>
+          <Group align={"baseline"} gap="sm">
+            {filterComponents}
+          </Group>
         </Box>
       )}
     </Paper>

frontend/apps/ui/src/features/audit/components/UserFilter.tsx

@@ -1,3 +1,15 @@
-export default function UserFilter() {
-  return <></>
+import {MultiSelect, Paper} from "@mantine/core"
+
+export default function UsersListFilter() {
+  return (
+    <Paper p="xs">
+      <MultiSelect
+        searchable
+        label="Table"
+        placeholder="Pick value"
+        clearable
+        data={["admin", "eugen", "coco"]}
+      />
+    </Paper>
+  )
 }