Chat

src/components/comments.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 
 import ReactButton from './reactButton.js'
 import Modal from './modal.js'
+import Link from 'next/link'
 
 import styles from './comments.module.css'
 
@@ -61,7 +62,12 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
             >
               {displayed ? '[-]' : '[+]'}
             </div>
-            <div>User #{user}</div>
+            <Link href={`/chat?user=${user}`}>
+              <a title={`Chat #${user}-el`} className={'userId'}>
+                User #{user}
+              </a>
+            </Link>
+            <div className={styles.newsDate}> @ {date}</div>
           </div>
           <div className={styles.commentDate}>{date}</div>
         </div>

src/components/comments.module.css

@@ -75,6 +75,7 @@
 
 .commentAreaContainer > textarea {
   width: 99%;
+  font-size: 18px;
 }
 
 .commentAreaContainer > div {

src/components/layout.js

@@ -4,12 +4,14 @@ import dynamic from 'next/dynamic'
 
 const Snowfall = dynamic(() => import('react-snowfall'), { ssr: false })
 
+import LogoutIcon from './logoutIcon.js'
 import Modal from './modal.js'
-import tabs from '../data/tabs.json'
 import constants from '../constants.json'
 import BB from './b.js'
 
 import styles from './layout.module.css'
+import tabs from '../data/tabs.json'
+import topBarLinks from '../data/topBarLinks.json'
 
 const renderSnow = () => {
   const date = new Date()
@@ -56,15 +58,19 @@ function Donate() {
 }
 
 function UserStatus({ userId, unreads }) {
+  const unreadCount = unreads ? unreads.length : 0
   return (
     <div className={styles.userStatus}>
       <div className={'uid'} title="User ID">
         UID: {userId || '...'}
       </div>
       <Link href="/chat">
-        <a className={styles.unreadNotification}>
+        <a
+          title={`Chat${unreadCount ? ' (' + unreadCount + ' új üzenet)' : ''}`}
+          className={styles.unreadNotification}
+        >
           <span>💬</span>
-          {unreads && unreads.length > 0 ? <div>{unreads.length}</div> : null}
+          {unreadCount ? <div>{unreadCount}</div> : null}
         </a>
       </Link>
 
@@ -83,7 +89,7 @@ function UserStatus({ userId, unreads }) {
           location.reload()
         }}
       >
-        Logout
+        <LogoutIcon size={28} />
       </div>
     </div>
   )
@@ -165,15 +171,20 @@ export default function Layout({ children, router, globalData }) {
           </a>
         </Link>
         <div className={styles.topBarLinks}>
-          <Link href="/contribute">
-            <a>Teendők</a>
-          </Link>
-          <Link href="/pwRequest">
-            <a>Jelszó kérés</a>
-          </Link>
-          <Link href="/ranklist">
-            <a>Ranklista</a>
-          </Link>
+          {Object.keys(topBarLinks).map((key) => {
+            const item = topBarLinks[key]
+
+            return (
+              <Link key={key} href={item.href}>
+                <a
+                  onClick={closeSideBar}
+                  className={href.includes(key) ? styles.active : undefined}
+                >
+                  {item.text}
+                </a>
+              </Link>
+            )
+          })}
         </div>
         <div className={'seperator'} />
         <UserStatus unreads={unreads} userId={userId} />

src/components/layout.module.css

@@ -7,6 +7,7 @@
   width: 100%;
   max-width: 1200px;
   border-bottom: 1px solid var(--primary-color);
+  box-shadow: 0px 3px 3px -3px var(--primary-color);
 
   height: 45px;
 }
@@ -19,16 +20,33 @@
   border: none;
   margin: 0px 15px;
 }
+@media screen and (max-width: 700px) {
+  .topBar img {
+    display: none;
+  }
+
+  .topBarLinks > *:nth-child(1) {
+    display: none;
+  }
+  .topBarLinks > *:nth-child(3) {
+    display: none;
+  }
+}
 
 .topBarLinks {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   word-wrap: break-word;
 }
 
 .topBarLinks > * {
+  display: flex;
+  align-items: center;
+
+  border: 0.5px solid transparent;
   text-align: center;
-  padding: 0px 10px;
+  padding: 0px 8px;
+  margin: 0px 2px;
   text-decoration: none;
 }
 
@@ -37,6 +55,11 @@
   border-radius: 5px;
 }
 
