[pull] master from junkboy0315:master

frontend/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel", "@emotion/babel-preset-css-prop"]
+}

frontend/.env.development

@@ -1 +1,3 @@
-NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_GOOGLE_AD_CLIENT=ca-pub-7134126650568891
+NEXT_PUBLIC_GOOGLE_AD_SLOT=2983860255

frontend/.env.production

@@ -1 +1,3 @@
-NEXT_PUBLIC_API_URL=https://pairwise-api.yuuniworks.com
+NEXT_PUBLIC_API_URL=https://pairwise-api.yuuniworks.com
+NEXT_PUBLIC_GOOGLE_AD_CLIENT=ca-pub-7134126650568891
+NEXT_PUBLIC_GOOGLE_AD_SLOT=2983860255

frontend/package.json

@@ -9,23 +9,17 @@
     "export": "next build && next export"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.28",
     "adblock-detector-hook": "^0.1.0",
-    "emotion": "^10.0.27",
-    "next": "9.5.0",
+    "next": "9.5.4",
     "normalize.css": "^8.0.1",
     "react": "16.13.1",
     "react-dom": "16.13.1"
   },
   "devDependencies": {
+    "@emotion/babel-preset-css-prop": "^10.0.27",
     "@types/node": "^14.0.27",
     "@types/react": "^16.9.43",
-    "@typescript-eslint/eslint-plugin": "^3.7.1",
-    "@typescript-eslint/parser": "^3.7.1",
-    "eslint": "^7.5.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.5",
-    "eslint-plugin-react-hooks": "^4.0.8",
     "typescript": "^3.9.7"
   }
 }

frontend/public/ads.txt

@@ -0,0 +1 @@
+google.com, pub-7134126650568891, DIRECT, f08c47fec0942fa0

frontend/src/components/Button/Button.module.css

@@ -1,21 +0,0 @@
-.button {
-  cursor: pointer;
-  color: #343a40;
-  border-color: #343a40;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  border-radius: 0.25rem;
-  transition: all 0.15s;
-}
-
-.button:hover {
-  color: #fff;
-  background-color: #343a40;
-  border-color: #343a40;
-}
-
-.button:focus {
-  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
-  outline: 0;
-  text-decoration: none;
-}

frontend/src/components/Button/Button.tsx

