Remove last scss modules (#558)

* rewrite last scss modules to `sx`

* remove scss modules setup

.eslintrc.js

@@ -286,14 +286,6 @@ module.exports = {
       },
     },
 
-    // SCSS types use default exports
-    {
-      files: ['src/index.scss.d.ts', 'src/**/*.module.scss.d.ts'],
-      rules: {
-        'import/no-default-export': 'off',
-      },
-    },
-
     // generated types contain many `any`s
     {
       files: ['src/types/api/generated/**/*.ts'],

.github/workflows/test.yml

@@ -18,8 +18,6 @@ jobs:
           cache: yarn
       - name: Install dependencies
         run: yarn
-      - name: Check whether all possible CSS types are generated
-        run: yarn css-types:check
       - name: Run typecheck
         run: yarn tsc
       - name: Run ESLint

README.md

@@ -3,7 +3,6 @@
 - [Spustenie backendu](#spustenie-backendu)
   - [Lokálny BE](#lokálny-be)
 - [Spustenie frontendu](#spustenie-frontendu)
-- [CSS types (deprecated)](#css-types-deprecated)
 - [IDE setup](#ide-setup)
 
 ## Spustenie backendu
@@ -63,22 +62,6 @@ yarn dev
 
 Tento príkaz spustí server na `localhost:3000`, ktorý reaguje na zmeny vo frontendovom kóde a automaticky sa reloaduje.
 
-## CSS types (deprecated)
-
-DEPRECATED: `.module.scss` súborov sa snažíme zbaviť.
-
-Na pregenerovanie CSS typov pre `styles` z `*.module.scss` (do súborov `*.module.scss.d.ts`) je potrebné spustiť:
-
-```sh
-yarn css-types
-```
-
-Ak chceme aby sa tieto typy generovali automaticky počas vyvíjania, je tu príkaz:
-
-```sh
-yarn css-types-watch
-```
-
 ## IDE setup
 
 Používame VSCode, nainštaluj si doň [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) rozšírenie (formátuje kód). V repe máme `.vscode` config, v ktorom zapíname "fix-on-save" - kód sa teda formátuje pri uložení súboru.

package.json

@@ -10,10 +10,7 @@
     "start": "next start",
     "build": "next build",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "css-types": "typed-scss-modules src --exportType default",
-    "css-types:check": "yarn css-types --listDifferent",
-    "css-types:watch": "yarn css-types --watch"
+    "lint:fix": "eslint . --fix"
   },
   "dependencies": {
     "@emotion/react": "^11.13.5",
@@ -75,9 +72,7 @@
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unicorn": "^56.0.1",
-    "prettier": "^3.3.3",
-    "sass": "^1.81.0",
-    "typed-scss-modules": "^8.0.1"
+    "prettier": "^3.3.3"
   },
   "packageManager": "[email protected]",
   "resolutions": {

src/components/FileDropZone/FileDropZone.tsx

@@ -1,8 +1,7 @@
+import {Box} from '@mui/material'
 import {FC} from 'react'
 import {DropzoneInputProps, DropzoneRootProps} from 'react-dropzone'
 
-import styles from './FileDropZone.module.scss'
-
 interface FileDropZoneProps {
   text: string
   getRootProps: <T extends DropzoneRootProps>(props?: T) => T
@@ -11,9 +10,26 @@ interface FileDropZoneProps {
 
 export const FileDropZone: FC<FileDropZoneProps> = ({text, getRootProps, getInputProps}) => {
   return (
-    <div {...getRootProps({className: styles.dropzone})}>
+    <Box
+      sx={{
+        cursor: 'pointer',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '5rem',
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+        color: '#BBB',
+        bgcolor: '#EEE',
+        border: '2px dashed black',
+        ':hover': {
+          bgcolor: '#DDD',
+        },
+      }}
+      {...getRootProps()}
+    >
       <input {...getInputProps()} />
       <p>{text}</p>
-    </div>
+    </Box>
   )
 }

src/components/Markdown/Texts.tsx

@@ -1,8 +1,7 @@
-import {Typography} from '@mui/material'
+import {Box, Typography} from '@mui/material'
 import {FC, JSX, ReactNode} from 'react'
 
 import {Link} from '../Clickable/Link'
-import styles from './Texts.module.scss'
 
 type MarkdownLinkProps = {
   children: ReactNode[]
@@ -16,15 +15,24 @@ export const MarkdownLink: FC<MarkdownLinkProps> = ({children, href}) => (
 )
 
 export const Table: FC<JSX.IntrinsicElements['table']> = ({children}) => (
-  <table className={styles.table}>{children}</table>
+  <Box component="table" sx={{textAlign: 'center'}}>
+    {children}
+  </Box>
 )
 
 export const Th: FC<JSX.IntrinsicElements['th']> = ({children}) => (
-  <th className={styles.th}>
+  <Box
+    component="th"
+    sx={{
+      padding: '3px 1.5vw',
+      bgcolor: 'black',
+      color: 'white',
+    }}
+  >
     <Typography variant="h3" component="span">
       {children}
     </Typography>
-  </th>
+  </Box>
 )
 
 export const Td: FC<JSX.IntrinsicElements['td']> = ({children}) => (