Skip to content

Commit 332d737

Browse files
NicellNicell
authored
feat: Style adjustments
* Fix AppHeader differences + genericmodal * use bluetooth icon * Improve connect modal * Fix overall app sizing * Add Inter font
1 parent 4d05866 commit 332d737

25 files changed

+237
-168
lines changed

‎package-lock.json‎

Lines changed: 16 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@
1313
"build-storybook": "storybook build"
1414
},
1515
"dependencies": {
16-
"@heroicons/react": "^2.1.4",
1716
"@tauri-apps/api": "^2.0.0-beta.16",
1817
"@tauri-apps/plugin-cli": "^2.0.0-beta.8",
1918
"@zmkfirmware/zmk-studio-ts-client": "^0.0.16",
2019
"emittery": "^1.0.3",
2120
"immer": "^10.1.1",
21+
"lucide-react": "^0.445.0",
2222
"react": "^18.2.0",
2323
"react-aria-components": "^1.2.1",
2424
"react-dom": "^18.2.0",

‎public/Inter.woff2‎

86.5 KB
Binary file not shown.

‎public/OpenGorton-Bold.otf‎

-8.7 KB
Binary file not shown.

‎public/OpenGorton-Regular.otf‎

-8.62 KB
Binary file not shown.

‎src/AboutModal.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import mekiboDarkMode from "./assets/mekibo-dark-mode.png";
4040

4141
import splitkb from "./assets/splitkb.png";
4242
import splitkbDarkMode from "./assets/splitkb-dark-mode.png";
43+
import { GenericModal } from "./GenericModal";
4344

4445
export interface AboutModalProps {
4546
open: boolean;
@@ -177,9 +178,9 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
177178
const ref = useModalRef(open, true);
178179

179180
return (
180-
<dialog
181+
<GenericModal
181182
ref={ref}
182-
className="p-5 rounded-lg border-text-base border min-w-min w-[70vw]"
183+
className="min-w-min w-[70vw]"
183184
onClose={onClose}
184185
>
185186
<div className="flex justify-between items-start">
@@ -238,6 +239,6 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
238239
);
239240
})}
240241
</div>
241-
</dialog>
242+
</GenericModal>
242243
);
243244
};

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ function App() {
295295
open={showLicenseNotice}
296296
onClose={() => setShowLicenseNotice(false)}
297297
/>
298-
<div className="bg-bg-base text-text-base h-full w-full min-w-min inline-grid grid-cols-[auto] grid-rows-[auto_1fr_auto]">
298+
<div className="bg-base-100 text-base-content h-full max-h-[100vh] w-full max-w-[100vw] inline-grid grid-cols-[auto] grid-rows-[auto_1fr_auto] overflow-hidden">
299299
<AppHeader
300300
connectedDeviceLabel={connectedDeviceName}
301301
canUndo={canUndo}

‎src/AppFooter.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ export const AppFooter = ({
88
onShowLicenseNotice,
99
}: AppFooterProps) => {
1010
return (
11-
<div className="grid justify-center m-1">
11+
<div className="grid justify-center p-1 bg-base-200">
1212
<div>
1313
<span>&copy; 2024 - The ZMK Contributors</span> -{" "}
14-
<a className="hover:text-accent hover:cursor-pointer" onClick={onShowAbout}>
14+
<a className="hover:text-primary hover:cursor-pointer" onClick={onShowAbout}>
1515
About ZMK Studio
1616
</a>{" "}
1717
-{" "}
18-
<a className="hover:text-accent hover:cursor-pointer" onClick={onShowLicenseNotice}>
18+
<a className="hover:text-primary hover:cursor-pointer" onClick={onShowLicenseNotice}>
1919
License NOTICE
2020
</a>
2121
</div>

‎src/AppHeader.tsx‎

Lines changed: 62 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@ import {
77
} from "react-aria-components";
88
import { useConnectedDeviceData } from "./rpc/useConnectedDeviceData";
99
import { useSub } from "./usePubSub";
10-
import {
11-
ArrowUturnLeftIcon,
12-
ArrowUturnRightIcon,
13-
} from "@heroicons/react/24/solid";
1410
import { useContext, useEffect, useState } from "react";
1511
import { useModalRef } from "./misc/useModalRef";
1612
import { LockStateContext } from "./rpc/LockStateContext";
1713
import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
1814
import { ConnectionContext } from "./rpc/ConnectionContext";
15+
import { ChevronDown, Undo2, Redo2, Save, Trash2 } from "lucide-react";
16+
import { Tooltip } from "./misc/Tooltip";
17+
import { GenericModal } from "./GenericModal";
1918

2019
export interface AppHeaderProps {
2120
connectedDeviceLabel?: string;
@@ -66,12 +65,12 @@ export const AppHeader = ({
6665
);
6766

6867
return (
69-
<header className="top-0 left-0 right-0 grid grid-cols-[1fr_auto_1fr] items-center justify-between border-b border-text-base">
70-
<p className="px-3">ZMK Studio</p>
71-
<dialog
72-
ref={showSettingsRef}
73-
className="p-5 rounded-lg border-text-base border max-w-[50vw]"
74-
>
68+
<header className="top-0 left-0 right-0 grid grid-cols-[1fr_auto_1fr] items-center justify-between h-10 max-w-full">
69+
<div className="flex px-3 items-center gap-1">
70+
<img src="/zmk.svg" alt="ZMK Logo" className="h-8 rounded" />
71+
<p>Studio</p>
72+
</div>
73+
<GenericModal ref={showSettingsRef} className="max-w-[50vw]">
7574
<h2 className="my-2 text-lg">Settings Reset</h2>
7675
<div>
7776
<p>
@@ -80,83 +79,88 @@ export const AppHeader = ({
8079
</p>
8180
<p>Continue?</p>
8281
<div className="flex justify-end my-2 gap-3">
83-
<button onClick={() => setShowSettingsReset(false)}>Cancel</button>
84-
<button
85-
onClick={() => {
82+
<Button
83+
className="rounded bg-base-200 hover:bg-base-300 px-3 py-2"
84+
onPress={() => setShowSettingsReset(false)}
85+
>
86+
Cancel
87+
</Button>
88+
<Button
89+
className="rounded bg-base-200 hover:bg-base-300 px-3 py-2"
90+
onPress={() => {
8691
setShowSettingsReset(false);
8792
onResetSettings?.();
8893
}}
8994
>
9095
Reset Settings
91-
</button>
96+
</Button>
9297
</div>
9398
</div>
94-
</dialog>
99+
</GenericModal>
95100
<MenuTrigger>
96101
<Button
97-
className="text-center enabled:after:content-['⏷'] after:relative after:left-2 pr-3"
102+
className="text-center rac-disabled:opacity-0 hover:bg-base-300 transition-all duration-100 p-1 pl-2 rounded-lg"
98103
isDisabled={!connectedDeviceLabel}
99104
>
100105
{connectedDeviceLabel}
106+
<ChevronDown className="inline-block w-4" />
101107
</Button>
102108
<Popover>
103-
<Menu className="border rounded bg-bg-base cursor-pointer">
104-
<MenuItem className="p-1 hover:text-accent" onAction={onDisconnect}>
109+
<Menu className="shadow-md rounded bg-base-100 text-base-content cursor-pointer overflow-hidden">
110+
<MenuItem className="px-2 py-1 hover:bg-base-200" onAction={onDisconnect}>
105111
Disconnect
106112
</MenuItem>
107113
<MenuItem
108-
className="p-1 hover:text-accent"
114+
className="px-2 py-1 hover:bg-base-200"
109115
onAction={() => setShowSettingsReset(true)}
110116
>
111117
Settings Reset
112118
</MenuItem>
113119
</Menu>
114120
</Popover>
115121
</MenuTrigger>
116-
<div className="flex justify-end">
122+
<div className="flex justify-end gap-1 px-2">
117123
{onUndo && (
118-
<button
119-
type="button"
120-
className="flex justify-center items-center px-3 py-1.5 enabled:hover:text-accent disabled:text-gray-500"
121-
disabled={!canUndo}
122-
onClick={onUndo}
123-
>
124-
<ArrowUturnLeftIcon
125-
className="inline-block w-4 mx-1"
126-
aria-label="Undo"
127-
/>
128-
</button>
124+
<Tooltip label="Undo">
125+
<Button
126+
className="flex items-center justify-center p-1.5 rounded enabled:hover:bg-base-300 disabled:opacity-50"
127+
isDisabled={!canUndo}
128+
onPress={onUndo}
129+
>
130+
<Undo2 className="inline-block w-4 mx-1" aria-label="Undo" />
131+
</Button>
132+
</Tooltip>
129133
)}
130134

131135
{onRedo && (
132-
<button
133-
type="button"
134-
className="flex items-center justify-center px-3 py-1.5 enabled:hover:text-accent disabled:text-gray-500"
135-
disabled={!canRedo}
136-
onClick={onRedo}
137-
>
138-
<ArrowUturnRightIcon
139-
className="inline-block w-4 mx-1"
140-
aria-label="Redo"
141-
/>
142-
</button>
136+
<Tooltip label="Redo">
137+
<Button
138+
className="flex items-center justify-center p-1.5 rounded enabled:hover:bg-base-300 disabled:opacity-50"
139+
isDisabled={!canRedo}
140+
onPress={onRedo}
141+
>
142+
<Redo2 className="inline-block w-4 mx-1" aria-label="Redo" />
143+
</Button>
144+
</Tooltip>
143145
)}
144-
<button
145-
type="button"
146-
className="px-3 py-1.5 enabled:hover:text-accent disabled:text-gray-500"
147-
disabled={!unsaved}
148-
onClick={onSave}
149-
>
150-
Save
151-
</button>
152-
<button
153-
type="button"
154-
className="px-3 py-1.5 enabled:hover:text-accent disabled:text-gray-500"
155-
onClick={onDiscard}
156-
disabled={!unsaved}
157-
>
158-
Discard
159-
</button>
146+
<Tooltip label="Save">
147+
<Button
148+
className="flex items-center justify-center p-1.5 rounded enabled:hover:bg-base-300 disabled:opacity-50"
149+
isDisabled={!unsaved}
150+
onPress={onSave}
151+
>
152+
<Save className="inline-block w-4 mx-1" aria-label="Save" />
153+
</Button>
154+
</Tooltip>
155+
<Tooltip label="Discard">
156+
<Button
157+
className="flex items-center justify-center p-1.5 rounded enabled:hover:bg-base-300 disabled:opacity-50"
158+
onPress={onDiscard}
159+
isDisabled={!unsaved}
160+
>
161+
<Trash2 className="inline-block w-4 mx-1" aria-label="Discard" />
162+
</Button>
163+
</Tooltip>
160164
</div>
161165
</header>
162166
);

0 commit comments

Comments
 (0)
⚡