From 97b44d405210a7d8d940a141de4bfd40c650f936 Mon Sep 17 00:00:00 2001 From: Phyrex Tsai Date: Sun, 21 Oct 2018 16:08:34 +0800 Subject: [PATCH] Update style, add link --- css/Connect.css | 2 +- package-lock.json | 34 ++++++++++----------------- src/components/App.js | 4 ++++ src/components/Clients/index.js | 8 +++---- src/components/Connect/Connect.css | 6 ++--- src/components/Connect/Connect.scss | 6 ++--- src/components/Footer/index.js | 3 +-- src/components/Introduction/index.js | 6 ++--- src/components/SearchBar/SearchBar.js | 2 +- 9 files changed, 33 insertions(+), 38 deletions(-) diff --git a/css/Connect.css b/css/Connect.css index d94ee3e..de27ff6 100644 --- a/css/Connect.css +++ b/css/Connect.css @@ -4,7 +4,7 @@ height: auto; min-height: 600px; margin: 0px auto; - padding: 48px 20px 60px 20px; + padding: 28px 20px 20px 20px; background-color: #1f398f; -webkit-box-sizing: border-box; box-sizing: border-box; diff --git a/package-lock.json b/package-lock.json index 26d2fe1..2ea61e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3603,7 +3603,7 @@ }, "camelcase-keys": { "version": "2.1.0", - "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "requires": { "camelcase": "^2.0.0", @@ -3957,7 +3957,7 @@ }, "color": { "version": "0.11.4", - "resolved": "http://registry.npmjs.org/color/-/color-0.11.4.tgz", + "resolved": "https://registry.npmjs.org/color/-/color-0.11.4.tgz", "integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=", "requires": { "clone": "^1.0.2", @@ -4281,12 +4281,11 @@ "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=", - "dev": true + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" }, "css-color-names": { "version": "0.0.4", - "resolved": "http://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", + "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=" }, "css-declaration-sorter": { @@ -4418,7 +4417,6 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.2.2.tgz", "integrity": "sha512-w99Fzop1FO8XKm0VpbQp3y5mnTnaS+rtCvS+ylSEOK76YXO5zoHQx/QMB1N54Cp+Ya9jB9922EHrh14ld4xmmw==", - "dev": true, "requires": { "css-color-keywords": "^1.0.0", "fbjs": "^0.8.5", @@ -6724,7 +6722,7 @@ }, "ethereumjs-util": { "version": "4.5.0", - "resolved": "http://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-4.5.0.tgz", + "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-4.5.0.tgz", "integrity": "sha1-PpQosxfuvaPXJg2FT93alUsfG8Y=", "requires": { "bn.js": "^4.8.0", @@ -7950,7 +7948,7 @@ }, "get-stream": { "version": "3.0.0", - "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=" }, "get-value": { @@ -11849,7 +11847,7 @@ "dependencies": { "semver": { "version": "5.3.0", - "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=" } } @@ -16874,7 +16872,7 @@ }, "query-string": { "version": "5.1.1", - "resolved": "http://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz", "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==", "requires": { "decode-uri-component": "^0.2.0", @@ -20889,7 +20887,7 @@ }, "yargs-parser": { "version": "2.4.1", - "resolved": "http://registry.npmjs.org/yargs-parser/-/yargs-parser-2.4.1.tgz", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-2.4.1.tgz", "integrity": "sha1-hVaN488VD/SfpRgl8DqMiA3cxcQ=", "requires": { "camelcase": "^3.0.0", @@ -21343,7 +21341,6 @@ "version": "3.4.10", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-3.4.10.tgz", "integrity": "sha512-TA8ip8LoILgmSAFd3r326pKtXytUUGu5YWuqZcOQVwVVwB6XqUMn4MHW2IuYJ/HAD81jLrdQed8YWfLSG1LX4Q==", - "dev": true, "requires": { "buffer": "^5.0.3", "css-to-react-native": "^2.0.3", @@ -21360,7 +21357,6 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz", "integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==", - "dev": true, "requires": { "base64-js": "^1.0.2", "ieee754": "^1.1.4" @@ -21369,14 +21365,12 @@ "has-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", - "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", - "dev": true + "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=" }, "supports-color": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", - "dev": true, "requires": { "has-flag": "^1.0.0" } @@ -21443,14 +21437,12 @@ "stylis": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.3.tgz", - "integrity": "sha512-TxU0aAscJghF9I3V9q601xcK3Uw1JbXvpsBGj/HULqexKOKlOEzzlIpLFRbKkCK990ccuxfXUqmPbIIo7Fq/cQ==", - "dev": true + "integrity": "sha512-TxU0aAscJghF9I3V9q601xcK3Uw1JbXvpsBGj/HULqexKOKlOEzzlIpLFRbKkCK990ccuxfXUqmPbIIo7Fq/cQ==" }, "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "dev": true + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" }, "superagent": { "version": "3.8.3", @@ -23462,7 +23454,7 @@ }, "yargs-parser": { "version": "4.2.1", - "resolved": "http://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz", "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=", "requires": { "camelcase": "^3.0.0" diff --git a/src/components/App.js b/src/components/App.js index cd4e6f8..65c9746 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -65,6 +65,10 @@ class App extends Component { this.fetchAccount(web3); } + async initError (error) { + console.log(error); + } + footerOutFn = (isOut) =>{ this.setState({isFooterOut: isOut}) } diff --git a/src/components/Clients/index.js b/src/components/Clients/index.js index 27eb619..92c1146 100644 --- a/src/components/Clients/index.js +++ b/src/components/Clients/index.js @@ -10,7 +10,7 @@ const ClientsDiv = styled.div` height: auto; min-height: 600px; margin: 0px auto; - padding: 48px 20px 60px 20px; + padding: 20px 20px 20px 20px; background-color: #1f398f; box-sizing: border-box; @media screen and (max-width: 720px) { @@ -23,9 +23,9 @@ class Clients extends Component {
-

