style(header): header styled

front/.env.development

@@ -1 +1 @@
-NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_URL=http://localhost:3016

front/public/main-logo.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="56.686993mm"
+   height="56.687mm"
+   viewBox="0 0 56.686993 56.687"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-60.157861,-63.27635)">
+    <ellipse
+       style="fill:none;stroke:#274c77;stroke-width:15.4462;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1"
+       id="path1-0"
+       cx="90.366409"
+       cy="91.463409"
+       rx="18.578897"
+       ry="18.338015" />
+    <circle
+       style="fill:none;stroke:#000000;stroke-width:6.687;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none"
+       id="path1"
+       cx="88.501358"
+       cy="91.61985"
+       r="25" />
+  </g>
+</svg>

front/src/modules/auth/components/sign-out-button/sign-out-button.component.tsx

@@ -3,7 +3,10 @@ import styles from "./sign-out-button.module.scss";
 
 export const SignOutButton = () => {
   return (
-    <button className={styles.button} onClick={() => void signOut()}>
+    <button
+      className={styles.button}
+      onClick={() => void signOut({ callbackUrl: "/" })}
+    >
       Sign out
     </button>
   );

front/src/modules/auth/components/user-dropdown/user-dropdown.module.scss

@@ -3,11 +3,10 @@
   overflow: visible;
 
   .avatar__container {
-    width: 6rem;
-    height: 6rem;
+    height: var(--header-item-height, 4rem);
+    width: var(--header-item-height, 4rem);
 
-    font-size: 3.4rem;
-    padding: 0.5rem;
+    font-size: 3.2rem;
   }
 
   .dropdown__container {

front/src/modules/auth/components/user-frame/user-frame.module.scss

@@ -7,7 +7,7 @@
   border-radius: 50%;
   overflow: hidden;
 
-  border: 1px solid var(--color-grey-30);
+  box-shadow: 1px 1px 3px var(--color-grey-30);
   box-sizing: border-box;
 
   & > span {

front/src/modules/auth/components/user-panel/user-panel.module.scss

@@ -8,9 +8,12 @@
   padding: 1.2rem 1.8rem;
 
   border-radius: 6px;
-  background-color: var(--color-foreground);
+  background-color: var(--color-white);
+  box-shadow: 0 2px 3px rgba(var(--color-grey-10-rgb), 0.2);
   color: var(--color-background);
 
+  z-index: 10;
+
   & .user {
     font-size: 1.6rem;
 

front/src/modules/common/components/navbar-header/navbar-header.component.tsx

@@ -10,7 +10,8 @@ export const NavbarHeader = (props: PropsWithChildren) => {
   return (
     <header className={styles.header}>
       <Link href={"/"} className={styles.logo}>
-        LoGo
+        <img src="main-logo.svg" />
+        <h1>Your brand</h1>
       </Link>
       <nav>{props.children}</nav>
     </header>

front/src/modules/common/components/navbar-header/navbar-header.module.scss

@@ -10,16 +10,37 @@
   box-sizing: border-box;
   border-radius: 8px;
 
-  padding: 0.4rem 1.8rem;
+  padding: 0.6rem 2rem;
   background-color: var(--color-white);
   box-shadow: 0 1px 3px rgba(var(--color-grey-10-rgb), 0.3);
   color: var(--color-background);
 
+  --header-item-height: 4.5rem;
+
   .logo {
     display: flex;
+    flex-direction: row;
+    gap: 0.6rem;
     align-items: center;
 
     font-size: 2.6rem;
     font-weight: bold;
+
+    height: var(--header-item-height);
+    width: auto;
+
+    & > img {
+      height: 100%;
+      width: 100%;
+      object-fit: contain;
+    }
+
+    & > h1 {
+      font-size: 1.4rem;
+    }
+  }
+
+  & > nav {
+    display: flex;
   }
 }

front/src/styles/main.scss

@@ -89,8 +89,8 @@ html {
 body {
   box-sizing: border-box;
 
-  background-color: var(--color-background);
-  color: var(--color-foreground);
+  background-color: var(--color-white);
+  color: var(--color-black);
 }
 
 a {