Style and code refactor (#166)

* Move all settings below card

* refactor components; lifting state up

* background color

* Evergreen components for everything

* password error

* Tighten card size

* Simply hide password to basic toggle, never disable

* Hide password label, too

* Maximize mobile portrait width

* Make wifi tip smaller

* Small style tweaks

* Copy: update password length error text to include helpful instructions

This will need a backfill for other translations

* Remove unused css

* Use empty string for EncryptionMode=None value

* Remove light.min.css

* Include logo on wificard

* Cleanup after rebase

* Clean-up comments on state

* Padding for mobile

11 files changed, 669 insertions, 328 deletions

diff --git a/package.json b/package.json
index 9cec5bc..682d3bf 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "evergreen-ui": "^6.3.0",
     "i18next": "^20.3.5",
     "i18next-browser-languagedetector": "^6.1.2",
     "qrcode.react": "^1.0.1",
@@ -15,8 +16,8 @@
     "react-scripts": "^4.0.3"
   },
   "devDependencies": {
-    "prettier": "2.3.2",
-    "husky": "^7.0.1"
+    "husky": "^7.0.1",
+    "prettier": "2.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/public/index.html b/public/index.html
index 4882353..4b04eb7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,7 +9,6 @@
       content="Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc."
     />
     <link rel="icon" href="./images/wifi.ico" />
-    <link rel="stylesheet" href="./light.min.css" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/public/light.min.css b/public/light.min.css
deleted file mode 100644
index 8ce73eb..0000000
--- a/public/light.min.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}
-/*# sourceMappingURL=light.min.css.map */
diff --git a/src/App.js b/src/App.js
index 87b88da..3d93bd6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,9 @@
-import React from 'react';
+import { Button, Heading, Link, Pane, Paragraph } from 'evergreen-ui';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import logo from '../src/images/wifi.png';
-import { Card } from './components/Card';
+import { Settings } from './components/Settings';
+import { WifiCard } from './components/WifiCard';
 import './style.css';
 
 /* List of languages that require RTL direction (alphabetic order). */