Metamask

 -

Status

 -

TOSHI

 +

Metamask

 +

Status

 +

Coinbase Wallet
) diff --git a/src/components/Connect/Connect.css b/src/components/Connect/Connect.css index dbf5db3..6530cd0 100644 --- a/src/components/Connect/Connect.css +++ b/src/components/Connect/Connect.css @@ -4,7 +4,7 @@ height: auto; min-height: 600px; margin: 0px auto; - padding: 48px 20px 60px 20px; + padding: 10px 20px 10px 20px; background-color: #1f398f; box-sizing: border-box; } @media screen and (max-width: 720px) { @@ -12,9 +12,9 @@ min-height: 500px; } } .introduction { - margin-bottom: 25px; } + margin-bottom: 10px; } .introduction .figure { - padding: 0px 0px 33px 0px; } + padding: 0px 0px 10px 0px; } .introduction .figure img { width: 100%; } .introduction h3 { diff --git a/src/components/Connect/Connect.scss b/src/components/Connect/Connect.scss index f8d7e2b..c818c38 100644 --- a/src/components/Connect/Connect.scss +++ b/src/components/Connect/Connect.scss @@ -4,7 +4,7 @@ height: auto; min-height: 600px; margin: 0px auto; - padding: 48px 20px 60px 20px; + padding: 10px 20px 10px 20px; background-color: #1f398f; box-sizing: border-box; @media screen and (max-width: 720px) { @@ -12,10 +12,10 @@ } } .introduction { - margin-bottom: 25px; + margin-bottom: 10px; .figure { - padding: 0px 0px 33px 0px; + padding: 0px 0px 10px 0px; img { width: 100%; diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index a27be27..4a7d206 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -7,7 +7,7 @@ const Footer = styled.div` bottom: ${props => (props.isFooterOut ? '-250px' : '0px')};; left: 0; width: 100%; - height: 161px; + height: 100px; padding: 20px; box-sizing: border-box; background-color: #19307d; @@ -20,7 +20,6 @@ const Content = styled.div` display: flex; align-items: center; justify-content: space-between; - padding-bottom: 25px; `; const Footertext = styled.p` diff --git a/src/components/Introduction/index.js b/src/components/Introduction/index.js index de6af32..d6fd84e 100644 --- a/src/components/Introduction/index.js +++ b/src/components/Introduction/index.js @@ -2,13 +2,13 @@ import React, { Component } from 'react' import styled from 'styled-components'; import landing from '../../images/landing.png'; const Introduction = styled.div` - margin-bottom: 25px; - height: ${props => (props.isSeach ? '0px' : '198px')}; + margin-bottom: 10px; + height: ${props => (props.isSeach ? '0px' : '180px')}; transition: height .4s; overflow: hidden; img { width: 100%; - margin-bottom: 33px; + margin-bottom: 15px; } h3 { font-size: 16px; diff --git a/src/components/SearchBar/SearchBar.js b/src/components/SearchBar/SearchBar.js index 69a7eb8..12f30db 100644 --- a/src/components/SearchBar/SearchBar.js +++ b/src/components/SearchBar/SearchBar.js @@ -28,7 +28,7 @@ const Main = styled.div` height: auto; min-height: 600px; margin: 0px auto; - padding: 48px 20px 161px 20px; + padding: 10px 20px 161px 20px; background-color: #1f398f; box-sizing: border-box; @media screen and (max-width: 720px) {