Skip to content

Commit 3f3d942

Browse files
HDauvenHDauven
authored
Merge pull request #124 from dusk-network/dusk-docs-theme-polish
Polish docs UI to better align with Dusk design
2 parents d3a5385 + e523a8f commit 3f3d942

3 files changed

Lines changed: 408 additions & 46 deletions

File tree

‎src/content/docs/learn/VerifyAccount.astro‎

Lines changed: 135 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,155 @@
11
<verify-account>
22
<div class="verify-form">
3-
<label for="channel">Select Channel</label>
4-
<select id="channel">
5-
<option value="x">X</option>
6-
<option value="discord">Discord</option>
7-
<option value="telegram">Telegram</option>
8-
<option value="email">Email</option>
9-
</select>
10-
11-
<label for="account">Account Name</label>
12-
<input
13-
id="account"
14-
type="text"
15-
placeholder="Enter account name"
16-
/>
17-
18-
<button id="verifyButton" type="button">Verify</button>
3+
<div class="verify-field-grid">
4+
<label class="verify-field" for="channel">
5+
<span>Channel</span>
6+
<select id="channel">
7+
<option value="x">X</option>
8+
<option value="discord">Discord</option>
9+
<option value="telegram">Telegram</option>
10+
<option value="email">Email</option>
11+
</select>
12+
</label>
13+
14+
<label class="verify-field" for="account">
15+
<span>Account</span>
16+
<input
17+
id="account"
18+
type="text"
19+
placeholder="@account or email"
20+
/>
21+
</label>
22+
</div>
23+
24+
<button id="verifyButton" type="button">Verify account</button>
1925
<p id="result" class="status"></p>
2026
</div>
2127