@@ -10,65 +12,138 @@ const RTL_LANGUAGES = ['ar', 'fa-IR'];
 function App() {
   const html = document.querySelector('html');
   const { t, i18n } = useTranslation();
+  const firstLoad = useRef(true);
+  const [settings, setSettings] = useState({
+    // Network SSID name
+    ssid: '',
+    // Network password
+    password: '',
+    // Settings: Network encryption mode
+    encryptionMode: 'WPA',
+    // Settings: Hide password on the printed card
+    hidePassword: false,
+    // Settings: Portrait orientation
+    portrait: false,
+  });
+  const [errors, setErrors] = useState({
+    ssidError: '',
+    passwordError: '',
+  });
 
-  const changeLanguage = (language) => {
+  const onChangeLanguage = (language) => {
     html.style.direction = RTL_LANGUAGES.includes(language) ? 'rtl' : 'ltr';
     i18n.changeLanguage(language);
   };
 
-  /* handle the edge case of the initial render requiring RTL direction */
-  if (RTL_LANGUAGES.includes(i18n.language)) {
-    html.style.direction = 'rtl';
-  }
+  const onPrint = () => {
+    if (!settings.ssid.length) {
+      setErrors({
+        ...errors,
+        ssidError: t('wifi.alert.name'),
+      });
+      return;
+    }
+
+    if (settings.ssid.length > 0) {
+      if (settings.password.length < 8 && settings.encryptionMode === 'WPA') {
+        setErrors({
+          ...errors,
+          passwordError: t('wifi.alert.password.length.8'),
+        });
+      } else if (
+        settings.password.length < 5 &&
+        settings.encryptionMode === 'WEP'
+      ) {
+        setErrors({
+          ...errors,
+          passwordError: t('wifi.alert.password.length.5'),
+        });
+      } else {
+        document.title = 'WiFi Card - ' + settings.ssid;
+        window.print();
+      }
+    }
+  };
+
+  const onSSIDChange = (ssid) => {
+    setErrors({ ...errors, ssidError: '' });
+    setSettings({ ...settings, ssid });
+  };
+  const onPasswordChange = (password) => {
+    setErrors({ ...errors, passwordError: '' });
+    setSettings({ ...settings, password });
+  };
+  const onEncryptionModeChange = (encryptionMode) => {
+    setErrors({ ...errors, passwordError: '' });
+    setSettings({ ...settings, encryptionMode });
+  };
+  const onOrientationChange = (portrait) => {
+    setSettings({ ...settings, portrait });
+  };
+  const onHidePasswordChange = (hidePassword) => {
+    setSettings({ ...settings, hidePassword });
+  };
+  const onFirstLoad = () => {
+    firstLoad.current = false;
+  };
+
+  useEffect(() => {
+    /* handle the edge case of the initial render requiring RTL direction */
+    if (RTL_LANGUAGES.includes(i18n.language)) {
+      html.style.direction = 'rtl';
+    }
+  });
 
   return (
-    <div className="App">
-      <h1>
+    <Pane>
+      <Pane display="flex">
         <img alt="icon" src={logo} width="32" height="32" />
-        &nbsp; {t('title')}
-      </h1>
+        <Heading size={900} paddingLeft={16}>
+          {t('title')}
+        </Heading>
+      </Pane>
+
+      <Pane>
+        <Paragraph marginTop={12}>{t('desc.use')}</Paragraph>
 
-      <div>
-        <label>{t('select')}</label>
-        <select
-          value={i18n.language}
-          onChange={(e) => changeLanguage(e.target.value)}
-        >
-          <option value="en-US">English</option>
-          <option value="ar">Arabic - العربية</option>
-          <option value="ca">Catalan - Català</option>
-          <option value="zh-HK">Chinese Hong Kong - 简体中文</option>
-          <option value="zh-CN">Chinese Simplified - 简体中文</option>
-          <option value="nl-NL">Dutch - Nederlands</option>
-          <option value="fr-FR">French - Français</option>
-          <option value="de-DE">German - Deutsch</option>
-          <option value="hi-IN">Hindi - हिन्दी</option>
-          <option value="id-ID">Indonesian</option>
-          <option value="it-IT">Italian</option>
-          <option value="ja">Japanese - 日本語</option>
-          <option value="ko">Korean - 한국어</option>
-          <option value="no-NB">Norwegian - Norsk</option>
-          <option value="oc">Occitan</option>
-          <option value="fa-IR">Persian Iran - فارسی</option>
-          <option value="pl-PL">Polish - Polski</option>
-          <option value="pt">Portuguese - Português</option>
-          <option value="pt-BR">Portuguese - Português brasileiro</option>
-          <option value="ru-RU">Russian - Русский</option>
-          <option value="es">Spanish - Español</option>
-          <option value="tr-TR">Turkish - Türkçe</option>
-          <option value="uk-UA">Ukrainian - Українська</option>
-        </select>
-      </div>
+        <Paragraph marginTop={12}>
+          {t('desc.privacy')}{' '}
+          <Link href="https://github.com/bndw/wifi-card">
+            {t('desc.source')}
+          </Link>
+          .
+        </Paragraph>
+      </Pane>
 
-      <p className="tag">{t('desc.use')}</p>
+      <WifiCard
+        direction={RTL_LANGUAGES.includes(i18n.language) ? 'rtl' : 'ltr'}
+        settings={settings}
+        ssidError={errors.ssidError}
+        passwordError={errors.passwordError}
+        onSSIDChange={onSSIDChange}
+        onPasswordChange={onPasswordChange}
+      />
 
-      <p className="tag">
-        {t('desc.privacy')}{' '}
-        <a href="https://github.com/bndw/wifi-card">{t('desc.source')}</a>.
-      </p>
+      <Settings
+        settings={settings}
+        firstLoad={firstLoad}
+        onFirstLoad={onFirstLoad}
+        onLanguageChange={onChangeLanguage}
+        onEncryptionModeChange={onEncryptionModeChange}
+        onOrientationChange={onOrientationChange}
+        onHidePasswordChange={onHidePasswordChange}
+      />
 
-      <Card direction={RTL_LANGUAGES.includes(i18n.language) ? 'rtl' : 'ltr'} />
-    </div>
+      <Button
+        id="print"
+        appearance="primary"
+        height={40}
+        marginRight={16}
+        onClick={onPrint}
+      >
+        {t('button.print')}
+      </Button>
+    </Pane>
   );
 }
 
diff --git a/src/components/Card.js b/src/components/Card.js
deleted file mode 100644
index 601b760..0000000
--- a/src/components/Card.js
+++ /dev/null
@@ -1,225 +0,0 @@
-import QRCode from 'qrcode.react';
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import './style.css';
-
-export const Card = ({ direction = 'ltr' }) => {
-  const firstLoad = useRef(true);
-  const [qrvalue, setQrvalue] = useState('');
-  const [network, setNetwork] = useState({
-    ssid: '',
-    encryptionMode: 'WPA',
-    password: '',
-    hidePassword: false,
-  });
-  const [portrait, setPortrait] = useState(false);
-  const { t } = useTranslation();
-  const escape = (v) => {
-    const needsEscape = ['"', ';', ',', ':', '\\'];
-
-    let escaped = '';
-    for (const c of v) {
-      if (needsEscape.includes(c)) {
-        escaped += `\\${c}`;
-      } else {
-        escaped += c;
-      }
-    }
-    return escaped;
-  };
-
-  const onPrint = () => {
-    if (network.ssid.length > 0) {
-      if (network.password.length < 8 && network.encryptionMode === 'WPA') {
-        alert(t('wifi.alert.password.length.8'));
-      } else if (
-        network.password.length < 5 &&
-        network.encryptionMode === 'WEP'
-      ) {
-        alert(t('wifi.alert.password.length.5'));
-      } else {
-        document.title = 'WiFi Card - ' + network.ssid;
-        window.print();
-      }
-    } else {
-      alert(t('wifi.alert.name'));
-    }
-  };
-
-  const disableHidePassword = () => {
-    const isWEPWithPasswordLengthShorterThat5Characters = () => {
-      return network.encryptionMode === 'WEP' && network.password.length < 5
-        ? true
-        : false;
-    };
-
-    return network.encryptionMode === 'WPA' && network.password.length < 8
-      ? true
-      : isWEPWithPasswordLengthShorterThat5Characters();
-  };
-
-  useEffect(() => {
-    if (firstLoad.current && window.innerWidth < 500) {
-      firstLoad.current = false;
-      setPortrait(true);
-    }
-
-    const ssid = escape(network.ssid);
-    const password =
-      network.encryptionMode === 'nopass' ? '' : escape(network.password);
-    setQrvalue(`WIFI:T:${network.encryptionMode};S:${ssid};P:${password};;`);
-  }, [network]);
-
-  const setEncryptionMode = (e) =>
-    setNetwork({
-      ...network,
-      encryptionMode: e.target.value,
-    });
-
-  const checkDirectionAndSetPadding =
-    direction === 'ltr' ? { paddingRight: '1em' } : { paddingLeft: '1em' };
-
-  return (
-    <div>
-      <fieldset
-        id="print-area"
-        style={{ maxWidth: portrait ? '350px' : '100%' }}
-      >
-        <h1 style={{ textAlign: portrait ? 'center' : 'unset' }}>
-          {t('wifi.login')}
-        </h1>
-
-        <div
-          className="details"
-          style={{ flexDirection: portrait ? 'column' : 'row' }}
-        >
-          <QRCode
-            className="qrcode"
-            style={!portrait && checkDirectionAndSetPadding}
-            value={qrvalue}
-            size={175}
-          />
-
-          <div className="inputs">
-            <label>{t('wifi.name')}</label>
-            <textarea
-              id="ssid"
-              type="text"
-              maxLength="32"
-              placeholder={t('wifi.name.placeholder')}
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="none"
-              spellCheck="false"
-              value={network.ssid}
-              onChange={(e) => setNetwork({ ...network, ssid: e.target.value })}
-            />
-            <label
-              className={`
-                ${network.hidePassword && 'no-print hidden'}
-                ${network.encryptionMode === 'nopass' && 'hidden'}
-              `}
-            >
-              {t('wifi.password')}
-            </label>
-            <textarea
-              id="password"
-              type="text"
-              className={`
-                ${network.hidePassword && 'no-print hidden'}
-                ${network.encryptionMode === 'nopass' && 'hidden'}
-              `}
-              style={{
-                height:
-                  portrait && network.password.length > 40 ? '5em' : 'auto',
-              }}
-              maxLength="63"
-              placeholder={t('wifi.password.placeholder')}
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="none"
-              spellCheck="false"
-              value={network.password}
-              onChange={(e) => {
-                setNetwork({ ...network, password: e.target.value });
-              }}
-            />
-
-            <div className="no-print">
-              <input
-                type="checkbox"
-                id="hide-password-checkbox"
-                checked={network.hidePassword}
-                disabled={disableHidePassword()}
-                className={network.encryptionMode === 'nopass' ? 'hidden' : ''}
-                onChange={() =>
-                  setNetwork({
-                    ...network,
-                    hidePassword: !network.hidePassword,
-                  })
-                }
-              />
-              <label
-                htmlFor="hide-password-checkbox"
-                className={network.encryptionMode === 'nopass' ? 'hidden' : ''}
-              >
-                {t('wifi.password.hide')}
-              </label>
-            </div>
-
-            <div className="no-print">
-              <label>
-                {t('wifi.password.encryption')}:{direction === 'rtl' ? ' ' : ''}
-              </label>
-              <span dir="ltr">
-                <input
-                  type="radio"
-                  name="encrypt-select"
-                  id="encrypt-none"
-                  value="nopass"
-                  onChange={setEncryptionMode}
-                />
-                <label htmlFor="encrypt-none">
-                  {t('wifi.password.encryption.none')}
-                </label>
-                <input
-                  type="radio"
-                  name="encrypt-select"
-                  id="encrypt-wpa-wpa2-wpa3"
-                  value="WPA"
-                  onChange={setEncryptionMode}
-                  defaultChecked
-                />
-                <label htmlFor="encrypt-wpa-wpa2-wpa3">WPA/WPA2/WPA3</label>
-                <input
-                  type="radio"
-                  name="encrypt-select"
-                  id="encrypt-wep"
-                  value="WEP"
-                  onChange={setEncryptionMode}
-                />
-                <label htmlFor="encrypt-wep">WEP</label>
-              </span>
-            </div>
-          </div>
-        </div>
-        <hr />
-        <p>
-          <span role="img" aria-label="mobile-phone">
-            📸📱
-          </span>
-          {t('wifi.tip')}
-        </p>
-      </fieldset>
-
-      <div className="buttons">
-        <button id="rotate" onClick={() => setPortrait(!portrait)}>
-          {t('button.rotate')}
-        </button>
-        <button id="print" onClick={onPrint}>
-          {t('button.print')}
-        </button>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/Settings.js b/src/components/Settings.js
new file mode 100644
index 0000000..1c28dab
--- /dev/null
+++ b/src/components/Settings.js
@@ -0,0 +1,77 @@
+import { Checkbox, Pane, RadioGroup, SelectField } from 'evergreen-ui';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18n from '../i18n';
+import './style.css';
+
+export const Settings = (props) => {
+  const { t } = useTranslation();
+  const [encryptionModes] = useState([
+    { label: 'None', value: '' },
+    { label: 'WPA/WPA2/WPA3', value: 'WPA' },
+    { label: 'WEP', value: 'WEP' },
+  ]);
+
+  useEffect(() => {
+    if (props.firstLoad.current && window.innerWidth < 500) {
+      props.onFirstLoad();
+      props.onOrientationChange(true);
+    }
+  });
+
+  return (
+    <Pane id="settings" maxWidth={props.settings.portrait ? '350px' : '100%'}>
+      <SelectField
+        width={300}
+        inputHeight={38}
+        label={t('select')}
+        selected={i18n.language}
+        onChange={(e) => props.onLanguageChange(e.target.value)}
+      >
+        <option value="en-US">English</option>
+        <option value="ar">Arabic - العربية</option>
+        <option value="ca">Catalan - Català</option>
+        <option value="zh-HK">Chinese Hong Kong - 简体中文</option>
+        <option value="zh-CN">Chinese Simplified - 简体中文</option>
+        <option value="nl-NL">Dutch - Nederlands</option>
+        <option value="fr-FR">French - Français</option>
+        <option value="de-DE">German - Deutsch</option>
+        <option value="hi-IN">Hindi - हिन्दी</option>
+        <option value="id-ID">Indonesian</option>
+        <option value="it-IT">Italian</option>
+        <option value="ja">Japanese - 日本語</option>
+        <option value="ko">Korean - 한국어</option>
+        <option value="no-NB">Norwegian - Norsk</option>
+        <option value="oc">Occitan</option>
+        <option value="fa-IR">Persian Iran - فارسی</option>
+        <option value="pl-PL">Polish - Polski</option>
+        <option value="pt">Portuguese - Português</option>
+        <option value="pt-BR">Portuguese - Português brasileiro</option>
+        <option value="ru-RU">Russian - Русский</option>
+        <option value="es">Spanish - Español</option>
+        <option value="tr-TR">Turkish - Türkçe</option>
+        <option value="uk-UA">Ukrainian - Українська</option>
+      </SelectField>
+
+      <Checkbox
+        label={t('button.rotate')}
+        checked={props.settings.portrait}
+        onChange={() => props.onOrientationChange(!props.settings.portrait)}
+      />
+      <Checkbox
+        label={t('wifi.password.hide')}
+        checked={props.settings.hidePassword}
+        onChange={() =>
+          props.onHidePasswordChange(!props.settings.hidePassword)
+        }
+      />
+      <RadioGroup
+        label={t('wifi.password.encryption')}
+        size={16}
+        value={props.settings.encryptionMode}
+        options={encryptionModes}
+        onChange={(e) => props.onEncryptionModeChange(e.target.value)}
+      />
+    </Pane>
+  );
+};
diff --git a/src/components/WifiCard.js b/src/components/WifiCard.js
new file mode 100644
index 0000000..645dfa1
--- /dev/null
+++ b/src/components/WifiCard.js
@@ -0,0 +1,148 @@
+import {
+  CameraIcon,
+  Card,
+  Heading,
+  MobilePhoneIcon,
+  Pane,
+  Paragraph,
+  Text,
+  TextareaField,
+} from 'evergreen-ui';
+import QRCode from 'qrcode.react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import logo from '../../src/images/wifi.png';
+import './style.css';
+
+export const WifiCard = (props) => {
+  const { t } = useTranslation();
+  const [qrvalue, setQrvalue] = useState('');
+
+  const escape = (v) => {
+    const needsEscape = ['"', ';', ',', ':', '\\'];
+
+    let escaped = '';
+    for (const c of v) {
+      if (needsEscape.includes(c)) {
+        escaped += `\\${c}`;
+      } else {
+        escaped += c;
+      }
+    }
+    return escaped;
+  };
+
+  useEffect(() => {
+    const ssid = escape(props.settings.ssid);
+    const password = !props.settings.encryptionMode
+      ? ''
+      : escape(props.settings.password);
+    setQrvalue(
+      `WIFI:T:${props.settings.encryptionMode};S:${ssid};P:${password};;`
+    );
+  }, [props.settings]);
+
+  const portraitWidth = () => {
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    return isMobile ? '100%' : '280px';
+  };
+
+  const passwordFieldLabel = () => {
+    const hiddenPassword =
+      props.settings.hidePassword || !props.settings.encryptionMode;
+    return hiddenPassword ? '' : t('wifi.password');
+  };
+
+  return (
+    <Pane>
+      <Card
+        id="print-area"
+        elevation={3}
+        style={{ maxWidth: props.settings.portrait ? portraitWidth() : '100%' }}
+      >
+        <Pane display="flex" paddingBottom={12}>
+          <img alt="icon" src={logo} width="24" height="24" />
+          <Heading
+            paddingLeft={10}
+            size={700}
+            textAlign={props.settings.portrait ? 'center' : 'unset'}
+          >
+            {t('wifi.login')}
+          </Heading>
+        </Pane>
+
+        <Pane
+          className="details"
+          style={{ flexDirection: props.settings.portrait ? 'column' : 'row' }}
+        >
+          <QRCode
+            className="qrcode"
+            style={
+              !props.settings.portrait
+                ? props.direction === 'ltr'
+                  ? { paddingRight: '1em' }
+                  : { paddingLeft: '1em' }
+                : {}
+            }
+            value={qrvalue}
+            size={150}
+          />
+
+          <Pane width={'100%'}>
+            <TextareaField
+              id="ssid"
+              type="text"
+              marginBottom={5}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="none"
+              spellCheck={false}
+              maxLength="32"
+              label={t('wifi.name')}
+              placeholder={t('wifi.name.placeholder')}
+              value={props.settings.ssid}
+              onChange={(e) => props.onSSIDChange(e.target.value)}
+              isInvalid={!!props.ssidError}
+              validationMessage={!!props.ssidError && props.ssidError}
+            />
+            <TextareaField
+              id="password"
+              type="text"
+              maxLength="63"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="none"
+              spellCheck={false}
+              className={`
+                ${
+                  (props.settings.hidePassword ||
+                    !props.settings.encryptionMode) &&
+                  'hidden'
+                }
+              `}
+              height={
+                props.settings.portrait && props.settings.password.length > 40
+                  ? '5em'
+                  : 'auto'
+              }
+              label={passwordFieldLabel()}
+              placeholder={t('wifi.password.placeholder')}
+              value={props.settings.password}
+              onChange={(e) => props.onPasswordChange(e.target.value)}
+              isInvalid={!!props.passwordError}
+              validationMessage={!!props.passwordError && props.passwordError}
+            />
+          </Pane>
+        </Pane>
+        <hr />
+        <Paragraph>
+          <CameraIcon />
+          <MobilePhoneIcon />
+          <Text size={300} paddingLeft={8}>
+            {t('wifi.tip')}
+          </Text>
+        </Paragraph>
+      </Card>
+    </Pane>
+  );
+};
diff --git a/src/components/style.css b/src/components/style.css
index c9dbb54..fa931bb 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -2,8 +2,7 @@
 
 #print-area {
   border-color: #aaa;
-  border-style: dashed;
-  margin-bottom: 2em;
+  margin-bottom: 1em;
   margin-top: 2em;
   padding: 1em;
 }
@@ -16,39 +15,39 @@
 .qrcode {
   margin-bottom: 1em;
   max-width: 175px;
-  min-width: 175px;
 }
 
 .hidden {
   display: none;
 }
-
 textarea {
   background-color: #fff;
   border: solid 1px #ddd;
-  font-family: 'Source Code Pro', serif;
-  font-size: 1.3em;
-  font-weight: bold;
-  height: 3em;
+  font-family: 'Source Code Pro', serif !important;
+  font-size: 1em !important;
+  font-weight: bold !important;
+  margin-bottom: 0;
+  height: 40px !important;
+  min-height: 0px !important;
   overflow: hidden;
   resize: none;
 }
+textarea#password {
+  height: 60px !important;
+}
+
+hr {
+  margin-top: 0;
+}
 
 button {
   height: 50px;
   width: 180px;
 }
 
-button#print {
-  color: #fff;
-  background-color: #0074d9;
-  border-color: #0074d9;
-}
-
-button#rotate {
-  color: #fff;
-  background-color: #6c757d;
-  border-color: #6c757d;
+#settings {
+  margin-bottom: 1em;
+  padding: 1em;
 }
 
 @media print {
@@ -59,19 +58,16 @@ button#rotate {
   #print-area * {
     visibility: visible;
   }
