gilles/dashboard-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): enhance consistency and accessibility across components

Browse Source
This commit is contained in:
Bjorn Lammers
2025-04-23 00:06:26 +02:00
parent d6cb15aab0
commit df3c53818a
8 changed files with 79 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app/globals.css
View File

@@ -199,7 +199,7 @@
--secondary: oklch(0.31 0.03 266.71);
--secondary-foreground: oklch(0.92 0 0);
--muted: oklch(0.31 0.03 266.71);
--muted-foreground: oklch(0.72 0 0);
--muted-foreground: oklch(0.78 0 0);
--accent: oklch(0.34 0.06 267.59);
--accent-foreground: oklch(0.88 0.06 254.13);
--destructive: oklch(0.64 0.21 25.33);

33
web/src/app/icons/components/icon-search.tsx
View File

@@ -277,14 +277,14 @@ export function IconSearch({ icons }: IconSearchProps) {
{/* Filter dropdown */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm ">
<Button
variant="outline"
size="sm"
className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm"
aria-label="Filter icons"
>
<Filter className="h-4 w-4 mr-2" />
<span>Categories</span>
{selectedCategories.length > 0 && (
<Badge variant="secondary" className="ml-2 px-1.5">
{selectedCategories.length}
</Badge>
)}
<span>{selectedCategories.length > 0 ? `Filters (${selectedCategories.length})` : "Filter"}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-64 sm:w-56">
@@ -353,7 +353,13 @@ export function IconSearch({ icons }: IconSearchProps) {
{/* Clear all button */}
{(searchQuery || selectedCategories.length > 0 || sortOption !== "relevance") && (
<Button variant="outline" size="sm" onClick={clearFilters} className="flex-1 sm:flex-none cursor-pointer bg-background">
<Button
variant="outline"
size="sm"
onClick={clearFilters}
className="flex-1 sm:flex-none cursor-pointer bg-background"
aria-label="Reset all filters"
>
<X className="h-4 w-4 mr-2" />
<span>Reset</span>
</Button>
@@ -406,15 +412,15 @@ export function IconSearch({ icons }: IconSearchProps) {
<div className="flex flex-col gap-4 items-center w-full">
<IconSubmissionContent />
<div className="mt-4 flex items-center gap-2 justify-center">
<span className="text-sm text-muted-foreground">Need help?</span>
<span className="text-sm text-muted-foreground">Can't submit it yourself?</span>
<Button
className="cursor-pointer"
variant="outline"
size="sm"
onClick={() => {
setIsLazyRequestSubmitted(true)
toast("Request submitted", {
description: `We've added "${searchQuery || "this icon"}" to our request list.`,
toast("Request received!", {
description: `We've noted your request for "${searchQuery || "this icon"}". Thanks for your suggestion.`,
})
posthog.capture("lazy icon request", {
query: searchQuery,
@@ -423,7 +429,7 @@ export function IconSearch({ icons }: IconSearchProps) {
}}
disabled={isLazyRequestSubmitted}
>
Submit request
Request this icon
</Button>
</div>
</div>
@@ -432,7 +438,8 @@ export function IconSearch({ icons }: IconSearchProps) {
<>
<div className="flex justify-between items-center pb-2">
<p className="text-sm text-muted-foreground">
{filteredIcons.length} {filteredIcons.length === 1 ? "icon" : "icons"} found
Found {filteredIcons.length} icon
{filteredIcons.length !== 1 ? "s" : ""}.
</p>
<div className="flex items-center gap-1 text-xs text-muted-foreground">
{getSortIcon(sortOption)}

2
web/src/app/icons/page.tsx
View File

@@ -54,7 +54,7 @@ export default async function IconsPage() {
return (
<div className="isolate overflow-hidden">
<div className="py-8">
<div className="space-y-4 mb-8 mx-auto max-w-7xl">
<div className="space-y-4 mb-8 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h1 className="text-3xl font-bold">Icons</h1>