This repository has no description
fix login styling
author
damedotblog
date
(Apr 21, 2025, 1:04 PM -0400)
commit
e8f0c6da
e8f0c6dac90892fd6a9ee1775fe17072ee50ed9e
parent
8d0670d7
8d0670d7bd61f47e06bb332c6c88312ad99c54a4
+21
-80
-14
src/components/Admin/AdminPanel.css
-14
src/components/Admin/AdminPanel.css
···
808
808
color: var(--text);
809
809
}
810
810
811
-
.login-button {
812
-
background-color: var(--button-bg);
813
-
color: var(--button-text);
814
-
padding: 10px 0;
815
-
width: 100%;
816
-
font-size: 16px;
817
-
margin-top: 10px;
818
-
font-weight: 700;
819
-
}
820
-
821
811
.admin-container form {
822
812
border: 0px;
823
813
padding: 0px;
824
-
}
825
-
826
-
.login-button:hover {
827
-
background-color: #004F84;
828
814
}
829
815
830
816
.auth-error {
+12
-54
src/components/Login/Login.css
+12
-54
src/components/Login/Login.css
···
7
7
}
8
8
9
9
.login-card {
10
-
background-color: var(--background-color);
11
-
border-radius: 8px;
12
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
13
-
padding: 2rem;
10
+
background-color: var(--navbar-bg);
11
+
border: 5px solid var(--card-border);
12
+
border-radius: 12px;
13
+
box-shadow: none;
14
+
padding: 40px;
14
15
width: 100%;
15
-
max-width: 480px;
16
+
max-width: 450px;
16
17
text-align: center;
18
+
display: flex;
19
+
flex-direction: column;
20
+
transition: background-color 0.3s ease, border-color 0.3s ease;
17
21
}
18
22
19
23
.login-card h2 {
20
24
color: var(--text-color);
21
-
margin-bottom: 1rem;
25
+
margin-bottom: 1.5rem;
22
26
font-size: 1.8rem;
27
+
gap: 15px;
28
+
align-items: center;
23
29
}
24
30
25
31
.login-card p {
···
40
46
flex-direction: column;
41
47
gap: 1.5rem;
42
48
margin-bottom: 1.5rem;
43
-
}
44
-
45
-
.form-group {
46
-
display: flex;
47
-
flex-direction: column;
48
-
text-align: left;
49
-
}
50
-
51
-
.form-group label {
52
-
margin-bottom: 0.5rem;
53
-
color: var(--text-color);
54
-
font-weight: 500;
55
-
}
56
-
57
-
.form-group input {
58
-
padding: 0.75rem;
59
-
border: 1px solid var(--border-color);
60
-
border-radius: 4px;
61
-
background-color: var(--input-background-color, var(--background-color));
62
-
color: var(--text-color);
63
-
font-size: 1rem;
64
-
transition: border-color 0.2s;
65
-
}
66
-
67
-
.form-group input:focus {
68
-
border-color: #0070f3;
69
-
outline: none;
70
-
}
71
-
72
-
.login-button {
73
-
background-color: #0070f3;
74
-
color: white;
75
-
border: none;
76
-
border-radius: 4px;
77
-
padding: 0.75rem 1.5rem;
78
-
font-size: 1rem;
79
-
font-weight: 500;
80
-
cursor: pointer;
81
-
transition: background-color 0.2s;
82
-
}
83
-
84
-
.login-button:hover {
85
-
background-color: #0060df;
86
-
}
87
-
88
-
.login-button:disabled {
89
-
background-color: #8bb3f0;
90
-
cursor: not-allowed;
91
49
}
92
50
93
51
.login-info {
+9
-12
src/components/Login/Login.js
+9
-12
src/components/Login/Login.js
···
80
80
{error && <div className="login-error">{error}</div>}
81
81
82
82
<form onSubmit={handleSubmit} className="login-form">
83
-
<div className="form-group">
84
-
<label htmlFor="handle">Bluesky Handle</label>
85
-
<input
86
-
id="handle"
87
-
type="text"
88
-
value={handle}
89
-
onChange={(e) => setHandle(e.target.value)}
90
-
placeholder="yourhandle.bsky.social"
91
-
disabled={isLoading || isAuthenticated}
92
-
autoFocus
93
-
/>
94
-
</div>
83
+
<input
84
+
id="handle"
85
+
type="text"
86
+
value={handle}
87
+
onChange={(e) => setHandle(e.target.value)}
88
+
placeholder="yourhandle.bsky.social"
89
+
disabled={isLoading || isAuthenticated}
90
+
autoFocus
91
+
/>
95
92
96
93
<button
97
94
type="submit"