Minor style improvements on main page /on new features/

src/components/comments.js

@@ -22,14 +22,14 @@ function CommentInput({ onSubmit, onCancel }) {
             onSubmit(val)
           }}
         >
-          Submit
+          Küldés
         </span>
         <span
           onClick={() => {
             onCancel()
           }}
         >
-          Cancel
+          Bezárás
         </span>
       </div>
     </div>
@@ -68,20 +68,20 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
         <div className={`${!displayed && styles.hidden}`}>
           <div className={styles.commentText}> {content}</div>
           <div className={'actions'}>
-            <span
+            <span className={styles.reply_bttn}
               onClick={() => {
                 setCommenting(true)
               }}
             >
-              Reply...
+              Válasz...
             </span>
             {own && (
-              <span
+              <span className={styles.delete_bttn}
                 onClick={() => {
                   onDelete([index])
                 }}
               >
-                Delete
+                Törlés
               </span>
             )}
             <ReactButton
@@ -178,12 +178,12 @@ export default function Comments({
             : null}
           {commentCount !== 0 ? (
             <div className={'actions'}>
-              <span
+              <span className={styles.comment_bttn}
                 onClick={() => {
                   setAddingNewComment(true)
                 }}
               >
-                New comment
+                Új komment
               </span>
             </div>
           ) : null}
@@ -191,7 +191,7 @@ export default function Comments({
             <CommentInput
               onSubmit={(e) => {
                 if (!e) {
-                  alert('Írj be valamit, hogy kommentelhess...')
+                  alert('Írj be valamit a szövegdobozba, hogy kommentelhess!')
                   return
                 }
                 setAddingNewComment(false)
@@ -216,10 +216,10 @@ export default function Comments({
           }
         }}
       >
-        <span>
+        <span className={styles.comment_bttn}>
           {commentCount === 0
-            ? 'New comment'
-            : `Show ${commentCount} comment${commentCount > 1 ? 's' : ''}`}
+            ? 'Új komment'
+            : `További ${commentCount} komment${commentCount > 1 ? ' mutatása' : ''}`}
         </span>
       </div>
     </div>

src/components/comments.module.css

@@ -1,3 +1,40 @@
+.comment_bttn {
+    font-size: 15px;
+    padding-top: 4px !important;
+    transition: width 0.5s, height 0.5s, ease-in 0.5s;
+}
+
+.comment_bttn:hover {
+    transition: width 0.5s, height 0.5s, ease-out 0.5s;
+    color: gainsboro;
+}
+
+.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;
+}
+
+.reply_bttn:hover {
+    transition: width 0.5s, height 0.5s, ease-out 0.5s;
+    color: gainsboro;
+}
+
+.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;
+}
+
+.delete_bttn:hover {
+    transition: width 0.5s, height 0.5s, ease-out 0.5s;
+    color: gainsboro;
+}
+
 .comment {
   margin-left: 25px;
   padding: 8px 0px;
@@ -5,7 +42,7 @@
 
 .commentData {
   padding: 5px 2px;
-  border-left: 2px solid var(--text-color);
+  border-left: 3px solid azure;
 }
 
 .commentHeader {
@@ -33,7 +70,7 @@
 }
 
 .ownComment {
-  border-left: 2px solid green;
+  border-left: 5px dotted azure;
 }
 
 .showHide {
@@ -53,5 +90,5 @@
 }
 
 .adminComment {
-  border-left: 2px solid yellow;
+  border-left: 3px solid gold;
 }

src/components/composer.js

@@ -33,7 +33,7 @@ export default function Composer({ onSubmit }) {
         }}
         className={styles.new}
       >
-        Új bejegyzés / feedback
+        Bejegyzés írása...
       </div>
       {editorShowing && (
         <Modal

src/components/newsEntry.js

@@ -23,7 +23,7 @@ export default function NewsEntry({
           <div className={styles.newsTitle}>{title}</div>
           <div className={styles.user}>
             <div>User #{user}</div>
-            <div className={styles.newsDate}>{date}</div>
+            <div className={styles.newsDate}> @ {date}</div>
           </div>
         </div>
         {admin ? (
@@ -42,7 +42,7 @@ export default function NewsEntry({
               onPostDelete()
             }}
           >
-            Delete
+            Törlés
           </span>
         ) : null}
         <ReactButton

src/components/newsEntry.module.css

@@ -1,17 +1,20 @@
 .newsBody {
-  margin: 0px 5px;
+  margin: 0px 12px;
   color: #fff;
   white-space: pre-line;
+  text-align: justify;
 }
 
 .newsTitle {
-  font-size: 20px;
+  font-size: 25px;
   color: var(--text-color);
-  margin: 0px 5px;
+  margin: 0px 11px;
+  padding-bottom: 10px;
 }
 
 .newsDate {
-  margin: 0px 5px;
+  margin-right: 12px;
+  margin-left: 14px;
 }
 
 .newsContainer {
@@ -19,12 +22,13 @@
 }
 
 .adminPost {
-  border-left: 2px solid yellow;
+  border-left: 4px solid var(--text-color);
 }
 
 .newsContainer img {
   max-width: 100%;
   min-width: 200px;
+  border: 2px solid white;
 }
 
 .newsHeader {
@@ -34,12 +38,16 @@
 }
 
 .user {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
 }
 
 .newsRoot {
   background-color: #191919;
-  margin: 8px;
-  padding: 8px;
+  margin-left: 8px;
+  margin-right: 8px;
+  margin-bottom: 16px;
+  margin-top: 16px;
+  padding: 10px;
 }

src/components/reactButton.js

@@ -8,7 +8,7 @@ import reactions from '../data/reactions.json'
 function ExistingReacts({ existingReacts, onClick, uid }) {
   return (
     <div className={styles.reactionContainer}>
-      <div>React</div>
+      <div className={styles.react_bttn}>Reakció</div>
       {existingReacts &&
         Object.keys(existingReacts).map((key) => {
           const currReact = existingReacts[key]

src/components/reactButton.module.css

@@ -1,6 +1,8 @@
 .reactionContainer {
   display: flex;
   flex-wrap: wrap;
+  margin-top: 15px !important;
+  margin: 4px 2px;
 }
 
 .reactionContainer > input {
@@ -20,10 +22,13 @@
   border-radius: 6px;
   cursor: pointer;
   user-select: none;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
 .reactionContainer > div:hover {
   background-color: var(--hoover-color);
+  color: gainsboro;
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
 }
 
 .break {
@@ -32,9 +37,20 @@
 }
 
 .reacted {
-  color: yellow;
+  background-color: var(--text-color);
+  color: black;
+}
+
+.reacted:hover {
+   background-color: #96810b !important;
+   color: #42423e !important;
 }
 
 .reactContainer {
   display: inline-block;
 }
+
+.react_bttn {
+  font-size: 15px;
+  padding-top: 3px !important;
+}