From 8cc62d1fdce3d349b47848ab728f2b1cf0edad6e Mon Sep 17 00:00:00 2001
From: Ilay Eble <ilayeble@gmail.com>
Date: Mon, 9 Jun 2025 13:04:24 +0200
Subject: [PATCH] Mobile view of Signup and Login

---
 code/frontend/src/Login.css | 174 +++++++++++++++++++-----------------
 1 file changed, 93 insertions(+), 81 deletions(-)

diff --git a/code/frontend/src/Login.css b/code/frontend/src/Login.css
index bca755c..2803a4a 100644
--- a/code/frontend/src/Login.css
+++ b/code/frontend/src/Login.css
@@ -13,7 +13,7 @@
     flex-direction: column;
     height: 100vh; /* Full viewport height */
     width: 100vw; /* Full viewport width */
-    position: absolute; /* Change from absolute to relative */
+    position: absolute; 
     background: var(--gradient-blue-backround-mobile, linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat);
     align-items: center;
     justify-content: center;
@@ -21,20 +21,6 @@
     min-height: 400px;
 }
 
-.login-login{
-    display: flex;
-    flex-direction: row;
-    border-radius: 4px;
-    background: rgba(13, 10, 56, 0.71);
-    box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
-    align-items: center;
-    justify-content: start;
-    width: 50vw;
-    height: 60vh;
-    min-height: 300px;
-    min-width: 400px;
-}
-
 .login-text{
     display: flex;
     padding: 8px 40px 40px 40px;
@@ -53,12 +39,21 @@
     line-height: 40px; /* 166.667% */
 }
 
+.login-icon{
+    height: 32px;
+    width: 32px;
+    aspect-ratio: 1/1;
+    align-self: center;
+}
+
 .login-button{
     display: inline-flex;
-    padding: 9px 8px;
+    padding: auto;
     justify-content: center;
     align-items: center;
     gap: 10px;
+    width: 150px;
+    height: 32px;
 
     border-radius: 10px;
     border: 2px solid var(--Rotkehlchen-orange-default);
@@ -102,70 +97,6 @@
     line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
     letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
 }
-
-.login-icon{
-    height: 32px;
-    width: 32px;
-    aspect-ratio: 1/1;
-    align-self: center;
-}
- 
-.login-image{
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    border-radius: 8px;
-    border: 5px solid var(--Rotkehlchen-gray-default);
-    background-image: url("../public/assets/images/BirdLogin.jpg");
-    background-size: cover;
-    background-position: 75%;
-}
-
-.signup-image{
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    border-radius: 8px;
-    border: 5px solid var(--Rotkehlchen-gray-default);
-    background-image: url("../public/assets/images/OwlSignUp.png");
-    background-size: cover;
-    background-position: 75%;
-}
-
-.login-part{
-    width: 45%;
-    height: 90%;
-    padding:3%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 1%;
-}
-
-.login-signup{
-    color: #FFF;
-    text-align: center;
-
-    /* Body-M */
-    font-family: Inter;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 17px; /* 106.25% */
-    letter-spacing: 0.8px;
-}
-
 .login-link{
     color: var(--Rotkehlchen-orange-default, #E79A0E);
 
@@ -178,7 +109,88 @@
     letter-spacing: 0.8px;
 }
 
+.login-signup{
+    color: #FFF;
+    text-align: center;
+
+    /* Body-M */
+    font-family: Inter;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 17px; /* 106.25% */
+    letter-spacing: 0.8px;
+}
+
+.login-part{
+    display: flex;
+    padding: 8px 40px 40px 40px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 18px;
+}
+
 /* Desktop view*/
 @media only screen and (min-width: 768px) {
-  
+    .login-login{
+        display: flex;
+        flex-direction: row;
+        border-radius: 4px;
+        background: rgba(13, 10, 56, 0.71);
+        box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
+        align-items: center;
+        justify-content: start;
+        width: 50vw;
+        height: 60vh;
+        min-height: 300px;
+        min-width: 400px;
+    }
+    
+    .login-image{
+        width: 100%;
+        height: 100%;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        border-radius: 8px;
+        border: 5px solid var(--Rotkehlchen-gray-default);
+        background-image: url("../public/assets/images/BirdLogin.jpg");
+        background-size: cover;
+        background-position: 75%;
+    }
+
+    .signup-image{
+        width: 100%;
+        height: 100%;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        border-radius: 8px;
+        border: 5px solid var(--Rotkehlchen-gray-default);
+        background-image: url("../public/assets/images/OwlSignUp.png");
+        background-size: cover;
+        background-position: 75%;
+    }
+
+    .login-part{
+        width: 45%;
+        height: 90%;
+        padding:3%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 1%;
+    }
+
+    
+
+    
 }
\ No newline at end of file