+  #print-area {
+    border-style: dashed;
+    box-shadow: none;
+  }
   #print-area textarea {
     border: none;
   }
-  .no-print {
-    display: none;
-  }
   #print-area {
     position: absolute;
     left: 0;
     top: 0;
   }
 }
-
-hr {
-  margin-top: 25px;
-}
diff --git a/src/i18n.js b/src/i18n.js
index 452bf23..891e291 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -16,16 +16,19 @@ const resources = {
       'wifi.name.placeholder': 'WiFi Network name',
       'wifi.password': 'Password',
       'wifi.password.placeholder': 'Password',
-      'wifi.password.hide': 'Hide password field before printing',
+      'wifi.password.hide': 'Hide password',
       'wifi.password.encryption': 'Encryption',
       'wifi.password.encryption.none': 'None',
       'wifi.tip':
         "Point your phone's camera at the QR Code to connect automatically",
       'wifi.alert.name': 'Network name cannot be empty',
-      'wifi.alert.password.length.5': 'Password must be at least 5 characters',
-      'wifi.alert.password.length.8': 'Password must be at least 8 characters',
+      'wifi.alert.password.length.5':
+        'Password must be at least 5 characters, or change the encryption to "None"',
+      'wifi.alert.password.length.8':
+        'Password must be at least 8 characters, or change the encryption to "None"',
       'button.rotate': 'Rotate',
       'button.print': 'Print',
+      'button.settings': 'Settings',
       select: 'Select Language',
     },
   },
