From a18117112da21affaef3c3a9e61c50b047305760 Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Mon, 2 May 2022 20:09:01 +0200
Subject: [PATCH] Improve code style

---
 src/pages/About.js                                      | 6 +++---
 src/pages/Home.js                                       | 8 ++++----
 src/pages/Tools.js                                      | 7 ++++---
 src/tools/cyphers_and_cryptography/base64/Base64Tool.js | 4 ++--
 src/tools/cyphers_and_cryptography/rot/RotTool.js       | 6 +++---
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/pages/About.js b/src/pages/About.js
index 9292466..a4de40d 100644
--- a/src/pages/About.js
+++ b/src/pages/About.js
@@ -8,8 +8,8 @@ import { Helmet } from "react-helmet";
 const AboutPage = () => {
     const { t } = useTranslation();
 
-    return ([
-        <Helmet><title>{t("about.title")} | {t("site.title")}</title></Helmet>,
+    return (<>
+        <Helmet><title>{t("about.title")} | {t("site.title")}</title></Helmet>
         <main>
             <div className={styles.layoutBox}>
                 <h1>{t("about.title")}</h1>
@@ -23,7 +23,7 @@ const AboutPage = () => {
                 <p><Trans i18nKey={"about.visitKevinKdev"}> <a href="https://kevink.dev"> </a> </Trans></p>
             </div>
         </main>
-    ]);
+        </>);
 }
 
 export default AboutPage;
\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
index d045677..8fa6ce2 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -10,15 +10,15 @@ import { Helmet } from "react-helmet";
 const HomePage = () => {
     const { t } = useTranslation();
 
-    return ([
-        <Helmet><title>Home | {t("site.title")}</title></Helmet>,
+    return (<>
+        <Helmet><title>Home | {t("site.title")}</title></Helmet>
         <div className={styles.heroBox}>
             <div className={styles.layoutBox}>
                 <span className={styles.heroPretitle}>{t("home.heroPretitle")}</span>
                 <span className={styles.heroTitle}>{t("home.heroTitle")}</span>
                 <span className={styles.heroSubtitle}>{t("home.heroSubtitle")}</span>
             </div>
-        </div>,
+        </div>
         <main className={styles.categoryBox}>
             <div className={styles.layoutBox}>
                 <span className={styles.title}>{t("tools.toolCategories")}</span>
@@ -30,7 +30,7 @@ const HomePage = () => {
                 </div>
             </div>
         </main>
-    ]);
+    </>);
 }
 
 export default HomePage;
\ No newline at end of file
diff --git a/src/pages/Tools.js b/src/pages/Tools.js
index de78caf..1fd2b4c 100644
--- a/src/pages/Tools.js
+++ b/src/pages/Tools.js
@@ -21,8 +21,8 @@ const ToolsPage = () => {
         return !tool.hidden && (category == null || tool.category === category);
     });
 
-    return ([
-        <Helmet><title>{t("tools.toolList")} | {t("site.title")}</title></Helmet>,
+    return (<>
+        <Helmet><title>{t("tools.toolList")} | {t("site.title")}</title></Helmet>
         <main className={styles.categoryBox}>
             <div className={styles.layoutBox}>
                 <span className={styles.title}>{t("tools.toolList")}</span>
@@ -42,7 +42,8 @@ const ToolsPage = () => {
                 </div>
             </div>
         </main>
-    ]);
+        </>
+    );
 }
 
 export default ToolsPage;
\ No newline at end of file
diff --git a/src/tools/cyphers_and_cryptography/base64/Base64Tool.js b/src/tools/cyphers_and_cryptography/base64/Base64Tool.js
index ff2dbbf..d7493d5 100644
--- a/src/tools/cyphers_and_cryptography/base64/Base64Tool.js
+++ b/src/tools/cyphers_and_cryptography/base64/Base64Tool.js
@@ -35,10 +35,10 @@ const Base64Tool = () => {
 
                 <p><Trans i18nKey={"tools.cryptography.base64.description"} components={{wikipedia: <a href="https://en.wikipedia.org/wiki/Base64">xxx</a>, pre: <pre/>}} /></p>
 
-                <label for="base64-input">{t("tools.cryptography.common.cleartext")}</label>
+                <label htmlFor="base64-input">{t("tools.cryptography.common.cleartext")}</label>
                 <textarea id="base64-input" placeholder={t("tools.cryptography.common.cleartext")} onChange={(e) => {setReversed(false); setInput(e.currentTarget.value);}} value={input}></textarea>
 
-                <label for="base64-output">{t("tools.cryptography.common.ciphertext")}</label>
+                <label htmlFor="base64-output">{t("tools.cryptography.common.ciphertext")}</label>
                 <textarea id="base64-output" placeholder={t("tools.cryptography.common.ciphertext")} onChange={(e) => {setReversed(true); setOutput(e.currentTarget.value);}} value={output}></textarea>
             </div>
         </main>
diff --git a/src/tools/cyphers_and_cryptography/rot/RotTool.js b/src/tools/cyphers_and_cryptography/rot/RotTool.js
index 1ea0699..b5e8a74 100644
--- a/src/tools/cyphers_and_cryptography/rot/RotTool.js
+++ b/src/tools/cyphers_and_cryptography/rot/RotTool.js
@@ -64,13 +64,13 @@ const RotTool = () => {
 
                 <BoxMessage icon={AlertOctagon} color="red" hideInPlace={!outOfRangeWarning}>{t("tools.cryptography.rot.outOfRangeWarning")}</BoxMessage>
 
-                <label for="rot-input">{t("tools.cryptography.common.cleartext")}</label>
+                <label htmlFor="rot-input">{t("tools.cryptography.common.cleartext")}</label>
                 <textarea id="rot-input" placeholder={t("tools.cryptography.common.cleartext")} onChange={(e) => {setReversed(false); setInput(e.currentTarget.value.toUpperCase());}} value={input}></textarea>
 
-                <label for="rot-offset" className={styles.center}>{t("tools.cryptography.rot.offset")}</label>
+                <label htmlFor="rot-offset" className={styles.center}>{t("tools.cryptography.rot.offset")}</label>
                 <input type="number" id="rot-offset" value={offset} onChange={(e) => {setOffset(parseInt(e.currentTarget.value))}} className={styles.center} />
 
-                <label for="rot-output">{t("tools.cryptography.common.ciphertext")}</label>
+                <label htmlFor="rot-output">{t("tools.cryptography.common.ciphertext")}</label>
                 <textarea id="rot-output" placeholder={t("tools.cryptography.common.ciphertext")} onChange={(e) => {setReversed(true); setOutput(e.currentTarget.value.toUpperCase());}} value={output}></textarea>
             </div>
         </main>