Finishing up style fixes across pages

src/components/feedbackArea.js

@@ -24,11 +24,11 @@ function submitFeedback(msg, from) {
         if (resp.success) {
           resolve()
         } else {
-          alert('Hiba küldés közben')
+          alert('Hiba küldés közben!')
         }
       })
       .catch((err) => {
-        alert('Hiba küldés közben')
+        alert('Hiba küldés közben!')
         console.error(err)
       })
   })
@@ -39,27 +39,32 @@ export default function FeedbackArea({ from }) {
 
   return (
     <div className={styles.inputArea}>
-      <textarea
-        onChange={(event) => setFeedback(event.target.value)}
-        value={feedback}
-        className={styles.feedback}
-      />
-      <div className={'buttonContainer'}>
-        <div
-          onClick={() => {
-            if (feedback) {
-              submitFeedback(feedback, from).then(() => {
-                alert('Elküldve')
-                setFeedback('')
-              })
-            } else {
-              alert('Adj meg valami üzenetet ...')
-            }
-          }}
-        >
-          Küldés
+      <center>
+        <textarea
+          placeholder={'Ide kezdhetsz el írni...'}
+          onChange={(event) => setFeedback(event.target.value)}
+          value={feedback}
+          className={styles.feedback}
+        />
+      </center>
+      <center>
+        <div className={`${styles.send} buttonContainer`}>
+          <div
+            onClick={() => {
+              if (feedback) {
+                submitFeedback(feedback, from).then(() => {
+                  alert('Üzenet elküldve!')
+                  setFeedback('')
+                })
+              } else {
+                alert('Üresen hagytad az üzenet szövegének helyét!')
+              }
+            }}
+          >
+            Küldés
+          </div>
         </div>
-      </div>
+      </center>
     </div>
   )
 }

src/components/feedbackArea.module.css

@@ -2,12 +2,19 @@
   color: var(--text-color);
   background-color: var(--background-color);
   font-size: 14px;
-  width: 100%;
+  width: 60% !important;
   box-sizing: border-box;
-  height: 60px;
+  height: 100px;
+  resize: none;
+  margin-top: 15px;
+  padding: 5px;
+}
+
+.send {
+  width: 20%;
+  margin-bottom: 60px;
 }
 
 .inputArea {
-  display: flex;
-  align-items: center;
+  display: block;
 }

src/components/layout.js

@@ -20,10 +20,11 @@ const renderSnow = () => {
 function Donate() {
   return (
     <div>
-      <div>
-        Paypalon és Patreonon látszódik a neved, de Patreonon könnyen meg lehet
+      <div className={styles.modalHead}>Donate</div>
+      <div style={{ textAlign: 'justify', margin: '8px' }}>
+        Paypalen é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
+        nickname-re. De akárhova adakozol, a neved sehova se lesz kiadva, és nem
         látja 3. személy.
       </div>
       <div className={styles.donateLogoContainer}>
@@ -32,10 +33,22 @@ function Donate() {
           target="_blank"
           rel="noreferrer"
         >
-          <img src={`${constants.siteUrl}img/patreon-logo.png`} />
+          <img
+            style={{
+              border: 'none',
+              margin: '15px',
+            }}
+            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`} />
+          <img
+            style={{
+              border: 'none',
+              margin: '15px',
+            }}
+            src={`${constants.siteUrl}img/paypal-logo.png`}
+          />
         </a>
       </div>
     </div>
@@ -102,9 +115,12 @@ export default function Layout({
   const userId = globalData.userId
   const userSpecificMotd = globalData.userSpecificMotd
 
-  useEffect(() => {
-    setDonateShowing(!!router.query.donate)
-  }, [router.query.donate])
+  useEffect(
+    () => {
+      setDonateShowing(!!router.query.donate)
+    },
+    [router.query.donate]
+  )
 
   let href = router.route
   if (href === '/' || href === '') {
@@ -160,8 +176,14 @@ export default function Layout({
             <Link href="/">
               <a>
                 <img
-                  style={{ maxWidth: '100%' }}
-                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
+                  style={{
+                    maxWidth: '100%',
+                    border: 'none',
+                    margin: '1px',
+                  }}
+                  src={`${
+                    constants.siteUrl
+                  }img/frylabs-logo_small_transparent.png`}
                   alt="FryLabs"
                 />
               </a>

src/components/layout.module.css

@@ -1,3 +1,13 @@
+.modalHead {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 700;
+  padding-top: 0px;
+  margin-top: 0px;
+  padding-bottom: 20px;
+  letter-spacing: 3px;
+}
+
 .donateLogoContainer {
   display: flex;
   justify-content: center;