@@ -80,6 +83,7 @@ const resources = {
         'Wachtwoord moet ten minste 8 tekens bevatten',
       'button.rotate': 'Draai',
       'button.print': 'Print',
+      'button.settings': 'Instellingen',
       select: 'Selecteer Taal',
     },
   },
@@ -105,6 +109,7 @@ const resources = {
       'wifi.alert.password.length.8': '密码至少 8 个字符',
       'button.rotate': '翻转',
       'button.print': '打印',
+      'button.settings': '设置',
       select: '选择语言',
     },
   },
@@ -130,6 +135,7 @@ const resources = {
       'wifi.alert.password.8': '密碼至少要有 8 個字符 ',
       'button.rotate': '翻轉',
       'button.print': '打印',
+      'button.settings': '设置',
       select: '選擇語言',
     },
   },
@@ -159,6 +165,7 @@ const resources = {
         'La contraseña debe tener al menos 8 caracteres',
       'button.rotate': 'Girar',
       'button.print': 'Imprimir',
+      'button.settings': 'Ajustes',
       select: 'Seleccionar idioma',
     },
   },
@@ -185,6 +192,7 @@ const resources = {
       'wifi.alert.password.length.8': 'A senha precisa ter no mínimo 8 dígtos',
       'button.rotate': 'Girar',
       'button.print': 'Imprimir',
+      'button.settings': 'Definições',
       select: 'Selecionar Idioma',
     },
   },
