diff --git a/src/app.css b/src/app.css index bf63e03..1b0a9d5 100644 --- a/src/app.css +++ b/src/app.css @@ -214,63 +214,31 @@ main { /* Common button styles */ .write-button { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - border: 1px solid var(--fog-border, #e5e7eb); - border-radius: 0.375rem; - background: var(--fog-surface, #f8fafc); - color: var(--fog-text, #1f2937); + padding: 0.5rem 1rem; + border: 1px solid var(--fog-border, #cbd5e1); + border-radius: 4px; + background: var(--fog-post, #ffffff); + color: var(--fog-text, #1e293b); text-decoration: none; - transition: all 0.2s; - min-width: 2.5rem; - min-height: 2.5rem; - flex-shrink: 0; cursor: pointer; + transition: all 0.2s; + white-space: nowrap; } - -:global(.dark) .write-button { - border-color: var(--fog-dark-border, #374151); - background: var(--fog-dark-surface, #1e293b); /* Use surface color for contrast with page background */ - color: var(--fog-dark-text, #f9fafb); -} - -/* Ensure icon inherits color - the SVG's stroke="currentColor" will use this */ -.write-button :global(.icon-wrapper) { - color: inherit; -} - -/* Directly set stroke color on SVG paths for write-button */ -/* This ensures the icon is visible even if currentColor doesn't resolve correctly */ -.write-button :global(.icon-wrapper svg[stroke="currentColor"]), -.write-button :global(.icon-wrapper svg[stroke="currentColor"] path) { - stroke: currentColor; - fill: none; -} - -/* Ensure write-button icon is always visible in dark mode */ -:global(.dark) .write-button :global(.icon-wrapper) { - color: var(--fog-dark-text, #f9fafb); -} - -/* Directly set stroke color on SVG paths for write-button in dark mode */ -/* Use !important to override any conflicting rules */ -:global(.dark) .write-button :global(.icon-wrapper svg[stroke="currentColor"]), -:global(.dark) .write-button :global(.icon-wrapper svg[stroke="currentColor"] path) { - stroke: var(--fog-dark-text, #f9fafb) !important; - fill: none !important; +.write-button:hover:not(:disabled) { + background: var(--fog-highlight, #f1f5f9); + border-color: var(--fog-accent, #94a3b8); } -.write-button:hover { - background: var(--fog-highlight, #f3f4f6); - border-color: var(--fog-accent, #64748b); +:global(.dark) .write-button { + background: var(--fog-dark-post, #334155); + border-color: var(--fog-dark-border, #475569); + color: var(--fog-dark-text, #f1f5f9); } -:global(.dark) .write-button:hover { +:global(.dark) .write-button:hover:not(:disabled) { background: var(--fog-dark-highlight, #475569); - border-color: var(--fog-dark-accent, #94a3b8); + border-color: var(--fog-dark-accent, #64748b); } /* Action buttons (accent background) */ diff --git a/src/routes/discussions/+page.svelte b/src/routes/discussions/+page.svelte index 8e2cee5..2b1dd12 100644 --- a/src/routes/discussions/+page.svelte +++ b/src/routes/discussions/+page.svelte @@ -9,7 +9,6 @@ import type { NostrEvent } from '../../lib/types/nostr.js'; import { onMount } from 'svelte'; import { page } from '$app/stores'; - import Icon from '../../lib/components/ui/Icon.svelte'; import Pagination from '../../lib/components/ui/Pagination.svelte'; import { getPaginatedItems, getCurrentPage, ITEMS_PER_PAGE } from '../../lib/utils/pagination.js'; @@ -57,9 +56,6 @@
Decentralized discussion board on Nostr.
- -