style: add urdr-image to login-page

NBISweden · Aug 16, 2024 · ddf120c · ddf120c
1 parent 736f976
commit ddf120c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/frontend/src/components/LoginHeader.tsx b/frontend/src/components/LoginHeader.tsx
@@ -4,6 +4,7 @@ import "../index.css";
 export const LoginHeader = () => {
   return (
     <section className="header-wrapper">
+      <img src="mstile-144x144.png" className="login-img" alt="Urdr icon" />
       <h1 className="header-heading">Welcome to urdr</h1>
     </section>
   );

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -97,11 +97,12 @@ Other button classes are defined further down together with other classes for th
 
 .header-wrapper {
   width: 100vw;
-  height: 10rem;
+  height: 15rem;
   line-height: 10rem;
   margin-bottom: 3rem;
   background-color: hsl(76deg 55% 53%);
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }
@@ -310,6 +311,19 @@ Other button classes are defined further down together with other classes for th
   color: hsl(185deg 92% 16%);
 }
 
+.login-img {
+  margin-bottom: 1rem;
+  width: 5.5rem;
+  height: auto;
+  display: block;
+}
+
+@media (max-width: 700px) {
+  .login-img {
+    width: 4rem;
+  }
+}
+
 .login-form {
   display: flex;
   flex-direction: column;