Skip to content

Commit 925ea86

Browse files
MioYuuIHMioYuuIH
committed
Update JupyterHub UI to black and gray color scheme
- Change AMD logo color to black in navigation bar - Update all buttons from blue to dark/gray theme - Modify Admin UI React components button colors - Update spawn page resource tags and accent colors - Add home.html template with dark theme buttons - Fix Launch button not enabled on default resource selection
1 parent 8ad11b4 commit 925ea86

11 files changed

Lines changed: 138 additions & 42 deletions

File tree

‎dockerfiles/Hub/admin-ui/src/components/CreateUserModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ export function CreateUserModal({ show, onHide, onSuccess }: Props) {
230230
Cancel
231231
</Button>
232232
<Button
233-
variant="primary"
233+
variant="dark"
234234
onClick={handleSubmit}
235235
disabled={loading}
236236
>
@@ -246,10 +246,10 @@ export function CreateUserModal({ show, onHide, onSuccess }: Props) {
246246
</>
247247
) : (
248248
<>
249-
<Button variant="outline-primary" onClick={copyToClipboard}>
249+
<Button variant="outline-dark" onClick={copyToClipboard}>
250250
<i className="bi bi-clipboard me-1"></i> Copy to Clipboard
251251
</Button>
252-
<Button variant="primary" onClick={handleClose}>
252+
<Button variant="dark" onClick={handleClose}>
253253
Done
254254
</Button>
255255
</>

‎dockerfiles/Hub/admin-ui/src/components/EditGroupModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export function EditGroupModal({ show, group, onHide, onUpdate, onDelete }: Prop
189189
</option>
190190
))}
191191
</Form.Select>
192-
<Button variant="primary" onClick={handleAddUser} disabled={loading || loadingUsers || !newUsername}>
192+
<Button variant="dark" onClick={handleAddUser} disabled={loading || loadingUsers || !newUsername}>
193193
Add user
194194
</Button>
195195
</InputGroup>
@@ -239,7 +239,7 @@ export function EditGroupModal({ show, group, onHide, onUpdate, onDelete }: Prop
239239
/>
240240
</div>
241241
<div className="col-2">
242-
<Button variant="primary" onClick={handleAddProperty} disabled={loading} className="w-100">
242+
<Button variant="dark" onClick={handleAddProperty} disabled={loading} className="w-100">
243243
Add Item
244244
</Button>
245245
</div>
@@ -275,7 +275,7 @@ export function EditGroupModal({ show, group, onHide, onUpdate, onDelete }: Prop
275275
<Button variant="secondary" onClick={onHide} disabled={loading} className="me-2">
276276
Back
277277
</Button>
278-
<Button variant="primary" onClick={handleApply} disabled={loading}>
278+
<Button variant="dark" onClick={handleApply} disabled={loading}>
279279
{loading ? 'Applying...' : 'Apply'}
280280
</Button>
281281
</div>

‎dockerfiles/Hub/admin-ui/src/components/EditUserModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@ export function EditUserModal({ show, user, onHide, onUpdate }: Props) {
285285
<Button variant="secondary" onClick={handleCancelEdit} disabled={loading}>
286286
Cancel
287287
</Button>
288-
<Button variant="primary" onClick={handleSaveChanges} disabled={loading}>
288+
<Button variant="dark" onClick={handleSaveChanges} disabled={loading}>
289289
{loading ? 'Saving...' : 'Save Changes'}
290290
</Button>
291291
</>
@@ -294,7 +294,7 @@ export function EditUserModal({ show, user, onHide, onUpdate }: Props) {
294294
<Button variant="secondary" onClick={onHide}>
295295
Close
296296
</Button>
297-
<Button variant="primary" onClick={handleStartEdit}>
297+
<Button variant="dark" onClick={handleStartEdit}>
298298
<i className="bi bi-pencil me-1"></i> Edit User
299299
</Button>
300300
</>

‎dockerfiles/Hub/admin-ui/src/components/SetPasswordModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export function SetPasswordModal({ show, user, onHide }: Props) {
151151
</Modal.Body>
152152
<Modal.Footer>
153153
{success ? (
154-
<Button variant="primary" onClick={onHide}>
154+
<Button variant="dark" onClick={onHide}>
155155
Done
156156
</Button>
157157
) : (
@@ -160,7 +160,7 @@ export function SetPasswordModal({ show, user, onHide }: Props) {
160160
Cancel
161161
</Button>
162162
<Button
163-
variant="primary"
163+
variant="dark"
164164
onClick={handleSubmit}
165165
disabled={loading || !password}
166166
>

‎dockerfiles/Hub/admin-ui/src/pages/GroupList.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export function GroupList() {
116116
{/* Top Controls */}
117117
<div className="d-flex justify-content-between align-items-center mb-3">
118118
<div className="d-flex gap-2">
119-
<Button variant="primary" onClick={() => setShowCreateModal(true)}>
119+
<Button variant="dark" onClick={() => setShowCreateModal(true)}>
120120
Create Group
121121
</Button>
122122
</div>
@@ -182,7 +182,7 @@ export function GroupList() {
182182
</td>
183183
<td>
184184
<Button
185-
variant="primary"
185+
variant="dark"
186186
size="sm"
187187
onClick={() => handleEditGroup(group)}
188188
className="me-2"
@@ -227,7 +227,7 @@ export function GroupList() {
227227
<Button variant="secondary" onClick={() => setShowCreateModal(false)} disabled={createLoading}>
228228
Cancel
229229
</Button>
230-
<Button variant="primary" onClick={handleCreateGroup} disabled={createLoading}>
230+
<Button variant="dark" onClick={handleCreateGroup} disabled={createLoading}>
231231
{createLoading ? 'Creating...' : 'Create Group'}
232232
</Button>
233233
</Modal.Footer>

‎dockerfiles/Hub/admin-ui/src/pages/UserList.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -384,26 +384,26 @@ export function UserList() {
384384
{/* Top Controls */}
385385
<div className="d-flex justify-content-between align-items-center mb-3">
386386
<div className="d-flex gap-2">
387-
<Button variant="primary" onClick={() => setShowCreateModal(true)}>
387+
<Button variant="dark" onClick={() => setShowCreateModal(true)}>
388388
Add Users
389389
</Button>
390390
<Button
391-
variant="primary"
391+
variant="dark"
392392
onClick={handleStartAll}
393393
disabled={actionLoading === 'start-all'}
394394
>
395395
{actionLoading === 'start-all' ? <Spinner animation="border" size="sm" /> : 'Start All'}
396396
</Button>
397397
<Button
398-
variant="warning"
398+
variant="secondary"
399399
onClick={handleStopAll}
400400
disabled={actionLoading === 'stop-all'}
401401
>
402402
{actionLoading === 'stop-all' ? <Spinner animation="border" size="sm" /> : 'Stop All'}
403403
</Button>
404404
{quotaEnabled && (
405405
<Button
406-
variant="info"
406+
variant="secondary"
407407
onClick={() => setShowBatchQuotaModal(true)}
408408
disabled={selectedUsers.size === 0}
409409
title={selectedUsers.size === 0 ? 'Select users first' : `Set quota for ${selectedUsers.size} users`}
@@ -592,7 +592,7 @@ export function UserList() {
592592
<ButtonGroup size="sm">
593593
{user.server ? (
594594
<Button
595-
variant="primary"
595+
variant="dark"
596596
onClick={() => handleStopServer(user)}
597597
disabled={actionLoading === `stop-${user.name}`}
598598
title="Stop Server"
@@ -605,7 +605,7 @@ export function UserList() {
605605
</Button>
606606
) : (
607607
<Button
608-
variant="primary"
608+
variant="dark"
609609
onClick={() => handleStartServer(user)}
610610
disabled={actionLoading === `start-${user.name}` || !!user.pending}
611611
title="Start Server"
@@ -824,7 +824,7 @@ export function UserList() {
824824
Cancel
825825
</Button>
826826
<Button
827-
variant="primary"
827+
variant="dark"
828828
onClick={handleBatchQuotaSave}
829829
disabled={actionLoading === 'batch-quota'}
830830
>

‎dockerfiles/Hub/templates/admin-reset-password.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ <h1>Reset Password: {{ target_user }}</h1>
6565
<div class="form-group">
6666
<input
6767
type="submit"
68-
class="btn btn-primary"
68+
class="btn btn-dark"
6969
value="Reset Password"
7070
/>
7171
<a href="{{ base_url }}admin" class="btn btn-secondary">Cancel</a>

‎dockerfiles/Hub/templates/change-password.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,11 @@ <h1>Change Password</h1>
6363
<div class="form-group">
6464
<input
6565
type="submit"
66-
class="btn btn-primary"
66+
class="btn btn-dark"
6767
value="Change Password"
6868
/>
6969
{% if not forced_change %}
70-
<a href="{{ base_url }}home" class="btn btn-default">Cancel</a>
70+
<a href="{{ base_url }}home" class="btn btn-secondary">Cancel</a>
7171
{% endif %}
7272
</div>
7373
</form>

‎dockerfiles/Hub/templates/home.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
{% extends "page.html" %}
2+
{% if announcement_home is string %}
3+
{% set announcement = announcement_home %}
4+
{% endif %}
5+
{% block main %}
6+
<div class="container">
7+
<h1 class="sr-only">JupyterHub home page</h1>
8+
<div class="row">
9+
<div class="text-center">
10+
{% if default_server.active %}<a id="stop" role="button" class="btn btn-lg btn-danger">Stop My Server</a>{% endif %}
11+
<a id="start"
12+
role="button"
13+
class="btn btn-lg btn-dark"
14+
href="{{ url }}">
15+
{% if not default_server.active %}Start{% endif %}
16+
My Server
17+
</a>
18+
</div>
19+
</div>
20+
{% if allow_named_servers %}
21+
<h2>Named Servers</h2>
22+
<p>
23+
In addition to your default server,
24+
you may have additional
25+
{% if named_server_limit_per_user > 0 %}{{ named_server_limit_per_user }}{% endif %}
26+
server(s) with names.
27+
This allows you to have more than one server running at the same time.
28+
</p>
29+
{% set named_spawners = user.all_spawners(include_default=False)|list %}
30+
<table class="server-table table table-striped">
31+
<thead>
32+
<tr>
33+
<th>Server name</th>
34+
<th>URL</th>
35+
<th>Last activity</th>
36+
<th>Actions</th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
<tr class="home-server-row add-server-row">
41+
<td colspan="4">
42+
<div class="input-group">
43+
<input class="new-server-name form-control"
44+
aria-label="server name"
45+
placeholder="name-your-server">
46+
<button role="button"
47+
type="button"
48+
class="new-server-btn btn btn-xs btn-dark">Add New Server</button>
49+
</div>
50+
</td>
51+
</tr>
52+
{% for spawner in named_spawners %}
53+
<tr class="home-server-row" data-server-name="{{ spawner.name }}">
54+
{# name #}
55+
<td>{{ spawner.name }}</td>
56+
{# url #}
57+
<td>
58+
<a class="server-link {% if not spawner.ready %}hidden{% endif %}"
59+
href="{{ user.server_url(spawner.name) }}">{{ user.server_url(spawner.name) }}</a>
60+
</td>
61+
{# activity #}
62+
<td class='time-col'>
63+
{% if spawner.last_activity %}
64+
{{ spawner.last_activity.isoformat() + 'Z' }}
65+
{% else %}
66+
Never
67+
{% endif %}
68+
</td>
69+
{# actions #}
70+
<td>
71+
<a role="button"
72+
class="stop-server btn btn-xs btn-danger{% if not spawner.active %} hidden{% endif %}"
73+
id="stop-{{ spawner.name }}">stop</a>
74+
<a role="button"
75+
class="start-server btn btn-xs btn-dark {% if spawner.active %}hidden{% endif %}"
76+
id="start-{{ spawner.name }}"
77+
href="{{ base_url }}spawn/{{ user.name }}/{{ spawner.name }}">start</a>
78+
<button role="button"
79+
class="delete-server btn btn-xs btn-danger{% if spawner.active %} hidden{% endif %}"
80+
id="delete-{{ spawner.name }}">delete</button>
81+
</td>
82+
</tr>
83+
{% endfor %}
84+
</tbody>
85+
</table>
86+
{% endif %}
87+
</div>
88+
{% endblock main %}
89+
{% block script %}
90+
{{ super() }}
91+
<script type="text/javascript">
92+
require(["home"]);
93+
</script>
94+
{% endblock script %}

‎dockerfiles/Hub/templates/page.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323

2424

25-
{% macro modal(title, btn_label=None, btn_class="btn-primary") %}
25+
{% macro modal(title, btn_label=None, btn_class="btn-dark") %}
2626
{% set key = title.replace(' ', '-').lower() %}
2727
{% set btn_label = btn_label or title %}
2828
<div class="modal fade"
@@ -145,7 +145,7 @@ <h2 class="modal-title" id="{{ key }}-label">{{ title }}</h2>
145145
{% block logo %}
146146
<span id="amd-logo" class="navbar-brand">
147147
<a href="{{ logo_url or base_url }}">
148-
<svg style="width: 120px; height: auto;" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.72 33.32" fill="currentColor">
148+
<svg style="width: 120px; height: auto; color: #000000;" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.72 33.32" fill="currentColor">
149149
<title>AMD logo</title>
150150
<path d="M33,31.14H25.21l-2.37-5.72H9.92L7.76,31.14H.14L11.78,2.26h8.34Zm-16.89-22L11.83,20.39h8.89Z" transform="translate(-0.14 -0.03)" />
151151
<path d="M61.1,2.26h6.27V31.14h-7.2v-18l-7.79,9.06h-1.1L43.49,13.1v18h-7.2V2.26h6.27L51.83,13Z" transform="translate(-0.14 -0.03)" />
@@ -224,19 +224,19 @@ <h2 class="modal-title" id="{{ key }}-label">{{ title }}</h2>
224224
{% if not user.name.startswith('github:') %}
225225
<a id="change-password"
226226
role="button"
227-
class="btn btn-sm btn-outline-contrast me-1"
227+
class="btn btn-sm btn-outline-dark me-1"
228228
href="{{ base_url }}auth/change-password">
229229
<i aria-hidden="true" class="fa fa-key"></i> Change Password
230230
</a>
231231
{% endif %}
232232
<a id="logout"
233233
role="button"
234-
class="btn btn-sm btn-outline-contrast"
234+
class="btn btn-sm btn-outline-dark"
235235
href="{{ logout_url }}"> <i aria-hidden="true" class="fa fa-sign-out"></i> Logout</a>
236236
{% else %}
237237
<a id="login"
238238
role="button"
239-
class="btn btn-sm btn-outline-contrast"
239+
class="btn btn-sm btn-outline-dark"
240240
href="{{ login_url }}">Login</a>
241241
{% endif %}
242242
</span>

0 commit comments

Comments
 (0)