2228
<style>
2329
.verify-form {
24-
display: flex;
25-
flex-direction: column;
30+
display: grid;
31+
gap: 1rem;
32+
max-width: 44rem;
33+
margin-block: 1rem 1.5rem;
34+
padding: 1rem;
35+
border: 1px solid var(--dusk-border, var(--sl-color-gray-5));
36+
border-radius: var(--dusk-surface-radius, 0.5rem);
37+
background: var(--dusk-surface, var(--sl-color-bg));
38+
}
39+
40+
.verify-field-grid {
41+
display: grid;
2642
gap: 1rem;
27-
max-width: 400px;
28-
margin-top: 1rem;
2943
}
44+
45+
@media (min-width: 42rem) {
46+
.verify-field-grid {
47+
grid-template-columns: minmax(10rem, 0.75fr) minmax(0, 1.25fr);
48+
}
49+
}
50+
51+
.verify-field {
52+
display: grid;
53+
grid-template-rows: 1rem auto;
54+
gap: 0.45rem;
55+
align-content: start;
56+
margin: 0;
57+
color: var(--sl-color-white);
58+
font-size: var(--sl-text-sm);
59+
font-weight: 500;
60+
}
61+
62+
.verify-field > span {
63+
color: var(--dusk-text-muted, var(--sl-color-gray-3));
64+
font-family: var(--sl-font);
65+
font-size: var(--sl-text-xs);
66+
font-weight: 500;
67+
letter-spacing: 0;
68+
line-height: 1rem;
69+
}
70+
3071
select,
3172
input {
32-
background-color: var(--on-surface-color);
33-
padding: 0.5rem 1rem 0.5rem 1rem;
34-
font-size: 1rem;
35-
border: 1px solid #ccc;
36-
border-radius: 24px;
3773
width: 100%;
74+
min-height: 2.75rem;
75+
padding: 0.65rem 0.75rem;
76+
border: 1px solid var(--dusk-border, var(--sl-color-gray-5));
77+
border-radius: var(--dusk-surface-radius, 0.5rem);
78+
background: var(--sl-color-bg);
79+
color: var(--sl-color-white);
80+
font-family: var(--sl-font);
81+
font-size: var(--sl-text-sm);
82+
font-weight: 400;
83+
line-height: 1.2;
84+
}
85+
86+
select:focus,
87+
input:focus {
88+
border-color: var(--sl-color-accent);
89+
outline: 2px solid transparent;
90+
box-shadow: 0 0 0 3px rgba(113, 177, 255, 0.22);
3891
}
92+
3993
button {
40-
padding: 0.5rem 1rem;
41-
font-size: 1rem;
42-
color: white;
43-
background: #56a1fd;
44-
border: none;
45-
border-radius: 24px;
94+
justify-self: start;
95+
min-height: 2.75rem;
96+
padding: 0.65rem 1rem;
97+
border: 1px solid var(--sl-color-accent);
98+
border-radius: var(--dusk-surface-radius, 0.5rem);
99+
background: var(--sl-color-accent);
100+
color: var(--sl-color-text-invert, #101010);
46101
cursor: pointer;
102+
font: inherit;
103+
font-weight: 500;
104+
transition:
105+
background 160ms ease,
106+
border-color 160ms ease,
107+
transform 120ms ease;
47108
}
109+
48110
button:hover {
49-
background: #71b1ff;
111+
transform: translateY(-1px);
112+
}
113+
114+
button:focus-visible {
115+
outline: 2px solid var(--sl-color-accent);
116+
outline-offset: 3px;
50117
}
118+
51119
.status {
52-
font-size: 1rem;
53-
font-weight: bold;
120+
display: none;
121+
margin: 0;
122+
padding: 0.75rem 0.85rem;
123+
border: 1px solid var(--dusk-border, var(--sl-color-gray-5));
124+
border-radius: var(--dusk-surface-radius, 0.5rem);
125+
background: var(--dusk-surface-raised, var(--sl-color-gray-6));
126+
color: var(--sl-color-white);
127+
font-size: var(--sl-text-sm);
128+
line-height: 1.45;
129+
}
130+
131+
.status.has-result {
132+
display: block;
54133
}
134+
55135
.valid {
56-
color: green;
136+
border-color: rgba(87, 199, 133, 0.36);
137+
background: rgba(87, 199, 133, 0.1);
57138
}
139+
58140
.invalid {
59-
color: red;
141+
border-color: rgba(227, 122, 122, 0.4);
142+
background: rgba(227, 122, 122, 0.1);
143+
}
144+
145+
@media (prefers-reduced-motion: reduce) {
146+
button {
147+
transition: none;
148+
}
149+
150+
button:hover {
151+
transform: none;
152+
}
60153
}
61154
</style>
62155
</verify-account>
@@ -94,8 +187,8 @@
94187
let account = this.accountInput.value.trim();
95188

96189
if (!account) {
97-
this.resultDisplay.textContent = "❗ Please enter an account name.";
98-
this.resultDisplay.className = "status invalid";
190+
this.resultDisplay.textContent = "Enter an account name to verify.";
191+
this.resultDisplay.className = "status invalid has-result";
99192
return;
100193
}
101194

@@ -113,11 +206,11 @@
113206
const formattedChannel = channel.charAt(0).toUpperCase() + channel.slice(1);
114207

115208
if (validAccounts && validAccounts.includes(normalizedAccount)) {
116-
this.resultDisplay.textContent = `✅ Verified: "${account}" is a valid ${formattedChannel} team account.`;
117-
this.resultDisplay.className = "status valid";
209+
this.resultDisplay.textContent = `Verified: ${account} is a valid ${formattedChannel} team account.`;
210+
this.resultDisplay.className = "status valid has-result";
118211
} else {
119-
this.resultDisplay.textContent = `❌ Not Verified: "${account}" is not a valid ${formattedChannel} team account.`;
120-
this.resultDisplay.className = "status invalid";
212+
this.resultDisplay.textContent = `Not verified: ${account} is not listed as a valid ${formattedChannel} team account.`;
213+
this.resultDisplay.className = "status invalid has-result";
121214
}
122215
}
123216
}

src/content/docs/operator/FAQ.md renamed to src/content/docs/operator/faq.md

File renamed without changes.

0 commit comments

Comments
 (0)