+.topBarLinks a.active {
+  border: 0.5px solid var(--text-color);
+  border-radius: 5px;
+}
+
 .sidebar {
   top: 45px;
   display: flex;
@@ -54,6 +77,8 @@
     width: 100%;
     height: auto;
     position: relative;
+    border-bottom: 1px solid var(--primary-color);
+    box-shadow: 0px 3px 3px -3px var(--primary-color);
   }
 
   .sidebar a {
@@ -79,14 +104,13 @@
 }
 
 .sidebarLinks > a {
-  border: 0.5px solid transparent;
   display: block;
+  border: 0.5px solid transparent;
   text-align: center;
   color: black;
   font-size: 108%;
   padding: 14px;
-  margin-top: 4px;
-  margin-bottom: 4px;
+  margin: 5px 2px;
   text-decoration: none;
   color: var(--bright-color);
   transition: width 0.5s, height 0.5s, ease-in 0.5s;
@@ -146,7 +170,7 @@
 @media screen and (max-width: 700px) {
   .menuicon div {
     display: block;
-    margin: 6px 0;
+    margin: 6px;
     width: 30px;
     height: 5px;
     background-color: var(--bright-color);
@@ -198,13 +222,14 @@
 
 .unreadNotification > span {
   top: 8px;
+  right: -8px;
   display: inline-block;
   position: relative;
 }
 
 .unreadNotification > div {
   display: inline-block;
-  right: 10px;
+  right: 5px;
   top: 10px;
   position: relative;
 
@@ -216,7 +241,6 @@
 
 @media screen and (max-width: 700px) {
   .unreadNotification > div {
-    right: -10px;
-    top: -23px;
+    top: 10px;
   }
 }

src/components/logoutIcon.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default function LogoutIcon({ size }) {
+  return (
+    <span style={{ margin: '4px', display: 'inline-block' }}>
+      <svg
+        width={size}
+        height={size}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={`0 0 24 24`}
+        fill="white"
+      >
+        <path d="M4,12a1,1,0,0,0,1,1h7.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76,1,1,0,0,0-.21-.33l-4-4a1,1,0,1,0-1.42,1.42L12.59,11H5A1,1,0,0,0,4,12ZM17,2H7A3,3,0,0,0,4,5V8A1,1,0,0,0,6,8V5A1,1,0,0,1,7,4H17a1,1,0,0,1,1,1V19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V16a1,1,0,0,0-2,0v3a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V5A3,3,0,0,0,17,2Z" />
+      </svg>
+    </span>
+  )
+}

src/components/newsEntry.js

@@ -2,6 +2,7 @@ import React from 'react'
 
 import ReactButton from './reactButton.js'
 import Comments from './comments.js'
+import Link from 'next/link'
 
 import styles from './newsEntry.module.css'
 
@@ -28,7 +29,11 @@ export default function NewsEntry({
         <div className={styles.newsHeader}>
           <div className={styles.newsTitle}>{title}</div>
           <div className={styles.userinfo}>
-            <div>User #{user}</div>
+            <Link href={`/chat?user=${user}`}>
+              <a title={`Chat #${user}-el`} className={'userId'}>
+                User #{user}
+              </a>
+            </Link>
             <div className={styles.newsDate}> @ {date}</div>
           </div>
         </div>

src/components/todoStuff/todoBoard.module.css

@@ -6,7 +6,6 @@
 
 .table {
   display: flex;
-  min-width: 800px;
 }
 
 .categoryName {

src/components/todoStuff/todoCard.js

@@ -34,9 +34,9 @@ export default function TodoCard(props) {
         </span>
       </div>
       <div className={styles.numbers}>
-        <div className={`${voted && styles.voted}`}>
-          <div>{`Szavazatok: ${votes.length}`}</div>
-        </div>
+        <div
+          className={`${voted && styles.voted}`}
+        >{`Szavazatok: ${votes.length}`}</div>
         <div>{`Nehézség: ${points}`}</div>
       </div>
     </div>

src/components/todoStuff/todoCard.module.css

@@ -34,6 +34,7 @@
 .numbers {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .numbers > div {

src/components/todoStuff/todoSidebar.module.css

@@ -44,6 +44,7 @@
   display: flex;
   justify-content: space-between;
   margin: 2px 10px;
+  flex-wrap: wrap;
 }
 
 .button {