feat: add new avatar icon and define accent color variables for styling

Author: medyo

src/assets/icons/avatar.svg

@@ -22,6 +22,7 @@ html.dark {
   --secondary-text-color: #a2a7ad;
   --overlay-background-color: #7985958a;
   --language-dot-background-color: #424d5a;
+  --icons-accent-color: #ffffff;
 
   --dark-mode-background-color: #1c2026;
   --dark-mode-text-color: #f0c73d;
@@ -110,6 +111,7 @@ html.light {
   --overlay-background-color: #0000005c;
   --primary-hover-text-color: #495a6b;
   --language-dot-background-color: #cfddec;
+  --icons-accent-color: #3c5065;
 
   --scrollbar-background-color: #eff6ff;
   --scrollbar-accent-color: #b9cadc;

src/assets/variables.css

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react'
 import { BsFillBookmarksFill, BsFillGearFill, BsMoonFill } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
-import { FaUser } from 'react-icons/fa'
 import { IoMdSunny } from 'react-icons/io'
 import { MdDoDisturbOff } from 'react-icons/md'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { ReactComponent as AvatarPlaceholder } from 'src/assets/icons/avatar.svg'
 import { ReactComponent as StreakIcon } from 'src/assets/icons/fire_icon.svg'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
+
 import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
 import { useAuth } from 'src/features/auth'
@@ -94,15 +95,15 @@ export const Header = () => {
             }}>
             {isConnected ? (
               <>
-                <img className="profileImage s" src={user?.imageURL} />
+                <img className="profileImage" src={user?.imageURL} />
                 <div className="streak">
                   <span className="content">
                     <StreakIcon className="icon" /> {user?.streak || 1}
                   </span>
                 </div>
               </>
             ) : (
-              <FaUser style={{ fontSize: '1.2em' }} />
+              <AvatarPlaceholder className="profileImage" />
             )}
           </CircleButton>
         </div>