feat: improve theme and usability

This commit is contained in:
Thomas Camlong
2025-10-02 12:30:22 +02:00
parent 680246d50e
commit d542377d97
4 changed files with 15 additions and 18 deletions

View File

@@ -104,7 +104,7 @@ export default function DashboardPage() {
// Success state // Success state
return ( return (
<main className="container mx-auto pt-12 pb-14 px-4 sm:px-6 lg:px-8"> <main className="container mx-auto pt-12 pb-14 px-4 sm:px-6 lg:px-8">
<Card className="bg-background/50 border shadow-lg"> <Card className="bg-background/50 border-none shadow-lg">
<CardHeader> <CardHeader>
<CardTitle>Submissions Dashboard</CardTitle> <CardTitle>Submissions Dashboard</CardTitle>
<CardDescription> <CardDescription>

View File

@@ -165,8 +165,6 @@
--popover-foreground: oklch(0.1884 0.0128 248.5103); --popover-foreground: oklch(0.1884 0.0128 248.5103);
--primary: oklch(0.6723 0.1606 244.9955); --primary: oklch(0.6723 0.1606 244.9955);
--primary-foreground: oklch(1.0000 0 0); --primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.1884 0.0128 248.5103);
--secondary-foreground: oklch(0.45 0.03 256.8);
--muted: oklch(0.98 0 247.84); --muted: oklch(0.98 0 247.84);
--muted-foreground: oklch(0.55 0.02 264.36); --muted-foreground: oklch(0.55 0.02 264.36);
--accent: oklch(0.9392 0.0166 250.8453); --accent: oklch(0.9392 0.0166 250.8453);
@@ -204,8 +202,6 @@
--ring: oklch(0.6818 0.1584 243.3540); --ring: oklch(0.6818 0.1584 243.3540);
--font-sans: Open Sans, sans-serif;
--font-serif: Georgia, serif; --font-serif: Georgia, serif;
--font-mono: Menlo, monospace; --font-mono: Menlo, monospace;

View File

@@ -218,7 +218,7 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
<AuroraText colors={["#FA5352", "#FA5352", "orange"]}>dashboard icons</AuroraText> <AuroraText colors={["#FA5352", "#FA5352", "orange"]}>dashboard icons</AuroraText>
</h1> </h1>
<p className="text-sm sm:text-base md:text-xl text-muted-foreground leading-relaxed mb-8 font-light tracking-wide max-w-2xl mx-auto px-4 motion-preset-slide-down motion-duration-500"> <p className="text-sm sm:text-base md:text-xl text-muted-foreground leading-relaxed mb-8 font-medium tracking-wide max-w-2xl mx-auto px-4 motion-preset-slide-down motion-duration-500">
A collection of{" "} A collection of{" "}
<NumberTicker value={totalIcons} startValue={1000} className="font-bold tracking-tighter text-muted-foreground" /> curated icons <NumberTicker value={totalIcons} startValue={1000} className="font-bold tracking-tighter text-muted-foreground" /> curated icons
for services, applications and tools, designed specifically for dashboards and app directories. for services, applications and tools, designed specifically for dashboards and app directories.
@@ -277,8 +277,8 @@ export default function GiveUsAStarButton({ stars }: { stars: string | number })
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<h5 className="text-sm font-medium text-secondary-foreground">How your star helps us:</h5> <h5 className="text-sm font-medium text-muted-foreground">How your star helps us:</h5>
<ul className="text-xs text-secondary-foreground/80 space-y-1.5"> <ul className="text-xs text-muted-foreground/80 space-y-1.5">
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<TrendingUp className="h-3.5 w-3.5 text-primary flex-shrink-0 mt-0.5" /> <TrendingUp className="h-3.5 w-3.5 text-primary flex-shrink-0 mt-0.5" />
<span>Increases our visibility in GitHub search results</span> <span>Increases our visibility in GitHub search results</span>
@@ -310,7 +310,7 @@ export default function GiveUsAStarButton({ stars }: { stars: string | number })
<Button <Button
variant="link" variant="link"
size="sm" size="sm"
className="flex items-center gap-1 text-xs text-secondary-foreground" className="flex items-center gap-1 text-xs text-muted-foreground"
onClick={() => onClick={() =>
window.open("https://docs.github.com/get-started/exploring-projects-on-github/saving-repositories-with-stars", "_blank") window.open("https://docs.github.com/get-started/exploring-projects-on-github/saving-repositories-with-stars", "_blank")
} }
@@ -360,8 +360,8 @@ export function GiveUsLoveButton() {
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<h5 className="text-sm font-medium text-secondary-foreground">Our Privacy Promise:</h5> <h5 className="text-sm font-medium text-muted-foreground">Our Privacy Promise:</h5>
<ul className="text-xs text-secondary-foreground/80 space-y-1.5"> <ul className="text-xs text-muted-foreground/80 space-y-1.5">
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<span className="text-primary font-bold">✓</span> <span className="text-primary font-bold">✓</span>
<span>We don't track your browsing habits</span> <span>We don't track your browsing habits</span>
@@ -380,11 +380,11 @@ export function GiveUsLoveButton() {
<Separator className="bg-secondary/20" /> <Separator className="bg-secondary/20" />
<div className="space-y-2"> <div className="space-y-2">
<h5 className="text-sm font-medium text-secondary-foreground flex items-center gap-2"> <h5 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
<Share2 className="h-4 w-4 text-primary" /> <Share2 className="h-4 w-4 text-primary" />
Spread the word Spread the word
</h5> </h5>
<p className="text-xs text-secondary-foreground/80"> <p className="text-xs text-muted-foreground/80">
Don't want to disable your ad blocker? You can still help us by sharing our website with others who might find it useful. Don't want to disable your ad blocker? You can still help us by sharing our website with others who might find it useful.
</p> </p>
</div> </div>
@@ -428,8 +428,8 @@ export function GiveUsMoneyButton() {
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<h5 className="text-sm font-medium text-secondary-foreground">Where your money goes:</h5> <h5 className="text-sm font-medium text-muted-foreground">Where your money goes:</h5>
<ul className="text-xs text-secondary-foreground/80 space-y-1.5"> <ul className="text-xs text-muted-foreground/80 space-y-1.5">
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<Server className="h-3.5 w-3.5 text-primary flex-shrink-0 mt-0.5" /> <Server className="h-3.5 w-3.5 text-primary flex-shrink-0 mt-0.5" />
<span>Hosting and infrastructure costs</span> <span>Hosting and infrastructure costs</span>
@@ -456,7 +456,7 @@ export function GiveUsMoneyButton() {
</Button> </Button>
</Link> </Link>
<Link href={`${openCollectiveUrl}/transactions`} target="_blank" rel="noopener noreferrer"> <Link href={`${openCollectiveUrl}/transactions`} target="_blank" rel="noopener noreferrer">
<Button variant="link" size="sm" className="flex items-center gap-1 text-xs text-secondary-foreground"> <Button variant="link" size="sm" className="flex items-center gap-1 text-xs text-muted-foreground">
View transactions View transactions
<ExternalLink className="h-3 w-3" /> <ExternalLink className="h-3 w-3" />
</Button> </Button>

View File

@@ -330,10 +330,11 @@ export function SubmissionsDataTable({
<div className="space-y-4"> <div className="space-y-4">
{/* Search and Filters */} {/* Search and Filters */}
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
<div className="relative flex-1"> <div className="relative flex-1 border rounded-md bg-background">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
<Input <Input
placeholder="Search submissions..." placeholder="Search submissions..."
autoFocus
value={globalFilter ?? ""} value={globalFilter ?? ""}
onChange={(event) => setGlobalFilter(String(event.target.value))} onChange={(event) => setGlobalFilter(String(event.target.value))}
className="pl-10" className="pl-10"
@@ -377,7 +378,7 @@ export function SubmissionsDataTable({
</TableRow> </TableRow>
))} ))}
</TableHeader> </TableHeader>
<TableBody> <TableBody className="bg-background">
{table.getRowModel().rows?.length ? ( {table.getRowModel().rows?.length ? (
(() => { (() => {
let lastStatus: string | null = null let lastStatus: string | null = null