Skip to content

Commit 90b505e

Browse files
omroy07omroy07
authored
Merge pull request #187 from janavipandole/fix/google-signin-darkmode-visibility
Fix: Improve Google Sign-In button visibility in dark mode (#181)
2 parents 9f2b4ed + 880d137 commit 90b505e

2 files changed

Lines changed: 62 additions & 57 deletions

File tree

‎login.css‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,16 @@ body {
2424
}
2525

2626
@keyframes float {
27+
2728
0%,
2829
100% {
2930
transform: translateY(0px) rotate(0deg);
3031
}
32+
3133
33% {
3234
transform: translateY(-10px) rotate(1deg);
3335
}
36+
3437
66% {
3538
transform: translateY(5px) rotate(-1deg);
3639
}
@@ -73,10 +76,12 @@ body {
7376
}
7477

7578
@keyframes shimmer {
79+
7680
0%,
7781
100% {
7882
background-position: -200% 0;
7983
}
84+
8085
50% {
8186
background-position: 200% 0;
8287
}
@@ -102,10 +107,12 @@ body {
102107
}
103108

104109
@keyframes pulse {
110+
105111
0%,
106112
100% {
107113
transform: scale(1);
108114
}
115+
109116
50% {
110117
transform: scale(1.05);
111118
}
@@ -256,12 +263,10 @@ body {
256263
left: -100%;
257264
width: 100%;
258265
height: 100%;
259-
background: linear-gradient(
260-
90deg,
261-
transparent,
262-
rgba(255, 255, 255, 0.2),
263-
transparent
264-
);
266+
background: linear-gradient(90deg,
267+
transparent,
268+
rgba(255, 255, 255, 0.2),
269+
transparent);
265270
transition: left 0.5s;
266271
}
267272

@@ -293,6 +298,7 @@ body {
293298
0% {
294299
transform: rotate(0deg);
295300
}
301+
296302
100% {
297303
transform: rotate(360deg);
298304
}
@@ -329,36 +335,32 @@ body {
329335
padding: 0 5px;
330336
}
331337

332-
/* Google Button */
338+
/* google button */
333339
.google-btn {
334340
display: flex;
335341
align-items: center;
336342
justify-content: center;
337343
gap: 12px;
338344
width: 100%;
339-
background-color: white !important;
340-
color: #3c4043 !important;
341-
border: 2px solid #dadce0;
342-
border-radius: 12px !important;
345+
background-color: var(--bg-primary);
346+
color: var(--text-primary);
347+
border: 2px solid var(--border-color);
348+
border-radius: 12px;
343349
padding: 14px;
344350
font-size: 15px;
345351
font-weight: 500;
346352
cursor: pointer;
347-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
353+
transition: all 0.3s ease;
348354
position: relative;
349355
overflow: hidden;
350356
margin-bottom: 25px;
351357
}
352358

353359
.google-btn:hover {
354-
background-color: #f8f9fa !important;
355-
border-color: #c6c6c6;
360+
background-color: var(--bg-secondary);
361+
border-color: var(--border-color);
356362
transform: translateY(-1px);
357-
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
358-
}
359-
360-
.google-btn:active {
361-
transform: translateY(0);
363+
box-shadow: 0 8px 20px var(--shadow-light);
362364
}
363365

364366
.google-icon {
@@ -371,7 +373,6 @@ body {
371373
transform: scale(1.1);
372374
}
373375

374-
375376
/* Success/Error states */
376377
.success {
377378
border-color: #4caf50 !important;
@@ -385,13 +386,16 @@ body {
385386
}
386387

387388
@keyframes shake {
389+
388390
0%,
389391
100% {
390392
transform: translateX(0);
391393
}
394+
392395
25% {
393396
transform: translateX(-5px);
394397
}
398+
395399
75% {
396400
transform: translateX(5px);
397401
}
@@ -420,7 +424,7 @@ body {
420424

421425
.form-container input[type="email"],
422426
.form-container input[type="password"] {
423-
font-size: 16px;
427+
font-size: 16px;
424428
}
425429
}
426430

@@ -433,4 +437,4 @@ body {
433437
.brand-section {
434438
margin-bottom: 25px;
435439
}
436-
}
440+
}

‎login.html‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,6 +10,7 @@
910
<link rel="stylesheet" href="login.css">
1011
<link rel="stylesheet" href="theme.css">
1112
</head>
13+
1214
<body>
1315
<script>
1416
// Redirect if already logged in
@@ -19,59 +21,63 @@
1921

2022
<div class="form-container">
2123
<div style="position: absolute; top: 20px; right: 20px;">
22-
<button class="theme-toggle" aria-label="Toggle dark/light mode" style="background: rgba(46, 125, 50, 0.1); border: 1px solid rgba(46, 125, 50, 0.3); color: #2e7d32;">
24+
<button class="theme-toggle" aria-label="Toggle dark/light mode"
25+
style="background: rgba(46, 125, 50, 0.1); border: 1px solid rgba(46, 125, 50, 0.3); color: #2e7d32;">
2326
<i class="fas fa-sun sun-icon"></i>
2427
<i class="fas fa-moon moon-icon"></i>
2528
<span class="theme-text">Light</span>
2629
</button>
2730
</div>
28-
31+
2932
<div class="brand-section">
3033
<div class="brand-icon">
3134
<i class="fas fa-seedling"></i>
3235
</div>
3336
<h2>Welcome Back</h2>
3437
<p class="form-subtitle">Sign in to access your AgriTech dashboard</p>
3538
</div>
36-
39+
3740
<form onsubmit="handleLogin(event)">
3841
<div class="input-group">
3942
<i class="fas fa-envelope"></i>
4043
<input type="email" id="email" placeholder="Enter your email" required>
4144
</div>
42-
45+
4346
<div class="input-group">
4447
<i class="fas fa-lock"></i>
4548
<input type="password" id="password" placeholder="Enter your password" required>
4649
<button type="button" class="password-toggle" onclick="togglePassword()">
4750
<i class="fas fa-eye" id="password-eye"></i>
4851
</button>
4952
</div>
50-
53+
5154
<div class="forgot-password">
5255
<a href="forgot-password.html">Forgot Password?</a>
5356
</div>
54-
57+
5558
<button type="submit" id="login-btn">
5659
<span id="login-text">Sign In</span>
5760
</button>
58-
61+
5962
<div class="divider">
6063
<span>or continue with</span>
6164
</div>
62-
65+
6366
<button type="button" id="google-login-btn" class="google-btn">
6467
<span class="google-logo">
6568
<svg class="google-icon" viewBox="0 0 533.5 544.3">
66-
<path fill="#4285F4" d="M533.5 278.4c0-18.5-1.6-37.1-5-55.2H272v104.5h146.9c-6.4 34.7-25.7 64.1-54.9 83.5l89 69.4c52-47.8 80.5-118.3 80.5-202.2z"/>
67-
<path fill="#34A853" d="M272 544.3c73.6 0 135.4-24.3 180.5-65.9l-89-69.4c-24.7 16.6-56.4 26.2-91.5 26.2-70.4 0-130-47.6-151.3-111.5l-93.6 72.3c43.3 85.1 132.1 147.3 244.9 147.3z"/>
68-
<path fill="#FBBC04" d="M120.7 323.7c-10.4-30.7-10.4-63.6 0-94.3L27 157c-40.7 79.7-40.7 172 0 251.7l93.7-72.3z"/>
69-
<path fill="#EA4335" d="M272 107.7c38.6-.6 75.5 13.6 104 39.4l77.7-77.7C403.2 23.9 340.2-.2 272 0 159.2 0 70.5 62.2 27.2 147.3l93.6 72.4c21.4-63.9 81-111.5 151.2-112z"/>
69+
<path fill="#4285F4"
70+
d="M533.5 278.4c0-18.5-1.6-37.1-5-55.2H272v104.5h146.9c-6.4 34.7-25.7 64.1-54.9 83.5l89 69.4c52-47.8 80.5-118.3 80.5-202.2z" />
71+
<path fill="#34A853"
72+
d="M272 544.3c73.6 0 135.4-24.3 180.5-65.9l-89-69.4c-24.7 16.6-56.4 26.2-91.5 26.2-70.4 0-130-47.6-151.3-111.5l-93.6 72.3c43.3 85.1 132.1 147.3 244.9 147.3z" />
73+
<path fill="#FBBC04"
74+
d="M120.7 323.7c-10.4-30.7-10.4-63.6 0-94.3L27 157c-40.7 79.7-40.7 172 0 251.7l93.7-72.3z" />
75+
<path fill="#EA4335"
76+
d="M272 107.7c38.6-.6 75.5 13.6 104 39.4l77.7-77.7C403.2 23.9 340.2-.2 272 0 159.2 0 70.5 62.2 27.2 147.3l93.6 72.4c21.4-63.9 81-111.5 151.2-112z" />
7077
</svg>
7178
</span>
7279
<span>Continue with Google</span>
7380
</button>
74-
7581
<p>Don't have an account? <a href="register.html">Create Account</a></p>
7682
</form>
7783
</div>
@@ -81,7 +87,7 @@ <h2>Welcome Back</h2>
8187
function togglePassword() {
8288
const passwordInput = document.getElementById('password');
8389
const eyeIcon = document.getElementById('password-eye');
84-
90+
8591
if (passwordInput.type === 'password') {
8692
passwordInput.type = 'text';
8793
eyeIcon.className = 'fas fa-eye-slash';
@@ -98,37 +104,31 @@ <h2>Welcome Back</h2>
98104
// Enhanced login handler with loading state
99105
function handleLogin(event) {
100106
event.preventDefault();
101-
107+
102108
const loginBtn = document.getElementById('login-btn');
103109
const loginText = document.getElementById('login-text');
104110
const emailInput = document.getElementById('email');
105111
const passwordInput = document.getElementById('password');
106-
112+
107113
// Add loading state
108114
loginBtn.classList.add('loading');
109115
loginText.textContent = 'Signing In...';
110116
loginBtn.disabled = true;
111-
117+
112118
// Reset previous states
113119
emailInput.classList.remove('error', 'success');
114120
passwordInput.classList.remove('error', 'success');
115-
116-
// Get form data
117-
const email = emailInput.value.trim();
118-
const password = passwordInput.value;
119-
120-
// Attempt login using AuthManager
121+
122+
// Simulate login process (replace with your actual login logic)
121123
setTimeout(() => {
122-
const result = window.authManager.login(email, password);
123-
124-
if (result.success) {
124+
const email = emailInput.value;
125+
const password = passwordInput.value;
126+
127+
if (email && password) {
125128
emailInput.classList.add('success');
126129
passwordInput.classList.add('success');
127130
loginText.textContent = 'Success!';
128-
129-
showAuthMessage(result.message, 'success');
130-
131-
// Redirect to main page
131+
132132
setTimeout(() => {
133133
window.location.href = 'main.html';
134134
}, 1000);
@@ -147,7 +147,7 @@ <h2>Welcome Back</h2>
147147
}
148148

149149
// Google login handler
150-
document.getElementById('google-login-btn').addEventListener('click', function() {
150+
document.getElementById('google-login-btn').addEventListener('click', function () {
151151
this.style.transform = 'scale(0.98)';
152152
setTimeout(() => {
153153
this.style.transform = '';
@@ -159,17 +159,17 @@ <h2>Welcome Back</h2>
159159

160160
// Add input focus animations
161161
document.querySelectorAll('input').forEach(input => {
162-
input.addEventListener('focus', function() {
162+
input.addEventListener('focus', function () {
163163
this.parentElement.style.transform = 'translateY(-2px)';
164164
});
165-
166-
input.addEventListener('blur', function() {
165+
166+
input.addEventListener('blur', function () {
167167
this.parentElement.style.transform = 'translateY(0)';
168168
});
169169
});
170170

171171
// Add keyboard navigation
172-
document.addEventListener('keydown', function(e) {
172+
document.addEventListener('keydown', function (e) {
173173
if (e.key === 'Enter') {
174174
const form = document.querySelector('form');
175175
if (document.activeElement.tagName === 'INPUT') {
@@ -187,4 +187,5 @@ <h2>Welcome Back</h2>
187187
<script src="theme.js"></script>
188188
<script src="auth.js"></script>
189189
</body>
190+
190191
</html>

0 commit comments

Comments
 (0)