components uses css modules; other refactoring

src/components/Button/index.tsx

@@ -1,9 +1,20 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import Link from 'next/link'
 import cx from 'classnames'
 import { useCallback } from 'react'
 
+const sizeClass = {
+    default: s.sizeDefault,
+    small: s.sizeSmall,
+}
+
+const themeClass = {
+    default: '',
+    icon: s.themeIcon,
+    ghost: s.themeGhost,
+}
+
 export type ButtonProps = {
     value?: any
     style?: React.CSSProperties
@@ -15,8 +26,8 @@ export type ButtonProps = {
 }
 
 export const Button: React.FC<ButtonProps> = ({ size = 'default', theme = 'default', disabled = false, ...props }) => {
-    const className = cx('button', `size_${size}`, `theme_${theme}`, {
-        disabled
+    const className = cx(s.button, sizeClass[size], themeClass[theme], {
+        [s.disabled]: disabled,
     })
     const onClick = useCallback(event => {
         if (props.onClick) {

src/components/Button/styles.module.css

@@ -27,28 +27,28 @@
 
 /* MODIFICATORS */
 
-.button.disabled {
+.disabled {
     pointer-events: none;
     color: var(--color-text-second);
 }
 
 /* SIZE */
 
-.button.size_default {
+.sizeDefault {
     padding: var(--size-s) var(--size-m);
 }
 
-.button.size_small {
+.sizeSmall {
     padding: var(--size-xs) var(--size-s);
     font-size: var(--font-size-second);
 }
 
 /* THEME */
 
-.button.theme_ghost {
+.themeGhost {
     border-color: rgba(0, 0, 0, 0);
 }
 
-.button.theme_icon {
+.themeIcon {
     padding: var(--size-xs) var(--size-xs);
 }