icons and space

Author: Funny-cube

components/nav.ts

@@ -1,5 +1,5 @@
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { faCommentDots, faFile } from "@fortawesome/free-solid-svg-icons";
+import { faCommentDots, faFile, faFileCode } from "@fortawesome/free-solid-svg-icons";
 
 export const Tools: Record<
   string,
@@ -34,35 +34,35 @@ export const Tools: Record<
     {
       name: "Yaml Validator",
       short: "Yaml",
-      icon: faFile,
-      description: "Validate Yaml Files",
+      icon: faFileCode,
+      description: "Check your config before you wreck your config",
       link: "/validators/yaml",
     },
     {
       name: "Properties Validator",
       short: "Properties",
-      icon: faFile,
+      icon: faFileCode,
       description: "Validate Properties Files",
       link: "/validators/properties",
     },
     {
       name: "Toml Validator",
       short: "Toml",
-      icon: faFile,
+      icon: faFileCode,
       description: "Validate Toml Files",
       link: "/validators/toml",
     },
     {
       name: "Hocon Validator",
       short: "Hocon",
-      icon: faFile,
+      icon: faFileCode,
       description: "Validate Hocon Files",
       link: "/validators/hocon",
     },
     {
       name: "XML Validator",
       short: "XML",
-      icon: faFile,
+      icon: faFileCode,
       description: "Validate XML Files",
       link: "/validators/xml",
     },

pages/index.tsx

@@ -88,7 +88,7 @@ function ToolboxCard({
   return (
     <Link href={link} passHref>
       <div
-        css={tw`p-3 rounded-2xl bg-white/10 hover:bg-white/20 text-white hover:cursor-pointer width[13rem] h-48 block grid grid-cols-1 place-items-center mix-blend-multiply`}
+        css={tw`p-3 rounded-2xl bg-white/10 hover:bg-white/20 text-white hover:cursor-pointer width[15rem] h-48 block grid grid-cols-1 place-items-center mix-blend-multiply`}
       >
         <FontAwesomeIcon icon={icon} size={"3x"} />
         <p css={tw`font-bold text-lg margin-bottom[-1rem]`}>{name}</p>