Pt. 1

Author: Fredthedoggy

components/TextBox.tsx

@@ -21,15 +21,15 @@ export const TextBox = ({
 }: {
   title: string;
   code: string;
-  editor?: Dispatch<SetStateAction<string>> | ((config: string) => void);
+  editor?: Dispatch<SetStateAction<string>>;
   language: string;
 }) => {
   if (!editor) {
     return (
       <div css={tw`flex flex-col h-full w-full pt-1 text-white`}>
-        <div css={tw`flex flex-row pl-8`}>
+        <div css={tw`flex flex-row pl-2`}>
           <p css={tw`text-xl font-semibold mx-auto mb-2`}>{title}</p>
-          <div css={tw`flex flex-row h-8 w-8`}>
+          <div css={tw`flex flex-row h-8`}>
             <div
               css={tw`py-1 px-2 bg-green-400 rounded-md hover:cursor-pointer`}
               onClick={() => {

pages/_app.tsx

@@ -66,42 +66,44 @@ function Toolbox({ Component, pageProps }: AppProps) {
           css={tw`text-white w-full md:px-8 p-2 h-14 flex flex-row text-white md:px-12`}
         >
           <div css={tw`flex flex-row w-full`}>
-            <div css={tw`flex flex-row`}>
-              <div css={tw`my-auto`}>
-                <FontAwesomeIcon icon={faToolbox} size={"2x"} />
-              </div>
-              <div css={tw`ml-2 my-auto font-bold text-center`}>
-                <p
-                  css={css`
-                    margin-bottom: -0.2rem;
-                  `}
-                >
-                  HelpChat
-                </p>
-                <p
-                  css={css`
-                    margin-top: -0.2rem;
-                    ${tw`text-xs`}
-                  `}
-                >
-                  ToolBox
-                </p>
+            <Link href={"/"} passHref>
+              <div css={tw`flex flex-row hover:cursor-pointer`}>
+                <div css={tw`my-auto`}>
+                  <FontAwesomeIcon icon={faToolbox} size={"2x"} />
+                </div>
+                <div css={tw`ml-2 my-auto font-bold text-center`}>
+                  <p
+                    css={css`
+                      margin-bottom: -0.2rem;
+                    `}
+                  >
+                    HelpChat
+                  </p>
+                  <p
+                    css={css`
+                      margin-top: -0.2rem;
+                      ${tw`text-xs`}
+                    `}
+                  >
+                    ToolBox
+                  </p>
+                </div>
               </div>
-            </div>
+            </Link>
             <div css={tw`flex flex-row flex-grow flex-shrink`}>
-              <Link href={"/"}>
+              <Link href={"/"} passHref>
                 <p
                   css={tw`px-3 mx-1 py-2 my-auto ml-auto hover:cursor-pointer`}
                 >
                   Home
                 </p>
               </Link>
-              <Link href={"https://www.spigotmc.org/members/helpchat.1491649/"}>
+              <Link href={"https://www.spigotmc.org/members/helpchat.1491649/"} passHref>
                 <p css={tw`px-3 mx-1 py-2 my-auto hover:cursor-pointer`}>
                   Spigot
                 </p>
               </Link>
-              <Link href={"https://github.com/HelpChat"}>
+              <Link href={"https://github.com/HelpChat"} passHref>
                 <p css={tw`px-3 mx-1 py-2 my-auto hover:cursor-pointer`}>
                   Github
                 </p>
@@ -130,7 +132,7 @@ function Toolbox({ Component, pageProps }: AppProps) {
                     if (Array.isArray(Tools[key])) {
                       (Tools[key] as ToolboxTool[]).forEach((tool) => {
                         children.push(
-                          <Link href={tool.link} key={tool.short}>
+                          <Link href={tool.link} key={tool.short} passHref>
                             <p
                               css={tw`px-3 ml-2 pt-3 pb-1 hover:cursor-pointer`}
                             >
@@ -147,7 +149,7 @@ function Toolbox({ Component, pageProps }: AppProps) {
                             key1
                           ].forEach((tool) => {
                             children.push(
-                              <Link href={tool.link} key={tool.short}>
+                              <Link href={tool.link} key={tool.short} passHref>
                                 <p
                                   css={tw`px-3 ml-3 pt-3 pb-1 hover:cursor-pointer`}
                                 >
@@ -182,7 +184,7 @@ function Toolbox({ Component, pageProps }: AppProps) {
                   })}
                 </div>
               </div>
-              <Link href={"https://discord.gg/helpchat"}>
+              <Link href={"https://discord.gg/helpchat"} passHref>
                 <p
                   css={tw`px-3 mx-1 py-2 my-auto hover:cursor-pointer bg-white text-black rounded-md`}
                 >
@@ -198,11 +200,4 @@ function Toolbox({ Component, pageProps }: AppProps) {
   );
 }
 
-type ColorSplotch = {
-  color: string;
-  size: number;
-  x: number;
-  y: number;
-};
-
 export default Toolbox;

tailwind.config.js

@@ -14,7 +14,6 @@ module.exports = {
       indigo: colors.indigo,
       yellow: colors.yellow,
       green: colors.green,
-      purple: colors.purple,
     },
   },
 };