From ddf120c832dc7673835c3c42c968ac25edb538d1 Mon Sep 17 00:00:00 2001
From: Annika <annika.sonnek@nbis.se>
Date: Fri, 16 Aug 2024 15:15:41 +0200
Subject: [PATCH] style: add urdr-image to login-page

---
 frontend/src/components/LoginHeader.tsx |  1 +
 frontend/src/index.css                  | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/LoginHeader.tsx b/frontend/src/components/LoginHeader.tsx
index 08029ab2..bf29f521 100644
--- 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
index 2de534f1..835c30e4 100644
--- 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;