diff --git a/package.json b/package.json
index a77ffc0..e9ec748 100755
--- a/package.json
+++ b/package.json
@@ -74,6 +74,9 @@
"timezone-mock": "^0.0.7"
},
"dependencies": {
+ "@fortawesome/fontawesome": "^1.1.8",
+ "@fortawesome/fontawesome-free-solid": "^5.0.13",
+ "@fortawesome/react-fontawesome": "^0.0.20",
"create-redux-form": "^0.1.2",
"ethjs": "^0.3.3",
"ethjs-account": "^0.1.4",
diff --git a/src/assets/images/meta-mask-logo.png b/src/assets/images/meta-mask-logo.png
new file mode 100644
index 0000000..74d8967
Binary files /dev/null and b/src/assets/images/meta-mask-logo.png differ
diff --git a/src/bootstrap/app.js b/src/bootstrap/app.js
index aeef7dd..224d459 100755
--- a/src/bootstrap/app.js
+++ b/src/bootstrap/app.js
@@ -14,6 +14,7 @@ import PageNotFound from '../containers/page-not-found'
import Initializer from './initializer'
import GlobalComponents from './global-components'
import { ETHAddressRegExpCaptureGroup, ETHAddressRegExp } from './dapp-api'
+import './fontawesome'
import './app.css'
diff --git a/src/bootstrap/fontawesome.js b/src/bootstrap/fontawesome.js
new file mode 100644
index 0000000..1acc09b
--- /dev/null
+++ b/src/bootstrap/fontawesome.js
@@ -0,0 +1,4 @@
+import { library } from '@fortawesome/fontawesome'
+import faExclamationCircle from '@fortawesome/fontawesome-free-solid/faExclamationCircle'
+
+library.add(faExclamationCircle)
diff --git a/src/components/__snapshots__/storyshots.test.js.snap b/src/components/__snapshots__/storyshots.test.js.snap
index afe2085..e10d58f 100755
--- a/src/components/__snapshots__/storyshots.test.js.snap
+++ b/src/components/__snapshots__/storyshots.test.js.snap
@@ -88,11 +88,11 @@ exports[`Storyshots Button disabled 1`] = `
className="Button is-disabled "
onClick={null}
>
-
CLICK ME
-
+
-
CLICK ME
-
+
-
CLICK ME, CLICK ME, CLICK ME
-
+
+
+
-
{children}
+
{children}
)
@@ -26,7 +26,7 @@ Button.propTypes = {
.isRequired,
// Handlers
- onClick: PropTypes.func.isRequired,
+ onClick: PropTypes.func,
// Modifiers
disabled: PropTypes.bool,
@@ -35,6 +35,9 @@ Button.propTypes = {
}
Button.defaultProps = {
+ // Handlers
+ onClick: null,
+
// Modifiers
disabled: false,
className: '',
diff --git a/src/components/requires-meta-mask/index.js b/src/components/requires-meta-mask/index.js
index a02e809..ebbe04d 100755
--- a/src/components/requires-meta-mask/index.js
+++ b/src/components/requires-meta-mask/index.js
@@ -1,21 +1,36 @@
import React from 'react'
import PropTypes from 'prop-types'
+import metaMaskLogo from '../../assets/images/meta-mask-logo.png'
+import Button from '../button'
+
import './require-meta-mask.css'
const RequiresMetaMask = ({ needsUnlock }) => (
-
+
+
This is a decentralized application. In order to use this site please{' '}
+ {needsUnlock ? 'unlock' : 'download'} MetaMask.
- {needsUnlock ? 'unlock ' : 'download '}
- MetaMask
- .
+
+ {needsUnlock ? 'Unlock' : 'Download'} MetaMask
+
+
)
diff --git a/src/components/requires-meta-mask/require-meta-mask.scss b/src/components/requires-meta-mask/require-meta-mask.scss
index 55d2b36..d75f29d 100755
--- a/src/components/requires-meta-mask/require-meta-mask.scss
+++ b/src/components/requires-meta-mask/require-meta-mask.scss
@@ -2,17 +2,34 @@
/* @define RequiresMetaMask */
.RequiresMetaMask {
- height: 100%;
+ align-items: center;
+ background: $light;
+ border: 1px solid $light3;
+ color: $dark;
+ display: flex;
+ flex-wrap: wrap;
+ font-size: 1.5rem;
+ justify-content: center;
+ line-height: 2.8125rem;
+ margin: 60px 15%;
+ padding: 5% 5% 5% 0;
- &-message {
- color: $dark;
- font-size: 40px;
- padding: 70px 50px;
- text-align: center;
+ &-logo {
+ margin: 15px 41px;
+ width: 100px;
+ }
+
+ &-content {
+ display: flex;
+ flex: 1 1;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-left: 15px;
- &-link {
- color: $dark4;
- text-decoration: none;
+ &-button {
+ font-weight: 700;
+ margin-top: 25px;
+ max-width: 280px;
}
}
}
diff --git a/src/containers/home/__snapshots__/home.test.js.snap b/src/containers/home/__snapshots__/home.test.js.snap
index fd4e66c..644cda7 100644
--- a/src/containers/home/__snapshots__/home.test.js.snap
+++ b/src/containers/home/__snapshots__/home.test.js.snap
@@ -2900,33 +2900,60 @@ exports[`Renders and loads an IICO contract's data after submitting an address.
seed="0xE8561C00C9d2857c54Fc847C05FcD7f7fB1d5E3C"
/>
- Go To
-
-
+
+
- Simple
-
- /
-
-
+ Simple
+
+
+ Use the simple interface if you just want to buy tokens in a simple manner.
+
+
+
+ Go
+
+
+
+
- Interactive
-
-
- IICO Page
-
-
- Use the simple interface if you just want to buy tokens in a simple manner.
-
-
- Use the interactive interface if you want to place sophisticated bids with personal caps on the amount raised.
-
+
+ Interactive
+
+
+ Use the interactive interface if you want to place sophisticated bids with personal caps on the amount raised.
+
+
+
+ Go
+
+
+
+
}
failedLoading="The address or the contract it holds is invalid. Try another one."
@@ -2981,59 +3008,128 @@ exports[`Renders and loads an IICO contract's data after submitting an address.
+ Go To Simple or Interactive IICO
+
+
- Go To
-
-
-
Simple
-
-
- /
-
-
+
+ Use the simple interface if you just want to buy tokens in a simple manner.
+
+
+
+
+
+
+
+
+
+
-
Interactive
-
-
-
- IICO Page
-
-
- Use the simple interface if you just want to buy tokens in a simple manner.
-
-
- Use the interactive interface if you want to place sophisticated bids with personal caps on the amount raised.
-
+
+
+ Use the interactive interface if you want to place sophisticated bids with personal caps on the amount raised.
+
+
+
+
+
+
+
+
+
+
diff --git a/src/containers/home/home.scss b/src/containers/home/home.scss
index 3212315..93e89e2 100755
--- a/src/containers/home/home.scss
+++ b/src/containers/home/home.scss
@@ -6,7 +6,7 @@
display: flex;
flex-direction: column;
height: 100%;
- padding: 10px 20px;
+ padding: 10px 20px 40px;
text-align: center;
&-form-fieldset-fields {
@@ -17,10 +17,33 @@
align-items: center;
display: flex;
flex-direction: column;
- margin-top: 37px;
+ margin-top: 20px;
- &-link {
- margin: 15px;
+ &-title {
+ margin-top: 40px;
+ }
+
+ &-options {
+ display: flex;
+ flex-wrap: wrap;
+ max-width: 75%;
+
+ &-option {
+ background-color: $light;
+ border: 1px solid $light3;
+ border-radius: 5px;
+ /* stylelint-disable declaration-colon-newline-after, value-list-comma-newline-after */
+ box-shadow: 0 0 6px 0 rgba(71, 82, 93, 0.09),
+ 0 0 1px 0 rgba(77, 78, 90, 0.08), 0 1px 0 0 rgba(71, 82, 93, 0.09);
+ /* stylelint-enable */
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: space-between;
+ margin: 17.5px 15px 0;
+ max-width: 500px;
+ padding: 20px 55px;
+ }
}
}
}
diff --git a/src/containers/home/index.js b/src/containers/home/index.js
index bc8b57c..d750bf8 100755
--- a/src/containers/home/index.js
+++ b/src/containers/home/index.js
@@ -7,6 +7,7 @@ import { RenderIf } from 'lessdux'
import * as IICOSelectors from '../../reducers/iico'
import * as IICOActions from '../../actions/iico'
import Identicon from '../../components/identicon'
+import Button from '../../components/button'
import {
IICOAddressForm,
@@ -100,22 +101,33 @@ class Home extends PureComponent {
IICOData.data && (
-
- Go To{' '}
- Simple /{' '}
-
- Interactive
- {' '}
- IICO Page
+
+ Go To Simple or Interactive IICO
-
- Use the simple interface if you just want to buy tokens in a
- simple manner.
-
-
- Use the interactive interface if you want to place
- sophisticated bids with personal caps on the amount raised.
-
+
+ {[
+ {
+ title: 'Simple',
+ text:
+ 'Use the simple interface if you just want to buy tokens in a simple manner.',
+ path: 'simple'
+ },
+ {
+ title: 'Interactive',
+ text:
+ 'Use the interactive interface if you want to place sophisticated bids with personal caps on the amount raised.',
+ path: 'interactive'
+ }
+ ].map(option => (
+
+
{option.title}
+
{option.text}
+
+
Go
+
+
+ ))}
+
)
}
diff --git a/src/containers/simple-bid/index.js b/src/containers/simple-bid/index.js
index 57d86ac..1b3e8f3 100644
--- a/src/containers/simple-bid/index.js
+++ b/src/containers/simple-bid/index.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { RenderIf } from 'lessdux'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import * as IICOSelectors from '../../reducers/iico'
import * as IICOActions from '../../actions/iico'
@@ -77,7 +78,7 @@ class SimpleBid extends PureComponent {
target="_blank"
rel="noopener noreferrer"
>
- KYC
+ KYC
) : (
'KYC'
@@ -104,15 +105,22 @@ class SimpleBid extends PureComponent {
failedLoading={null}
/>
-
-
+
+
+
DON'T SEND YOUR TRANSACTION FROM AN EXCHANGE OR YOUR FUNDS WILL BE
LOST.
-
-
+
+
{address && (
-
Contract Address: {address}
+
Contract Address:
+
+ {address}
+
Identicon:
diff --git a/src/containers/simple-bid/simple-bid.scss b/src/containers/simple-bid/simple-bid.scss
index 76eeb58..c692617 100644
--- a/src/containers/simple-bid/simple-bid.scss
+++ b/src/containers/simple-bid/simple-bid.scss
@@ -1,15 +1,50 @@
+@import '../../styles/_colors.scss';
+
/* @define SimpleBid */
.SimpleBid {
+ margin: 0 auto;
+ max-width: calc(590px + 30%);
padding: 25px 15% 50px;
text-align: justify;
+ &-warning {
+ align-items: center;
+ background: $primary;
+ border-radius: 4px;
+ color: $light;
+ display: flex;
+ font-size: 0.68rem;
+ font-weight: 300;
+ margin: 24px 0;
+ padding: 25px;
+ text-align: left;
+
+ &-icon {
+ display: block;
+ font-size: 1rem;
+ margin-right: 13px;
+ }
+ }
+
&-addressInfo {
text-align: left;
+ &-address {
+ background: $light;
+ border: 1px solid $light3;
+ border-radius: 5px;
+ /* stylelint-disable declaration-colon-newline-after, value-list-comma-newline-after */
+ box-shadow: 0 0 6px 0 rgba(71, 82, 93, 0.09),
+ 0 0 1px 0 rgba(77, 78, 90, 0.08), 0 1px 0 0 rgba(71, 82, 93, 0.09);
+ /* stylelint-enable */
+ margin-top: 18.5px;
+ padding: 25px;
+ }
+
&-blocks {
display: flex;
justify-content: space-evenly;
- margin-top: 24px;
+ margin: 36.5px 0 21px;
}
}
}
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
index 4c8afd2..96d96a0 100644
--- a/src/styles/_typography.scss
+++ b/src/styles/_typography.scss
@@ -89,7 +89,7 @@ h4 {
p {
color: $dark3;
font-size: 0.875rem;
- line-height: 1.0625rem;
+ line-height: 1.45rem;
}
// Modifiers
diff --git a/yarn.lock b/yarn.lock
index f4b4a0a..93b4b97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -259,6 +259,29 @@
version "0.6.2"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.2.tgz#19a39bda906e5ba45f39f6f7f3512b2740ceab29"
+"@fortawesome/fontawesome-common-types@^0.1.7":
+ version "0.1.7"
+ resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
+
+"@fortawesome/fontawesome-free-solid@^5.0.13":
+ version "5.0.13"
+ resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz#24b61aaf471a9d34a5364b052d64a516285ba894"
+ dependencies:
+ "@fortawesome/fontawesome-common-types" "^0.1.7"
+
+"@fortawesome/fontawesome@^1.1.8":
+ version "1.1.8"
+ resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz#75fe66a60f95508160bb16bd781ad7d89b280f5b"
+ dependencies:
+ "@fortawesome/fontawesome-common-types" "^0.1.7"
+
+"@fortawesome/react-fontawesome@^0.0.20":
+ version "0.0.20"
+ resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.0.20.tgz#5ec711f3a032c13643e454b360112b6346a276d6"
+ dependencies:
+ humps "^2.0.1"
+ prop-types "^15.5.7"
+
"@marionebl/sander@^0.6.0":
version "0.6.1"
resolved "https://registry.yarnpkg.com/@marionebl/sander/-/sander-0.6.1.tgz#1958965874f24bc51be48875feb50d642fc41f7b"
@@ -6141,6 +6164,10 @@ https-browserify@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+humps@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+
husky@^0.14.3:
version "0.14.3"
resolved "https://registry.yarnpkg.com/husky/-/husky-0.14.3.tgz#c69ed74e2d2779769a17ba8399b54ce0b63c12c3"