@@ -212,6 +220,7 @@ const resources = {
         'パスワードは8文字以上でなければなりません',
       'button.rotate': '回転する',
       'button.print': '印刷する',
+      'button.settings': '設定',
       select: '言語を選択',
     },
   },
@@ -240,6 +249,7 @@ const resources = {
         'Пароль должен состоять не менее чем из 8 символов',
       'button.rotate': 'Повернуть',
       'button.print': 'Распечатать',
+      'button.settings': 'настройки',
       select: 'Выбор языка',
     },
   },
@@ -266,6 +276,7 @@ const resources = {
       'wifi.alert.password.8': 'رمز‌عبور باید حداقل ۸ حرف داشته باشد.',
       'button.rotate': 'چرخاندن',
       'button.print': 'چاپ',
+      'button.settings': 'تنظیمات',
       select: 'انتخاب زبان',
     },
   },
@@ -294,6 +305,7 @@ const resources = {
         'Пароль повинен містити принаймні 8 символів',
       'button.rotate': 'Повернути',
       'button.print': 'Друкувати',
+      'button.settings': 'налаштування',
       select: 'Вибір мови',
     },
   },
@@ -322,6 +334,7 @@ const resources = {
         'Das Passwort muss mindestends 8 Zeichen lang sein',
       'button.rotate': 'Drehen',
       'button.print': 'Drucken',
+      'button.settings': 'Einstellungen',
       select: 'Sprache auswählen',
     },
   },
