Close button refactor (#379)

* Rewrite CloseButton styles

* Replace classname with sx styles

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>
   )
 }

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}) => (

src/components/Problems/SideContainer.module.scss

@@ -16,8 +16,3 @@
   justify-content: center;
   align-items: center;
 }
-
-.closeButton {
-  position: absolute;
-  right: 12px;
-}

src/components/Problems/SideContainer.module.scss.d.ts

@@ -1,5 +1,4 @@
 export type Styles = {
-  closeButton: string
   container: string
   title: string
 }

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}

src/components/Problems/UploadProblemForm.module.scss

@@ -40,9 +40,3 @@
   justify-content: flex-end;
   column-gap: 20px;
 }
-
-.closeButton {
-  position: absolute;
-  right: 2px;
-  top: 2px;
-}

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

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}