style: improve login responsiveness

SpatialDays · Nov 22, 2023 · 68a36ee · 68a36ee
1 parent 3a8ae7e
commit 68a36ee
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -38,11 +38,14 @@ const Header = () => {
         </div>
 
         {/* Button for login */}
-        <div>
+        <div
+          className="header__mobile-menu"
+        >
           <a
             href="https://portal.staging.stac.spatialdays.com/explorer"
-            className="header__link header__mobile-login"
             target="_blank"
+            className="header__link header__mobile-login"
+
           >
             Login
           </a>

diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
@@ -64,23 +64,31 @@
       }
     }
 
-    &__mobile-login {
-      background-color: rgb(41, 80, 212);
-      color: white;
-      padding: 0.5rem 5rem;
-      border-radius: 5px;
-      font-weight: 500;
-      transition: all 0.3s ease-in-out;
-      margin-top: 2rem;
-
-      &:hover {
-        background-color: rgb(41, 80, 212, 0.8);
-        transform: scale(1.05);
+    &__mobile {
+      &-login {
+        background-color: rgb(41, 80, 212);
         color: white;
+        padding: 0.5rem 5rem;
+        border-radius: 5px;
+        font-weight: 500;
+        transition: all 0.3s ease-in-out;
+        margin-top: 2rem;
+
+        &:hover {
+          background-color: rgb(41, 80, 212, 0.8);
+          transform: scale(1.05);
+          color: white;
+        }
+
+        @media (min-width: 600px) {
+          display: none;
+        }
       }
 
-      @media (min-width: 600px) {
-        display: none;
+      &-menu {
+        @media (min-width: 600px) {
+          display: none;
+        }
       }
     }