From 4cc5dbbcf6595b0df5eedd32e14b411ba8324ca7 Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Fri, 21 May 2021 09:28:21 +0200
Subject: [PATCH] Reaction and frontpage button fixes

---
 src/components/comments.module.css            |  7 ---
 src/components/newsEntry.module.css           |  4 --
 src/components/reactButton.js                 | 52 +++++++++----------
 src/components/reactButton.module.css         |  4 +-
 src/components/todoStuff/todoBoard.module.css |  1 -
 src/components/tooltip.js                     |  6 +--
 src/defaultStyles.css                         |  3 +-
 7 files changed, 32 insertions(+), 45 deletions(-)

diff --git a/src/components/comments.module.css b/src/components/comments.module.css
index 272216e..712eef2 100644
--- a/src/components/comments.module.css
+++ b/src/components/comments.module.css
@@ -1,6 +1,5 @@
 .comment_bttn {
   font-size: 15px;
-  padding-top: 4px !important;
   transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
@@ -11,9 +10,6 @@
 
 .reply_bttn {
   font-size: 15px;
-  margin-top: 14.5px !important;
-  margin-left: 6px !important;
-  padding-top: 4px !important;
   transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
@@ -24,9 +20,6 @@
 
 .delete_bttn {
   font-size: 15px;
-  margin-top: 14.5px !important;
-  margin-left: 6px !important;
-  padding-top: 4px !important;
   transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css
index 4c33702..27c2c20 100644
--- a/src/components/newsEntry.module.css
+++ b/src/components/newsEntry.module.css
@@ -29,10 +29,6 @@
 
 .delete_bttn {
   font-size: 15px;
-  margin-top: 12px !important;
-  margin-left: 2px !important;
-  margin-right: 5px !important;
-  padding-top: 4px !important;
   transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
diff --git a/src/components/reactButton.js b/src/components/reactButton.js
index c16cddb..050fc9c 100644
--- a/src/components/reactButton.js
+++ b/src/components/reactButton.js
@@ -22,8 +22,7 @@ function useOutsideAlerter(ref, action) {
 
 function ExistingReacts({ existingReacts, onClick, uid }) {
   return (
-    <div className={styles.reactionContainer}>
-      <div className={styles.react_bttn}>Reakció</div>
+    <>
       {existingReacts &&
         Object.keys(existingReacts).map((key) => {
           const currReact = existingReacts[key]
@@ -32,9 +31,9 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
             return null
           }
           return (
-            <div
+            <span
               title={`'${key}': ${currReact.join(', ')}`}
-              className={`${currReact.includes(uid) && styles.reacted}`}
+              className={`${currReact.includes(uid) ? styles.reacted : ''}`}
               key={key}
               onClick={(e) => {
                 e.stopPropagation()
@@ -42,10 +41,10 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
               }}
             >
               {react.emoji} {currReact.length}
-            </div>
+            </span>
           )
         })}
-    </div>
+    </>
   )
 }
 
@@ -90,27 +89,20 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
   })
 
   return (
-    <div
-      className={styles.reactContainer}
-      onClick={() => {
-        setOpened(true)
-      }}
-      onMouseLeave={() => {
-        // setOpened(false)
-      }}
-    >
+    <>
       <Tooltip
+        text={() => {
+          return (
+            <span
+              onClick={() => {
+                setOpened(true)
+              }}
+            >
+              Reakció
+            </span>
+          )
+        }}
         opened={opened}
-        text={() => (
-          <ExistingReacts
-            uid={uid}
-            onClick={(key, isDelete) => {
-              onClick(key, isDelete)
-              setOpened(false)
-            }}
-            existingReacts={existingReacts}
-          />
-        )}
       >
         <div ref={wrapperRef} className={styles.reactionContainer}>
           <RenderEmojis
@@ -121,6 +113,14 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
           />
         </div>
       </Tooltip>
-    </div>
+      <ExistingReacts
+        uid={uid}
+        onClick={(key, isDelete) => {
+          onClick(key, isDelete)
+          setOpened(false)
+        }}
+        existingReacts={existingReacts}
+      />
+    </>
   )
 }
diff --git a/src/components/reactButton.module.css b/src/components/reactButton.module.css
index 15407fc..f1bfe32 100644
--- a/src/components/reactButton.module.css
+++ b/src/components/reactButton.module.css
@@ -1,7 +1,6 @@
 .reactionContainer {
   display: flex;
   flex-wrap: wrap;
-  margin-top: 15px !important;
   margin: 4px 2px;
 }
 
@@ -17,7 +16,7 @@
 
 .reactionContainer > div {
   margin: 2px 2px;
-  padding: 0px 10px;
+  padding: 2px 9px;
   border: 1px solid #444;
   border-radius: 6px;
   cursor: pointer;
@@ -52,5 +51,4 @@
 
 .react_bttn {
   font-size: 15px;
-  padding-top: 3px !important;
 }
diff --git a/src/components/todoStuff/todoBoard.module.css b/src/components/todoStuff/todoBoard.module.css
index 6bb0906..90c8ea2 100644
--- a/src/components/todoStuff/todoBoard.module.css
+++ b/src/components/todoStuff/todoBoard.module.css
@@ -11,7 +11,6 @@
 
 .categoryName {
   text-align: center;
-  margin-top: 85px !important;
   margin: 5px 0px;
   font-size: 16px;
   font-weight: bold;
diff --git a/src/components/tooltip.js b/src/components/tooltip.js
index f8a8987..8730830 100644
--- a/src/components/tooltip.js
+++ b/src/components/tooltip.js
@@ -3,9 +3,9 @@ import styles from './tooltip.module.css'
 
 export default function Tooltip({ children, text, opened }) {
   return (
-    <div className={styles.tooltip}>
-      {text()}
+    <span className={styles.tooltip}>
+      {text && text()}
       {opened && <span className={styles.tooltiptext}>{children}</span>}
-    </div>
+    </span>
   )
 }
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index c6b4868..76bbb61 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -351,11 +351,12 @@ input:focus {
 .actions {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .actions > span {
   margin: 2px 2px;
-  padding: 0px 10px;
+  padding: 4px 10px;
   border: 1px solid #444;
   border-radius: 6px;
   cursor: pointer;