From 0ecbe23f416f7096ef16957717a4c08fafb262d5 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 29 Apr 2021 00:43:29 +1000
Subject: [PATCH] slider styling, support for tailwind classes in styled
 components

---
 .babelrc                           |  17 ++-
 components/ConnectWalletButton.tsx |   6 +-
 components/ContributionModal.tsx   |  47 ++-----
 components/Modal.tsx               |  64 ---------
 components/Slider.tsx              |  92 +++++++++++++
 package.json                       |   7 +
 styles/index.css                   |   4 +
 tailwind.config.js                 |  11 ++
 yarn.lock                          | 208 ++++++++++++++++-------------
 9 files changed, 259 insertions(+), 197 deletions(-)
 delete mode 100644 components/Modal.tsx
 create mode 100644 components/Slider.tsx

diff --git a/.babelrc b/.babelrc
index 1ff94f7..0eddc60 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,18 @@
 {
-  "presets": ["next/babel"]
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin", "babel-plugin-macros"]
 }
+
+// {
+//   "presets": ["next/babel"]
+// }
diff --git a/components/ConnectWalletButton.tsx b/components/ConnectWalletButton.tsx
index d8a14b8..a389c55 100644
--- a/components/ConnectWalletButton.tsx
+++ b/components/ConnectWalletButton.tsx
@@ -17,13 +17,13 @@ const ConnectWalletButton = () => {
   )
 
   return (
-    <div className="flex justify-between border border-primary rounded-md h-11 w-48">
+    <div className="flex justify-between border border-primary-light hover:border-fgd-1 rounded-md h-11 w-48">
       <button
         onClick={() => wallet.connect()}
         disabled={!wallet}
-        className="text-primary hover:text-fgd-1 focus:outline-none disabled:text-fgd-4 disabled:cursor-wait"
+        className="focus:outline-none disabled:text-fgd-4 disabled:cursor-wait"
       >
-        <div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition hover:bg-primary hover:text-fgd-1">
+        <div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition text-primary-light text-sm hover:bg-primary hover:text-fgd-1">
           <WalletIcon className="w-5 h-5 mr-3 fill-current" />
           <div>
             <span className="whitespace-nowrap">Connect Wallet</span>
diff --git a/components/ContributionModal.tsx b/components/ContributionModal.tsx
index e74037a..b19cbbb 100644
--- a/components/ContributionModal.tsx
+++ b/components/ContributionModal.tsx
@@ -3,9 +3,8 @@ import { LinkIcon } from '@heroicons/react/solid'
 import useWalletStore from '../stores/useWalletStore'
 import { getUsdcBalance } from '../utils'
 import Input from './Input'
-import Slider from 'rc-slider'
-import 'rc-slider/assets/index.css'
 import Button from './Button'
+import Slider from './Slider'
 import Loading from './Loading'
 import WalletIcon from './WalletIcon'
 
@@ -80,6 +79,7 @@ const ContributionModal = () => {
             </div>
             <Button
               className="bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-2"
+              disabled={!connected}
               onClick={() => setContributionAmount(100)}
               secondary
             >
@@ -96,31 +96,9 @@ const ContributionModal = () => {
             />
           </div>
           <Slider
-            min={0}
             value={contributionAmount}
             onChange={(v) => setContributionAmount(v)}
             step={usdcBalance / 100}
-            marks={{
-              0: 0,
-              25: 25,
-              50: 50,
-              75: '75',
-              100: '100',
-            }}
-            // railStyle={{
-            //   height: 2,
-            // }}
-            // handleStyle={{
-            //   height: 28,
-            //   width: 28,
-            //   marginLeft: -14,
-            //   marginTop: -14,
-            //   backgroundColor: 'red',
-            //   border: 0,
-            // }}
-            // trackStyle={{
-            //   background: 'none',
-            // }}
           />
         </div>
         <Button
@@ -146,15 +124,18 @@ const ContributionModal = () => {
           </div>
         </Button>
       ) : (
-        <Button
-          className="rounded-full"
-          onClick={() => handleConnectDisconnect()}
-        >
-          <div className="flex items-center text-sm">
-            <LinkIcon className="h-4 w-4 mr-1" />
-            Connect Wallet
-          </div>
-        </Button>
+        <div className="relative">
+          <Button
+            className="rounded-full h-9 w-44 z-20 relative"
+            onClick={() => handleConnectDisconnect()}
+          >
+            <div className="flex items-center justify-center text-sm">
+              <LinkIcon className="h-4 w-4 mr-1" />
+              Connect Wallet
+            </div>
+          </Button>
+          <div className="absolute animate-ping-small bg-secondary-2-light top-0 rounded-full h-9 w-44 z-10" />
+        </div>
       )}
     </div>
   )
diff --git a/components/Modal.tsx b/components/Modal.tsx
deleted file mode 100644
index 3cbf14c..0000000
--- a/components/Modal.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Portal } from 'react-portal'
-import { XIcon } from '@heroicons/react/outline'
-
-const Modal = ({ isOpen, onClose, children, hideClose = false }) => {
-  return (
-    <Portal>
-      <div
-        className="fixed z-10 inset-0 overflow-y-auto"
-        aria-labelledby="modal-title"
-        role="dialog"
-        aria-modal="true"
-      >
-        <div className="flex items-center min-h-screen px-4 pb-20 text-center sm:block sm:p-0">
-          {isOpen ? (
-            <div
-              className="fixed inset-0 bg-black bg-opacity-70 transition-opacity"
-              aria-hidden="true"
-              onClick={onClose}
-            ></div>
-          ) : null}
-
-          <span
-            className="hidden sm:inline-block sm:align-middle sm:h-screen"
-            aria-hidden="true"
-          >
-            &#8203;
-          </span>
-
-          {isOpen ? (
-            <div
-              className="inline-block bg-bkg-2 
-              rounded-lg text-left shadow-lg transform transition-all 
-              sm:my-8 align-middle sm:max-w-md w-full"
-            >
-              {!hideClose ? (
-                <div className="w-full flex justify-end p-2 pb-0">
-                  <button
-                    onClick={onClose}
-                    className={`text-fgd-1 hover:text-primary focus:outline-none`}
-                  >
-                    <XIcon className={`h-5 w-5`} />
-                  </button>
-                </div>
-              ) : (
-                <div className="w-full pt-4" />
-              )}
-              {children}
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </Portal>
-  )
-}
-
-const Header = ({ children }) => {
-  return (
-    <div className={`flex justify-center bg-bkg-2 p-2 pt-0`}>{children}</div>
-  )
-}
-
-Modal.Header = Header
-
-export default Modal
diff --git a/components/Slider.tsx b/components/Slider.tsx
new file mode 100644
index 0000000..9251cf9
--- /dev/null
+++ b/components/Slider.tsx
@@ -0,0 +1,92 @@
+import { FunctionComponent, useState } from 'react'
+import tw from 'twin.macro'
+import styled from '@emotion/styled'
+import Slider from 'rc-slider'
+import 'rc-slider/assets/index.css'
+
+type StyledSliderProps = {
+  enableTransition: boolean
+}
+
+const StyledSlider = styled(Slider)<StyledSliderProps>`
+  .rc-slider-rail {
+    ${tw`bg-gradient-to-r from-secondary-1-light via-primary-light to-secondary-2-light h-2.5 rounded-full`}
+  }
+
+  .rc-slider-track {
+    ${tw`bg-gradient-to-r from-secondary-1-light via-primary-light to-secondary-2-light h-2.5 rounded-full`}
+
+    ${({ enableTransition }) =>
+      enableTransition && tw`transition-all duration-500`}
+  
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
+  }
+
+  .rc-slider-step {
+    ${tw`hidden`}
+  }
+
+  .rc-slider-handle {
+    ${tw`bg-fgd-1 border-4 border-primary-dark h-4 w-4`}
+
+    ${({ enableTransition }) =>
+      enableTransition && tw`transition-all duration-500`}
+
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    margin-top: -3px;
+  }
+
+  .rc-slider-mark-text {
+    ${tw`font-display transition-all duration-300 text-fgd-2 hover:text-primary-light`}
+    font-size: 10px;
+  }
+
+  .rc-slider-mark-text-active {
+    ${tw`opacity-60 hover:opacity-100`}
+  }
+
+  .rc-slider-mark-text:first-of-type {
+    padding-left: 12px;
+  }
+
+  .rc-slider-mark-text:last-of-type {
+    padding-right: 24px;
+  }
+`
+
+type SliderProps = {
+  onChange: (...args: any[]) => any
+  step: number
+  value: number
+}
+
+const marks = {
+  0: '0%',
+  25: '25%',
+  50: '50%',
+  75: '75%',
+  100: '100%',
+}
+
+const AmountSlider: FunctionComponent<SliderProps> = ({
+  onChange,
+  step,
+  value,
+}) => {
+  const [enableTransition, setEnableTransition] = useState(true)
+
+  return (
+    <StyledSlider
+      min={0}
+      value={value || 0}
+      onChange={onChange}
+      step={step}
+      marks={marks}
+      enableTransition={enableTransition}
+      onBeforeChange={() => setEnableTransition(false)}
+      onAfterChange={() => setEnableTransition(true)}
+    />
+  )
+}
+
+export default AmountSlider
diff --git a/package.json b/package.json
index e85af17..8749b5d 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "zustand": "^3.4.1"
   },
   "devDependencies": {
+    "@emotion/babel-preset-css-prop": "^11.2.0",
     "@testing-library/react": "^11.2.5",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.25",
@@ -57,6 +58,12 @@
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.0.2",
     "tailwindcss": "^2.1.2",
+    "twin.macro": "^2.4.0",
     "typescript": "^4.1.3"
+  },
+  "babelMacros": {
+    "twin": {
+      "preset": "emotion"
+    }
   }
 }
