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 {
@@ -36,10 +40,14 @@
 .user {
     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;
+}

src/defaultStyles.css

@@ -301,6 +301,7 @@ input {
 .pageHeader h1 {
   padding-top: 6px;
   letter-spacing: 7px;
+  text-align: center;
   margin: 0px;
 }
 

src/pages/index.js

@@ -21,6 +21,10 @@ const links = {
     href: '/manual',
     text: 'A script használata',
   },
+  post: {
+    href: '/',
+    text: 'Bejegyzés írása...',
+  },
   dataeditor: {
     href: '/dataeditor',
     text: 'Kérdés szerkesztő',
@@ -246,7 +250,7 @@ export default function Index({ globalData }) {
 
       return (
         <div>
-          <div className={styles.title}>Fórum</div>
+          <div className={styles.title}>Fórum/Hírek</div>
           <hr />
           <Composer
             onSubmit={(type, title, content, file) => {

src/pages/pwRequest.js

@@ -75,14 +75,11 @@ export default function PwRequest(props) {
       console.error(e)
     }
   }
-    /*removed: Az új felhasználóknak
-               <span>{' ' + daysAfterUserGetsPWs + ' '}</span>
-               napot kell várniuk, míg jelszó generálási lehetőséget kapnak.< br />*/
 
   return (
     // TODO: a generált jelszó modal-on való megjelenítésének kivitelezése.
-    // TODO: <span>{' ' + createDate}</span>-kor. rész után az oldal összes jelenlegi 
-        //felhasználójának darabszámának megjelenítése.
+    /* TODO: <span>{' ' + createDate}</span>-kor. rész után az oldal összes jelenlegi 
+       felhasználójának darabszámának megjelenítése.*/
     <div>
       <Head>
         <title>Jelszó generálás - Qmining | Frylabs.net</title>
@@ -101,6 +98,9 @@ export default function PwRequest(props) {
           bővebben a Script használata oldal <a href="/manual#pw" target="_blank">vonatkozó részén</a> olvashatsz.</p>
         </div>
         <div className={styles.text}>
+          Az új felhasználóknak
+          <span>{' ' + daysAfterUserGetsPWs + ' '}</span>
+          napot kell várniuk, míg jelszó generálási lehetőséget kapnak.< br />
           Egy felhasználó egyszerre 
           <span>{' ' + addPWCount + ' '}</span>
           jelszót generálhat, a jelszókérések közt