Merge pull request #280 from nekochans/feature/issue276/update-langua…

…ge-button

LanguageButton をCSS Modulesを使った形に置換え

src/components/Header/LanguageButton.module.css

@@ -0,0 +1,37 @@
+.wrapper {
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  flex-grow: 0;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  order: 1;
+  padding: 12px 20px;
+  border-radius: 4px;
+}
+
+@media (max-width: 767px) {
+  .wrapper {
+    padding: 12px 0;
+  }
+}
+
+.text {
+  flex: none;
+  flex-grow: 0;
+  order: 0;
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 19px;
+  color: var(--primary-color);
+  cursor: pointer;
+}
+
+.fa-caret-down {
+  color: var(--primary-color);
+  cursor: pointer;
+}

src/components/Header/LanguageButton.module.css.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+  readonly wrapper: string;
+  readonly text: string;
+  readonly 'fa-caret-down': string;
+};
+export = styles;

src/components/Header/LanguageButton.tsx

@@ -1,50 +1,16 @@
 import type { FC, MouseEvent } from 'react';
 import { FaCaretDown } from 'react-icons/fa';
-import styled from 'styled-components';
-import { mixins } from '../../styles';
-
-const _Wrapper = styled.div`
-  @media (max-width: ${mixins.mediaQuerySize.default}) {
-    padding: 12px 0;
-  }
-  box-sizing: border-box;
-  display: flex;
-  flex: none;
-  flex-direction: row;
-  flex-grow: 0;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  order: 1;
-  padding: 12px 20px;
-  border-radius: 4px;
-`;
-
-const _Text = styled.p`
-  flex: none;
-  flex-grow: 0;
-  order: 0;
-  font-family: Roboto, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 19px;
-  color: ${mixins.colors.primary};
-  cursor: pointer;
-`;
-
-const faCaretDownStyle = {
-  color: `${mixins.colors.primary}`,
-  cursor: 'pointer',
-};
+import styles from './LanguageButton.module.css';
 
 type Props = {
   onClick: (event: MouseEvent<HTMLDivElement>) => void;
 };
 
 export const LanguageButton: FC<Props> = ({ onClick }) => (
-  <_Wrapper onClick={onClick}>
-    <_Text>Language</_Text>
-    <FaCaretDown style={faCaretDownStyle} />
-  </_Wrapper>
+  // TODO 今はESLintのエラーを無視しているが https://github.com/nekochans/lgtm-cat-ui/issues/279 で修正する
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  <div className={styles.wrapper} onClick={onClick}>
+    <p className={styles.text}>Language</p>
+    <FaCaretDown className={styles['fa-caret-down']} />
+  </div>
 );

src/components/Header/LanguageMenu.module.css

@@ -13,7 +13,7 @@
   padding: 0;
 }
 
-@media (max-width: var(--media-query-default-size)) {
+@media (max-width: 767px) {
   .wrapper {
     right: 0;
   }

src/styles/globals.css

@@ -8,7 +8,6 @@
   --sub-text-color: #8e7e78;
   --white-color: #ffffff;
   --background-color: #faf9f7;
-  --media-query-default-size: 767px;
 }
 
 .button-base {