Added: layout.module.css, donate modal, contribute feedback modal, contacts

src/components/layout.js

@@ -9,12 +9,39 @@ import tabs from '../data/tabs.json'
 import constants from '../constants.json'
 import BB from './b.js'
 
+import styles from './layout.module.css'
+
 const renderSnow = () => {
   const date = new Date()
   // if its december, and date is more than 5
   return date.getMonth() === 11 && date.getDate() > 5
 }
 
+function Donate() {
+  return (
+    <div>
+      <div>
+        Paypalon és Patreonon látszódik a neved, de Patreonon könnyen meg lehet
+        változtatni. Ha név nélkül szeretnél adakozni, akkor írd át egy
+        nickname-ra. De akárhova adakozol, a neved sehova se lesz kiadva, és nem
+        látja 3. személy.
+      </div>
+      <div className={styles.donateLogoContainer}>
+        <a
+          href={`${constants.siteUrl}patreon`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img src={`${constants.siteUrl}img/patreon-logo.png`} />
+        </a>
+        <a href={`${constants.siteUrl}donate`} target="_blank" rel="noreferrer">
+          <img src={`${constants.siteUrl}img/paypal-logo.png`} />
+        </a>
+      </div>
+    </div>
+  )
+}
+
 function MessageButton({
   userSpecificMotd,
   setShowMotdModal,
@@ -62,11 +89,10 @@ function MessageButton({
 
 export default function Layout({
   children,
-  route,
+  router,
   globalData,
   refetchGlobalData,
 }) {
-  let href = route
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [windowSize, setWindowSize] = useState([100, 200])
   const [showMotdModal, setShowMotdModal] = useState(false)
@@ -76,6 +102,11 @@ export default function Layout({
   const userId = globalData.userId
   const userSpecificMotd = globalData.userSpecificMotd
 
+  useEffect(() => {
+    setDonateShowing(!!router.query.donate)
+  }, [router.query.donate])
+
+  let href = router.route
   if (href === '/' || href === '') {
     href = 'index'
   }
@@ -130,9 +161,7 @@ export default function Layout({
               <a>
                 <img
                   style={{ maxWidth: '100%' }}
-                  src={`${
-                    constants.siteUrl
-                  }img/frylabs-logo_small_transparent.png`}
+                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
                   alt="FryLabs"
                 />
               </a>
@@ -141,14 +170,14 @@ export default function Layout({
         </div>
         {sidebarOpen ? (
           <>
-            <div id="sideBarLinks" className="sidebarLinks">
+            <div id="sideBarLinks" className={styles.sidebarLinks}>
               {Object.keys(tabs).map((key) => {
                 const item = tabs[key]
                 return (
                   <Link href={item.href} key={key}>
                     <a
                       onClick={closeSideBar}
-                      className={href.includes(key) ? 'active' : undefined}
+                      className={href.includes(key) ? styles.active : undefined}
                       id={item.id || undefined}
                     >
                       {item.text}
@@ -158,7 +187,6 @@ export default function Layout({
               })}
               <a
                 onClick={() => {
-                  console.log('AAAAAAAAA')
                   closeSideBar()
                   setDonateShowing(true)
                 }}
@@ -202,7 +230,7 @@ export default function Layout({
             setDonateShowing(false)
           }}
         >
-          <div>hi</div>
+          <Donate />
         </Modal>
       ) : null}
       {showMotdModal ? (
@@ -215,7 +243,6 @@ export default function Layout({
           <div dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }} />
         </Modal>
       ) : null}
-      <div className="content">{children}</div>
       {userSpecificMotd && !userSpecificMotd.seen && showNewMsgModal ? (
         <Modal
           closeClick={() => {
@@ -225,6 +252,7 @@ export default function Layout({
           Új üzeneted van, kattints a 📬-ra bal alul a megtekintéséhez!
         </Modal>
       ) : null}
+      <div className="content">{children}</div>
       <BB />
     </div>
   )