feat!:same desktop logo on mobile

Author: FawazBinSaleem

src/components/Header.tsx

@@ -1,6 +1,5 @@
 import "@/styles/Header.scss";
 import devclubLogo from "@/resources/images/devclub-logo.svg";
-import devclubLogoHorizontal from "@/resources/images/devclub-logo-horizontal-2.svg";
 
 import { useMemo } from "react";
 
@@ -100,7 +99,7 @@ function Header() {
           <div className="badge">
             <img src={devclubLogo} alt=".devClub logo" className="vertical" />
             <img
-              src={devclubLogoHorizontal}
+              src={devclubLogo}
               alt=".devClub logo (horizontal)"
               className="horizontal"
             />

src/resources/images/devclub-logo-horizontal-2.svg

@@ -51,48 +51,43 @@ $desktop-navbar-height: 60px;
     rgba(0, 0, 0, 0.8) 0px 6px 5px;
   contain: content;
 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   @include tablet {
     width: 70px;
     height: 70px;
   }
 
   @include mobile {
-    background: none;
-    border: none;
-    box-shadow: none;
-    border-radius: 0;
-    left: 0px; //alligns with the left fully
-    top: 0px;
+    left: 20px;
+    top: 15px;
+    width: 70px;
+    height: 70px;
+    border: 8px double $theme-primary;
+    box-shadow: rgba($theme-primary, 0.8) 0 0 0 6px,
+      rgba(0, 0, 0, 0.8) 0px 6px 5px;
+  }
+
+  img.vertical {
+    height: 100%;
     width: auto;
-    height: 80px;
-    display: flex;
-    align-items: center;
+    transform: translateY(-5%);
   }
 
-  /* The image inside the badge/logo container */
+  img.horizontal {
+    display: none;
+    height: 100%;
+    width: auto;
+  }
 
-  @include not-mobile {
+  @include mobile {
     img.vertical {
-      height: 100%;
-      width: auto;
-      transform: translateY(-5%);
-    }
-
-    img.horizontal {
       display: none;
     }
-  }
-
-  @include mobile {
     img.horizontal {
       display: block;
-      height: 100%;
-      width: auto;
-      transform: none;
-    }
-
-    img.vertical {
-      display: none;
     }
   }
 }