@@ -352,6 +365,7 @@ const resources = {
       'wifi.alert.password.8': 'Hasło musi mieć co najmniej 8 znaków',
       'button.rotate': 'Obróć',
       'button.print': 'Drukuj',
+      'button.settings': 'Ustawienia',
       select: 'Wybierz język',
     },
   },
@@ -380,6 +394,7 @@ const resources = {
         'Le mot de passe doit au moins faire 8 caractères',
       'button.rotate': 'Pivoter',
       'button.print': 'Imprimer',
+      'button.settings': 'Paramètres',
       select: 'Choisir la langue',
     },
   },
@@ -407,6 +422,7 @@ const resources = {
       'wifi.alert.password.8': 'Lo senhal deu conténer almens 8 caractèrs',
       'button.rotate': 'Pivotar',
       'button.print': 'Imprimir',
+      'button.settings': 'Paramètres',
       select: 'Causir la lenga',
     },
   },
@@ -434,6 +450,7 @@ const resources = {
       'wifi.alert.password.8': 'A Senha deve ter pelo menos 8 caracteres',
       'button.rotate': 'Rotacionar',
       'button.print': 'Imprimir',
+      'button.settings': 'Definições',
       select: 'Escolha o idioma',
     },
   },
@@ -462,6 +479,7 @@ const resources = {
         'La password deve contenere almeno 8 caratteri',
       'button.rotate': 'Ruota',
       'button.print': 'Stampa',
+      'button.settings': 'Impostazioni',
       select: 'Seleziona una lingua',
     },
   },
@@ -488,6 +506,7 @@ const resources = {
       'wifi.alert.password.length.8': 'Parola en az 8 karakter olmalıdır',
       'button.rotate': 'Döndür',
       'button.print': 'Yazdır',
+      'button.settings': 'Ayarlar',
       select: 'Dil Seçin',
     },
   },
@@ -516,6 +535,7 @@ const resources = {
         'يجب أن تكون كلمة المرور مكونة من ٨ أحرف على الأقل',
       'button.rotate': 'تدوير',
       'button.print': 'طباعة',
+      'button.settings': 'إعدادات',
       select: 'اختر لغة',
     },
   },
@@ -544,6 +564,7 @@ const resources = {
         'पासवर्ड कम से कम 8 अक्षरों का होना चाहिए',
       'button.rotate': 'घुमाएँ',
       'button.print': 'प्रिंट करे',
+      'button.settings': 'समायोजन',
       select: 'भाषा चुने',
     },
   },
@@ -568,10 +589,11 @@ const resources = {
       'wifi.alert.name': 'El nom de la xarxa no pot estar buit',
       'wifi.alert.password.length.5':
         'La contrasenya ha de tenir com a mínim 5 caràcters',
-      'wifi.alert.password.8':
+      'wifi.alert.password.length.8':
         'La contrasenya ha de tenir com a mínim 8 caràcters',
       'button.rotate': 'Gira',
       'button.print': 'Imprimeix',
+      'button.settings': 'Configuració',
       select: 'Escolliu l’idioma',
     },
   },
