Merge pull request #129 from Coding-Club-IITG/aditya

Login Fixed

Author: aditya-samal

client/src/screens/landing/components/microsoftbutton/styles.scss

@@ -8,9 +8,11 @@
     justify-content: center;
     align-items: center;
     margin: 5px;
-    border-radius: 6px;
+    border-radius: 8px;
     border: none;
     font-family: inherit;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s ease;
     .logo {
         background: url(./logo.svg), none;
         background-repeat: no-repeat;
@@ -23,17 +25,21 @@
         margin-left: 10px;
         font-family: "Bold";
         font-size: 1rem;
+        font-weight: 600;
     }
     cursor: pointer;
-    transition: 200ms ease;
+    transition: all 0.2s ease;
     &:hover {
-        transform: scale(1.02);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        background-color: #1a1a1a;
     }
 
     // Improve touch targets for mobile
     &:active {
-        transform: scale(0.98);
-        background-color: #1a1a1a;
+        transform: scale(0.97);
+        background-color: #2a2a2a;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
     }
 
     // Focus state for accessibility
@@ -50,6 +56,9 @@
 
     // Improve touch response
     -webkit-tap-highlight-color: transparent;
+    
+    // Minimum touch target size for accessibility
+    min-height: 44px;
     @media screen and (max-width: 750px) {
         width: 220px;
         height: 44px;
@@ -64,33 +73,42 @@
     }
     @media screen and (max-width: 480px) {
         width: 100%;
-        max-width: 280px;
-        height: 45px;
-        padding: 12px 20px;
+        max-width: 260px;
+        height: 42px;
+        padding: 10px 20px;
         margin: 0;
         border-radius: 8px;
+        font-size: 14px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         .logo {
-            width: 22px;
-            height: 22px;
+            width: 20px;
+            height: 20px;
         }
         span {
-            font-size: 0.9rem;
-            margin-left: 10px;
+            font-size: 0.85rem;
+            margin-left: 8px;
+            font-weight: 600;
+        }
+        &:active {
+            transform: scale(0.96);
+            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
         }
     }
     @media screen and (max-width: 360px) {
         width: 100%;
-        max-width: 260px;
-        height: 42px;
-        padding: 10px 18px;
+        max-width: 240px;
+        height: 40px;
+        padding: 8px 16px;
         margin: 0;
+        border-radius: 6px;
         .logo {
-            width: 20px;
-            height: 20px;
+            width: 18px;
+            height: 18px;
         }
         span {
-            font-size: 0.85rem;
-            margin-left: 8px;
+            font-size: 0.8rem;
+            margin-left: 6px;
+            font-weight: 600;
         }
     }
 }

client/src/screens/landing/styles.scss

@@ -110,11 +110,11 @@
     @media screen and (max-width: 600px) {
         .bottom {
             .content {
-                padding: 0.7rem;
+                padding: 1.2rem;
                 .text {
                     p {
-                        font-size: 0.8rem;
-                        line-height: 1.25;
+                        font-size: 0.9rem;
+                        line-height: 1.4;
                     }
                 }
             }
@@ -126,24 +126,33 @@
         }
         .bottom {
             height: 15%;
-            min-height: 80px;
+            min-height: 120px;
+            position: fixed;
+            bottom: 0;
             .content {
-                padding: 1rem 0.5rem;
+                padding: 1rem 1rem;
                 flex-direction: column;
-                gap: 0.8rem;
+                gap: 1rem;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
                 .text {
                     flex: none;
                     text-align: center;
+                    max-width: 90%;
                     p {
-                        font-size: 0.9rem;
-                        line-height: 1.4;
+                        font-size: 0.85rem;
+                        line-height: 1.3;
                         margin: 0;
+                        font-weight: 500;
+                        color: #333;
                     }
                 }
                 .btn-container {
                     flex: none;
                     justify-content: center;
                     width: 100%;
+                    max-width: 280px;
                     .line {
                         display: none;
                     }
@@ -153,31 +162,11 @@
     }
     @media screen and (max-width: 360px) {
         .bottom {
-            height: 18%;
-            min-height: 100px;
-            .content {
-                padding: 1rem 0.4rem;
-                gap: 1rem;
-                .text {
-                    p {
-                        font-size: 0.85rem;
-                        line-height: 1.3;
-                    }
-                }
-            }
-        }
-    }
-
-    // Handle landscape orientation on mobile
-    @media screen and (max-height: 500px) and (max-width: 900px) {
-        .top {
-            height: 75%;
-        }
-        .bottom {
-            height: 25%;
-            min-height: 120px;
+            height: 15%;
+            min-height: 110px;
             .content {
-                padding: 0.8rem;
+                padding: 0.8rem 0.8rem;
+                gap: 0.8rem;
                 .text {
                     p {
                         font-size: 0.8rem;