♻️ #289 UploadButton をCSSModules に置換え

nekochans · May 29, 2023 · 9261ceb · 9261ceb
1 parent d24b6e7
commit 9261ceb
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 63 deletions.
diff --git a/src/components/Upload/UploadButton/UploadButton.module.css b/src/components/Upload/UploadButton/UploadButton.module.css
@@ -0,0 +1,40 @@
+.button {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 20px;
+  background: var(--primary-color);
+  border-radius: 4px;
+}
+
+.button:hover {
+  opacity: 0.8;
+}
+
+.text {
+  flex: none;
+  flex-grow: 0;
+  order: 0;
+  width: 128px;
+  height: 18px;
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+  color: var(--white-color);
+}
+
+.text:hover {
+  opacity: 0.8;
+}
+
+.disabled-button {
+  opacity: 0.5;
+}
+
+.disabled-text {
+  opacity: 0.5;
+}
diff --git a/src/components/Upload/UploadButton/UploadButton.module.css.d.ts b/src/components/Upload/UploadButton/UploadButton.module.css.d.ts
@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly button: string;
+  readonly text: string;
+  readonly 'disabled-button': string;
+  readonly 'disabled-text': string;
+};
+export = styles;
diff --git a/src/components/Upload/UploadButton/UploadButton.tsx b/src/components/Upload/UploadButton/UploadButton.tsx
@@ -1,63 +1,7 @@
 import type { FC, FormEventHandler } from 'react';
-import styled, { css } from 'styled-components';
-import { mixins } from '../../../styles';
 import type { Language } from '../../../types';
 import { assertNever } from '../../../utils';
-
-const buttonCss = css`
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 20px;
-  background: ${mixins.colors.primary};
-  border-radius: 4px;
-`;
-
-const hoverCss = css`
-  &:hover {
-    opacity: 0.8;
-  }
-`;
-
-const _Button = styled.button`
-  ${buttonCss};
-  ${hoverCss};
-`;
-
-const buttonTextCss = css`
-  flex: none;
-  flex-grow: 0;
-  order: 0;
-  width: 128px;
-  height: 18px;
-  font-family: Roboto, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 18px;
-  color: ${mixins.colors.white};
-`;
-
-const _Text = styled.div`
-  ${buttonTextCss};
-  ${hoverCss};
-`;
-
-const disableCss = css`
-  opacity: 0.5;
-`;
-
-const _DisableButton = styled.button`
-  ${buttonCss};
-  ${disableCss};
-`;
-
-const _DisableText = styled.div`
-  ${buttonTextCss};
-  ${disableCss};
-`;
+import styles from './UploadButton.module.css';
 
 const createText = (language: Language): string => {
   switch (language) {
@@ -79,15 +23,27 @@ type Props = {
 export const UploadButton: FC<Props> = ({ language, disabled, onClick }) => {
   if (!disabled) {
     return (
-      <_Button type="submit" disabled={disabled} onClick={onClick}>
-        <_Text>{createText(language)}</_Text>
-      </_Button>
+      <button
+        type="submit"
+        disabled={disabled}
+        onClick={onClick}
+        className={styles.button}
+      >
+        <div className={styles.text}>{createText(language)}</div>
+      </button>
     );
   }
 
   return (
-    <_DisableButton type="submit" disabled={disabled} onClick={onClick}>
-      <_DisableText>{createText(language)}</_DisableText>
-    </_DisableButton>
+    <button
+      type="submit"
+      disabled={disabled}
+      onClick={onClick}
+      className={`${styles.button} ${styles['disabled-button']}`}
+    >
+      <div className={`${styles.text} ${styles['disabled-text']}`}>
+        {createText(language)}
+      </div>
+    </button>
   );
 };