⬆ Bump minor frontend deps

♻ Stop using React.FC

frontend/src/components/Footer.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ReactComponent as Brick } from "../assets/brick.svg";
 import styles from "./Footer.module.css";
 
-export const Footer: React.FC = () => {
+export const Footer = (): JSX.Element => {
   return (
     <footer className={styles.footer}>
       Made with <span className={styles.heart}>❤</span> by{" "}

frontend/src/components/Header.tsx

@@ -8,7 +8,7 @@ const ADMIN_URL = `${import.meta.env.VITE_API_URL}/admin/`;
 
 const navLinkStyles = ({ isActive }: { isActive: boolean }) => clsx(styles.navLink, { [styles.active]: isActive });
 
-export const Header: React.FC = () => {
+export const Header = (): JSX.Element => {
   return (
     <header className={styles.header}>
       <nav className={styles.nav}>

frontend/src/components/ProductCard.tsx

@@ -11,7 +11,7 @@ type ProductCardProps = {
   amount: number;
 };
 
-export const ProductCard: React.FC<ProductCardProps> = ({ product, onProduct, amount, active = false }) => {
+export const ProductCard = ({ product, onProduct, amount, active = false }: ProductCardProps): JSX.Element => {
   const classes = clsx(styles.product, { [styles.active]: active });
   return (
     <button className={classes} type="button" onClick={onProduct}>

frontend/src/components/Splash.tsx

@@ -8,14 +8,12 @@ interface SplashProps {
   noOverlay?: boolean;
 }
 
-export const Splash: React.FC<SplashProps> = ({ brandText = "BBS", noOverlay = false }) => {
-  return (
-    <div className={clsx(styles.splash, { [styles.overlay]: !noOverlay })}>
-      <div className={styles.wrap}>
-        <div className={styles.sun}></div>
-        <div className={styles.brand}>{brandText}</div>
-        <div className={styles.subtitle}>Biceps Bar System</div>
-      </div>
+export const Splash = ({ brandText = "BBS", noOverlay = false }: SplashProps): JSX.Element => (
+  <div className={clsx(styles.splash, { [styles.overlay]: !noOverlay })}>
+    <div className={styles.wrap}>
+      <div className={styles.sun}></div>
+      <div className={styles.brand}>{brandText}</div>
+      <div className={styles.subtitle}>Biceps Bar System</div>
     </div>
-  );
-};
+  </div>
+);

frontend/src/components/Toast.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import styles from "./Toast.module.css";
 import { useToast } from "./ToastProvider";
 
-export const Toast: React.FC = () => {
+export const Toast = (): JSX.Element => {
   const { showToast, message, background, visible } = useToast();
 
   const classes = clsx([styles[background], styles.toast], { [styles.visible]: visible });

frontend/src/components/ToastProvider.tsx

@@ -26,7 +26,7 @@ const ToastContext = React.createContext<ToastProps>(defaultState);
 type ToastProviderProps = {
   children: ReactNode;
 };
-export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+export const ToastProvider = ({ children }: ToastProviderProps): JSX.Element => {
   const [visible, setVisible] = useState(defaultState.visible);
   const [message, setMessage] = useState(defaultState.message);
   const [background, setBackground] = useState(defaultState.background);

frontend/src/components/UserCard.tsx

@@ -11,7 +11,7 @@ type UserCardProps = {
 };
 
 /** If user is null, then it's the special external user */
-export const UserCard: React.FC<UserCardProps> = ({ user, onUser, active = false }) => {
+export const UserCard = ({ user, onUser, active = false }: UserCardProps): JSX.Element => {
   const classes = clsx(styles.user, { [styles.active]: active });
   return (
     <button className={classes} onClick={onUser} type="button">