Link/Button: serious style overhaul using sx + usages + Menu fixes (#…

…368)

* refactor: rework Link/Button styles with sx

* Button/Link: `invertColors`, `disabled`, `active` style unification + wrapper for paddings

* refactor: rework Footer styles with sx

* rework Authentication with sx and use Button/Link with invertColors

* refactor: move and rename Authentication/Authentication -> MenuMain/BottomButtons

* small fix: wrapped text in Problem buttons enlarging other buttons

* rework MenuMain using our Links

* fix comment typo

* unrelated: theme font fallback

* MenuMain - remove unused styles

src/components/Clickable/Button.tsx

@@ -1,27 +1,40 @@
-import {Typography, TypographyProps} from '@mui/material'
-import clsx from 'clsx'
+import {Box, SxProps, Theme, Typography, TypographyProps} from '@mui/material'
 import {ButtonHTMLAttributes, FC, ReactNode} from 'react'
 
-import styles from './Clickable.module.scss'
+import {buttonTextSx, getButtonWrapperSx} from './buttonStyles'
 
 type ButtonProps = {
   onClick?: () => void
   disabled?: boolean
   children: ReactNode
   variant?: TypographyProps['variant']
+  invertColors?: boolean
+  sx?: SxProps<Theme>
+  textSx?: SxProps<Theme>
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>
 
-export const Button: FC<ButtonProps> = ({children, onClick, disabled, type, variant}) => {
+export const Button: FC<ButtonProps> = ({children, onClick, disabled, type, variant, invertColors, sx, textSx}) => {
   return (
-    <Typography
-      variant={variant ?? 'button3'}
+    // tento wrapper je tu kvoli lepsej kontrole paddingov atd.
+    <Box
       component="button"
       onClick={onClick}
-      className={clsx(styles.actionButton, disabled && styles.disabled)}
       disabled={disabled}
       type={type}
+      sx={{
+        ...getButtonWrapperSx({invertColors, disabled}),
+        ...sx,
+      }}
     >
-      {children}
-    </Typography>
+      <Typography
+        variant={variant ?? 'button3'}
+        sx={{
+          ...buttonTextSx,
+          ...textSx,
+        }}
+      >
+        {children}
+      </Typography>
+    </Box>
   )
 }

src/components/Clickable/Link.tsx

@@ -1,41 +1,56 @@
-import {SxProps, Theme, Typography, TypographyProps} from '@mui/material'
-import clsx from 'clsx'
+import {Box, SxProps, Theme, Typography, TypographyProps} from '@mui/material'
 import NextLink from 'next/link'
 import {ComponentProps, FC, ReactNode} from 'react'
 
-import styles from './Clickable.module.scss'
+import {buttonTextSx, getButtonWrapperSx} from './buttonStyles'
 
 type LinkProps = {
   href?: string
   disabled?: boolean
   children: ReactNode
   variant?: TypographyProps['variant']
+  invertColors?: boolean
+  active?: boolean
   sx?: SxProps<Theme>
+  textSx?: SxProps<Theme>
 } & Pick<ComponentProps<typeof NextLink>, 'target'>
 
-export const Link: FC<LinkProps> = ({children, href, disabled, target, variant, sx}) => {
+export const Link: FC<LinkProps> = ({children, href, disabled, target, variant, invertColors, active, sx, textSx}) => {
   // https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
   return disabled ? (
     <Typography
       variant={variant ?? 'button3'}
       component="a"
-      className={clsx(styles.actionButton, styles.disabled)}
       aria-disabled
       role="link"
-      sx={sx}
+      sx={{
+        ...getButtonWrapperSx({invertColors, disabled, active}),
+        ...buttonTextSx,
+        ...sx,
+      }}
     >
       {children}
     </Typography>
   ) : (
-    <Typography
-      variant={variant ?? 'button3'}
+    // tento wrapper je tu kvoli lepsej kontrole paddingov atd.
+    <Box
       component={NextLink}
       href={href ?? ''}
       target={target}
-      className={clsx(styles.actionButton)}
-      sx={sx}
+      sx={{
+        ...getButtonWrapperSx({invertColors, disabled, active}),
+        ...sx,
+      }}
     >
-      {children}
-    </Typography>
+      <Typography
+        variant={variant ?? 'button3'}
+        sx={{
+          ...buttonTextSx,
+          ...textSx,
+        }}
+      >
+        {children}
+      </Typography>
+    </Box>
   )
 }

src/components/Clickable/buttonStyles.ts

@@ -0,0 +1,39 @@
+import {SxProps, Theme} from '@mui/material'
+
+export const getButtonWrapperSx = ({
+  invertColors,
+  disabled,
+  active,
+}: {
+  invertColors?: boolean
+  disabled?: boolean
+  active?: boolean
+}) => {
+  const invert = !!invertColors !== !!active
+
+  return {
+    display: 'flex',
+    cursor: disabled ? 'default' : 'pointer',
+    // reset default <button> styles
+    padding: 0,
+    border: 0,
+    // nakoniec to nemusi byt napisane cez CSS vars, ale mame takto moznost napr. referovat farby v children elementoch
+    bgcolor: 'var(--bgcolor)',
+    color: 'var(--color)',
+    borderColor: 'var(--color)',
+    '--bgcolor': invert ? 'black' : 'white',
+    '--color': disabled ? '#ccc' : invert ? 'white' : 'black',
+    '&:hover': active
+      ? {}
+      : {
+          '--bgcolor': disabled ? '#ccc' : invert ? 'white' : 'black',
+          '--color': disabled ? 'white' : invert ? 'black' : 'white',
+        },
+  } satisfies SxProps<Theme>
+}
+
+export const buttonTextSx = {
+  mx: '10px',
+  mb: '4px',
+  borderBottom: '5px solid',
+} satisfies SxProps<Theme>

src/components/PageLayout/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import {Stack} from '@mui/material'
+import {Box, Stack} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {FC} from 'react'
@@ -9,8 +9,6 @@ import {ILogo, Logo} from '@/components/PageLayout/Footer/Logo'
 import {MenuItemShort} from '@/types/api/cms'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
-import styles from './Footer.module.scss'
-
 export const Footer: FC = () => {
   const {seminar, seminarId} = useSeminarInfo()
 
@@ -35,16 +33,24 @@ export const Footer: FC = () => {
   const logos = logosData?.data.filter((logo) => !logo.disabled) ?? []
 
   return (
-    <div className={styles.container}>
-      <div className={styles.content}>
+    <Box
+      sx={{
+        width: '100%',
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        bgcolor: 'black',
+        color: 'white',
+        // bottom offset because of sticky debug footer
+        pb: '1rem',
+      }}
+    >
+      <Box sx={{gridColumnStart: 2, gridColumnEnd: 4}}>
         <Stack direction="row" m={2} gap={2} justifyContent="center" sx={{flexWrap: 'wrap'}}>
           {menuItemsIsLoading && <Loading />}
           {menuItems.map((item) => (
-            <div key={item.id} className={styles.menuItem}>
-              <Link variant="button2" href={`/${seminar}${item.url}`}>
-                {item.caption}
-              </Link>
-            </div>
+            <Link key={item.id} variant="button2" href={`/${seminar}${item.url}`} invertColors>
+              {item.caption}
+            </Link>
           ))}
           {menuItemsError && <p>{menuItemsError.message}</p>}
         </Stack>
@@ -55,7 +61,7 @@ export const Footer: FC = () => {
           ))}
           {logosError && <p>{logosError.message}</p>}
         </Stack>
-      </div>
-    </div>
+      </Box>
+    </Box>
   )
 }