Skip to content

Commit 29614f8

Browse files
flameshikariflameshikari
authored
minor update (#99)
* minor update - a little visual overhaul - fixed string typos - fixed not working light/dark themes * fix my mistakes * fix index.tsx typo * remove redundant import from tailwind.config.ts * mv Logo.tsx to components, fix var name * remove some empty lines, fix mixed indents
1 parent db41dce commit 29614f8

17 files changed

Lines changed: 80 additions & 50 deletions

‎webui/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<meta name="theme-color" content="#000000" />
7-
<title>Zerotier Controller</title>
7+
<title>ZeroTier Edge</title>
88
</head>
99
<body>
1010
<noscript>You need to enable JavaScript to run this app.</noscript>

‎webui/public/favicon.ico‎

3.06 KB
Binary file not shown.

‎webui/src/Logo.tsx‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎webui/src/components/Accordion.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default (props: {
1010
}) => {
1111
const [checked, setChecked] = createSignal(props.checked ?? false);
1212

13-
return <div class="shadow shadow-current rounded-md">
13+
return <div class="rounded-md">
1414
<div
1515
class="p-3 font-bold cursor-pointer select-none bg-neutral text-neutral-content rounded-md "
1616
classList={{

‎webui/src/components/Fieldset.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { JSX } from 'solid-js';
22

33
export default (props: { legend?: string, children: JSX.Element }) => {
4-
return <fieldset class="p-4 border-2 neutral-content">
5-
<legend class="font-bold">{props.legend}</legend>
4+
return <fieldset class="rounded-md p-4 border-2 border-white/25 neutral-content">
5+
<legend class="font-bold">&nbsp;{props.legend}&nbsp;</legend>
66
{props.children}
77
</fieldset>;
88
};

‎webui/src/components/Logo.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default () => {
2+
return <div class="font-bold font-title text-center text-3xl transition-all duration-200 md:text-4xl">
3+
<span>ZeroTier Edge</span>
4+
</div>;
5+
};

‎webui/src/components/NumberInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export default (props: {
1111
'min' | 'max' | 'step' | 'value' | 'onChange'>
1212
) => {
1313
const [local, other] = splitProps(props, ['onChange']);
14-
return <input type="number" {...other} onChange={e => local.onChange?.(parseInt(e.target.value))}/>;
14+
return <input class="input input-bordered" type="number" {...other} onChange={e => local.onChange?.(parseInt(e.target.value))}/>;
1515
};

‎webui/src/layouts/Default.Layout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import type { JSX } from 'solid-js';
22

3+
import Logo from '../components/Logo';
34

45

56
export default (props: { children: JSX.Element }) => {
67
return <div class="bg-base-100 absolute inset-0 overflow-y-auto">
78
<div class="flex flex-col items-center p-6 mb-8 bg-neutral text-neutral-content">
8-
<div class="text-xl sm:text-4xl">Manage Your Zerotier Networks</div>
9+
{Logo}
910
</div>
1011

1112
<div class="sm:max-w-8xl mx-auto">
@@ -14,4 +15,4 @@ export default (props: { children: JSX.Element }) => {
1415
</div>
1516
</div>
1617
</div>;
17-
};
18+
};

‎webui/src/views/LoginView.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createEffect, createSignal } from 'solid-js';
22
import { useClient } from '../Client';
33
import FormControl from '../components/FormControl';
4-
import Logo from '../Logo';
4+
import Logo from '../components/Logo';
55
import { useNavigate } from '@solidjs/router';
66

77

@@ -19,21 +19,23 @@ export default () => {
1919
}
2020
});
2121

22+
const auth_token = <div>
23+
<span class="font-bold">Auth Token </span>
24+
<a class="link link-primary text-sm" href="https://docs.zerotier.com/self-hosting/network-controllers/#authtoken" target="__blank">?</a>
25+
</div>
26+
2227
return <div>
2328
<div class="hero absolute inset-0 bg-base-200">
2429
<div class="hero-content flex-col lg:flex-row-reverse">
25-
<div class="card flex-shrink-0 max-w-sm shadow-2xl bg-base-100">
30+
<div class="card flex-shrink-0 max-w-sm bg-base-100">
2631
<div class="card-body">
2732
<div class="py-6">
2833
<Logo />
29-
<div class="mt-3 text-xs indent-6 opacity-50 hover:opacity-100">Manage your self-hosted ZeroTier network controller.</div>
34+
<div class="mt-3 text-xs opacity-50 hover:opacity-100 italic">manage your self-hosted ZeroTier controller</div>
3035
</div>
31-
<FormControl label="Access Token">
36+
<FormControl label={auth_token}>
3237
<div>
3338
<input type="password" value={token()} class="input input-bordered w-full" onChange={e => setToken(e.target.value.trim())} />
34-
35-
<div class="flex justify-end mt-3">
36-
<a class="link link-primary text-sm" href="https://docs.zerotier.com/self-hosting/network-controllers/#authtoken" target="__blank">Get your token?</a></div>
3739
</div>
3840
</FormControl>
3941
<div class="form-control mt-3">

‎webui/src/views/NetworkListView.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,17 @@ export default () => {
1919

2020
<div class="flex flex-row flex-wrap">
2121
<div class="w-52">
22-
<div class="text-2xl">Your Networks</div>
22+
<div class="font-bold text-2xl">Your Networks</div>
2323

2424
<div class="h-2"></div>
2525

26-
<div>Networks: {networks().length}</div>
26+
<div>Networks:
27+
<span class="font-bold">{networks().length}</span>
28+
</div>
2729

28-
<div>Athorized Nodes: {authorizedMemberCount()}/{totalMemberCount()}</div>
30+
<div>Authorized Nodes:
31+
<span class="font-bold">{authorizedMemberCount()} / {totalMemberCount()}</span>
32+
</div>
2933
</div>
3034

3135
<div>
@@ -36,7 +40,7 @@ export default () => {
3640
<tr>
3741
<th>NETWORK ID</th>
3842
<th>NAME</th>
39-
<th class="hidden sm:table-cell">DESCIPTION</th>
43+
<th class="hidden sm:table-cell">DESCRIPTION</th>
4044
<th class="hidden md:table-cell">SUBNET</th>
4145
<th class="hidden lg:table-cell">NODES</th>
4246
<th class="hidden xl:table-cell">CREATED</th>

0 commit comments

Comments
 (0)