Skip to content

Commit 6b7187b

Browse files
authored
Merge pull request #129 from Coding-Club-IITG/aditya
Login Fixed
2 parents 2171d79 + f91603d commit 6b7187b

2 files changed

Lines changed: 58 additions & 51 deletions

File tree

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

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@
88
justify-content: center;
99
align-items: center;
1010
margin: 5px;
11-
border-radius: 6px;
11+
border-radius: 8px;
1212
border: none;
1313
font-family: inherit;
14+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
15+
transition: all 0.2s ease;
1416
.logo {
1517
background: url(./logo.svg), none;
1618
background-repeat: no-repeat;
@@ -23,17 +25,21 @@
2325
margin-left: 10px;
2426
font-family: "Bold";
2527
font-size: 1rem;
28+
font-weight: 600;
2629
}
2730
cursor: pointer;
28-
transition: 200ms ease;
31+
transition: all 0.2s ease;
2932
&:hover {
30-
transform: scale(1.02);
33+
transform: translateY(-1px);
34+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
35+
background-color: #1a1a1a;
3136
}
3237

3338
// Improve touch targets for mobile
3439
&:active {
35-
transform: scale(0.98);
36-
background-color: #1a1a1a;
40+
transform: scale(0.97);
41+
background-color: #2a2a2a;
42+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
3743
}
3844

3945
// Focus state for accessibility
@@ -50,6 +56,9 @@
5056

5157
// Improve touch response
5258
-webkit-tap-highlight-color: transparent;
59+
60+
// Minimum touch target size for accessibility
61+
min-height: 44px;
5362
@media screen and (max-width: 750px) {
5463
width: 220px;
5564
height: 44px;
@@ -64,33 +73,42 @@
6473
}
6574
@media screen and (max-width: 480px) {
6675
width: 100%;
67-
max-width: 280px;
68-
height: 45px;
69-
padding: 12px 20px;
76+
max-width: 260px;
77+
height: 42px;
78+
padding: 10px 20px;
7079
margin: 0;
7180
border-radius: 8px;
81+
font-size: 14px;
82+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
7283
.logo {
73-
width: 22px;
74-
height: 22px;
84+
width: 20px;
85+
height: 20px;
7586
}
7687
span {
77-
font-size: 0.9rem;
78-
margin-left: 10px;
88+
font-size: 0.85rem;
89+
margin-left: 8px;
90+
font-weight: 600;
91+
}
92+
&:active {
93+
transform: scale(0.96);
94+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
7995
}
8096
}
8197
@media screen and (max-width: 360px) {
8298
width: 100%;
83-
max-width: 260px;
84-
height: 42px;
85-
padding: 10px 18px;
99+
max-width: 240px;
100+
height: 40px;
101+
padding: 8px 16px;
86102
margin: 0;
103+
border-radius: 6px;
87104
.logo {
88-
width: 20px;
89-
height: 20px;
105+
width: 18px;
106+
height: 18px;
90107
}
91108
span {
92-
font-size: 0.85rem;
93-
margin-left: 8px;
109+
font-size: 0.8rem;
110+
margin-left: 6px;
111+
font-weight: 600;
94112
}
95113
}
96114
}

client/src/screens/landing/styles.scss

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,11 @@
110110
@media screen and (max-width: 600px) {
111111
.bottom {
112112
.content {
113-
padding: 0.7rem;
113+
padding: 1.2rem;
114114
.text {
115115
p {
116-
font-size: 0.8rem;
117-
line-height: 1.25;
116+
font-size: 0.9rem;
117+
line-height: 1.4;
118118
}
119119
}
120120
}
@@ -126,24 +126,33 @@
126126
}
127127
.bottom {
128128
height: 15%;
129-
min-height: 80px;
129+
min-height: 120px;
130+
position: fixed;
131+
bottom: 0;
130132
.content {
131-
padding: 1rem 0.5rem;
133+
padding: 1rem 1rem;
132134
flex-direction: column;
133-
gap: 0.8rem;
135+
gap: 1rem;
136+
justify-content: center;
137+
align-items: center;
138+
height: 100%;
134139
.text {
135140
flex: none;
136141
text-align: center;
142+
max-width: 90%;
137143
p {
138-
font-size: 0.9rem;
139-
line-height: 1.4;
144+
font-size: 0.85rem;
145+
line-height: 1.3;
140146
margin: 0;
147+
font-weight: 500;
148+
color: #333;
141149
}
142150
}
143151
.btn-container {
144152
flex: none;
145153
justify-content: center;
146154
width: 100%;
155+
max-width: 280px;
147156
.line {
148157
display: none;
149158
}
@@ -153,31 +162,11 @@
153162
}
154163
@media screen and (max-width: 360px) {
155164
.bottom {
156-
height: 18%;
157-
min-height: 100px;
158-
.content {
159-
padding: 1rem 0.4rem;
160-
gap: 1rem;
161-
.text {
162-
p {
163-
font-size: 0.85rem;
164-
line-height: 1.3;
165-
}
166-
}
167-
}
168-
}
169-
}
170-
171-
// Handle landscape orientation on mobile
172-
@media screen and (max-height: 500px) and (max-width: 900px) {
173-
.top {
174-
height: 75%;
175-
}
176-
.bottom {
177-
height: 25%;
178-
min-height: 120px;
165+
height: 15%;
166+
min-height: 110px;
179167
.content {
180-
padding: 0.8rem;
168+
padding: 0.8rem 0.8rem;
169+
gap: 0.8rem;
181170
.text {
182171
p {
183172
font-size: 0.8rem;

0 commit comments

Comments
 (0)