diff --git a/styles/index.css b/styles/index.css
index adcc5c1..11a1432 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --primary: theme('colors.primary.light');
+}
+
 /* base */
 
 * {
diff --git a/tailwind.config.js b/tailwind.config.js
index ed7301a..8e7146b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,17 @@ module.exports = {
         'fgd-3': '#B9B5CE',
         'fgd-4': '#706C81',
       },
+      animation: {
+        'ping-small': 'ping-small 1.5s cubic-bezier(0, 0, 0.2, 1) infinite',
+      },
+      keyframes: {
+        'ping-small': {
+          '75%, 100%': {
+            transform: 'scale(1.06, 1.25)',
+            opacity: 0,
+          },
+        },
+      },
     },
   },
   variants: {
diff --git a/yarn.lock b/yarn.lock
index 06ce1cf..1583c43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -54,6 +54,12 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/helper-annotate-as-pure@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz#0f58e86dfc4bb3b1fcd7db806570e177d439b6ab"
+  dependencies:
+    "@babel/types" "^7.12.13"
+
 "@babel/helper-compilation-targets@^7.13.16":
   version "7.13.16"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.16.tgz#6e91dccf15e3f43e5556dffe32d860109887563c"
@@ -108,7 +114,7 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.8.0":
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.8.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
 
@@ -157,7 +163,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.13.16":
+"@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.12.5", "@babel/parser@^7.13.16":
   version "7.13.16"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.16.tgz#0f18179b0448e6939b1f3f5c4c355a3a9bcdfd37"
 
@@ -191,7 +197,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.12.13":
+"@babel/plugin-syntax-jsx@^7.12.13", "@babel/plugin-syntax-jsx@^7.2.0":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz#044fb81ebad6698fe62c478875575bcbb9b70f15"
   dependencies:
@@ -239,6 +245,16 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@babel/plugin-transform-react-jsx@^7.12.1":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.13.12.tgz#1df5dfaf0f4b784b43e96da6f28d630e775f68b3"
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.12.13"
+    "@babel/helper-module-imports" "^7.13.12"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/types" "^7.13.12"
+
 "@babel/runtime-corejs3@^7.10.2":
   version "7.13.17"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.13.17.tgz#9baf45f03d4d013f021760b992d6349a9d27deaf"
@@ -309,7 +325,13 @@
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
 
-"@emotion/babel-plugin@^11.3.0":
+"@emotion/babel-plugin-jsx-pragmatic@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz#27debfe9c27c4d83574d509787ae553bf8a34d7e"
+  dependencies:
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+
+"@emotion/babel-plugin@^11.2.0", "@emotion/babel-plugin@^11.3.0":
   version "11.3.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
   dependencies:
@@ -326,6 +348,15 @@
     source-map "^0.5.7"
     stylis "^4.0.3"
 
+"@emotion/babel-preset-css-prop@^11.2.0":
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.2.0.tgz#c7e945f56b2610b438f0dc8ae5253fc55488de0e"
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.12.1"
+    "@babel/runtime" "^7.7.2"
+    "@emotion/babel-plugin" "^11.2.0"
+    "@emotion/babel-plugin-jsx-pragmatic" "^0.1.5"
+
 "@emotion/cache@^11.1.3":
   version "11.1.3"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd"
@@ -1183,6 +1214,17 @@ atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
+autoprefixer@^10.2.5:
+  version "10.2.5"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.5.tgz#096a0337dbc96c0873526d7fef5de4428d05382d"
+  dependencies:
+    browserslist "^4.16.3"
+    caniuse-lite "^1.0.30001196"
+    colorette "^1.2.2"
+    fraction.js "^4.0.13"
+    normalize-range "^0.1.2"
+    postcss-value-parser "^4.1.0"
+
 autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -1241,7 +1283,7 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@^2.6.1:
+babel-plugin-macros@^2.6.1, babel-plugin-macros@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   dependencies:
@@ -1426,7 +1468,7 @@ browserslist@4.16.1:
     escalade "^3.1.1"
     node-releases "^1.1.69"
 
-browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.6.4:
+browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.3, browserslist@^4.6.4:
   version "4.16.5"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.5.tgz#952825440bca8913c62d0021334cbe928ef062ae"
   dependencies:
@@ -1544,6 +1586,10 @@ caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.300011
   version "1.0.30001214"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001214.tgz#70f153c78223515c6d37a9fde6cd69250da9d872"
 
+caniuse-lite@^1.0.30001196:
+  version "1.0.30001219"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001219.tgz#5bfa5d0519f41f993618bd318f606a4c4c16156b"
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -1630,6 +1676,10 @@ classnames@2.x, classnames@^2.2.1, classnames@^2.2.5, classnames@^2.2.6:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
 
+clean-set@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -1730,13 +1780,6 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
-<<<<<<< Updated upstream
-=======
-compare-versions@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62"
-
->>>>>>> Stashed changes
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
@@ -2112,6 +2155,10 @@ dotenv@8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
 
+dset@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dset/-/dset-2.1.0.tgz#cd1e99e55cf32366d8f144f906c42f7fb3bf431e"
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -2564,22 +2611,6 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-<<<<<<< Updated upstream
-=======
-find-up@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
-  dependencies:
-    locate-path "^6.0.0"
-    path-exists "^4.0.0"
-
-find-versions@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-4.0.0.tgz#3c57e573bf97769b8cb8df16934b627915da4965"
-  dependencies:
-    semver-regex "^3.1.2"
-
->>>>>>> Stashed changes
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -2615,6 +2646,10 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+fraction.js@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe"
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -2912,27 +2947,9 @@ human-signals@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
 
-<<<<<<< Updated upstream
 husky@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/husky/-/husky-6.0.0.tgz#810f11869adf51604c32ea577edbc377d7f9319e"
-  integrity sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==
-=======
-husky@^4.2.3:
-  version "4.3.8"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-4.3.8.tgz#31144060be963fd6850e5cc8f019a1dfe194296d"
-  dependencies:
-    chalk "^4.0.0"
-    ci-info "^2.0.0"
-    compare-versions "^3.6.0"
-    cosmiconfig "^7.0.0"
-    find-versions "^4.0.0"
-    opencollective-postinstall "^2.0.2"
-    pkg-dir "^5.0.0"
-    please-upgrade-node "^3.2.0"
-    slash "^3.0.0"
-    which-pm-runs "^1.0.0"
->>>>>>> Stashed changes
 
 iconv-lite@0.4.24:
   version "0.4.24"
@@ -3933,23 +3950,26 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-<<<<<<< Updated upstream
-=======
-locate-path@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
-  dependencies:
-    p-locate "^5.0.0"
-
->>>>>>> Stashed changes
 lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
+lodash.flatmap@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz#ef8cbf408f6e48268663345305c6acc0b778702e"
+
 lodash.flatten@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -4429,13 +4449,6 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
-<<<<<<< Updated upstream
-=======
-opencollective-postinstall@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
-
->>>>>>> Stashed changes
 optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -4488,15 +4501,6 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
-<<<<<<< Updated upstream
-=======
-p-locate@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
-  dependencies:
-    p-limit "^3.0.2"
-
->>>>>>> Stashed changes
 p-map@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
@@ -4615,15 +4619,6 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-<<<<<<< Updated upstream
-=======
-pkg-dir@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-5.0.0.tgz#a02d6aebe6ba133a928f74aec20bafdfe6b8e760"
-  dependencies:
-    find-up "^5.0.0"
-
->>>>>>> Stashed changes
 platform@1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
@@ -4966,6 +4961,14 @@ postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.12:
     nanoid "^3.1.22"
     source-map "^0.6.1"
 
+postcss@^8.1.8:
+  version "8.2.13"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.13.tgz#dbe043e26e3c068e45113b1ed6375d2d37e2129f"
+  dependencies:
+    colorette "^1.2.2"
+    nanoid "^3.1.22"
+    source-map "^0.6.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -5473,13 +5476,6 @@ semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
 
-<<<<<<< Updated upstream
-=======
-semver-regex@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-3.1.2.tgz#34b4c0d361eef262e07199dbef316d0f2ab11807"
-
->>>>>>> Stashed changes
 "semver@2 || 3 || 4 || 5", semver@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -5789,6 +5785,10 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
+string-similarity@^4.0.3:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-4.0.4.tgz#42d01ab0b34660ea8a018da8f56a3309bb8b2a5b"
+
 string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
@@ -5941,7 +5941,7 @@ table@^6.0.4:
     string-width "^4.2.0"
     strip-ansi "^6.0.0"
 
-tailwindcss@^2.1.2:
+tailwindcss@^2.1.0, tailwindcss@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.1.2.tgz#29402bf73a445faedd03df6d3b177e7b52b7c4a1"
   dependencies:
@@ -6006,6 +6006,10 @@ timers-browserify@2.0.12, timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+timsort@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -6113,6 +6117,25 @@ tweetnacl@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-1.0.3.tgz#ac0af71680458d8a6378d0d0d050ab1407d35596"
 
+twin.macro@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/twin.macro/-/twin.macro-2.4.0.tgz#ec78a7ce844d94f6a6001be233a8903c2dd523da"
+  dependencies:
+    "@babel/parser" "^7.12.5"
+    autoprefixer "^10.2.5"
+    babel-plugin-macros "^2.8.0"
+    chalk "^4.1.0"
+    clean-set "^1.1.1"
+    color "^3.1.3"
+    dset "^2.0.1"
+    lodash.flatmap "^4.5.0"
+    lodash.get "^4.4.2"
+    lodash.merge "^4.6.2"
+    postcss "^8.1.8"
+    string-similarity "^4.0.3"
+    tailwindcss "^2.1.0"
+    timsort "^0.3.0"
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -6380,13 +6403,6 @@ which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-<<<<<<< Updated upstream
-=======
-which-pm-runs@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
-
->>>>>>> Stashed changes
 which-typed-array@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"