Improve code style

src/pages/About.js

@@ -8,8 +8,8 @@ import { Helmet } from "react-helmet";
 const AboutPage = () => {
     const { t } = useTranslation();
 
-    return ([
+    return (<>
-        <Helmet><title>{t("about.title")} | {t("site.title")}</title></Helmet>,
+        <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;

src/pages/Home.js

@@ -10,15 +10,15 @@ import { Helmet } from "react-helmet";
 const HomePage = () => {
     const { t } = useTranslation();
 
-    return ([
+    return (<>
-        <Helmet><title>Home | {t("site.title")}</title></Helmet>,
+        <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;

src/pages/Tools.js

@@ -21,8 +21,8 @@ const ToolsPage = () => {
         return !tool.hidden && (category == null || tool.category === category);
     });
 
-    return ([
+    return (<>
-        <Helmet><title>{t("tools.toolList")} | {t("site.title")}</title></Helmet>,
+        <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;

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>

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>