fix spacing and coloring cosmetic

Author: davixcky

services/frontend/react_app/src/App.tsx

@@ -3,29 +3,27 @@ import {HomePage} from "./pages/home.tsx";
 import {SessionProvider} from "./context/sessionContext/context.tsx";
 import {ChakraProvider, extendTheme} from "@chakra-ui/react";
 
+
+import { accordionAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } =
+    createMultiStyleConfigHelpers(accordionAnatomy.keys)
+
+const baseStyle = definePartsStyle({
+    container: {
+        borderColor: 'gray.400',
+    },
+})
+
+
+const accordionTheme = defineMultiStyleConfig({ baseStyle })
+
 function App() {
 
-    const components = {
-        Drawer: {
-            variants: {
-                aside: {
-                    overlay: {
-                        pointerEvents: 'none',
-                        background: 'transparent',
-                    },
-                    dialogContainer: {
-                        pointerEvents: 'none',
-                        background: 'transparent',
-                    },
-                    dialog: {
-                        pointerEvents: 'auto',
-                    },
-                },
-            },
-        },
-    };
-
-    const theme = extendTheme({components});
+    const theme = extendTheme({
+        components: { Accordion: accordionTheme },
+    })
 
     return (
         <ChakraProvider theme={theme}>

services/frontend/react_app/src/pages/home.tsx

@@ -208,7 +208,7 @@ export const HomePage = () => {
                 <Stack flexGrow={1} justifyContent='space-between' w='50%' h='100%' maxH={'900px'}>
                     <div className={`${styles.drawer} ${logsModal.isOpen ? styles.open : ''}`}>
                         <div className={styles.drawerHeader}>
-                            <Heading size="md">Notifications Logs</Heading>
+                            <Heading size="md" mt={3}>Logs</Heading>
                         </div>
                         <div className={styles.drawerBody}>
                             <Logs logs={logs}/>