refactor: css (#26)

.github/workflows/build.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2

.github/workflows/chromatic.yml

@@ -2,15 +2,13 @@ name: Chromatic
 
 on:
   push:
-    branches:
-      - main
 
 jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
     steps:
       - uses: actions/checkout@v3
         with:

.github/workflows/deploy-to-gh-pages.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2

.github/workflows/playwright.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2

src/components/button/Button.tsx

@@ -1,4 +1,4 @@
-import classes from './button.module.scss';
+import button from './button.module.scss';
 
 interface ButtonProps {
   /**
@@ -32,11 +32,11 @@ export const Button = ({
   className,
   ...props
 }: ButtonProps) => {
-  const mode = primary ? classes.primary : '';
+  const mode = primary ? button.primary : '';
   return (
     <button
       type="button"
-      className={[className, classes.btn, classes[size], mode].join(' ')}
+      className={[className, button.base, button[size], mode].join(' ')}
       disabled={isDisabled}
       {...props}
     >

src/components/button/button.module.scss

@@ -1,4 +1,4 @@
-.btn {
+.base {
   transition: opacity 0.3s;
   cursor: pointer;
   box-sizing: border-box;
@@ -23,22 +23,22 @@
       opacity: inherit;
     }
   }
+}
 
-  &.primary {
-    background-color: #1ea7fd;
-    color: white;
-  }
+.primary {
+  background-color: #1ea7fd;
+  color: white;
+}
 
-  &.small {
-    padding: 10px 16px;
-    font-size: 12px;
-  }
-  &.medium {
-    padding: 11px 20px;
-    font-size: 14px;
-  }
-  &.large {
-    padding: 12px 24px;
-    font-size: 16px;
-  }
+.small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.large {
+  padding: 12px 24px;
+  font-size: 16px;
 }

src/components/form/Form.tsx

@@ -1,16 +1,14 @@
 import { PropsWithChildren } from 'react';
 
-import classes from './form.module.scss';
+import layout from '@/components/layout/index.module.scss';
+import form from './form.module.scss';
 
 interface FormProps {
   onSubmit: () => void;
 }
 
 export const Form = ({ onSubmit, children }: PropsWithChildren<FormProps>) => (
-  <form
-    onSubmit={onSubmit}
-    className={[classes.form, classes.container].join(' ')}
-  >
+  <form onSubmit={onSubmit} className={[form.base, layout.container].join(' ')}>
     {children}
   </form>
 );

src/components/form/form.module.scss

@@ -1,4 +1,4 @@
-.form {
+.base {
   display: flex;
   flex-direction: column;
   align-self: center;
@@ -8,8 +8,3 @@
   width: 100%;
   max-width: 20rem;
 }
-
-.container {
-  padding-right: max(env(safe-area-inset-right, 1rem), 1rem);
-  padding-left: max(env(safe-area-inset-left, 1rem), 1rem);
-}

src/components/input/Input.tsx

@@ -1,5 +1,5 @@
 import type { HTMLInputTypeAttribute } from 'react';
-import classes from './input.module.scss';
+import input from './input.module.scss';
 
 interface InputProps {
   type?: HTMLInputTypeAttribute;
@@ -22,16 +22,14 @@ export const Input = ({
   size = 'medium',
 }: InputProps) => (
   <>
-    <label htmlFor={id} className={[classes.label, classes[size]].join(' ')}>
-      <span className={[classes.labelText, classes[size]].join(' ')}>
-        {label}
-      </span>
+    <label htmlFor={id} className={[input.label, input[size]].join(' ')}>
+      <span className={[input.labelText, input[size]].join(' ')}>{label}</span>
       <input
         id={id}
         autoFocus={autoFocus}
         minLength={minLength}
         placeholder={placeholder}
-        className={[classes.input, classes[size]].join(' ')}
+        className={[input.base, input[size]].join(' ')}
         type={type}
       />
     </label>

src/components/input/input.module.scss

@@ -1,4 +1,4 @@
-.input {
+.base {
   transition: border 0.3s;
   box-sizing: border-box;
   border: 1px solid rgb(225, 231, 234);
@@ -11,16 +11,16 @@
     outline: none;
     border: 1px solid rgb(155, 161, 165);
   }
+}
 
-  &.small {
-    padding: 12px 18px;
-  }
-  &.medium {
-    padding: 17px 24px;
-  }
-  &.large {
-    padding: 23px 32px;
-  }
+.small {
+  padding: 12px 18px;
+}
+.medium {
+  padding: 17px 24px;
+}
+.large {
+  padding: 23px 32px;
 }
 
 .label {

src/components/layout/index.module.scss

@@ -0,0 +1,4 @@
+.container {
+  padding-right: max(env(safe-area-inset-right, 1rem), 1rem);
+  padding-left: max(env(safe-area-inset-left, 1rem), 1rem);
+}