Style and layout improvements on modals

/posting modal still needs some fixing tho/

package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "babel-eslint": "^10.1.0",
     "eslint-plugin-react": "^7.21.5",
     "next": "^10.0.3",
     "react": "^16.13.0",

src/components/comments.js

@@ -63,7 +63,7 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
             </div>
             <div>User #{user}</div>
           </div>
-          <div>{date}</div>
+        <div className={styles.commentDate}>{date}</div>
         </div>
         <div className={`${!displayed && styles.hidden}`}>
           <div className={styles.commentText}> {content}</div>

src/components/comments.module.css

@@ -36,7 +36,8 @@
 }
 
 .comment {
-  margin-left: 25px;
+  margin-left: 10px;
+  margin-right: 30px;
   padding: 8px 0px;
 }
 
@@ -45,9 +46,13 @@
   border-left: 3px solid azure;
 }
 
+.commentDate {
+  text-align: right;
+}
+
 .commentHeader {
   display: flex;
-  justify-content: space-between;
+  /*justify-content: space-between;*/
 }
 
 .commentHeader > div {

src/components/composer.js

@@ -44,7 +44,8 @@ export default function Composer({ onSubmit }) {
           <div className={styles.container}>
             {type !== 'private' && (
               <input
-                placeholder={'Téma'}
+                placeholder={'Téma...'}
+                required
                 value={title}
                 onChange={(e) => {
                   setTitle(e.target.value)
@@ -52,7 +53,8 @@ export default function Composer({ onSubmit }) {
               />
             )}
             <textarea
-              placeholder={'...'}
+              placeholder={'Írj ide valamit...'}
+              required
               value={val}
               onChange={(e) => {
                 setVal(e.target.value)
@@ -65,9 +67,9 @@ export default function Composer({ onSubmit }) {
                 }}
               />
             )}            
+            <div id="radiolabel"><p><b>A poszt típusa:</b></p></div>
               <div className={styles.typeSelector}>
-              <div>Post típusa:</div>
-              <div title="Minden felhasználó látja főoldalon, és tudnak rá válaszolni">
+                <div title="A főoldalon mindenki láthatja, reagálhat rá és kommentelhet alá">
                     <input
                       onChange={(e) => {
                         setType(e.target.value)
@@ -79,7 +81,7 @@ export default function Composer({ onSubmit }) {
                     />
                     Publikus
                 </div>
-              <div title="Csak a weboldal üzemeltetője látja">
+              <div title="Csak admin bácsi látja">
                 <input
                   onChange={(e) => {
                     setType(e.target.value)
@@ -90,25 +92,18 @@ export default function Composer({ onSubmit }) {
                 />
                 Privát
               </div>
+            </div>
             <div className={styles.tip}>
-                (Tartsd egered opciókra több infóért)
+              <b>Tipp:</b> vidd a kurzort a poszt-típusok fölé több infóért!
             </div>
-            </div>
-            <div className={'actions'}>
+            <div className={styles.composerAction}>
               <span
                 onClick={() => {
                   onSubmit(type, title, val, file)
                   setEditorShowing(false)
                 }}
               >
-                Post
-              </span>
-              <span
-                onClick={() => {
-                  setEditorShowing(false)
-                }}
-              >
-                Cancel
+                Posztolás
               </span>
             </div>            
           </div>

src/components/composer.module.css

@@ -1,22 +1,37 @@
 .container {
     display: flex;
     flex-flow: column;
+    max-width: 400px;
 }
 
     .container > input,
     .container > textarea {
         margin: 5px 0px;
         padding: 4px;
+        width: 97%;
+        border-color: #5d5f61;
+        background-color: #1f2021;
+        border-radius: 5px;
+        font-size: 15px;
+    }
+
+    .container > textarea {
+        margin-left: 1px;
+        width: 99%;
+        resize: none;
     }
 
 .typeSelector {
-  display: flex;
-  align-items: center;
+    display:inline-flex;
+    text-align: center;
+    margin-left: 6px;
 }
 
 .tip {
-  font-size: 10px;
-  margin: 0px 10px;
+    font-size: 11px;
+    font-style: italic;
+    text-align: center;
+    margin: 15px 0px 2px 2px;
 }
 
 .new {
@@ -31,3 +46,32 @@
     .new:hover {
         background-color: var(--hoover-color);
     }
+
+.composerAction {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36%;
+    height: 100%;
+}
+
+    .composerAction > span {
+        margin: 2px 2px;
+        padding: 0px 10px;
+        border: 1px solid #444;
+        border-radius: 5px;
+        cursor: pointer;
+        user-select: none;
+        font-size: 15px;
+        margin-top: 14.5px !important;
+        padding-top: 4px !important;
+        transform: translate(109%, 10%);
+        transition: width 0.5s, height 0.5s, ease-in 0.5s;
+    }
+
+        .composerAction > span:hover {
+            background-color: var(--hoover-color);
+            transition: width 0.5s, height 0.5s, ease-out 0.5s;
+            color: var(--text-color);
+            text-shadow: 2px 1.5px 10px black;
+        }

src/components/dbSelector.module.css

@@ -1,23 +1,33 @@
 .container {
     display: flex;
     flex-flow: column;
-
+    margin-top: 8px;
+    margin-bottom: 0px;
+    margin-right: 22%;
+    margin-left: 22%;
     padding: 5px;
 }
 
 .listItem {
     display: flex;
     justify-content: center;
-
-  padding: 5px;
+    text-align: center;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin: 3px;
     cursor: pointer;
-  color: white;
+    color: #a1a1a1;
+    transition: width 0.5s, height 0.5s, ease-in 0.5s;
 }
 
     .listItem:hover {
         background-color: var(--hoover-color);
+        transition: width 0.5s, height 0.5s, ease-out 0.5s;
+        text-shadow: 2px 1.5px 10px black;
+        color: var(--text-color);
     }
 
 .text {
     text-align: center;
+    color: gainsboro;
 }

src/components/modal.module.css

@@ -12,7 +12,9 @@
     display: flex;
     align-items: stretch;
     max-height: 80%;
-  width: 80%;
+    width: 50%;
+    max-width: 52%;
+    width: auto;
     position: fixed;
     background: var(--background-color);
     height: auto;
@@ -20,24 +22,27 @@
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 8px;
-
-  padding: 20px 30px;
-  cursor: auto;
+    padding-top: 38px;
+    padding-bottom: 25px;
+    padding-right: 14px;
+    padding-left: 16px;
+    cursor: default;
 }
 
 .close {
     cursor: pointer;
-  font-size: 18px;
-  position: absolute;
-
-  top: 10px;
+    font-size: 16.5px;
+    position: fixed;
+    top: 5px;
     right: 10px;
+    margin-bottom: 10px;
+    text-align: right;
     display: inline;
 }
 
 .children {
     max-height: 100%;
     width: 100%;
-  overflow-y: scroll;
-  overflow-x: hidden;
+    overflow-y: auto;
+    overflow-x: auto;
 }

src/defaultStyles.css

@@ -1,6 +1,6 @@
 :root {
     --text-color: #f2cb05;
-  --primary-color: #9999ff;
+    --primary-color: #f2cb05;
     --bright-color: #f2f2f2;
     --background-color: #222426;
     --hoover-color: #393939;
@@ -56,7 +56,6 @@ input {
 .sidebar {
     display: flex;
     flex-direction: column;
-
     margin: 0;
     padding: 0;
     width: 200px;
@@ -137,9 +136,11 @@ input {
         height: auto;
         position: relative;
     }
+
         .sidebar a {
             float: left;
         }
+
     div.content {
         margin-left: 0;
     }
@@ -228,7 +229,6 @@ input {
 .loadingindicator {
     text-align: center;
     vertical-align: middle;
-
     color: #fff;
     font-size: 30px;
 }

src/pages/index.js

@@ -303,7 +303,7 @@ export default function Index({ globalData }) {
     if (allQrSelector) {
       return (
         <DbSelector
-          text={`Válaszd ki melyik adatbázist szeretnéd letölteni (${allQrSelector}):`}
+          text={`Válaszd ki melyik adatbázist szeretnéd letölteni!`}
           showAll={allQrSelector === 'txt'}
           closeClick={() => {
             setAllQrSelector(null)