Reaction sorting, minor style and usability fixes

src/components/feedbackArea.js

@@ -6,7 +6,7 @@ import constants from '../constants.json'
 function FileUploader({ onChange }) {
   return (
     <div className={styles.inputArea}>
-      <div className={styles.textTitle}>Fájl csatolása</div>
+      <div>Fájl csatolása (Több fájlt ZIP-be tömörítve lehet egyszerre)</div>
       <input
         className={styles.fileInput}
         type="file"

src/components/feedbackArea.module.css

@@ -15,7 +15,15 @@
 }
 
 .inputArea {
-  display: block;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.inputArea > * {
+  padding: 5px 0px;
 }
 
 .fileContainer {

src/components/reactButton.js

@@ -25,26 +25,32 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
     <div className={styles.reactionContainer}>
       <div className={styles.react_bttn}>Reakció</div>
       {existingReacts &&
-        Object.keys(existingReacts).map((key) => {
-          const currReact = existingReacts[key]
-          const react = reactions[key]
-          if (!react) {
-            return null
-          }
-          return (
-            <div
-              title={`'${key}': ${currReact.join(', ')}`}
-              className={`${currReact.includes(uid) && styles.reacted}`}
-              key={key}
-              onClick={(e) => {
-                e.stopPropagation()
-                onClick(key, currReact.includes(uid))
-              }}
-            >
-              {react.emoji} {currReact.length}
-            </div>
-          )
-        })}
+        Object.keys(existingReacts)
+          .sort((akey, bkey) => {
+            const a = existingReacts[akey]
+            const b = existingReacts[bkey]
+            return a.length < b.length
+          })
+          .map((key) => {
+            const currReact = existingReacts[key]
+            const react = reactions[key]
+            if (!react) {
+              return null
+            }
+            return (
+              <div
+                title={`'${key}': ${currReact.join(', ')}`}
+                className={`${currReact.includes(uid) && styles.reacted}`}
+                key={key}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onClick(key, currReact.includes(uid))
+                }}
+              >
+                {react.emoji} {currReact.length}
+              </div>
+            )
+          })}
     </div>
   )
 }

src/components/sleep.js

@@ -1,6 +1,7 @@
+import React from 'react'
 import constants from '../constants.json'
 
-export default function Sleep(props) {
+export default function Sleep() {
   const hours = new Date().getHours()
   if (hours < 4 || hours > 23) {
     return (