Fixed the ButtonLink hitbox

client/src/components/ui/Button/index.tsx

@@ -6,11 +6,12 @@ import './button.scss';
 interface Props {
     children: ReactNode;
     type?: "button" | "submit" | "reset";
+    className?: string;
 }
 
-export default function Button({children, type}: Props) {
+export default function Button({children, type, className}: Props) {
     return (
-        <button className="button" type={type}>
+        <button className={"button " + (className || '')} type={type}>
             {children}
         </button>
     );

client/src/components/ui/ButtonLink/button-link.scss

 
 @use 'styles/settings';
 
-.button-link {
-    &, &:hover, &:active, &:focus {
-        color: settings.$white;
+.button.button-link {
+    padding: 0;
+
+    a {
+        display: inline-block;
+        padding: 14px 50px;
+
+        &, &:hover, &:active, &:focus {
+            color: settings.$white;
+        }
     }
 }
 

client/src/components/ui/ButtonLink/index.tsx

@@ -13,10 +13,10 @@ interface Props {
 
 export default function ButtonLink({children, href, routing}: Props) {
     return (
-        <Button>
+        <Button className="button-link">
             { routing
-                ? <Link className="button-link" to={href}>{children}</Link>
-                : <a className="button-link" href={href}>{children}</a>
+                ? <Link to={href}>{children}</Link>
+                : <a href={href}>{children}</a>
             }
         </Button>
     );