diff --git a/.gitignore b/.gitignore index 4d29575d..81b368c5 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.vercel diff --git a/assets/react-demo-updated.png b/assets/react-demo-updated.png index d5440052..616b516f 100644 Binary files a/assets/react-demo-updated.png and b/assets/react-demo-updated.png differ diff --git a/package.json b/package.json index 734ce1d8..f08dcc13 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "onboard-notify-react", - "version": "0.13.6", + "version": "0.13.7", "dependencies": { "bnc-notify": "^1.9.2", "bnc-notify-staging": "https://github.com/blocknative/notify#develop", diff --git a/src/App.css b/src/App.css index 6ced79be..01b6b146 100644 --- a/src/App.css +++ b/src/App.css @@ -15,9 +15,9 @@ main { } .bn-logo { - width: 12rem; + width: 16rem; position: absolute; - left: 4px; + left: 12px; } .main-content { @@ -139,15 +139,6 @@ main { justify-content: center; } -.versioning { - display: flex; - flex-direction: column; - position: fixed; - bottom: 1rem; - left: 1rem; - color: #716c6c; -} - @media screen and (max-width: 1275px) { .user-info-container { flex-direction: column; @@ -190,14 +181,6 @@ main { width: calc(100vw - 4rem); text-align: center; } - .versioning { - position: inherit; - text-align: center; - display: flex; - flex-direction: column; - color: #716c6c; - margin: 1rem auto 2rem; - } } @media screen and (max-width: 450px) { diff --git a/src/App.js b/src/App.js index c9b59c43..ec42f1c3 100644 --- a/src/App.js +++ b/src/App.js @@ -2,15 +2,12 @@ import React, { useState, useEffect } from 'react' import { ethers } from 'ethers' import VConsole from 'vconsole' import { initOnboard, initNotify } from './services' -import { version, dependencies } from '../package.json' -import avatarPlaceholder from './avatar-placeholder.png' -import BNLogo from './blocknative-logo-full.svg' import networkEnum from './networkEnum' - +import BNLogo from './icons/blocknative-logo-dark.svg' +import avatarPlaceholder from './icons/avatar-placeholder.png' +import Footer from './views/Footer/Footer.js' import './App.css' -const staging = process.env.REACT_APP_STAGING - if (window.innerWidth < 700) { new VConsole() } @@ -301,38 +298,35 @@ const App = () => { return (
- Block Native Logo -
- {ens?.name ? ( - - avatar -
- {ens.name} -
- - ) : ( - address && {address} - )} - {balance != null && ( - - {Number(balance) > 0 ? balance / 1000000000000000000 : balance} ETH - - )} - {network && ( - {networkEnum?.[Number(network)] || 'local'} Network - )} + Block Native Logo +
+ {ens?.name ? ( + + avatar +
+ {ens.name} +
+ + ) : ( + address && {address} + )} + {balance != null && ( + + {Number(balance) > 0 ? balance / 1000000000000000000 : balance}{' '} + ETH + + )} + {network && ( + {networkEnum?.[Number(network)] || 'local'} Network + )}
@@ -510,7 +504,7 @@ const App = () => {
-

UI Settings

+

Onboard / Notify UI Settings

-
- - React Demo version: {staging ? 'NEXT' : version} - - - Onboard version:{' '} - {staging ? 'NEXT' : dependencies['bnc-onboard'].slice(1)} - - - Notify version:{' '} - {staging ? 'NEXT' : dependencies['bnc-notify'].slice(1)} - -
+
) } diff --git a/src/bn-logo.png b/src/bn-logo.png deleted file mode 100644 index abf5e4bb..00000000 Binary files a/src/bn-logo.png and /dev/null differ diff --git a/src/avatar-placeholder.png b/src/icons/avatar-placeholder.png similarity index 100% rename from src/avatar-placeholder.png rename to src/icons/avatar-placeholder.png diff --git a/src/icons/blocknative-logo-dark.svg b/src/icons/blocknative-logo-dark.svg new file mode 100644 index 00000000..914a6295 --- /dev/null +++ b/src/icons/blocknative-logo-dark.svg @@ -0,0 +1,16 @@ + + + + Group 7 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/icons/discord-icon.svg b/src/icons/discord-icon.svg new file mode 100644 index 00000000..9da6ee03 --- /dev/null +++ b/src/icons/discord-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/icons/github-icon.svg b/src/icons/github-icon.svg new file mode 100644 index 00000000..d1a81129 --- /dev/null +++ b/src/icons/github-icon.svg @@ -0,0 +1,7 @@ + + + + + Svg Vector Icons : http://www.onlinewebfonts.com/icon + + \ No newline at end of file diff --git a/src/icons/twitter-icon.svg b/src/icons/twitter-icon.svg new file mode 100644 index 00000000..f894f982 --- /dev/null +++ b/src/icons/twitter-icon.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/views/Footer/Footer.css b/src/views/Footer/Footer.css new file mode 100644 index 00000000..1f1e8b4d --- /dev/null +++ b/src/views/Footer/Footer.css @@ -0,0 +1,169 @@ +.footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: auto; + background: #383c48; + position: fixed; + bottom: 0; + padding: 4px 0 6px; + width: 100%; +} + +.versioning { + display: flex; + flex-direction: column; + color: #716c6c; + margin-left: 16px; +} + +.footer-links { + display: flex; + justify-content: center; + align-items: center; +} + +.footer-icon { + transition: all 250ms; + margin: 0 auto; + width: 70px; + height: 60px; +} + +.social-links { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 16px; +} + +.social-links span { + transition: all 250ms; + margin-top: 4px; + text-align: center; +} + +.social-links:hover > span { + color: #D0D4F7; +} + +.github { + background-color: black; + -webkit-mask: url(../../icons/github-icon.svg) no-repeat 8px 8px / 50px; + mask: url(../../icons/github-icon.svg) no-repeat 8px 8px / 50px; +} + +.social-links:hover > .github { + background-color: #D0D4F7; + -webkit-mask: url(../../icons/github-icon.svg) no-repeat 8px 8px / 50px; + mask: url(../../icons/github-icon.svg) no-repeat 8px 8px / 50px; +} + +.twitter { + background-color: black; + -webkit-mask: url(../../icons/twitter-icon.svg) no-repeat 8px 8px / 50px; + mask: url(../../icons/twitter-icon.svg) no-repeat 8px 8px / 50px; +} + +.social-links:hover > .twitter { + background-color: #D0D4F7; + -webkit-mask: url(../../icons/twitter-icon.svg) no-repeat 8px 8px / 50px; + mask: url(../../icons/twitter-icon.svg) no-repeat 8px 8px / 50px; +} + +.discord { + background-color: black; + -webkit-mask: url(../../icons/discord-icon.svg) no-repeat 8px 8px / 50px; + mask: url(../../icons/discord-icon.svg) no-repeat 8px 8px / 50px; + height: 56px; + margin-top: 4px; +} + +.social-links:hover > .discord { + background-color: #D0D4F7; + -webkit-mask: url(../../icons/discord-icon.svg) no-repeat 8px 8px / 50px; + mask: url(../../icons/discord-icon.svg) no-repeat 8px 8px / 50px; +} + +.tech-links { + display: flex; + flex-direction: column; + align-items: end; + margin-right: 16px; +} + +.tech-links button { + margin-right: 0; +} + +.terms-privacy { + margin: 6px 0 4px; +} + +.terms-privacy a { + color: #6370e5; + margin: 4px 0; +} + +.terms-privacy-divider { + margin: 0 8px; +} + +@media screen and (max-width: 760px) { + + .versioning { + text-align: center; + } + + .footer-links { + flex-direction: row; + } + + .social-links span { + text-align: center; + } + + .tech-links { + display: initial; + margin: 12px 0px; + } + + .terms-privacy { + text-align: center; + } + +} + +@media screen and (max-width: 670px) { + .footer { + position: initial; + margin-top: auto; + } + + .versioning { + position: inherit; + text-align: center; + display: flex; + flex-direction: column; + color: #716c6c; + margin: .5rem auto; + } + + .footer-links { + flex-direction: row; + } + + .social-links span { + text-align: center; + } + + .tech-links { + display: initial; + margin: 12px 0px; + } + + .terms-privacy { + text-align: center; + } + +} \ No newline at end of file diff --git a/src/views/Footer/Footer.js b/src/views/Footer/Footer.js new file mode 100644 index 00000000..47ce0525 --- /dev/null +++ b/src/views/Footer/Footer.js @@ -0,0 +1,99 @@ +import React from 'react' +import { version, dependencies } from '../../../package.json' + +import './Footer.css' + +const Footer = () => { + const staging = process.env.REACT_Footer_STAGING; + + return ( +
+
+ + React Demo version: {staging ? 'NEXT' : version} + + + Onboard version:{' '} + {staging ? 'NEXT' : dependencies['bnc-onboard'].slice(1)} + + + Notify version:{' '} + {staging ? 'NEXT' : dependencies['bnc-notify'].slice(1)} + +
+
+ + +

+ + Onboard Github + + + +

+ + Join our Discord + + + +

+ + Blocknative Twitter + +
+
+ + + + + + +
+ + Terms + + | + + Privacy + +
+
+
+ ) +} + +export default Footer