mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-27 05:29:03 +08:00
feat: improve theme and usability
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user