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 - +
+ MetaMask Logo
This is a decentralized application. In order to use this site please + unlock + MetaMask. - unlock - MetaMask +
+
+ Unlock + MetaMask +
+
- .
+ MetaMask Logo
This is a decentralized application. In order to use this site please + download + MetaMask. - download - MetaMask +
+
+ Download + MetaMask +
+
- .
- {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 }) => (
-
+ MetaMask Logo +
This is a decentralized application. In order to use this site please{' '} + {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. +

+ + + +
+
- 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. +

+ + + +
+ } 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}

+ + + +
+ ))} +
) } 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"