From f3aee68a99b83062face686f8164ef28415e2287 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Thu, 13 Apr 2023 22:57:08 +0200
Subject: [PATCH] feat: add settings button on menu

---
 .../components/Security/HeaderProfileBox.tsx  | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/front/components/Security/HeaderProfileBox.tsx b/front/components/Security/HeaderProfileBox.tsx
index b5f27952..b5fbd628 100644
--- a/front/components/Security/HeaderProfileBox.tsx
+++ b/front/components/Security/HeaderProfileBox.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import Link from "next/link";
 import { AuthContext } from "./AuthProvider";
 import Avvvatars from "avvvatars-react";
+import { GearIcon } from "@radix-ui/react-icons";
 
 export const HeaderProfileBox = () => {
   const auth: any = React.useContext(AuthContext);
@@ -31,6 +32,7 @@ export const HeaderProfileBox = () => {
           <div>
             <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
           </div>
+          <Link href={"/settings"}><GearIcon/></Link>
         </AccountArea>
       )}
     </ProfileArea>
@@ -42,6 +44,23 @@ const AccountArea = styled.div`
   display: flex;
   place-items: center;
 
+  a{
+    // center the gear icon
+    display: flex;
+    place-items: center;
+    place-content: center;
+    width: 29px;
+    height: 29px;
+    border-radius: 19px;
+    background: #F5F5F5;
+
+    // hover effect
+    &:hover{
+      background: #E5E5E5;
+
+    }
+  }
+
   div {
     margin-right: 10px;
   }