Oeth dapp UI style fixes

dapp-oeth/pages/index.js

@@ -21,6 +21,10 @@ export default function DApp({ locale, onLocale }) {
         </div>
       </Layout>
       <style jsx>{`
+        .home {
+          padding-top: 20px;
+        }
+
         @media (max-width: 799px) {
           .home {
             padding: 0;

dapp-oeth/src/components/AccountStatusDropdown.js

@@ -37,7 +37,7 @@ const AccountStatusDropdown = ({ className, showLogin }) => {
               setOpen(true)
             }
             event({
-              'event': 'open_account',
+              event: 'open_account',
             })
           }}
         >
@@ -68,6 +68,7 @@ const AccountStatusDropdown = ({ className, showLogin }) => {
           color: #fafbfb;
           padding: 20px 30px 20px 20px;
           min-width: 170px;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
         }
         .dropdown-menu .dropdown-marble {
           margin-right: 18px;

dapp-oeth/src/components/AppFooter.js

@@ -91,7 +91,7 @@ export default function Footer({ onLocale, locale }) {
       </footer>
       <style jsx>{`
         footer {
-          background-color: #141519;
+          background-color: #1e1f25;
           color: #828699;
           font-size: 0.75rem;
           padding: 18px 0;

dapp-oeth/src/components/ApySelect.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import classnames from 'classnames'
 import Dropdown from 'components/Dropdown'
 import { assetRootPath } from 'utils/image'
 import { event } from '../../lib/gtm'
@@ -14,18 +15,23 @@ const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
               return (
                 <div
                   key={days}
-                  className="dropdown-item justify-content-start align-items-center"
+                  className={classnames(
+                    'dropdown-item justify-content-start align-items-center',
+                    {
+                      selected: String(days) === String(apyDays),
+                    }
+                  )}
                   onClick={(e) => {
                     e.preventDefault()
                     setApyDays(days)
                     setOpen(false)
                     event({
-                      'event': 'change_apy',
-                      'change_apy_to': days
+                      event: 'change_apy',
+                      change_apy_to: days,
                     })
                   }}
                 >
-                  {`${days}${homepage ? ' days' : 'd'}`}
+                  {`${days} day trailing APY`}
                 </div>
               )
             })}
@@ -44,7 +50,11 @@ const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
           }}
         >
           {`${apyDays} day trailing`}
-          <div className="downcaret">
+          <div
+            className={classnames('downcaret', {
+              opened: open,
+            })}
+          >
             <img
               className="apy-select-icon"
               src={assetRootPath('/images/downcaret.png')}
