Skip to content

Commit e0a7818

Browse files
RavelloHRavelloH
committed
opti: ui improvement
1 parent f0a230a commit e0a7818

22 files changed

Lines changed: 1223 additions & 857 deletions

‎src/app/[locale]/app/(root)/manage/version-updates/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ export default async function VersionUpdatesPage({
185185
title={messages.managementNav.versionUpdates}
186186
subtitle={labels.subtitle}
187187
actions={
188-
<Button variant="outline" size="sm" asChild>
188+
<Button variant="outline" asChild>
189189
<Link href={REPO_RELEASES_URL} target="_blank" rel="noreferrer">
190190
<RiExternalLinkLine />
191191
{labels.source}
@@ -344,7 +344,7 @@ export default async function VersionUpdatesPage({
344344
currentCommit={runtimeCommit}
345345
labels={detailLabels}
346346
/>
347-
<Button variant="outline" size="sm" asChild>
347+
<Button variant="outline" asChild>
348348
<Link
349349
href={release.htmlUrl}
350350
target="_blank"

‎src/app/[locale]/app/[teamSlug]/public-links/page.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { RiExternalLinkLine, RiLinksLine } from "@remixicon/react";
55

66
import { PageHeading } from "@/components/dashboard/page-heading";
77
import { PublicLinkCopyButton } from "@/components/dashboard/public-link-copy-button";
8+
import { PublicLinkSettingsButton } from "@/components/dashboard/public-link-settings-button";
89
import { Badge } from "@/components/ui/badge";
9-
import { Button } from "@/components/ui/button";
1010
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
1111
import {
1212
Table,
@@ -145,17 +145,18 @@ export default async function TeamPublicLinksPage({
145145
</Badge>
146146
</TableCell>
147147
<TableCell>
148-
<div className="flex justify-end gap-1">
148+
<div className="flex justify-end gap-2">
149149
{enabled ? (
150150
<PublicLinkCopyButton
151151
value={publicUrl}
152152
label={copy.copyLink}
153153
copiedLabel={copy.linkCopied}
154154
/>
155155
) : null}
156-
<Button asChild variant="outline" size="sm">
157-
<Link href={settingsHref}>{copy.viewSettings}</Link>
158-
</Button>
156+
<PublicLinkSettingsButton
157+
href={settingsHref}
158+
label={copy.viewSettings}
159+
/>
159160
</div>
160161
</TableCell>
161162
</TableRow>

‎src/app/globals.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,47 @@
140140
}
141141
}
142142

143+
@supports (-webkit-touch-callout: none) {
144+
* {
145+
-ms-overflow-style: auto;
146+
scrollbar-width: auto;
147+
}
148+
149+
*::-webkit-scrollbar {
150+
display: initial;
151+
width: initial;
152+
height: initial;
153+
}
154+
}
155+
156+
html[data-native-scrollbars="true"] *,
157+
html[data-native-scrollbars="true"] {
158+
-ms-overflow-style: auto;
159+
scrollbar-width: auto;
160+
}
161+
162+
html[data-native-scrollbars="true"] *::-webkit-scrollbar,
163+
html[data-native-scrollbars="true"]::-webkit-scrollbar {
164+
display: initial;
165+
width: initial;
166+
height: initial;
167+
}
168+
169+
@media (hover: hover) and (-webkit-min-device-pixel-ratio: 0) {
170+
@supports (font: -apple-system-body) {
171+
* {
172+
-ms-overflow-style: auto;
173+
scrollbar-width: auto;
174+
}
175+
176+
*::-webkit-scrollbar {
177+
display: initial;
178+
width: initial;
179+
height: initial;
180+
}
181+
}
182+
}
183+
143184
@media (prefers-reduced-motion: reduce) {
144185
body {
145186
animation: none;

‎src/components/dashboard/admin-sites-management-client.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { toast } from "sonner";
77

88
import { useDashboardQueryControls } from "@/components/dashboard/dashboard-query-provider";
99
import { DataTableSwitch } from "@/components/dashboard/data-table-switch";
10+
import { TableActionButton } from "@/components/dashboard/table-action-button";
1011
import { AutoTransition } from "@/components/ui/auto-transition";
1112
import { Button } from "@/components/ui/button";
1213
import {
@@ -16,7 +17,6 @@ import {
1617
CardHeader,
1718
CardTitle,
1819
} from "@/components/ui/card";
19-
import { Clickable } from "@/components/ui/clickable";
2020
import { Input } from "@/components/ui/input";
2121
import { Label } from "@/components/ui/label";
2222
import { Spinner } from "@/components/ui/spinner";
@@ -266,19 +266,17 @@ export function AdminSitesManagementClient({
266266
</TableCell>
267267
<TableCell className="text-right">
268268
{activeTeam ? (
269-
<Clickable
269+
<TableActionButton
270270
onClick={() => {
271271
navigateWithTransition(
272272
router,
273273
`/${locale}/app/${activeTeam.slug}/${siteSlug(site)}`,
274274
);
275275
}}
276-
className="size-6 text-muted-foreground hover:text-foreground"
277-
aria-label={t.open}
278-
title={t.open}
276+
label={t.open}
279277
>
280278
<RiLineChartLine className="size-4" />
281-
</Clickable>
279+
</TableActionButton>
282280
) : null}
283281
</TableCell>
284282
</TableRow>

‎src/components/dashboard/admin-teams-management-client.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { toast } from "sonner";
77

88
import { useDashboardQueryControls } from "@/components/dashboard/dashboard-query-provider";
99
import { DataTableSwitch } from "@/components/dashboard/data-table-switch";
10+
import { TableActionButton } from "@/components/dashboard/table-action-button";
1011
import { AutoTransition } from "@/components/ui/auto-transition";
1112
import { Button } from "@/components/ui/button";
1213
import {
@@ -16,7 +17,6 @@ import {
1617
CardHeader,
1718
CardTitle,
1819
} from "@/components/ui/card";
19-
import { Clickable } from "@/components/ui/clickable";
2020
import { Input } from "@/components/ui/input";
2121
import { Label } from "@/components/ui/label";
2222
import { Spinner } from "@/components/ui/spinner";
@@ -230,32 +230,28 @@ export function AdminTeamsManagementClient({
230230
</TableCell>
231231
<TableCell className="text-right">
232232
<div className="inline-flex items-center justify-end gap-2">
233-
<Clickable
233+
<TableActionButton
234234
onClick={() => {
235235
navigateWithTransition(
236236
router,
237237
`/${locale}/app/${team.slug}`,
238238
);
239239
}}
240-
className="size-6 text-muted-foreground hover:text-foreground"
241-
aria-label={t.open}
242-
title={t.open}
240+
label={t.open}
243241
>
244242
<RiArrowRightLine className="size-4" />
245-
</Clickable>
246-
<Clickable
243+
</TableActionButton>
244+
<TableActionButton
247245
onClick={() => {
248246
navigateWithTransition(
249247
router,
250248
`/${locale}/app/${team.slug}/settings`,
251249
);
252250
}}
253-
className="size-6 text-muted-foreground hover:text-foreground"
254-
aria-label={t.settings}
255-
title={t.settings}
251+
label={t.settings}
256252
>
257253
<RiSettings3Line className="size-4" />
258-
</Clickable>
254+
</TableActionButton>
259255
</div>
260256
</TableCell>
261257
</TableRow>

‎src/components/dashboard/admin-users-management-client.tsx‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { toast } from "sonner";
66

77
import { useDashboardQueryControls } from "@/components/dashboard/dashboard-query-provider";
88
import { DataTableSwitch } from "@/components/dashboard/data-table-switch";
9+
import { TableActionButton } from "@/components/dashboard/table-action-button";
910
import {
1011
AlertDialog,
1112
AlertDialogAction,
@@ -25,7 +26,6 @@ import {
2526
CardHeader,
2627
CardTitle,
2728
} from "@/components/ui/card";
28-
import { Clickable } from "@/components/ui/clickable";
2929
import { Input } from "@/components/ui/input";
3030
import { Label } from "@/components/ui/label";
3131
import {
@@ -351,36 +351,26 @@ export function AdminUsersManagementClient({
351351
{shortDateTime(locale, user.createdAt, timeZone)}
352352
</TableCell>
353353
<TableCell className="text-right">
354-
<Clickable
354+
<TableActionButton
355355
onClick={() => {
356356
setPendingDeleteUserId(user.id);
357357
setDeleteUserDialogOpen(true);
358358
}}
359359
disabled={
360360
deletingUserId !== null || user.id === currentUserId
361361
}
362-
className="size-6 text-destructive/80 hover:text-destructive"
363-
aria-label={t.delete}
364-
title={t.delete}
362+
label={t.delete}
363+
tone="destructive"
364+
transitionKey={
365+
deletingUserId === user.id ? "deleting" : "delete"
366+
}
365367
>
366-
<AutoTransition className="inline-flex items-center justify-center">
367-
{deletingUserId === user.id ? (
368-
<span
369-
key="deleting"
370-
className="inline-flex items-center justify-center"
371-
>
372-
<Spinner className="size-3.5" />
373-
</span>
374-
) : (
375-
<span
376-
key="delete"
377-
className="inline-flex items-center justify-center"
378-
>
379-
<RiDeleteBinLine className="size-4" />
380-
</span>
381-
)}
382-
</AutoTransition>
383-
</Clickable>
368+
{deletingUserId === user.id ? (
369+
<Spinner className="size-3.5" />
370+
) : (
371+
<RiDeleteBinLine className="size-4" />
372+
)}
373+
</TableActionButton>
384374
</TableCell>
385375
</TableRow>
386376
))}

0 commit comments

Comments
 (0)