@@ -595,9 +617,10 @@ const resources = {
         'Arahkan kamera ponsel anda ke Kode QR untuk terhubung ke WiFi secara otomatis',
       'wifi.alert.name': 'Nama jaringan tidak boleh kosong',
       'wifi.alert.password.length.5': 'Kata sandi minimal harus 5 karakter',
-      'wifi.alert.password.8': 'Kata sandi minimal harus 8 karakter',
+      'wifi.alert.password.length.8': 'Kata sandi minimal harus 8 karakter',
       'button.rotate': 'Putar',
       'button.print': 'Cetak',
+      'button.settings': 'Pengaturan',
       select: 'Pilih Bahasa',
     },
   },
diff --git a/src/style.css b/src/style.css
index f29d097..cc43310 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,6 +1,5 @@
 body {
-  max-width: 680px;
-}
-.tag {
-  line-height: 1.6;
+  margin: 0 auto;
+  max-width: 500px;
+  padding: 1em;
 }
diff --git a/yarn.lock b/yarn.lock
index e4c98f6..c1dc1f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1157,6 +1157,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.14.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
+  integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.14.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
@@ -1164,13 +1171,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.9.2":
-  version "7.14.8"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
-  integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.10.4", "@babel/template@^7.14.5", "@babel/template@^7.3.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
@@ -1226,6 +1226,11 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@emotion/hash@^0.7.1":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
+  integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
+
 "@eslint/eslintrc@^0.4.2":
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179"
@@ -1540,6 +1545,13 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@segment/react-tiny-virtual-list@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@segment/react-tiny-virtual-list/-/react-tiny-virtual-list-2.2.1.tgz#658da8a93cfb83537235c89307818d6f1741aeb3"
+  integrity sha512-G01b9DrsQLF+8yFRyyJeZBZkzbFuqILG9C7SFFS+GtTFbjdprkHt0CL0riCPOZfe1ZXiT8z8MaKoWfNhrfUjhQ==
+  dependencies:
+    prop-types "^15.5.7"
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -1852,11 +1864,41 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.0.tgz#2e8332cc7363f887d32ec5496b207d26ba8052bb"
   integrity sha512-hkc1DATxFLQo4VxPDpMH1gCkPpBbpOoJ/4nhuXw4n63/0R6bCpQECj4+K226UJ4JO/eJQz+1mC2I7JsWanAdQw==
 
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
 "@types/q@^1.5.1":
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-transition-group@^4.4.0":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.2.tgz#38890fd9db68bf1f2252b99a942998dc7877c5b3"
+  integrity sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "17.0.15"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.15.tgz#c7533dc38025677e312606502df7656a6ea626d0"
+  integrity sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@^16.9.5":
+  version "16.14.11"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.11.tgz#992a0cd4b66b9f27315042b5d96e976717368f04"
+  integrity sha512-Don0MtsZZ3fjwTJ2BsoqkyOy7e176KplEAKOpr/4XDdzinlyJBn9yfsKn5mcSgn4kh1B22+3tBnzBC1z63ybtQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -1864,6 +1906,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -2477,12 +2524,17 @@ array.prototype.flatmap@^1.2.4:
     es-abstract "^1.18.0-next.1"
     function-bind "^1.1.1"
 
+arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
+
 arrify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
   integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
 
-asap@~2.0.6:
+asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -2871,6 +2923,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bowser@^1.7.3:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a"
+  integrity sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3293,6 +3350,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -3454,6 +3516,11 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compute-scroll-into-view@^1.0.14:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz#6a88f18acd9d42e9cf4baa6bec7e0522607ab7ab"
+  integrity sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -3560,6 +3627,11 @@ core-js-pure@^3.15.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.15.0.tgz#c19349ae0be197b8bcf304acf4d91c5e29ae2091"
   integrity sha512-RO+LFAso8DB6OeBX9BAcEGvyth36QtxYon1OyVsITNVtSKr/Hos0BXZwnsOJ7o+O6KHtK+O+cJIEj9NGg6VwFA==
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.4.0:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
@@ -3708,6 +3780,14 @@ css-has-pseudo@^0.10.0:
     postcss "^7.0.6"
     postcss-selector-parser "^5.0.0-rc.4"
 
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
 css-loader@4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.3.0.tgz#c888af64b2a5b2e85462c72c0f4a85c7e2e0821e"
@@ -3916,6 +3996,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.0.2:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -4164,6 +4249,14 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -4252,6 +4345,16 @@ dotenv@8.2.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
 
+downshift@^5.2.0:
+  version "5.4.7"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-5.4.7.tgz#2ab7b0512cad33011ee6f29630f9a7bb74dff2b5"
+  integrity sha512-xaH0RNqwJ5pAsyk9qBmR9XJWmg1OOWMfrhzYv0NH2NjJxn77S3zBcfClw341UfhGyKg5v+qVqg/CQzvAgBNCXQ==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    compute-scroll-into-view "^1.0.14"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 duplexer@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
@@ -4330,6 +4433,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+encoding@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -4751,6 +4861,28 @@ eventsource@^1.0.7:
   dependencies:
     original "^1.0.0"
 
