style(header): header styled

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 {