opensource/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-06-28 15:30:22 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Styling changes

Browse Source
This commit is contained in:
Thomas Camlong 2025-04-18 16:51:04 +02:00
parent 783e3d1f4b
commit bc9ee8c022
No known key found for this signature in database
GPG Key ID: A678F374F428457B
6 changed files with 53 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -247,7 +247,7 @@ export function IconSearch({ icons }: IconSearchProps) {
{/* Filter dropdown */} {/* Filter dropdown */}
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer border-border shadow-sm0/10 "> <Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm ">
<Filter className="h-4 w-4 mr-2" /> <Filter className="h-4 w-4 mr-2" />
<span>Filter</span> <span>Filter</span>
{selectedCategories.length > 0 && ( {selectedCategories.length > 0 && (
@ -294,11 +294,7 @@ export function IconSearch({ icons }: IconSearchProps) {
{/* Sort dropdown */} {/* Sort dropdown */}
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm">
variant="outline"
size="sm"
className="flex-1 sm:flex-none cursor-pointer border-border shadow-sm0/10 hover:border-rose-500"
>
{getSortIcon(sortOption)} {getSortIcon(sortOption)}
<span className="ml-2">{getSortLabel(sortOption)}</span> <span className="ml-2">{getSortLabel(sortOption)}</span>
</Button> </Button>
@ -327,7 +323,7 @@ export function IconSearch({ icons }: IconSearchProps) {
{/* Clear all button */} {/* Clear all button */}
{(searchQuery || selectedCategories.length > 0 || sortOption !== "relevance") && ( {(searchQuery || selectedCategories.length > 0 || sortOption !== "relevance") && (
<Button variant="outline" size="sm" onClick={clearFilters} className="flex-1 sm:flex-none cursor-pointer border-rose-500/20"> <Button variant="outline" size="sm" onClick={clearFilters} className="flex-1 sm:flex-none cursor-pointer bg-background">
<X className="h-4 w-4 mr-2" /> <X className="h-4 w-4 mr-2" />
<span>Clear all</span> <span>Clear all</span>
</Button> </Button>
@ -361,7 +357,7 @@ export function IconSearch({ icons }: IconSearchProps) {
setSelectedCategories([]) setSelectedCategories([])
updateResults(searchQuery, [], sortOption) updateResults(searchQuery, [], sortOption)
}} }}
className="text-xs h-7 px-2 0/10 cursor-pointer" className="text-xs h-7 px-2 cursor-pointer"
> >
Clear all Clear all
</Button> </Button>

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

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

6
web/src/components/header.tsx
View File

@ -60,7 +60,7 @@ export function Header() {
<div className="hidden md:block"> <div className="hidden md:block">
<Button <Button
variant="outline" variant="outline"
className="gap-2 cursor-pointer0/10 dark:hover:bg-rose-900/30 transition-all duration-300" className="gap-2 cursor-pointer transition-all duration-300"
onClick={openCommandMenu} onClick={openCommandMenu}
> >
<Search className="h-4 w-4 transition-all duration-300" /> <Search className="h-4 w-4 transition-all duration-300" />
@ -76,7 +76,7 @@ export function Header() {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="rounded-lg cursor-pointer0/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20" className="rounded-lg cursor-pointer transition-all duration-300 hover:ring-2 "
onClick={openCommandMenu} onClick={openCommandMenu}
> >
<Search className="h-5 w-5 transition-all duration-300" /> <Search className="h-5 w-5 transition-all duration-300" />
@ -92,7 +92,7 @@ export function Header() {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="rounded-lg cursor-pointer0/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20" className="rounded-lg cursor-pointer transition-all duration-300 hover:ring-2"
asChild asChild
> >
<Link href={REPO_PATH} target="_blank" className="group"> <Link href={REPO_PATH} target="_blank" className="group">

57
web/src/components/hero.tsx
View File

@ -6,7 +6,23 @@ import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { Separator } from "@radix-ui/react-dropdown-menu" import { Separator } from "@radix-ui/react-dropdown-menu"
import { motion, useAnimation, useInView } from "framer-motion" import { motion, useAnimation, useInView } from "framer-motion"
import { Car, Code, Coffee, DollarSign, ExternalLink, Eye, GitFork, Heart, Search, Server, Share2, Star, TrendingUp } from "lucide-react" import {
Car,
Code,
Coffee,
DollarSign,
ExternalLink,
Eye,
GitFork,
Heart,
Plus,
Search,
Server,
Share2,
Sparkles,
Star,
TrendingUp,
} from "lucide-react"
import Link from "next/link" import Link from "next/link"
import { useEffect, useRef, useState } from "react" import { useEffect, useRef, useState } from "react"
import { AuroraText } from "./magicui/aurora-text" import { AuroraText } from "./magicui/aurora-text"
@ -128,7 +144,7 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
const [searchQuery, setSearchQuery] = useState("") const [searchQuery, setSearchQuery] = useState("")
return ( return (
<div className="relative my-20 w-full flex items-center justify-center overflow-hidden"> <div className="relative w-full flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-rose-500/[0.1] via-transparent to-rose-500/[0.1] blur-3xl" /> <div className="absolute inset-0 bg-gradient-to-br from-rose-500/[0.1] via-transparent to-rose-500/[0.1] blur-3xl" />
<div className="absolute inset-0 overflow-hidden pointer-events-none"> <div className="absolute inset-0 overflow-hidden pointer-events-none">
@ -188,34 +204,24 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
/> />
</div> </div>
<div className="relative z-10 container mx-auto px-4 md:px-6"> <div className="relative z-10 container mx-auto px-4 md:px-6 mt-4 py-20">
<div className="max-w-4xl mx-auto text-center flex flex-col gap-4 "> <div className="max-w-4xl mx-auto text-center flex flex-col gap-4 ">
<Link
prefetch
href="https://github.com/homarr-labs"
target="_blank"
rel="noopener noreferrer"
className="mx-auto motion-safe:motion-preset-slide-up motion-duration-1500"
>
<Card className="group p-2 px-4 flex flex-row items-center gap-2 border-2 z-10 relative glass-effect hover:scale-105 transition-all duration-300">
<Heart className="h-4 w-4 text-primary group-hover:fill-primary transition-all duration-300" />
<span className="text-sm text-foreground/70 tracking-wide">Made with love by Homarr Labs</span>
</Card>
</Link>
<h1 className="text-3xl sm:text-5xl md:text-7xl font-bold mb-4 md:mb-8 tracking-tight "> <h1 className="relative text-3xl sm:text-5xl md:text-7xl font-bold mb-4 md:mb-8 tracking-tight motion-preset-slide-up motion-duration-2000 ">
Your definitive source for Your definitive source for
<Sparkles className="absolute -right-1 -bottom-3 text-rose-500 h-8 w-8 sm:h-12 sm:w-12 md:h-16 md:w-12 motion-delay-300 motion-preset-seesaw-lg motion-scale-in-[0.5] motion-translate-x-in-[-120%] motion-translate-y-in-[-60%] motion-opacity-in-[33%] motion-rotate-in-[-1080deg] motion-blur-in-[10px] motion-duration-[1s] motion-delay-[0.13s]/scale motion-duration-[0.13s]/opacity motion-duration-[0.40s]/rotate motion-duration-[0.05s]/blur motion-delay-[0.20s]/blur motion-ease-spring-bouncier" />
<br /> <br />
<Sparkles className="absolute -left-1 -top-3 text-rose-500 h-5 w-5 sm:h-8 sm:w-8 md:h-12 md:w-12 motion-delay-300 motion-preset-seesaw-lg motion-scale-in-[0.5] motion-translate-x-in-[159%] motion-translate-y-in-[-60%] motion-opacity-in-[33%] motion-rotate-in-[-1080deg] motion-blur-in-[10px] motion-duration-[1s] motion-delay-[0.13s]/scale motion-duration-[0.13s]/opacity motion-duration-[0.40s]/rotate motion-duration-[0.05s]/blur motion-delay-[0.20s]/blur motion-ease-spring-bouncier" />
<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 mb-6 md:mb-8 leading-relaxed font-light tracking-wide max-w-2xl mx-auto px-4"> <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-2000">
A collection of <span className="font-medium ">{totalIcons}</span> curated icons for services, applications and tools, designed A collection of <span className="font-medium ">{totalIcons}</span> curated icons for services, applications and tools, designed
specifically for dashboards and app directories. specifically for dashboards and app directories.
</p> </p>
<div className="flex flex-col gap-4 max-w-3xl mx-auto">
<SearchInput searchQuery={searchQuery} setSearchQuery={setSearchQuery} totalIcons={totalIcons} /> <SearchInput searchQuery={searchQuery} setSearchQuery={setSearchQuery} totalIcons={totalIcons} />
<div className="flex gap-3 md:gap-4 flex-wrap justify-center"> <div className="w-full flex gap-3 md:gap-4 flex-wrap justify-center motion-preset-slide-down motion-duration-2000">
<Link href="/icons"> <Link href="/icons">
<InteractiveHoverButton className="rounded-md bg-input/30">Explore icons</InteractiveHoverButton> <InteractiveHoverButton className="rounded-md bg-input/30">Explore icons</InteractiveHoverButton>
</Link> </Link>
@ -225,6 +231,7 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/80 pointer-events-none" /> <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/80 pointer-events-none" />
</div> </div>
@ -258,8 +265,8 @@ export default function GiveUsAStarButton({ stars }: { stars: string | number })
What is Starring? What is Starring?
</h4> </h4>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Starring a repository on GitHub is like bookmarking it. It helps you keep track of projects you find interesting and shows Starring a repository on GitHub is like bookmarking it.<br/> It helps you keep track of projects you find interesting and shows
appreciation to the project maintainers. You can star a repository by clicking the 'Star' button, usually found in the appreciation to the project maintainers.<br/> You can star a repository by clicking the 'Star' button, usually found in the
top-right corner of the repository's page on GitHub. top-right corner of the repository's page on GitHub.
</p> </p>
</div> </div>
@ -279,6 +286,10 @@ export default function GiveUsAStarButton({ stars }: { stars: string | number })
<GitFork className="h-3.5 w-3.5 text-primary flex-shrink-0 mt-0.5" /> <GitFork className="h-3.5 w-3.5 text-primary flex-shrink-0 mt-0.5" />
<span>Encourages more forks and community involvement</span> <span>Encourages more forks and community involvement</span>
</li> </li>
<li className="flex items-start gap-2">
<Plus className="h-3.5 w-3.5 text-primary flex-shrink-0 mt-0.5" />
<span>Grow the library with more icons</span>
</li>
</ul> </ul>
</div> </div>
@ -313,7 +324,7 @@ export function GiveUsLoveButton() {
return ( return (
<HoverCard openDelay={200} closeDelay={200}> <HoverCard openDelay={200} closeDelay={200}>
<HoverCardTrigger asChild> <HoverCardTrigger asChild>
<Button variant="outline" className="h-9 md:h-10 px-4"> <Button variant="outline" className="h-9 md:h-10 px-4 cursor-pointer">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<p>Give us love</p> <p>Give us love</p>
<Heart className="h-4 w-4 ml-1 fill-red-500 text-red-500" /> <Heart className="h-4 w-4 ml-1 fill-red-500 text-red-500" />
@ -460,7 +471,7 @@ interface SearchInputProps {
function SearchInput({ searchQuery, setSearchQuery, totalIcons }: SearchInputProps) { function SearchInput({ searchQuery, setSearchQuery, totalIcons }: SearchInputProps) {
return ( return (
<form action="/icons" method="GET" className="relative w-full group"> <form action="/icons" method="GET" className="relative group">
<Input <Input
name="q" name="q"
autoFocus autoFocus

4
web/src/components/icon-submission-form.tsx
View File

@ -74,12 +74,12 @@ export function IconSubmissionForm() {
<DialogTrigger asChild> <DialogTrigger asChild>
<Button <Button
variant="outline" variant="outline"
className="hidden md:inline-flex cursor-pointer0/10 dark:hover:bg-rose-900/30 transition-all duration-300" className="hidden md:inline-flex cursor-pointer transition-all duration-300"
> >
<PlusCircle className="h-4 w-4 transition-all duration-300" /> Contribute new icon <PlusCircle className="h-4 w-4 transition-all duration-300" /> Contribute new icon
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="md:max-w-4xl backdrop-blur-2xl"> <DialogContent className="md:max-w-4xl backdrop-blur-2xl bg-background">
<DialogHeader> <DialogHeader>
<DialogTitle>Contribute a new icon</DialogTitle> <DialogTitle>Contribute a new icon</DialogTitle>
<DialogDescription>Choose a template below to suggest a new icon or improve an existing one.</DialogDescription> <DialogDescription>Choose a template below to suggest a new icon or improve an existing one.</DialogDescription>

2
web/src/components/theme-switcher.tsx
View File

@ -19,7 +19,7 @@ export function ThemeSwitcher() {
<TooltipTrigger asChild> <TooltipTrigger asChild>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
className="rounded-md cursor-pointer0/10 dark:hover:bg-rose-900/30 transition-colors duration-200 group" className=" transition-colors duration-200 group hover:ring-2 rounded-lg cursor-pointer"
variant="ghost" variant="ghost"
size="icon" size="icon"
> >