@@ -1,10 +1,35 @@
-import React from 'react';
-import style from './Button.module.css';
+import { css } from '@emotion/core';
 
 export const Button = (props) => {
-  const { children, ...rest } = props;
+  const { children, className, ...rest } = props;
+
+  const styles = {
+    button: css`
+      cursor: pointer;
+      color: #343a40;
+      border-color: #343a40;
+      padding: 0.375rem 0.75rem;
+      font-size: 1rem;
+      border-radius: 0.25rem;
+      transition: all 0.15s;
+      width: 100%;
+
+      :hover {
+        color: #fff;
+        background-color: #343a40;
+        border-color: #343a40;
+      }
+
+      :focus {
+        box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
+        outline: 0;
+        text-decoration: none;
+      }
+    `,
+  };
+
   return (
-    <button className={style.button} {...rest}>
+    <button css={styles.button} {...rest}>
       {children}
     </button>
   );

frontend/src/components/ModalDialog/ModalDialog.tsx

@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/core';
 import React from 'react';
 import { Portal } from '../Portal/Portal';
 
@@ -45,9 +45,9 @@ export const ModalDialog: React.FC<IProps> = (props) => {
 
   return (
     <Portal>
-      <div className={styles.container}>
-        <div className={styles.backdrop} />
-        <div className={styles.modalContent}>{children}</div>
+      <div css={styles.container}>
+        <div css={styles.backdrop} />
+        <div css={styles.modalContent}>{children}</div>
       </div>
     </Portal>
   );

frontend/src/features/ads/AdBlockGuard.tsx

@@ -1,5 +1,5 @@
+import { css } from '@emotion/core';
 import { useAdBlockDetector } from 'adblock-detector-hook';
-import { css } from 'emotion';
 import React, { useCallback, useEffect, useState } from 'react';
 import { ModalDialog } from '../../components/ModalDialog';
 
@@ -41,12 +41,12 @@ export const AdBlockGuard: React.FC<IProps> = (props) => {
           <div>
             <p>We&apos;ve noticed that you are using an ad blocker.</p>
             <p>
-              Please <b>disable your ad blocker</b> for this site and help us to
+              Please <b>disable your ad blocker for this site</b> and help us to
               provide free services.
             </p>
           </div>
-          <div className={styles.buttonRow}>
-            <button className={styles.button} onClick={onCloseButtonClicked}>
+          <div css={styles.buttonRow}>
+            <button css={styles.button} onClick={onCloseButtonClicked}>
               Close
             </button>
           </div>

frontend/src/features/ads/AdCard.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+
+interface IProps {}
+
+export const AdCard: React.FC<IProps> = ({}) => {
+  useEffect(() => {
+    if (!process.browser) {
+      return;
+    }
+    if (!window.adsbygoogle) {
+      window.adsbygoogle = [];
+    }
+    window.adsbygoogle.push({});
+  }, []);
+
+  return (
+    <ins
+      className="adsbygoogle"
+      style={{ display: 'inline-block', width: '1200px', height: '90px' }}
+      data-ad-client={process.env.NEXT_PUBLIC_GOOGLE_AD_CLIENT}
+      data-ad-slot={process.env.NEXT_PUBLIC_GOOGLE_AD_SLOT}
+      data-full-width-responsive="true"
+    ></ins>
+  );
+};

frontend/src/features/header/Header.tsx

@@ -1,31 +1,69 @@
-import React from 'react';
-import style from './Header.module.css';
+import { css } from '@emotion/core';
 
 export const Header = () => {
+  const styles = {
+    rootContainer: css`
+      align-items: center;
+      background: #333;
+      color: white;
+      display: flex;
+      font-size: 1.5rem;
+      height: 48px;
+      padding-left: 1rem;
+    `,
+    icon: css`
+      width: 32px;
+      margin-right: 0.5rem;
+    `,
+    title: css`
+      flex: 1;
+      font-size: 1.5rem;
+    `,
+    coffeeImgContainer: css`
+      border-radius: 5px;
+      display: inline-flex;
+      margin-right: 1rem;
+      overflow: hidden;
+      @media (max-width: 700px) {
+        display: none;
+      }
+    `,
+    coffeeImg: css`
+      width: 130px;
+    `,
+    githubContainer: css`
+      @media (max-width: 700px) {
+        display: none;
+      }
+    `,
+  };
+
   return (
-    <div className={style.rootContainer}>
-      <img src="/icon.png" className={style.icon} alt="document" />
-      <h1 className={style.title}>Pairwise Pict Online</h1>
+    <div css={styles.rootContainer}>
+      <img src="/icon.png" css={styles.icon} alt="document" />
+      <h1 css={styles.title}>Pairwise Pict Online</h1>
       <a
-        className={style.coffeeImgContainer}
+        css={styles.coffeeImgContainer}
         href="https://www.buymeacoffee.com/FVSUK5u"
         rel="noopener noreferrer"
         target="_blank"
       >
         <img
           alt="Buy Me A Coffee"
-          className={style.coffeeImg}
+          css={styles.coffeeImg}
           src="https://cdn.buymeacoffee.com/buttons/lato-white.png"
         />
       </a>
-      <iframe
-        src="https://ghbtns.com/github-btn.html?user=junkboy0315&repo=pairwise-pict-online&type=star&count=true&size=large"
-        frameBorder="0"
-        scrolling="0"
-        title="github star icon"
-        width="160px"
-        height="30px"
-      ></iframe>
+      <div css={styles.githubContainer}>
+        <iframe
+          src="https://ghbtns.com/github-btn.html?user=junkboy0315&repo=pairwise-pict-online&type=star&count=true&size=large"
+          frameBorder="0"
+          scrolling="0"
+          title="github star icon"
+          width="160px"
+          height="30px"
+        ></iframe>
+      </div>
     </div>
   );
 };