From e8b56644f8eb680bd531b7b773fa75843d139bc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=BA=C5=A1=20Hlav=C3=A1=C4=8Dik?=
 <hlavacik.matus@gmail.com>
Date: Sun, 19 May 2024 14:44:58 +0200
Subject: [PATCH] Close button refactor (#379)

* Rewrite CloseButton styles

* Replace classname with sx styles
---
 .../CloseButton/CloseButton.module.scss       | 27 --------------
 .../CloseButton/CloseButton.module.scss.d.ts  | 12 -------
 src/components/CloseButton/CloseButton.tsx    | 36 +++++++++++++++----
 .../PageLayout/MenuMain/MenuMain.module.scss  | 32 -----------------
 .../MenuMain/MenuMain.module.scss.d.ts        | 12 -------
 .../PageLayout/MenuMain/MenuMain.tsx          | 19 +++++-----
 .../Problems/SideContainer.module.scss        |  5 ---
 .../Problems/SideContainer.module.scss.d.ts   |  1 -
 src/components/Problems/SideContainer.tsx     |  2 +-
 .../Problems/UploadProblemForm.module.scss    |  6 ----
 .../UploadProblemForm.module.scss.d.ts        |  1 -
 src/components/Problems/UploadProblemForm.tsx |  7 +++-
 12 files changed, 44 insertions(+), 116 deletions(-)
 delete mode 100644 src/components/CloseButton/CloseButton.module.scss
 delete mode 100644 src/components/CloseButton/CloseButton.module.scss.d.ts
 delete mode 100644 src/components/PageLayout/MenuMain/MenuMain.module.scss
 delete mode 100644 src/components/PageLayout/MenuMain/MenuMain.module.scss.d.ts

diff --git a/src/components/CloseButton/CloseButton.module.scss b/src/components/CloseButton/CloseButton.module.scss
deleted file mode 100644
index 279ea883..00000000
--- a/src/components/CloseButton/CloseButton.module.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.closeButton {
-  cursor: pointer;
-
-  color: white;
-  background-color: black;
-
-  &.active,
-  &:hover {
-    color: black;
-    background-color: white;
-  }
-}
-.invertColors {
-  color: black;
-  background-color: white;
-
-  &.active,
-  &:hover {
-    color: white;
-    background-color: black;
-  }
-}
-
-.alignRight {
-  position: absolute;
-  right: 12px;
-}
diff --git a/src/components/CloseButton/CloseButton.module.scss.d.ts b/src/components/CloseButton/CloseButton.module.scss.d.ts
deleted file mode 100644
index 34103100..00000000
--- a/src/components/CloseButton/CloseButton.module.scss.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type Styles = {
-  active: string
-  alignRight: string
-  closeButton: string
-  invertColors: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/CloseButton/CloseButton.tsx b/src/components/CloseButton/CloseButton.tsx
index a3d869a0..556df407 100644
--- a/src/components/CloseButton/CloseButton.tsx
+++ b/src/components/CloseButton/CloseButton.tsx
@@ -1,21 +1,43 @@
-import clsx from 'clsx'
+import {Box, SxProps} from '@mui/material'
 import {FC} from 'react'
 
 import Close from '@/svg/close.svg'
 
-import styles from './CloseButton.module.scss'
-
 interface CloseButtonProps {
   onClick: () => void
   size: number
   invertColors?: boolean
-  className?: string
+  sx?: SxProps
 }
 
-export const CloseButton: FC<CloseButtonProps> = ({onClick, size, invertColors, className}) => {
+export const CloseButton: FC<CloseButtonProps> = ({onClick, size, invertColors, sx}) => {
   return (
-    <div className={clsx(styles.closeButton, invertColors && styles.invertColors, className)} onClick={onClick}>
+    <Box
+      onClick={onClick}
+      sx={{
+        cursor: 'pointer',
+        padding: 0.5,
+        ...(invertColors
+          ? {
+              color: 'black',
+              background: 'white',
+              '&.active, &:hover': {
+                color: 'white',
+                background: 'black',
+              },
+            }
+          : {
+              color: 'white',
+              background: 'black',
+              '&.active, &:hover': {
+                color: 'black',
+                background: 'white',
+              },
+            }),
+        ...sx,
+      }}
+    >
       <Close width={size} height={size} />
-    </div>
+    </Box>
   )
 }
diff --git a/src/components/PageLayout/MenuMain/MenuMain.module.scss b/src/components/PageLayout/MenuMain/MenuMain.module.scss
deleted file mode 100644
index ccb6bd4b..00000000
--- a/src/components/PageLayout/MenuMain/MenuMain.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.menuButton {
-  cursor: pointer;
-  display: grid;
-  place-items: center;
-
-  padding: 4px;
-}
-
-.menuOpenButton {
-  color: black;
-  background-color: white;
-
-  &:hover {
-    color: white;
-    background-color: black;
-  }
-}
-
-.menuCloseButton {
-  // button taking top-left corner of the rolling menu
-  position: absolute;
-  top: 24px;
-  left: 24px;
-}
-
-.loading {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  color: white;
-}
diff --git a/src/components/PageLayout/MenuMain/MenuMain.module.scss.d.ts b/src/components/PageLayout/MenuMain/MenuMain.module.scss.d.ts
deleted file mode 100644
index 67e6fffc..00000000
--- a/src/components/PageLayout/MenuMain/MenuMain.module.scss.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type Styles = {
-  loading: string
-  menuButton: string
-  menuCloseButton: string
-  menuOpenButton: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
index 4344f3ae..a2fa96ab 100644
--- a/src/components/PageLayout/MenuMain/MenuMain.tsx
+++ b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -1,7 +1,6 @@
 import {Box, Drawer, Stack, Theme, useMediaQuery} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
-import clsx from 'clsx'
 import {useRouter} from 'next/router'
 import {FC, useState} from 'react'
 
@@ -14,7 +13,6 @@ import {useHasPermissions} from '@/utils/useHasPermissions'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {BottomButtons} from './BottomButtons'
-import styles from './MenuMain.module.scss'
 
 export const MenuMain: FC = () => {
   const {seminar, seminarId} = useSeminarInfo()
@@ -36,9 +34,12 @@ export const MenuMain: FC = () => {
   return (
     <>
       {!isVisible && (
-        <div className={clsx(styles.menuButton, styles.menuOpenButton)} onClick={toggleMenu}>
+        <Box
+          sx={{cursor: 'pointer', padding: 0.5, '&:hover': {color: 'white', background: 'black'}}}
+          onClick={toggleMenu}
+        >
           <Menu width={iconSize} height={iconSize} />
-        </div>
+        </Box>
       )}
       <Drawer
         open={isVisible}
@@ -62,15 +63,11 @@ export const MenuMain: FC = () => {
         }}
       >
         <Box flexGrow={1}>
-          <CloseButton
-            size={iconSize}
-            onClick={toggleMenu}
-            className={clsx(styles.menuButton, styles.menuCloseButton)}
-          />
+          <CloseButton size={iconSize} onClick={toggleMenu} sx={{position: 'absolute', top: 24, left: 24}} />
           {menuItemsIsLoading && (
-            <div className={styles.loading}>
+            <Box sx={{position: 'absolute', top: '50%', left: 0, right: 0, color: 'white'}}>
               <Loading />
-            </div>
+            </Box>
           )}
           <Stack sx={{mt: '176px'}}>
             {menuItems.map(({id, caption, url}) => (
diff --git a/src/components/Problems/SideContainer.module.scss b/src/components/Problems/SideContainer.module.scss
index f4a65499..fd47ea10 100644
--- a/src/components/Problems/SideContainer.module.scss
+++ b/src/components/Problems/SideContainer.module.scss
@@ -16,8 +16,3 @@
   justify-content: center;
   align-items: center;
 }
-
-.closeButton {
-  position: absolute;
-  right: 12px;
-}
diff --git a/src/components/Problems/SideContainer.module.scss.d.ts b/src/components/Problems/SideContainer.module.scss.d.ts
index ac5a35e9..b46176b4 100644
--- a/src/components/Problems/SideContainer.module.scss.d.ts
+++ b/src/components/Problems/SideContainer.module.scss.d.ts
@@ -1,5 +1,4 @@
 export type Styles = {
-  closeButton: string
   container: string
   title: string
 }
diff --git a/src/components/Problems/SideContainer.tsx b/src/components/Problems/SideContainer.tsx
index d123bb7e..bc2638d8 100644
--- a/src/components/Problems/SideContainer.tsx
+++ b/src/components/Problems/SideContainer.tsx
@@ -12,7 +12,7 @@ export const SideContainer: FC<{title: string; children: ReactNode; onClose: ()
   return (
     <aside className={styles.container}>
       <div className={styles.title}>
-        <CloseButton onClick={onClose} size={24} className={styles.closeButton} />
+        <CloseButton onClick={onClose} size={24} sx={{position: 'absolute', right: 12}} />
         <Typography variant="h3">{title}</Typography>
       </div>
       {children}
diff --git a/src/components/Problems/UploadProblemForm.module.scss b/src/components/Problems/UploadProblemForm.module.scss
index daaa723d..9bc13d77 100644
--- a/src/components/Problems/UploadProblemForm.module.scss
+++ b/src/components/Problems/UploadProblemForm.module.scss
@@ -40,9 +40,3 @@
   justify-content: flex-end;
   column-gap: 20px;
 }
-
-.closeButton {
-  position: absolute;
-  right: 2px;
-  top: 2px;
-}
diff --git a/src/components/Problems/UploadProblemForm.module.scss.d.ts b/src/components/Problems/UploadProblemForm.module.scss.d.ts
index 1f67a88d..d03266a3 100644
--- a/src/components/Problems/UploadProblemForm.module.scss.d.ts
+++ b/src/components/Problems/UploadProblemForm.module.scss.d.ts
@@ -1,7 +1,6 @@
 export type Styles = {
   actions: string
   bottomAction: string
-  closeButton: string
   container: string
   files: string
   inputWrapper: string
diff --git a/src/components/Problems/UploadProblemForm.tsx b/src/components/Problems/UploadProblemForm.tsx
index c863d6c4..44848eb7 100644
--- a/src/components/Problems/UploadProblemForm.tsx
+++ b/src/components/Problems/UploadProblemForm.tsx
@@ -110,7 +110,12 @@ export const UploadProblemForm: FC<{
       <div className={styles.inputWrapper}>
         {!files && (
           <>
-            <CloseButton onClick={handleCloseButton} size={24} invertColors className={styles.closeButton} />
+            <CloseButton
+              onClick={handleCloseButton}
+              size={24}
+              invertColors
+              sx={{position: 'absolute', top: 2, right: 2}}
+            />
             <FileDropZone
               getRootProps={getRootProps}
               getInputProps={getInputProps}