fix write button

src/app.css

@@ -214,63 +214,31 @@ main {
 
 /* Common button styles */
 .write-button {
-  display: inline-flex;
+  padding: 0.5rem 1rem;
-  align-items: center;
+  border: 1px solid var(--fog-border, #cbd5e1);
-  justify-content: center;
+  border-radius: 4px;
-  padding: 0.5rem;
+  background: var(--fog-post, #ffffff);
-  border: 1px solid var(--fog-border, #e5e7eb);
+  color: var(--fog-text, #1e293b);
-  border-radius: 0.375rem;
-  background: var(--fog-surface, #f8fafc);
-  color: var(--fog-text, #1f2937);
   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;
 }
 
-
+.write-button:hover:not(:disabled) {
-:global(.dark) .write-button {
+  background: var(--fog-highlight, #f1f5f9);
-  border-color: var(--fog-dark-border, #374151);
+  border-color: var(--fog-accent, #94a3b8);
-  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 {
+:global(.dark) .write-button {
-  background: var(--fog-highlight, #f3f4f6);
+  background: var(--fog-dark-post, #334155);
-  border-color: var(--fog-accent, #64748b);
+  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) */

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 @@
           <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono" style="font-size: 1.5em;">/Discussions</h1>
           <p class="text-fog-text dark:text-fog-dark-text">Decentralized discussion board on Nostr.</p>
         </div>
-        <a href="/write?kind=11" class="write-button" title="Write a new thread">
-          <Icon name="edit" size={20} />
-        </a>
       </div>
       
       <div class="discussions-controls">
@@ -77,6 +73,9 @@
         
         {#if discussionListComponent && !searchResults.events.length && !searchResults.profiles.length}
           <div class="discussions-controls-row">
+            <a href="/write?kind=11" class="see-more-events-btn-header" title="Write a new thread">
+              Write
+            </a>
             <select 
               bind:value={discussionListComponent.sortBy} 
               class="sort-select"
@@ -208,6 +207,40 @@
     color: var(--fog-dark-text, #f1f5f9);
   }
 
+  .see-more-events-btn-header {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--fog-border, #cbd5e1);
+    border-radius: 4px;
+    background: var(--fog-post, #ffffff);
+    color: var(--fog-text, #1e293b);
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+    text-decoration: none;
+    display: inline-block;
+  }
+
+  .see-more-events-btn-header:hover:not(:disabled) {
+    background: var(--fog-highlight, #f1f5f9);
+    border-color: var(--fog-accent, #94a3b8);
+  }
+
+  .see-more-events-btn-header:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :global(.dark) .see-more-events-btn-header {
+    background: var(--fog-dark-post, #334155);
+    border-color: var(--fog-dark-border, #475569);
+    color: var(--fog-dark-text, #f1f5f9);
+  }
+
+  :global(.dark) .see-more-events-btn-header:hover:not(:disabled) {
+    background: var(--fog-dark-highlight, #475569);
+    border-color: var(--fog-dark-accent, #64748b);
+  }
+
   .search-section :global(.unified-search-container) {
     max-width: 100%;
     width: 100%;

src/routes/feed/+page.svelte

@@ -3,7 +3,6 @@
   import FeedPage from '../../lib/modules/feed/FeedPage.svelte';
   import { nostrClient } from '../../lib/services/nostr/nostr-client.js';
   import { onMount } from 'svelte';
-  import Icon from '../../lib/components/ui/Icon.svelte';
   import type { NostrEvent } from '../../lib/types/nostr.js';
 
   let feedPageComponent: { 
@@ -26,12 +25,12 @@
     <div class="feed-header mb-6">
       <div class="feed-header-top">
         <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono" style="font-size: 1.5em;">/Feed</h1>
-        <a href="/write?kind=1" class="write-button" title="Write a new post">
-          <Icon name="edit" size={20} />
-        </a>
       </div>
       <div class="feed-controls">
         <div class="feed-header-buttons">
+          <a href="/write?kind=1" class="see-more-events-btn-header" title="Write a new post">
+            Write
+          </a>
           {#if feedPageComponent && feedPageComponent.waitingRoomEvents.length > 0}
             <button
               onclick={() => feedPageComponent?.loadWaitingRoomEvents()}
@@ -143,6 +142,8 @@
     cursor: pointer;
     transition: all 0.2s;
     white-space: nowrap;
+    text-decoration: none;
+    display: inline-block;
   }
 
   .see-more-events-btn-header:hover:not(:disabled) {

src/routes/lists/+page.svelte

@@ -339,6 +339,7 @@
 <Header />
 
 <main class="container mx-auto px-4 py-8">
+  <div class="lists-content">
     {#if !isLoggedIn}
       <div class="text-center py-8">
         <p>Please log in to view your lists.</p>
@@ -397,9 +398,15 @@
         {/if}
       {/if}
     {/if}
+  </div>
 </main>
 
 <style>
+  .lists-content {
+    max-width: var(--content-width);
+    margin: 0 auto;
+  }
+
   .lists-header {
     border-bottom: 1px solid var(--fog-border, #e5e7eb);
     padding-bottom: 1rem;