@@ -78,26 +88,39 @@ const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
         }
 
         .dropdown-menu {
-          margin-right: 200px;
+          margin-right: 0;
           background-color: #1e1f25;
           color: #fafbfb;
           font-size: 16px;
-          min-width: 98px;
-          top: 100%;
-          left: 0;
-          padding: 5px;
+          min-width: 140px;
+          top: 115%;
+          left: -20px;
           border: solid 1px #141519;
+          padding: 0;
+          overflow: hidden;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
         }
 
         .dropdown-item {
+          display: flex;
+          align-items: center;
           color: #fafbfb;
-          padding: 3px 5px 3px 10px;
+          padding: 10px 16px;
           line-height: 20px;
           cursor: pointer;
+          border-bottom: solid 1px #141519;
+          font-size: 12px;
+        }
+
+        .dropdown-item.selected {
+          color: #828699;
+        }
+        .dropdown-item:nth-child(:last-child) {
+          border-bottom: none;
         }
 
         .dropdown-item:hover {
-          background-color: rgba(255, 255, 255, 0.1);
+          background-color: #24252b;
         }
 
         .downcaret {
@@ -110,6 +133,11 @@ const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
           margin: 0 8px;
           background-color: rgba(255, 255, 255, 0.1);
           border-radius: 20px;
+          transition: transform 0.2s ease-in;
+        }
+
+        .downcaret.opened {
+          transform: rotate(180deg);
         }
 
         .apy-select-icon {

dapp-oeth/src/components/GetOUSD.js

@@ -57,7 +57,7 @@ const GetOUSD = ({
         style={style}
         onClick={() => {
           if (process.browser) {
-            event({'event': 'connect_click'})
+            event({ event: 'connect_click' })
             walletLogin(showLogin, activate)
           }
         }}
@@ -92,8 +92,10 @@ const GetOUSD = ({
 
         .btn-nav {
           color: #fafbfb;
-          font-size: 0.8125rem;
-          font-weight: normal;
+          font-size: 16px;
+          font-weight: 500;
+          letter-spacing: 0em;
+          text-align: left;
         }
 
         @media (max-width: 992px) {

dapp-oeth/src/components/IPFSDappLink.js

@@ -34,6 +34,11 @@ export default function IPFSDappLink({ css }) {
           margin-right: 10px;
           background-color: #1e1f25;
           color: #fafbfb;
+          font-size: 16px;
+          font-weight: 500;
+          letter-spacing: 0em;
+          text-align: left;
+          height: 42px;
         }
 
         .ipfs-link span {

dapp-oeth/src/components/MissionControl.js

@@ -10,6 +10,10 @@ const MissionControl = ({}) => {
         <SwapHomepage />
       </div>
       <style jsx>{`
+        .swap-contain {
+          margin-top: 18px;
+        }
+
         @media (max-width: 767px) {
           .swap-contain {
             padding: 0 8px;

dapp-oeth/src/components/Nav.js

@@ -197,27 +197,27 @@ const TransactionActivityDropdown = () => {
             !lastProcessedTransaction?.mined ? (
               <img
                 className="activity-icon rotating"
-                src={assetRootPath('/images/activity-pending.png')}
+                src={assetRootPath('/images/activity-pending.svg')}
                 alt="Transaction activity pending"
               />
             ) : lastProcessedTransaction?.mined &&
               !lastProcessedTransaction?.isError ? (
               <img
                 className="activity-icon "
-                src={assetRootPath('/images/activity-success.png')}
+                src={assetRootPath('/images/activity-success.svg')}
                 alt="Transaction activity success"
               />
             ) : (
               <img
                 className="activity-icon"
-                src={assetRootPath('/images/activity-failed.png')}
+                src={assetRootPath('/images/activity-failed.svg')}
                 alt="Transaction activity failed"
               />
             )
           ) : (
             <img
               className="activity-icon"
-              src={assetRootPath('/images/activity.png')}
+              src={assetRootPath('/images/activity.svg')}
               alt="Transaction activity button"
             />
           )}
@@ -256,6 +256,7 @@ const TransactionActivityDropdown = () => {
           color: #fafbfb;
           padding: 20px 30px 20px 20px;
           min-width: 170px;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
         }
 
         .dropdown-menu .dropdown-marble {
@@ -546,7 +547,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
         }
 
         .banner.burn {
-          background-color: #141519;
+          background-color: #1e1f25;
           border: solid 1px;
           border-radius: 5px;
         }
@@ -586,7 +587,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
         }
 
         .navbar.lightBg {
-          background: #141519;
+          background: #1e1f25;
           display: block;
         }
 

dapp-oeth/src/components/_AccountStatusContent.js

@@ -206,6 +206,7 @@ const AccountStatusContent = ({ className, onOpen }) => {
           border: solid 1px #141519;
           background-color: #1e1f25;
           color: #fafbfb;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
         }
 
         .account-status-content {

dapp-oeth/src/components/buySell/BalanceHeader.js

@@ -71,7 +71,7 @@ const BalanceHeader = ({
         setBalanceEmphasised(false)
       },
       // non even duration number so more of the decimals in oethBalance animate
-      duration: 1985,
+      duration: 0,
       id: 'header-balance-ousd-animation',
       stepTime: 30,
     })

dapp-oeth/src/components/buySell/SettingsDropdown.js

@@ -98,8 +98,8 @@ const SettingsDropdown = ({ setPriceToleranceValue, priceToleranceValue }) => {
             const newOpenState = !settingsOpen
             setSettingsOpen(newOpenState)
             if (!settingsOpen) {
-              event({ 
-                'event': 'open_settings'
+              event({
+                event: 'open_settings',
               })
             }
           }}
@@ -121,6 +121,7 @@ const SettingsDropdown = ({ setPriceToleranceValue, priceToleranceValue }) => {
           border: solid 1px #141519;
           background-color: #1e1f25;
           color: #fafbfb;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
         }
 
         .settings-icon {