From b2f1818994ad905cb41b08d7681d7ab0682ff8f8 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Sat, 21 Jan 2023 11:59:19 +0000
Subject: [PATCH] Review tweaks

---
 src/Element/Note.css       | 11 +++++++++++
 src/Element/NoteFooter.tsx | 34 +++++++++++++++++-----------------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/Element/Note.css b/src/Element/Note.css
index a82e6230..a3732784 100644
--- a/src/Element/Note.css
+++ b/src/Element/Note.css
@@ -32,6 +32,16 @@
   color: var(--font-secondary-color);
   border: 1px solid var(--font-secondary-color);
   border-radius: 16px;
+  min-width: 0;
+}
+
+.note>.footer .ctx-menu li {
+  display: grid;
+  grid-template-columns: 2rem auto;
+}
+
+.ctx-menu .red {
+  color: var(--error);
 }
 
 .note>.header img:hover, .note>.header .name>.reply:hover, .note .body:hover {
@@ -40,6 +50,7 @@
 
 .note>.note-creator {
   margin-top: 12px;
+  margin-left: 56px;
 }
 
 @media (min-width: 720px) {
diff --git a/src/Element/NoteFooter.tsx b/src/Element/NoteFooter.tsx
index 6ddd90ee..21c69fed 100644
--- a/src/Element/NoteFooter.tsx
+++ b/src/Element/NoteFooter.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
-import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat, faEllipsisVertical, faShareNodes } from "@fortawesome/free-solid-svg-icons";
+import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat, faEllipsisVertical, faShareNodes, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Menu, MenuItem } from '@szhsin/react-menu';
 
@@ -126,7 +126,7 @@ export default function NoteFooter(props: NoteFooterProps) {
   }
 
   async function share() {
-    const url = `${window.location.protocol}//${window.location.host}/e/${hexToBech32("npub", ev.Id)}`;
+    const url = `${window.location.protocol}//${window.location.host}/e/${hexToBech32("note", ev.Id)}`;
     if ("share" in window.navigator) {
       await window.navigator.share({
         title: "Snort",
@@ -137,40 +137,40 @@ export default function NoteFooter(props: NoteFooterProps) {
     }
   }
 
+  async function copyId() {
+    await navigator.clipboard.writeText(hexToBech32("note", ev.Id));
+  }
+
   function menuItems() {
     return (
       <>
         <MenuItem onClick={() => react("-")}>
-          <div className={`reaction-pill ${hasReacted('-') ? 'reacted' : ''}`}>
-            <div className="reaction-pill-icon">
-              <FontAwesomeIcon icon={faThumbsDown} />
-            </div>
-            <div className="reaction-pill-number">
-              {formatShort(groupReactions[Reaction.Negative])}
-            </div>
+          <div>
+            <FontAwesomeIcon icon={faThumbsDown} className={hasReacted('-') ? 'reacted' : ''} />
+            &nbsp;
+            {formatShort(groupReactions[Reaction.Negative])}
           </div>
           Dislike
         </MenuItem>
         <MenuItem onClick={() => share()}>
-          <div className="reaction-pill mr-auto">
-            <div className="reaction-pill-icon">
-              <FontAwesomeIcon icon={faShareNodes} />
-            </div>
-          </div>
+          <FontAwesomeIcon icon={faShareNodes} />
           Share
         </MenuItem>
+        <MenuItem onClick={() => copyId()}>
+          <FontAwesomeIcon icon={faCopy} />
+          Copy ID
+        </MenuItem>
 
         {isMine && (
           <MenuItem onClick={() => deleteEvent()}>
-            <div className="reaction-pill trash-icon">
-              <FontAwesomeIcon icon={faTrash} />
-            </div>
+            <FontAwesomeIcon icon={faTrash} className="red" />
             Delete
           </MenuItem>
         )}
       </>
     )
   }
+
   return (
     <>
       <div className="footer">