Skip to content

Commit 69eee81

Browse files
xenobiasoftclaude
xenobiasoft
and
claude
committed
Style Blazor profile pages to match React UI (#260)
Add scoped CSS for Profile and CreateProfile pages so they visually match the React equivalents: centered white card layout, uppercase field labels, dark action buttons, and outlined secondary/edit buttons. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 12b1f43 commit 69eee81

3 files changed

Lines changed: 221 additions & 4 deletions

File tree

‎src/frontend/Sudoku.Blazor/Components/Pages/CreateProfile.razor.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
.create-profile-container {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
min-height: 100vh;
6+
padding: 1rem;
7+
background: #f4f4f4;
8+
}
9+
10+
.create-profile-card {
11+
background: white;
12+
border-radius: 8px;
13+
padding: 2rem;
14+
max-width: 440px;
15+
width: 100%;
16+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
17+
}
18+
19+
.create-profile-card h1 {
20+
margin: 0 0 0.5rem;
21+
font-size: 1.75rem;
22+
font-weight: 700;
23+
}
24+
25+
.subtitle {
26+
color: #555;
27+
margin: 0 0 1.5rem;
28+
}
29+
30+
.warning-note {
31+
margin-top: 1.25rem;
32+
font-size: 0.8rem;
33+
color: #888;
34+
}
35+
36+
/* Everything below is inside EditForm → requires ::deep */
37+
38+
::deep .form-group {
39+
display: flex;
40+
flex-direction: column;
41+
gap: 0.5rem;
42+
}
43+
44+
::deep .form-group label {
45+
font-weight: 600;
46+
}
47+
48+
::deep .form-control {
49+
padding: 0.6rem 0.8rem;
50+
font-size: 1rem;
51+
border: 1px solid #ccc;
52+
border-radius: 4px;
53+
outline: none;
54+
width: 100%;
55+
box-sizing: border-box;
56+
}
57+
58+
::deep .form-control:focus {
59+
border-color: #555;
60+
box-shadow: none;
61+
}
62+
63+
::deep .form-control.is-invalid {
64+
border-color: #d9534f;
65+
}
66+
67+
::deep .error-message {
68+
color: #d9534f;
69+
font-size: 0.875rem;
70+
margin: 0;
71+
}
72+
73+
::deep .form-hint {
74+
color: #777;
75+
font-size: 0.8rem;
76+
margin: 0;
77+
}
78+
79+
::deep .btn-primary {
80+
margin-top: 0.75rem;
81+
padding: 0.7rem 1.25rem;
82+
font-size: 1rem;
83+
font-weight: 600;
84+
background: #333;
85+
color: white;
86+
border: none;
87+
border-radius: 4px;
88+
cursor: pointer;
89+
width: 100%;
90+
}
91+
92+
::deep .btn-primary:disabled {
93+
opacity: 0.5;
94+
cursor: not-allowed;
95+
}

‎src/frontend/Sudoku.Blazor/Components/Pages/Profile.razor‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,12 @@
2020
<DataAnnotationsValidator />
2121
<div class="edit-row">
2222
<InputText @bind-Value="_editModel.NewAlias" class="form-control" maxlength="50" />
23-
<button type="submit" class="btn-primary" disabled="@_isSaving">
24-
@(_isSaving ? "Saving…" : "Save")
25-
</button>
26-
<button type="button" class="btn-secondary" @onclick="CancelEdit">Cancel</button>
23+
<div class="edit-actions">
24+
<button type="submit" class="btn-primary" disabled="@_isSaving">
25+
@(_isSaving ? "Saving…" : "Save")
26+
</button>
27+
<button type="button" class="btn-secondary" @onclick="CancelEdit">Cancel</button>
28+
</div>
2729
</div>
2830
<ValidationMessage For="@(() => _editModel.NewAlias)" />
2931
@if (!string.IsNullOrEmpty(_editError))

‎src/frontend/Sudoku.Blazor/Components/Pages/Profile.razor.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
.profile-container {
2+
display: flex;
3+
justify-content: center;
4+
padding: 2rem 1rem;
5+
}
6+
7+
.profile-card {
8+
background: white;
9+
border-radius: 8px;
10+
padding: 2rem;
11+
max-width: 480px;
12+
width: 100%;
13+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
14+
}
15+
16+
.profile-card h1 {
17+
margin: 0 0 1.5rem;
18+
font-size: 1.75rem;
19+
font-weight: 700;
20+
}
21+
22+
.profile-field {
23+
display: flex;
24+
flex-direction: column;
25+
gap: 0.25rem;
26+
margin-bottom: 1.25rem;
27+
}
28+
29+
.field-label {
30+
font-size: 0.8rem;
31+
font-weight: 600;
32+
color: #666;
33+
text-transform: uppercase;
34+
letter-spacing: 0.05em;
35+
}
36+
37+
.field-value-row {
38+
display: flex;
39+
align-items: center;
40+
gap: 0.75rem;
41+
font-size: 1.1rem;
42+
}
43+
44+
.btn-link {
45+
font-size: 0.85rem;
46+
color: #555;
47+
background: transparent;
48+
border: 1px solid #ccc;
49+
border-radius: 4px;
50+
padding: 0.2rem 0.6rem;
51+
cursor: pointer;
52+
text-decoration: none;
53+
}
54+
55+
.warning-note {
56+
margin-top: 1.5rem;
57+
font-size: 0.8rem;
58+
color: #888;
59+
}
60+
61+
/* Everything below is inside EditForm → requires ::deep */
62+
63+
::deep .edit-row {
64+
display: flex;
65+
flex-direction: column;
66+
gap: 0.4rem;
67+
}
68+
69+
::deep .form-control {
70+
padding: 0.5rem 0.75rem;
71+
font-size: 1rem;
72+
border: 1px solid #ccc;
73+
border-radius: 4px;
74+
outline: none;
75+
width: 100%;
76+
box-sizing: border-box;
77+
}
78+
79+
::deep .form-control:focus {
80+
border-color: #555;
81+
box-shadow: none;
82+
}
83+
84+
::deep .edit-actions {
85+
display: flex;
86+
gap: 0.5rem;
87+
margin-top: 0.25rem;
88+
}
89+
90+
::deep .btn-primary {
91+
padding: 0.45rem 1rem;
92+
font-size: 0.9rem;
93+
font-weight: 600;
94+
background: #333;
95+
color: white;
96+
border: none;
97+
border-radius: 4px;
98+
cursor: pointer;
99+
}
100+
101+
::deep .btn-primary:disabled {
102+
opacity: 0.5;
103+
cursor: not-allowed;
104+
}
105+
106+
::deep .btn-secondary {
107+
padding: 0.45rem 1rem;
108+
font-size: 0.9rem;
109+
background: transparent;
110+
color: #555;
111+
border: 1px solid #ccc;
112+
border-radius: 4px;
113+
cursor: pointer;
114+
}
115+
116+
::deep .error-message {
117+
color: #d9534f;
118+
font-size: 0.875rem;
119+
margin: 0;
120+
}

0 commit comments

Comments
 (0)