make it responsive

Author: tam315

frontend/src/components/Button/Button.tsx

@@ -1,10 +1,11 @@
+import { cx } from 'emotion';
 import React from 'react';
 import style from './Button.module.css';
 
 export const Button = (props) => {
-  const { children, ...rest } = props;
+  const { children, className, ...rest } = props;
   return (
-    <button className={style.button} {...rest}>
+    <button className={cx(style.button, className)} {...rest}>
       {children}
     </button>
   );

frontend/src/features/header/Header.module.css

@@ -1,31 +1,70 @@
+import { css } from 'emotion';
 import React from 'react';
-import style from './Header.module.css';
 
 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 className={styles.rootContainer}>
+      <img src="/icon.png" className={styles.icon} alt="document" />
+      <h1 className={styles.title}>Pairwise Pict Online</h1>
       <a
-        className={style.coffeeImgContainer}
+        className={styles.coffeeImgContainer}
         href="https://www.buymeacoffee.com/FVSUK5u"
         rel="noopener noreferrer"
         target="_blank"
       >
         <img
           alt="Buy Me A Coffee"
-          className={style.coffeeImg}
+          className={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 className={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>
   );
 };

frontend/src/features/header/Header.tsx

@@ -45,6 +45,9 @@ export const Top = () => {
       flex: 1 0; /* expand */
       justify-content: space-between;
       padding: 1rem;
+      @media (max-width: 700px) {
+        flex-direction: column;
+      }
     `,
     adsRow: css`
       flex: 0 0 90px;
@@ -62,10 +65,26 @@ export const Top = () => {
       flex-direction: column;
       flex: 1;
     `,
+    generateButton: css`
+      align-self: center;
+      width: 8rem;
+      margin: 1rem;
+      ::after {
+        content: ' =>';
+      }
+      @media (max-width: 700px) {
+        ::after {
+          content: none;
+        }
+      }
+    `,
     download: css`
       display: block;
       margin: 0.5rem 0 1rem;
       text-align: center;
+      @media (max-width: 700px) {
+        display: none;
+      }
     `,
   };
 
@@ -102,15 +121,12 @@ export const Top = () => {
             className={style.download}
             tabIndex={-1}
           >
-            Download
+            Download Test Factors as .txt
           </a>
         </div>
 
-        <Button
-          onClick={onGenerate}
-          style={{ alignSelf: 'center', width: '8rem', margin: '0 1rem' }}
-        >
-          {isFetching ? 'loading...' : 'Generate=>'}
+        <Button onClick={onGenerate} className={style.generateButton}>
+          {isFetching ? 'loading...' : 'Generate'}
         </Button>
 
         <div className={style.results}>
@@ -125,7 +141,7 @@ export const Top = () => {
               className={style.download}
               tabIndex={-1}
             >
-              Download
+              Download Results as .txt
             </a>
           </div>
         </div>