Sidebar rework (part 2), overall apearance rework (home page)

/home gomb kérdése megoldva, link a logo-n fixed/

src/components/layout.js

@@ -80,11 +80,11 @@ export default function Layout({
             <div />
           </span>
           <div className="sidebarheader">
-            <a href="/"><img
+            <Link href="/"><a><img
               style={{ maxWidth: '100%' }}
               src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
               alt="Frylabs"
-            /></a>
+            /></a></Link>
           </div>
         </div>
         {sidebarOpen ? (
@@ -113,7 +113,7 @@ export default function Layout({
                   'Kérdések szerkesztése, törlése, beküldése, és kitöltetlen tesztek'
                 }
               >
-                Kérdés szerkesztő / kitöltetlen tesztek
+                Kérdés szerkesztő
               </a>
               <a
                 href={`/donate`}
@@ -204,7 +204,7 @@ export default function Layout({
             setShowNewMsgModal(false)
           }}
         >
-          Új üzeneted van, kattints 📬-ra bal alul megtekintéséhez!
+          Új üzeneted van, kattints a 📬-ra bal alul a megtekintéséhez!
         </Modal>
       ) : null}
       <BB />

src/data/tabs.json

@@ -1,11 +1,11 @@
 {
   "index": {
     "href": "/",
-    "text": "Home"
+    "text": "Főoldal"
   },
   "manual": {
     "href": "/manual",
-    "text": "Manual"
+    "text": "A script használata"
   },
   "allQuestions": {
     "href": "/allQuestions",
@@ -13,15 +13,15 @@
   },
   "pwRequest": {
     "href": "/pwRequest",
-    "text": "Jelszó kérés"
+    "text": "Jelszó generálás"
   },
   "contribute": {
     "href": "/contribute",
-    "text": "Todos, contribute"
+    "text": "Teendők"
   },
   "ranklist": {
     "href": "/ranklist",
-    "text": "Ranklista"
+    "text": "Ranglista"
   },
   "feedback": {
     "href": "/feedback",

src/defaultStyles.css

@@ -2,21 +2,25 @@
   --text-color: #F2CB05;
   --bright-color: #f2f2f2;
   --background-color: #222426;
-  --hoover-color: #202020;
+  --hoover-color: #191919;
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Kameron&family=Overpass+Mono:wght@300;400&display=swap');
 
 body {
-    font-family: 'Kameron', serif;
-    font-family: 'Overpass Mono', monospace;
-    color: #999999;
+  font-family: 'Kameron', serif;
+  font-family: 'Overpass Mono', monospace;
+  color: #999999;
 }
 
 a {
   color: white;
 }
 
+a:hover {
+  color: #C1C1C1;
+}
+
 .link {
   margin: 20px;
   font-size: 20px;
@@ -46,19 +50,19 @@ a {
 }
 
 .sidebarLinks a {
-    display: block;
-    text-align: center;
-    color: black;
-    font-size: 108%;
-    padding: 14px;
-    margin-top: 4px;
-    margin-bottom: 4px;
-    text-decoration: none;
-    color: var(--bright-color);
+  display: block;
+  text-align: center;
+  color: black;
+  font-size: 108%;
+  padding: 14px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  text-decoration: none;
+  color: var(--bright-color);
 }
 
 .sidebarLinks a:hover {
-    transition: width 0.5s, height 0.5s, ease-out 0.5s;
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
 }
 
 .sidebarLinks a.active{
@@ -254,7 +258,7 @@ select:hover {
   display: flex;
   margin-top: auto;
   margin-bottom: 20px;
-
+  background-color: #373737;
   align-items: center;
   justify-content: space-between;
 }
@@ -265,8 +269,10 @@ select:hover {
 }
 
 .logout {
-  padding: 7px;
+  padding: 6px;
+  margin-right: 7px;
   cursor: pointer;
+  font-size: 15.5px;
 }
 
 .logout:hover {
@@ -274,9 +280,11 @@ select:hover {
 }
 
 .msgs :first-child {
-  font-size: 35px;
+  font-size: 27px;
+  margin-left: 4px;
 }
 
 .msgs > div {
-  margin: 0px 5px;
+  padding: 2px 6px;
+  font-size: 13.5px;
 }

src/pages/index.js

@@ -81,14 +81,12 @@ export default function Index(props) {
             return (
               <div key={key}>
                 {renderQAItem(newsItem, key)}
-                <hr />
               </div>
             )
           } else {
             return (
               <div key={key}>
                 {renderNewsItem(newsItem, key)}
-                <hr />
               </div>
             )
           }
@@ -97,9 +95,8 @@ export default function Index(props) {
 
       return (
         <div>
-          <div className={styles.title}>News</div>
-          <hr />
-          <hr />
+          <div className={styles.title}>Hírek</div>
+            <hr />
           <div className={styles.questionscontainer}>{questions}</div>
         </div>
       )
@@ -110,10 +107,8 @@ export default function Index(props) {
 
   const renderMotd = () => {
     return (
-      <div>
+      <div className={styles.motd_body}>
         <div className={styles.title}>MOTD</div>
-        <hr />
-        <hr />
         {motd ? (
           <div
             className={styles.motd}
@@ -206,11 +201,8 @@ export default function Index(props) {
           {'Összes kérdés JSON'}
         </a>
       </div>
-      <hr />
       {renderMotd()}
       {/*{userSpecificMotd && renderUserSpecificMotd()} */}
-      <hr />
-      <hr />
       <Sleep />
       {renderNews()}
       {renderDbSelector()}

src/pages/index.module.css

@@ -4,9 +4,10 @@
 
 .button {
   color: white;
-  background-color: #303030;
-  margin: 2px;
-  padding: 10px 5px;
+  background-color: #313131;
+  margin: 0px 4px;
+  padding: 15px 4px;
+  max-width: 100%;
   text-align: center;
   font-size: 16px;
   cursor: pointer;
@@ -22,6 +23,13 @@
 
 .button:hover {
   background-color: #555;
+  color: var(--text-color);
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
+  text-shadow: 2px 1.5px 8px black;
+}
+
+.hr {
+  width: 100%;
 }
 
 .motd {
@@ -31,35 +39,49 @@
 }
 
 .itemContainer {
+  width: 100%;
   margin: 20px 5px;
-}
-
-.itemContainer:hover {
   background-color: var(--hoover-color);
 }
 
 .newsBody {
   margin: 0px 5px;
-  font-size: 18px;
+  padding: 10px 14px;
+  font-size: 17px;
   color: #fff;
+  text-align: justify;
+}
+
+.motd_body {
+  border: 2px dashed var(--text-color);
+  padding-top: 13px;
+  padding-bottom: 15px;
+  padding-left: 5px;
+  padding-right: 5px;
+  margin-top: 18px;
+  margin-bottom: 30px;
+  margin-left: 5px;
+  margin-right: 5px;
+  font-size: 8px;
 }
 
 .title {
-  color: #F2CB05;
-  font-size: 30px;
+  color: var(--text-color);
+  font-size: 32px;
   text-align: center;
+  letter-spacing: 2.5px;
 }
 
 .subtitle {
-  color: #9999ff;
+  color: var(--text-color);
   font-size: 20px;
   text-align: center;
 }
 
 .newsTitle {
-  font-size: 28px;
   color: var(--text-color);
-  margin: 0px 5px;
+  font-size: 28px;
+  padding-left: 17px;
 }
 
 .question {
@@ -74,9 +96,12 @@
 }
 
 .itemNumber {
-  color: #fff;
+  color: #a7a7a7;
   margin: 0px 5px;
-  font-size: 24px;
+  font-size: 22px;
+  padding-top: 12px;
+  padding-left: 13px;
+  padding-bottom: 3px;
 }
 
 .repos {