mirror/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-11-27 07:08:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI/UX with better spacing, accessibility, and dark mode support

Browse Source 
Co-authored-by: ajnart <49837342+ajnart@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2025-11-23 17:02:27 +00:00
parent b2383a426a
commit d89a2971b1
1 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web/src/components/icon-submission-guidelines.tsx
View File

@@ -26,7 +26,7 @@ const GUIDELINES: GuidelineItem[] = [
type: "do",
title: "Provide color variants when available",
description:
"Submit normal (colored), dark, and light variants when possible. The 'normal' variant is the colored version and is usually the 'light' one.",
"Submit normal (colored), dark, and light variants when possible. The 'normal' variant is the standard colored version. For monochrome icons, provide light and dark variants optimized for different backgrounds.",
},
{
type: "do",
@@ -55,15 +55,15 @@ export function IconSubmissionGuidelines() {
const dontItems = GUIDELINES.filter((item) => item.type === "dont");
return (
<div className="rounded-lg border border-blue-500/50 bg-blue-500/10">
<div className="rounded-lg border border-blue-500/50 bg-blue-500/10 dark:bg-blue-500/5">
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<div className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center justify-between gap-4">
<div className="flex-1">
<p className="text-sm font-semibold text-blue-700 dark:text-blue-400">
<p className="text-sm font-semibold text-blue-700 dark:text-blue-300">
Icon Submission Guidelines
</p>
<p className="text-sm text-blue-700/90 dark:text-blue-400/90 mt-1">
<p className="text-sm text-blue-700/90 dark:text-blue-300/80 mt-1">
Review these important guidelines before submitting
</p>
</div>
@@ -71,7 +71,8 @@ export function IconSubmissionGuidelines() {
<Button
variant="ghost"
size="sm"
className="ml-2 text-blue-700 dark:text-blue-400 hover:bg-blue-500/20"
className="ml-2 text-blue-700 dark:text-blue-300 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 shrink-0"
aria-label={isOpen ? "Hide guidelines" : "Show guidelines"}
>
{isOpen ? "Hide" : "Show"} Details
<ChevronDown
@@ -85,15 +86,15 @@ export function IconSubmissionGuidelines() {
</div>
<CollapsibleContent>
<div className="px-4 pb-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="px-4 pb-4 pt-0">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* DO's Section */}
<div className="space-y-2">
<div className="flex items-center gap-2 mb-3">
<div className="p-1.5 rounded-full bg-green-500/20">
<div className="space-y-3">
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-full bg-green-500/20 dark:bg-green-500/30">
<Check className="h-4 w-4 text-green-600 dark:text-green-400" />
</div>
<h4 className="text-sm font-semibold text-green-700 dark:text-green-400">
<h4 className="text-sm font-semibold text-green-700 dark:text-green-300">
DO
</h4>
</div>
@@ -101,15 +102,15 @@ export function IconSubmissionGuidelines() {
{doItems.map((item, index) => (
<div
key={index}
className="rounded-lg border border-green-500/30 bg-green-500/5 p-3"
className="rounded-lg border border-green-500/30 bg-green-500/5 dark:bg-green-500/10 p-3"
>
<div className="flex gap-2">
<div className="flex gap-3">
<Check className="h-4 w-4 text-green-600 dark:text-green-400 mt-0.5 flex-shrink-0" />
<div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-foreground">
{item.title}
</p>
<p className="text-xs text-muted-foreground mt-1">
<p className="text-xs text-muted-foreground mt-1 leading-relaxed">
{item.description}
</p>
</div>
@@ -120,12 +121,12 @@ export function IconSubmissionGuidelines() {
</div>
{/* DON'Ts Section */}
<div className="space-y-2">
<div className="flex items-center gap-2 mb-3">
<div className="p-1.5 rounded-full bg-red-500/20">
<div className="space-y-3">
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-full bg-red-500/20 dark:bg-red-500/30">
<X className="h-4 w-4 text-red-600 dark:text-red-400" />
</div>
<h4 className="text-sm font-semibold text-red-700 dark:text-red-400">
<h4 className="text-sm font-semibold text-red-700 dark:text-red-300">
DON'T
</h4>
</div>
@@ -133,15 +134,15 @@ export function IconSubmissionGuidelines() {
{dontItems.map((item, index) => (
<div
key={index}
className="rounded-lg border border-red-500/30 bg-red-500/5 p-3"
className="rounded-lg border border-red-500/30 bg-red-500/5 dark:bg-red-500/10 p-3"
>
<div className="flex gap-2">
<div className="flex gap-3">
<X className="h-4 w-4 text-red-600 dark:text-red-400 mt-0.5 flex-shrink-0" />
<div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-foreground">
{item.title}
</p>
<p className="text-xs text-muted-foreground mt-1">
<p className="text-xs text-muted-foreground mt-1 leading-relaxed">
{item.description}
</p>
</div>