Skip to content

Commit

Permalink
Better UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hacksore
Hacksore committed Feb 22, 2024
1 parent ee3a4bb commit 1b5a8ae
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 52 deletions.
25 changes: 11 additions & 14 deletions apps/desktop/src/views/settings/account.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const Developer = () => {
<div className="flex flex-col gap-2">
<div className="flex gap-4 pb-2">
<Button
size="sm"
variant="outline"
onClick={async () => {
await invoke("open_devtools");
Expand All @@ -34,6 +35,7 @@ export const Developer = () => {
Open Devtools
</Button>
<Button
size="sm"
variant="outline"
onClick={() => {
shell.open(platformInfo.configDir);
Expand All @@ -42,20 +44,22 @@ export const Developer = () => {
Open Config Dir
</Button>
</div>
<div className="flex flex-col gap-2 pb-4">
<div className="flex items-center text-zinc-400 gap-2 pb-4">
<div>
<p className="text-sm">
<strong>OS</strong> {platformInfo.os} {platformInfo.kernalVersion} {platformInfo.arch}
</p>
</div>
<span className="text-xs">/</span>
<div>
<p className="text-sm">
<strong>Tauri Version</strong> {platformInfo.tauriVersion}
<strong>Tauri</strong> {platformInfo.tauriVersion}
</p>
</div>
<span className="text-sm">/</span>
<div>
<p className="text-sm">
<strong>App Version</strong> {platformInfo.appVersion}
<strong>App</strong> {platformInfo.appVersion}
</p>
</div>
</div>
Expand Down Expand Up @@ -139,7 +143,7 @@ export const Account = () => {
open={showLogoutDialog}
>
<DialogTrigger asChild>
<Button disabled={!user?.id} className="w-[100px]">
<Button size="sm" disabled={!user?.id} className="w-[100px]">
Logout
</Button>
</DialogTrigger>
Expand Down Expand Up @@ -180,7 +184,9 @@ export const Account = () => {
open={showQuitDialog}
>
<DialogTrigger asChild>
<Button className="w-[100px]">Quit</Button>
<Button size="sm" className="w-[100px]">
Quit
</Button>
</DialogTrigger>
<DialogContent className="w-[80%]">
<form
Expand Down Expand Up @@ -210,15 +216,6 @@ export const Account = () => {
</div>
<Developer />
</div>

<div className="pt-2 flex h-full text-gray-400 items-center">
<p>
Found a bug? Please report them on the{" "}
<a className="text-blue-400" target="_blank" rel="noreferrer" href="https://github.com/Hacksore/overlayed">
github repo
</a>
</p>
</div>
</div>
);
};
30 changes: 18 additions & 12 deletions apps/desktop/src/views/settings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export const SettingsView = ({
<div className="bg-zinc-900 w-[calc(100vw)] h-full">
<Tabs
defaultValue="account"
className="w-full"
onValueChange={value => {
setCurrentTab(value);
}}
Expand All @@ -26,17 +25,24 @@ export const SettingsView = ({
</TabsList>

{update.isAvailable && <Updater update={update} />}
<div className="p-4 pt-0 pb-14 overflow-auto">
<div className="flex flex-col gap-4">
<TabsContent tabIndex={-1} value="account">
<Account />
</TabsContent>
<TabsContent tabIndex={-1} forceMount value="join-history">
<div style={{ display: currentTab === "join-history" ? "block" : "none" }}>
<JoinHistory />
</div>
</TabsContent>
</div>
<div className="p-4 pt-0">
<TabsContent tabIndex={-1} value="account">
<Account />
</TabsContent>
<TabsContent tabIndex={-1} forceMount value="join-history">
<div style={{ display: currentTab === "join-history" ? "block" : "none" }}>
<JoinHistory />
</div>
</TabsContent>
</div>

<div className="h-10 pl-4 absolute bottom-0 w-full bg-zinc-800 text-gray-400 flex items-center">
<p>
Found a bug? Please report them on the{" "}
<a className="text-blue-400" target="_blank" rel="noreferrer" href="https://github.com/Hacksore/overlayed">
github repo
</a>
</p>
</div>
</Tabs>
</div>
Expand Down
50 changes: 24 additions & 26 deletions apps/desktop/src/views/settings/join-history.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,30 @@ export const JoinHistory = () => {
<p className="text-sm text-gray-400 mb-2">
Display join/leave events in the voice chat useful for moderation purposes
</p>

<div className="overflow-auto nice-scroll h-[216px]">
<div className="flex items-center gap-4 pb-2">
<div>
<Checkbox
id="notification"
checked={notificationsEnabled}
onCheckedChange={() => {
Config.set("joinHistoryNotifications", !notificationsEnabled);
setNotificationsEnabled(!notificationsEnabled);
}}
/>
<label
htmlFor="notification"
className="ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Enable join/leave notifications
</label>
</div>
<div className="flex-grow"></div>
<Button size="sm" onClick={resetUserLog} variant="ghost" className="hover:bg-red-500">
<span className="mr-2">Clear list</span>
<Trash size={18} />
</Button>
</div>
<div className="overflow-auto nice-scroll pb-4 h-[160px]">
{[...userLog].reverse().map((item, i) => {
const timeInSeconds = Math.floor(item.timestamp / 1000);
const userInfoString = `${item.username} (${item.event}) <@${item.id}> <t:${timeInSeconds}:R>`;
Expand Down Expand Up @@ -96,30 +118,6 @@ export const JoinHistory = () => {
);
})}
</div>

<div className="flex items-center gap-4 mt-4 pb-2">
<div>
<Checkbox
id="notification"
checked={notificationsEnabled}
onCheckedChange={() => {
Config.set("joinHistoryNotifications", !notificationsEnabled);
setNotificationsEnabled(!notificationsEnabled);
}}
/>
<label
htmlFor="notification"
className="ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Enable join/leave notifications
</label>
</div>
<div className="flex-grow"></div>
<Button onClick={resetUserLog} variant="ghost" className="hover:bg-red-500">
<span className="mr-2">Clear list</span>
<Trash size={18} />
</Button>
</div>
</div>
);
};

0 comments on commit 1b5a8ae

Please sign in to comment.