+evergreen-ui@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/evergreen-ui/-/evergreen-ui-6.3.0.tgz#a47a5c0a926a82b3b59bc6ca1d71591507426b70"
+  integrity sha512-r6JmbEwiIP+AIDcfUP5t+fiw9zcNQqOFJLVMz7syhpr31Cty7nODR1vHlwJ7BA9OcZLcho3xOMgO6atdu2zCVw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    "@segment/react-tiny-virtual-list" "^2.2.1"
+    "@types/react" "^16.9.5"
+    "@types/react-transition-group" "^4.4.0"
+    arrify "^1.0.1"
+    classnames "^2.2.6"
+    downshift "^5.2.0"
+    fuzzaldrin-plus "^0.6.0"
+    glamor "^2.20.40"
+    lodash.debounce "^4.0.8"
+    lodash.merge "^4.6.2"
+    prop-types "^15.6.2"
+    react-fast-compare "^3.2.0"
+    react-transition-group "^4.4.1"
+    tinycolor2 "^1.4.1"
+    ui-box "^5.0.0"
+
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
@@ -4942,6 +5074,19 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fbjs@^0.8.12:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -5198,6 +5343,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+fuzzaldrin-plus@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/fuzzaldrin-plus/-/fuzzaldrin-plus-0.6.0.tgz#832f6489fbe876769459599c914a670ec22947ee"
+  integrity sha1-gy9kifvodnaUWVmckUpnDsIpR+4=
+
 gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -5246,6 +5396,17 @@ get-value@^2.0.3, get-value@^2.0.6:
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
+glamor@^2.20.40:
+  version "2.20.40"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
+  integrity sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==
+  dependencies:
+    fbjs "^0.8.12"
+    inline-style-prefixer "^3.0.6"
+    object-assign "^4.1.1"
+    prop-types "^15.5.10"
+    through "^2.3.8"
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -5643,6 +5804,11 @@ husky@^7.0.1:
   resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.1.tgz#579f4180b5da4520263e8713cc832942b48e1f1c"
   integrity sha512-gceRaITVZ+cJH9sNHqx5tFwbzlLCVxtVZcusME8JYQ8Edy5mpGDOqD8QBCdMhpyo9a+JXddnujQ4rpY2Ff9SJA==
 
+hyphenate-style-name@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 i18next-browser-languagedetector@^6.1.2:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.2.tgz#68565a28b929cbc98ab6a56826ef2faf0e927ff8"
@@ -5664,6 +5830,13 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.6.2:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^4.0.0, icss-utils@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
@@ -5797,6 +5970,21 @@ ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+inline-style-prefixer@^3.0.6:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
+  integrity sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=
+  dependencies:
+    bowser "^1.7.3"
+    css-in-js-utils "^2.0.0"
+
+inline-style-prefixer@^5.0.4:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz#e5a5a3515e25600e016b71e39138971228486c33"
+  integrity sha512-PYUF+94gDfhy+LsQxM0g3d6Hge4l1pAqOSOiZuHWzMvQEGsbRQ/ck2WioLqrY2ZkHyPgVUXxn+hrkF7D6QUGbA==
+  dependencies:
+    css-in-js-utils "^2.0.0"
+
 internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
@@ -6121,7 +6309,7 @@ is-root@2.1.0:
   resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
   integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
 
-is-stream@^1.1.0:
+is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -6187,6 +6375,14 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 istanbul-lib-coverage@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
@@ -6997,7 +7193,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7419,6 +7615,14 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-forge@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
@@ -8809,6 +9013,13 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
 promise@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
@@ -8832,7 +9043,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.0, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9061,6 +9272,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-fast-compare@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-i18next@^11.11.4:
   version "11.11.4"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.11.4.tgz#f6f9a1c827e7a5271377de2bf14db04cb1c9e5ce"
@@ -9069,7 +9285,7 @@ react-i18next@^11.11.4:
     "@babel/runtime" "^7.14.5"
     html-parse-stringify "^3.0.1"
 
-react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9150,6 +9366,16 @@ react-scripts@^4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-transition-group@^4.4.1:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -9582,7 +9808,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -9775,7 +10001,7 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -10480,6 +10706,11 @@ through2@^2.0.0:
     readable-stream "~2.3.6"
     xtend "~4.0.1"
 
+through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
 thunky@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
@@ -10497,6 +10728,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -10681,6 +10917,20 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+ua-parser-js@^0.7.18:
+  version "0.7.28"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
+  integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
+
+ui-box@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ui-box/-/ui-box-5.0.0.tgz#8b73e81cc7a50cf53749b969d411e8f56a93af48"
+  integrity sha512-DJZZKe8UoB1e6hNenNniO3ror9ER57EG5k+fOUm17vrLnU2T4vhoTnWGoStewXJzQ4Ur9ox9Xk4kljVKFpXlzQ==
+  dependencies:
+    "@emotion/hash" "^0.7.1"
+    inline-style-prefixer "^5.0.4"
+    prop-types "^15.7.2"
+
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
@@ -11111,7 +11361,7 @@ whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@^3.4.1:
+whatwg-fetch@>=0.10.0, whatwg-fetch@^3.4.1:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
   integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==