Merge branch 'refactor/avatar-component' into 'main'

Refactor header: extract Avatar into standalone UserAvatarMenu component, and add _hover styling

See merge request vkuchenik/website-framework!15

client/src/components/Header.jsx

@@ -1,4 +1,5 @@
-import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal, Flex } from "@chakra-ui/react"
+import { chakra, useRecipe, Box, Button, Stack, Text, Flex } from "@chakra-ui/react"
+import UserAvatarMenu from "./UserAvatarMenu";
 
 export default function Header() {
   const recipe = useRecipe({ key: "header" });
@@ -12,26 +13,7 @@ export default function Header() {
           <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
           <Text color="fg.muted" textStyle="sm">{user.email}</Text>
         </Stack>
-        
+        <UserAvatarMenu name={user.name} avatar={user.avatar} />
-        {/* Add a drop down menu to the avatar */}
-        <Menu.Root>
-          <Menu.Trigger rounded="full" focusRing="outside">
-          <Avatar.Root>
-            <Avatar.Fallback name={user.name} />
-            <Avatar.Image src={user.avatar} />
-          </Avatar.Root>
-          </Menu.Trigger>
-          <Portal>
-            <Menu.Positioner zIndex="popover">
-              <Menu.Content>
-                <Menu.Item value="account">Account</Menu.Item>
-                <Menu.Item value="settings">Settings</Menu.Item>
-                <Menu.Item value="logout">Logout</Menu.Item>
-              </Menu.Content>
-            </Menu.Positioner>
-          </Portal>
-        </Menu.Root>
-        {/* End drop down menu */}
       </Flex>
     </chakra.div>
   );

client/src/components/UserAvatarMenu.jsx

@@ -0,0 +1,30 @@
+import { Avatar, Menu, Portal, Box } from "@chakra-ui/react"
+
+ 
+export default function UserAvatarMenu({ name, avatar }) {
+    return (
+        <Menu.Root>
+            <Menu.Trigger focusRing="none">
+                <Box
+                    rounded="full" 
+                    tabIndex={0}
+                    _hover={{ boxShadow: "0 0 0 2px rgb(37, 77, 197)" }}
+                >
+                    <Avatar.Root shape="full">
+                        <Avatar.Fallback name={name} />
+                        <Avatar.Image src={avatar} />
+                    </Avatar.Root>
+                </Box>
+            </Menu.Trigger>
+            <Portal>
+            <Menu.Positioner zIndex="popover">
+              <Menu.Content>
+                <Menu.Item value="account">Account</Menu.Item>
+                <Menu.Item value="settings">Settings</Menu.Item>
+                <Menu.Item value="logout">Logout</Menu.Item>
+              </Menu.Content>
+            </Menu.Positioner>
+          </Portal>
+        </Menu.Root>
+    );
+}

client/src/theme.js

@@ -57,9 +57,9 @@ const config = defineConfig({
         base200: { value: {base: "#eef2f6", _dark: "#242424"}},
         base300: { value: {base: "#dfe5ed", _dark: "#60645a"}},
         // primary: { value: {base: "#9cd855", _dark: "#629631"}},
-        primary: { value: {base: "#2B98F8", _dark: "#629631"}},
+        primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
         // primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
-        primaryLt: { value: {base: "#2BCFF8", _dark: "#92948e"}},
+        primaryLt: { value: {base: "#2BCFF8", _dark: "#2BCFF8"}},
         secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
         border: {value: {base: "#000000", _dark: "#CBCBCB"}},
         text: {value: {base: "#19332D", _dark: "#CBCBCB"}},