alezmad/nuc-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add subtle shadow and reduce border intensity on cards

Browse Source 
- Add shadow-sm to ServiceCard, BookmarkCard, and Settings card
- Reduce border opacity: slate-100 (light) / stone-700/50 (dark)
- Lighter hover states for a softer look

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-02-02 00:19:15 +00:00
parent a96c510dd6
commit 331441b57e
3 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/page.tsx
View File

@@ -139,7 +139,7 @@ export default function Home() {
case 'settings': case 'settings':
return ( return (
<div className="max-w-2xl"> <div className="max-w-2xl">
<div className="bg-white dark:bg-stone-900 rounded-xl border border-slate-200 dark:border-stone-800 p-6"> <div className="bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm p-6">
<h2 className="text-lg font-semibold text-slate-900 dark:text-stone-100 mb-6"> <h2 className="text-lg font-semibold text-slate-900 dark:text-stone-100 mb-6">
Appearance Appearance
</h2> </h2>

2
src/components/BookmarkCard.tsx
View File

@@ -13,7 +13,7 @@ export function BookmarkCard({ bookmark }: BookmarkCardProps) {
href={bookmark.url} href={bookmark.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="group flex items-center gap-3 p-3 bg-white dark:bg-stone-900 rounded-lg border border-slate-200 dark:border-stone-800 hover:border-slate-300 dark:hover:border-stone-700 hover:shadow-md transition-all duration-200" className="group flex items-center gap-3 p-3 bg-white dark:bg-stone-900 rounded-lg border border-slate-100 dark:border-stone-700/50 shadow-sm hover:border-slate-200 dark:hover:border-stone-600/50 hover:shadow-md transition-all duration-200"
> >
{/* Icon */} {/* Icon */}
<div className="w-8 h-8 flex-shrink-0 flex items-center justify-center rounded-md bg-slate-100 dark:bg-stone-800 group-hover:bg-slate-200 dark:group-hover:bg-stone-700 transition-colors"> <div className="w-8 h-8 flex-shrink-0 flex items-center justify-center rounded-md bg-slate-100 dark:bg-stone-800 group-hover:bg-slate-200 dark:group-hover:bg-stone-700 transition-colors">

2
src/components/ServiceCard.tsx
View File

@@ -29,7 +29,7 @@ export function ServiceCard({ service, status }: ServiceCardProps) {
href={service.url} href={service.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="group relative block p-4 bg-white dark:bg-stone-900 rounded-xl border border-slate-200 dark:border-stone-800 hover:border-slate-300 dark:hover:border-stone-700 hover:shadow-lg transition-all duration-200" className="group relative block p-4 bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm hover:border-slate-200 dark:hover:border-stone-600/50 hover:shadow-md transition-all duration-200"
> >
{/* Status indicator */} {/* Status indicator */}
<div className="absolute top-3 right-3 flex items-center gap-1.5"> <div className="absolute top-3 right-3 flex items-center gap-1.5">