Reaction and frontpage button fixes

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;
 }
 

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;
 }
 

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}
+      />
+    </>
   )
 }

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;
 }

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;

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}>
+    <span className={styles.tooltip}>
-      {text()}
+      {text && text()}
       {opened && <span className={styles.tooltiptext}>{children}</span>}
-    </div>
+    </span>
   )
 }

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;