Make reaction icons buttons

ROADMAP.md

@@ -4,16 +4,6 @@
 - [ ] Fix iOS/safari/firefox
 - [ ] Show more link on long notes (rather than just an ellipsis)
 
-# Image uploads
-
-- [ ] Add LN invoices
-- [ ] Build UI
-  - Put sql stuff in a library, use it in dufflepud and image service
-- [ ] Post announcement on SN, TG
-- [ ] Contact other client authors, self-hostable, or just use my instance
-- https://github.com/ElementsProject/lightning-charge
-- https://github.com/nostr-protocol/nips/pull/250
-
 # Coracle website
 
 - [ ] Simple intro to coracle
@@ -29,7 +19,7 @@
   - Add suggested relays based on follows or topics
 - Recommendations
 - Indexer/multiplexer
-- relay.coracle.social
+- relay.coracle.social for people nip-05 verified via coracle
 - Improve overall design
 - Stripped down easy version of coracle
   - Extract library?
@@ -44,6 +34,11 @@
 
 # More
 
+- [ ] Image Uploads
+  - [ ] Add LN invoices
+  - [ ] Contact other client authors, self-hostable, or just use my instance
+  - https://github.com/ElementsProject/lightning-charge
+  - https://github.com/nostr-protocol/nips/pull/250
 - [ ] Onboarding
   - [ ] Auto-follow hodlbod
   - [ ] Add a friendly tour

src/views/notes/Note.svelte

@@ -392,26 +392,23 @@
         </div>
         <div class="flex justify-between text-light">
           <div class="flex">
-            <div class="w-16" on:click|stopPropagation={startReply}>
+            <button class="w-16" on:click|stopPropagation={startReply}>
-              <button class="fa fa-reply cursor-pointer" />
+              <i class="fa fa-reply cursor-pointer" />
               {$repliesCount}
-            </div>
+            </button>
-            <div class="w-16" class:text-accent={like}
+            <button class="w-16" class:text-accent={like}
               on:click|stopPropagation={() => like ? deleteReaction(like) : react("+")}>
-              <button class={cx('fa fa-heart cursor-pointer', {'fa-beat fa-beat-custom': like})} />
+              <i class={cx('fa fa-heart cursor-pointer', {'fa-beat fa-beat-custom': like})} />
               {$likesCount}
-            </div>
+            </button>
-            <div class="w-20" class:text-accent={zapped} on:click|stopPropagation={startZap}>
+            <button class="w-20" class:text-accent={zapped} on:click|stopPropagation={startZap}>
-              <button
+              <i class={cx("fa fa-bolt cursor-pointer", {'pointer-events-none opacity-50': !canZap})} />
-                class={cx("fa fa-bolt cursor-pointer", {
-                  'pointer-events-none opacity-50': !canZap,
-                })} />
               {formatSats($zapsTotal)}
-            </div>
+            </button>
-            <div class="w-16"  on:click|stopPropagation={() => react("-")}>
+            <button class="w-16"  on:click|stopPropagation={() => react("-")}>
-              <button class="fa fa-flag cursor-pointer" />
+              <i class="fa fa-flag cursor-pointer" />
               {$flagsCount}
-            </div>
+            </button>
           </div>
           <div
             class="cursor-pointer flex gap-1 items-center"