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

Login Fixed

Author: aditya-samal

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

@@ -56,7 +56,7 @@
 
     // Improve touch response
     -webkit-tap-highlight-color: transparent;
-    
+
     // Minimum touch target size for accessibility
     min-height: 44px;
     @media screen and (max-width: 750px) {
@@ -73,41 +73,48 @@
     }
     @media screen and (max-width: 480px) {
         width: 100%;
-        max-width: 260px;
-        height: 42px;
-        padding: 10px 20px;
+        max-width: 270px;
+        height: 44px;
+        padding: 12px 20px;
         margin: 0;
-        border-radius: 8px;
+        border-radius: 10px;
         font-size: 14px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        background-color: #1a1a1a;
+        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
+        border: 2px solid transparent;
         .logo {
             width: 20px;
             height: 20px;
         }
         span {
-            font-size: 0.85rem;
-            margin-left: 8px;
+            font-size: 0.9rem;
+            margin-left: 10px;
             font-weight: 600;
         }
+        &:hover {
+            background-color: #2a2a2a;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+        }
         &:active {
-            transform: scale(0.96);
-            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+            transform: scale(0.97);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
         }
     }
     @media screen and (max-width: 360px) {
         width: 100%;
-        max-width: 240px;
-        height: 40px;
-        padding: 8px 16px;
+        max-width: 250px;
+        height: 42px;
+        padding: 10px 18px;
         margin: 0;
-        border-radius: 6px;
+        border-radius: 8px;
         .logo {
             width: 18px;
             height: 18px;
         }
         span {
-            font-size: 0.8rem;
-            margin-left: 6px;
+            font-size: 0.85rem;
+            margin-left: 8px;
             font-weight: 600;
         }
     }

client/src/screens/landing/styles.scss

@@ -122,15 +122,17 @@
     }
     @media screen and (max-width: 480px) {
         .top {
-            height: 85%;
+            height: 82%;
         }
         .bottom {
-            height: 15%;
-            min-height: 120px;
+            height: 18%;
+            min-height: 140px;
             position: fixed;
             bottom: 0;
+            background: linear-gradient(135deg, #fecf6f 0%, #f5c453 100%);
+            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
             .content {
-                padding: 1rem 1rem;
+                padding: 1.2rem 1rem 1rem 1rem;
                 flex-direction: column;
                 gap: 1rem;
                 justify-content: center;
@@ -139,20 +141,22 @@
                 .text {
                     flex: none;
                     text-align: center;
-                    max-width: 90%;
+                    max-width: 95%;
                     p {
-                        font-size: 0.85rem;
+                        font-size: 0.8rem;
                         line-height: 1.3;
                         margin: 0;
-                        font-weight: 500;
-                        color: #333;
+                        font-weight: 600;
+                        color: #2d2d2d;
+                        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
                     }
                 }
                 .btn-container {
                     flex: none;
                     justify-content: center;
                     width: 100%;
                     max-width: 280px;
+                    margin-bottom: 8px;
                     .line {
                         display: none;
                     }
@@ -162,14 +166,14 @@
     }
     @media screen and (max-width: 360px) {
         .bottom {
-            height: 15%;
-            min-height: 110px;
+            height: 20%;
+            min-height: 130px;
             .content {
-                padding: 0.8rem 0.8rem;
+                padding: 1rem 0.8rem 0.8rem 0.8rem;
                 gap: 0.8rem;
                 .text {
                     p {
-                        font-size: 0.8rem;
+                        font-size: 0.75rem;
                         line-height: 1.2;
                     }
                 }