feat: Add profile image container with streak indicator in Header component

Author: medyo

src/assets/App.css

@@ -1156,6 +1156,41 @@ Producthunt item
   font-size: 24px;
 }
 
+/* User */
+.profileImageContainer {
+  position: relative;
+
+  img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 1px solid var(--tooltip-accent-color);
+  }
+
+  .streak {
+    position: absolute;
+    display: inline-block;
+    bottom: -12px;
+    left: 0;
+    right: 0;
+    color: white;
+
+    .content {
+      background-color: var(--tooltip-accent-color);
+      font-size: 10px;
+      border-radius: 12px;
+      font-weight: bold;
+      padding: 2px 8px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .icon {
+      font-size: 12px;
+    }
+  }
+}
+
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
   .floatingFilter {

src/components/Layout/Header.tsx

@@ -3,7 +3,7 @@ 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 { MdDoDisturbOff, MdFlashOn } from 'react-icons/md'
 import { RxArrowLeft } from 'react-icons/rx'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
@@ -97,6 +97,7 @@ export const Header = () => {
             <BsFillBookmarksFill />
           </CircleButton>
           <CircleButton
+            className="profileImageContainer"
             onClick={() => {
               if (isConnected()) {
                 navigate('/settings/profile')
@@ -105,7 +106,14 @@ export const Header = () => {
               }
             }}>
             {isConnected() ? (
-              <img className="profileImage" src={user?.imageURL} />
+              <>
+                <img className="profileImage s" src={user?.imageURL} />
+                <div className="streak">
+                  <span className="content">
+                    <MdFlashOn className="icon" /> {user?.streak || 1}
+                  </span>
+                </div>
+              </>
             ) : (
               <FaUser style={{ fontSize: '1.2em' }} />
             )}