From 52ddac5ef5f1303ec03ed330e8c7271c6fd2a3df Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Thu, 26 Jan 2023 07:51:03 +0100
Subject: [PATCH] note reaction adjustments

---
 src/Element/Note.css         | 12 ++++++++++++
 src/Element/NoteFooter.tsx   | 27 ++++++++++++++-------------
 src/Element/NoteReaction.css |  1 -
 src/index.css                |  3 +--
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/Element/Note.css b/src/Element/Note.css
index ee705518..e58114dd 100644
--- a/src/Element/Note.css
+++ b/src/Element/Note.css
@@ -40,6 +40,18 @@
   padding-left: 46px;
 }
 
+.note .footer .footer-reactions {
+  display: flex;
+  flex-direction: row;
+  margin-left: auto;
+}
+
+@media (min-width: 720px) {
+  .note .footer .footer-reactions {
+    margin-left: 0;
+  }
+}
+
 .note>.footer .ctx-menu {
   background-color: var(--note-bg);
   color: var(--font-secondary-color);
diff --git a/src/Element/NoteFooter.tsx b/src/Element/NoteFooter.tsx
index 08fec331..a715e85b 100644
--- a/src/Element/NoteFooter.tsx
+++ b/src/Element/NoteFooter.tsx
@@ -186,23 +186,24 @@ export default function NoteFooter(props: NoteFooterProps) {
   }
 
   return (
-    <>
-      <div className="footer">
-        <Menu menuButton={<div className="reaction-pill">
-          <div className="reaction-pill-icon">
-            <Dots />
-          </div>
-        </div>} menuClassName="ctx-menu">
-          {menuItems()}
-        </Menu>
+    <div className="footer">
+      <div className="footer-reactions">
+        {tipButton()}
+        {reactionIcons()}
         <div className={`reaction-pill ${reply ? 'reacted' : ''}`} onClick={(e) => setReply(s => !s)}>
           <div className="reaction-pill-icon">
             <Reply />
           </div>
         </div>
-
-        {reactionIcons()}
-        {tipButton()}
+        <Menu menuButton={<div className="reaction-pill">
+            <div className="reaction-pill-icon">
+              <Dots />
+            </div>
+          </div>}
+          menuClassName="ctx-menu"
+        >
+          {menuItems()}
+        </Menu>
       </div>
       <NoteCreator
         autoFocus={true}
@@ -212,6 +213,6 @@ export default function NoteFooter(props: NoteFooterProps) {
         setShow={setReply}
       />
       <LNURLTip svc={author?.lud16 || author?.lud06} onClose={() => setTip(false)} show={tip} />
-    </>
+    </div>
   )
 }
diff --git a/src/Element/NoteReaction.css b/src/Element/NoteReaction.css
index 2c7d6237..42cd356c 100644
--- a/src/Element/NoteReaction.css
+++ b/src/Element/NoteReaction.css
@@ -1,5 +1,4 @@
 .reaction {
-    margin-bottom: 24px;
 }
 
 .reaction > .note {
diff --git a/src/index.css b/src/index.css
index 42a26fdc..8bbcf73f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -106,8 +106,7 @@ html.light .card {
 
 .card>.footer {
   display: flex;
-  flex-direction: row-reverse;
-  margin-top: 12px;
+  flex-direction: row;
 }
 
 button {