Skip to content

Commit 1b5a8ae

Browse files
HacksoreHacksore
committed
Better UI
1 parent ee3a4bb commit 1b5a8ae

File tree

3 files changed

+53
-52
lines changed

3 files changed

+53
-52
lines changed

‎apps/desktop/src/views/settings/account.tsx

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const Developer = () => {
2626
<div className="flex flex-col gap-2">
2727
<div className="flex gap-4 pb-2">
2828
<Button
29+
size="sm"
2930
variant="outline"
3031
onClick={async () => {
3132
await invoke("open_devtools");
@@ -34,6 +35,7 @@ export const Developer = () => {
3435
Open Devtools
3536
</Button>
3637
<Button
38+
size="sm"
3739
variant="outline"
3840
onClick={() => {
3941
shell.open(platformInfo.configDir);
@@ -42,20 +44,22 @@ export const Developer = () => {
4244
Open Config Dir
4345
</Button>
4446
</div>
45-
<div className="flex flex-col gap-2 pb-4">
47+
<div className="flex items-center text-zinc-400 gap-2 pb-4">
4648
<div>
4749
<p className="text-sm">
4850
<strong>OS</strong> {platformInfo.os} {platformInfo.kernalVersion} {platformInfo.arch}
4951
</p>
5052
</div>
53+
<span className="text-xs">/</span>
5154
<div>
5255
<p className="text-sm">
53-
<strong>Tauri Version</strong> {platformInfo.tauriVersion}
56+
<strong>Tauri</strong> {platformInfo.tauriVersion}
5457
</p>
5558
</div>
59+
<span className="text-sm">/</span>
5660
<div>
5761
<p className="text-sm">
58-
<strong>App Version</strong> {platformInfo.appVersion}
62+
<strong>App</strong> {platformInfo.appVersion}
5963
</p>
6064
</div>
6165
</div>
@@ -139,7 +143,7 @@ export const Account = () => {
139143
open={showLogoutDialog}
140144
>
141145
<DialogTrigger asChild>
142-
<Button disabled={!user?.id} className="w-[100px]">
146+
<Button size="sm" disabled={!user?.id} className="w-[100px]">
143147
Logout
144148
</Button>
145149
</DialogTrigger>
@@ -180,7 +184,9 @@ export const Account = () => {
180184
open={showQuitDialog}
181185
>
182186
<DialogTrigger asChild>
183-
<Button className="w-[100px]">Quit</Button>
187+
<Button size="sm" className="w-[100px]">
188+
Quit
189+
</Button>
184190
</DialogTrigger>
185191
<DialogContent className="w-[80%]">
186192
<form
@@ -210,15 +216,6 @@ export const Account = () => {
210216
</div>
211217
<Developer />
212218
</div>
213-
214-
<div className="pt-2 flex h-full text-gray-400 items-center">
215-
<p>
216-
Found a bug? Please report them on the{" "}
217-
<a className="text-blue-400" target="_blank" rel="noreferrer" href="https://github.com/Hacksore/overlayed">
218-
github repo
219-
</a>
220-
</p>
221-
</div>
222219
</div>
223220
);
224221
};

‎apps/desktop/src/views/settings/index.tsx

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export const SettingsView = ({
1515
<div className="bg-zinc-900 w-[calc(100vw)] h-full">
1616
<Tabs
1717
defaultValue="account"
18-
className="w-full"
1918
onValueChange={value => {
2019
setCurrentTab(value);
2120
}}
@@ -26,17 +25,24 @@ export const SettingsView = ({
2625
</TabsList>
2726

2827
{update.isAvailable && <Updater update={update} />}
29-
<div className="p-4 pt-0 pb-14 overflow-auto">
30-
<div className="flex flex-col gap-4">
31-
<TabsContent tabIndex={-1} value="account">
32-
<Account />
33-
</TabsContent>
34-
<TabsContent tabIndex={-1} forceMount value="join-history">
35-
<div style={{ display: currentTab === "join-history" ? "block" : "none" }}>
36-
<JoinHistory />
37-
</div>
38-
</TabsContent>
39-
</div>
28+
<div className="p-4 pt-0">
29+
<TabsContent tabIndex={-1} value="account">
30+
<Account />
31+
</TabsContent>
32+
<TabsContent tabIndex={-1} forceMount value="join-history">
33+
<div style={{ display: currentTab === "join-history" ? "block" : "none" }}>
34+
<JoinHistory />
35+
</div>
36+
</TabsContent>
37+
</div>
38+
39+
<div className="h-10 pl-4 absolute bottom-0 w-full bg-zinc-800 text-gray-400 flex items-center">
40+
<p>
41+
Found a bug? Please report them on the{" "}
42+
<a className="text-blue-400" target="_blank" rel="noreferrer" href="https://github.com/Hacksore/overlayed">
43+
github repo
44+
</a>
45+
</p>
4046
</div>
4147
</Tabs>
4248
</div>

‎apps/desktop/src/views/settings/join-history.tsx

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,30 @@ export const JoinHistory = () => {
6262
<p className="text-sm text-gray-400 mb-2">
6363
Display join/leave events in the voice chat useful for moderation purposes
6464
</p>
65-
66-
<div className="overflow-auto nice-scroll h-[216px]">
65+
<div className="flex items-center gap-4 pb-2">
66+
<div>
67+
<Checkbox
68+
id="notification"
69+
checked={notificationsEnabled}
70+
onCheckedChange={() => {
71+
Config.set("joinHistoryNotifications", !notificationsEnabled);
72+
setNotificationsEnabled(!notificationsEnabled);
73+
}}
74+
/>
75+
<label
76+
htmlFor="notification"
77+
className="ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
78+
>
79+
Enable join/leave notifications
80+
</label>
81+
</div>
82+
<div className="flex-grow"></div>
83+
<Button size="sm" onClick={resetUserLog} variant="ghost" className="hover:bg-red-500">
84+
<span className="mr-2">Clear list</span>
85+
<Trash size={18} />
86+
</Button>
87+
</div>
88+
<div className="overflow-auto nice-scroll pb-4 h-[160px]">
6789
{[...userLog].reverse().map((item, i) => {
6890
const timeInSeconds = Math.floor(item.timestamp / 1000);
6991
const userInfoString = `${item.username} (${item.event}) <@${item.id}> <t:${timeInSeconds}:R>`;
@@ -96,30 +118,6 @@ export const JoinHistory = () => {
96118
);
97119
})}
98120
</div>
99-
100-
<div className="flex items-center gap-4 mt-4 pb-2">
101-
<div>
102-
<Checkbox
103-
id="notification"
104-
checked={notificationsEnabled}
105-
onCheckedChange={() => {
106-
Config.set("joinHistoryNotifications", !notificationsEnabled);
107-
setNotificationsEnabled(!notificationsEnabled);
108-
}}
109-
/>
110-
<label
111-
htmlFor="notification"
112-
className="ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
113-
>
114-
Enable join/leave notifications
115-
</label>
116-
</div>
117-
<div className="flex-grow"></div>
118-
<Button onClick={resetUserLog} variant="ghost" className="hover:bg-red-500">
119-
<span className="mr-2">Clear list</span>
120-
<Trash size={18} />
121-
</Button>
122-
</div>
123121
</div>
124122
);
125123
};

0 commit comments

Comments
 (0)