HotFix: Fixed Landing Page Menu Buttons (#315)

## Changes

- removed extended Prop and included only necessary props for the pixel
buttons
- styling code refactoring

src/components/pixel-button/pixel-button.tsx

@@ -1,12 +1,15 @@
 import { type FC } from "react";
 import { styled } from "@mui/material/styles";
 import { Button } from "@mui/base";
+
 import { usePlaySFX } from "~/hooks/sounds.js";
 import { SelectIcon } from "~/assets/icons/index.js";
 import { theme } from "~/styles/theme.js";
 
-interface Props extends React.ComponentProps<typeof Button> {
+interface Props {
   text: string;
+  onClick: () => void;
+  disabled?: boolean;
 }
 
 const PixelButtonStyle = styled(Button)({
@@ -50,18 +53,19 @@ const PixelButtonStyle = styled(Button)({
   },
 });
 
-export const PixelButton: FC<Props> = ({ text, ...props }) => {
+export const PixelButton: FC<Props> = ({ text, onClick, disabled }) => {
   const playSfx = usePlaySFX();
   const handleClick = async () => {
     try {
       await playSfx("./sounds/BB_UI_Nav_Click.mp3");
+      onClick();
     } catch (error) {
       console.error(error);
     }
   };
 
   return (
-    <PixelButtonStyle {...props} onClick={handleClick}>
+    <PixelButtonStyle disabled={disabled} onClick={handleClick}>
       <SelectIcon />
       {text}
     </PixelButtonStyle>

src/pages/index.tsx

@@ -81,7 +81,6 @@ const Homepage = () => {
             <PixelButton
               onClick={openAboutHandler}
               text={text.homepage.about}
-              sx={styles.aboutButton}
             />
           </Stack>
         </Stack>

src/styles/pages/homepage.ts

@@ -1,6 +1,7 @@
 import { type SxProps } from "@mui/material";
+import { type SxStyleRecord } from "~/types/sx-style-record.js";
 import { zIndex } from "~/styles/z-index.js";
-import { theme } from "~/styles";
+import { theme } from "~/styles/index.js";
 
 export const styles = {
   wrapper: {
@@ -56,9 +57,9 @@ export const styles = {
     "& > button": {
       transform: "skew(15deg)",
     },
-  },
-  aboutButton: {
-    ml: 2,
+    "& > button:last-of-type": {
+      ml: 2,
+    },
   },
   buttonText: { textTransform: "none" } satisfies SxProps,
-};
+} satisfies SxStyleRecord;