Merge pull request #79 from ConsenSys/ge-clean-up

optimize for mobile and clean up design
Consensys · Jun 6, 2019 · b1c5b03 · b1c5b03
2 parents 83697bc + fb0e787
commit b1c5b03
Show file tree

Hide file tree

Showing 20 changed files with 1,351 additions and 1,357 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",
-    "rimble-ui": "^0.8.0",
+    "rimble-ui": "^0.9.0",
     "styled-components": "^4.2.0",
     "web3": "^1.0.0-beta.55"
   },

diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,16 @@
 import React, { Component } from "react";
-import { ThemeProvider, Box, Text, Flex, Heading } from "rimble-ui";
+import { ThemeProvider, Box, Flex, Card, Text, Heading } from "rimble-ui";
 
 import RimbleWeb3 from "./utilities/RimbleWeb3";
 import ConnectionBanner from "@rimble/connection-banner";
+import NetworkIndicator from "@rimble/network-indicator";
 
 import Header from "./components/Header";
+import WalletBlock from "./components/WalletBlock";
 import PrimaryCard from "./components/PrimaryCard";
 import InstructionsCard from "./components/InstructionsCard";
 import Web3Debugger from "./components/Web3Debugger";
 
-import theme from "./theme";
-import { createGlobalStyle } from "styled-components";
-
-const GlobalStyle = createGlobalStyle`
-  body, html {
-    margin: 0;
-    padding: 0;
-    background-color: #efefef;
-  }
-`;
-
 class App extends Component {
   state = {
     route: "default"
@@ -39,7 +30,7 @@ class App extends Component {
 
   render() {
     return (
-      <ThemeProvider theme={theme} className="App">
+      <ThemeProvider>
         <RimbleWeb3 config={this.config}>
           <RimbleWeb3.Consumer>
             {({
@@ -64,11 +55,7 @@ class App extends Component {
               transaction,
               web3Fallback
             }) => (
-              <Box
-                style={{
-                  paddingBottom: !network.isCorrectNetwork ? "8em" : "0"
-                }}
-              >
+              <Box>
                 <Header
                   account={account}
                   accountBalance={accountBalance}
@@ -86,22 +73,41 @@ class App extends Component {
                   network={network}
                 />
 
-                <Flex m={3} justifyContent={"center"}>
+                <Box maxWidth={'640px'} mx={'auto'} p={3} >
                   <ConnectionBanner
                     currentNetwork={network.current.id}
                     requiredNetwork={this.config.requiredNetwork}
                     onWeb3Fallback={web3Fallback}
                   />
-                </Flex>
+                </Box>
 
-                <Flex justifyContent="center" p={3}>
-                  <Heading.h2 role="img" aria-label="Waving hand" mr={3}>👋</Heading.h2>
+                <Flex maxWidth={'640px'} mx={'auto'} p={3}>
+                  <Heading.h2 mr={3}>
+                    <span role="img" aria-label="Waving hand">
+                      👋
+                    </span>
+                  </Heading.h2>
 
-                  <Text maxWidth="400px">
+                  <Text>
                     Hi there, see Rimble components in action with our demo Ethereum dApp. Change the value below to get started. Check out our repos – links are in the footer!
                   </Text>
                 </Flex>
 
+                <Card maxWidth={'640px'} mx={'auto'} p={3} px={4}>
+                  <NetworkIndicator
+                    currentNetwork={network.current.id}
+                    requiredNetwork={network.required.id}
+                  />
+                </Card>
+
+                <WalletBlock
+                  account={account}
+                  accountBalance={accountBalance}
+                  accountBalanceLow={accountBalanceLow}
+                  accountValidated={accountValidated}
+                  connectAndValidateAccount={connectAndValidateAccount}
+                />
+
                 {this.state.route === "default" ? <PrimaryCard /> : null}
 
                 {this.state.route === "onboarding" ? (
@@ -134,7 +140,6 @@ class App extends Component {
             )}
           </RimbleWeb3.Consumer>
         </RimbleWeb3>
-        <GlobalStyle />
       </ThemeProvider>
     );
   }

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,55 +1,12 @@
 import React from "react";
-import { Box, Flex, Button, Heading } from "rimble-ui";
-import NetworkIndicator from "@rimble/network-indicator";
-import AccountOverview from "../utilities/components/AccountOverview";
+import { Box, Heading } from "rimble-ui";
 
 class Header extends React.Component {
   render() {
     return (
-      <Box>
-        <Flex
-          alignItems={"center"}
-          justifyContent={["space-between", "flex-end"]}
-          bg={"white"}
-          px={3}
-          py={2}
-        >
-          <Box mr={4}>
-            <NetworkIndicator
-              currentNetwork={this.props.network.current.id}
-              requiredNetwork={this.props.network.required.id}
-            />
-          </Box>
-
-          {this.props.account && this.props.accountValidated ? (
-            <AccountOverview
-              account={this.props.account}
-              accountBalanceLow={this.props.accountBalanceLow}
-              accountBalance={this.props.accountBalance}
-            />
-          ) : (
-            <Button
-              onClick={() =>
-                this.props.connectAndValidateAccount(result => {
-                  if (result === "success") {
-                    // success
-                    console.log("Callback SUCCESS");
-                  } else if (result === "error") {
-                    // error
-                    console.log("Callback ERROR");
-                  }
-                })
-              }
-              size="small"
-            >
-              Connect
-            </Button>
-          )}
-        </Flex>
-        <Box bg="primary" p={3} justifyContent="center" flexDirection="column">
-          <Box maxWidth="400px" mx="auto">
-            <Heading.h2 color={"white"}>Rimble App Demo</Heading.h2>
-          </Box>
+      <Box bg="primary" p={3} justifyContent="center" flexDirection="column">
+        <Box maxWidth="400px" mx="auto">
+          <Heading fontSize={4} color={"white"}>Rimble App Demo</Heading>
         </Box>
       </Box>
     );

diff --git a/src/components/InstructionsCard.js b/src/components/InstructionsCard.js
@@ -5,28 +5,33 @@ class InstructionsCard extends React.Component {
   render() {
     return (
       <Flex justifyContent={"center"}>
-        <Box maxWidth={"400px"} mt={4} mx={3}>
-          <Flex>
-            <Box>
-              <Icon name="Info" color="primary" mx={3} my={3} />
-            </Box>
-            <Box>
-              <Heading.h4>You're going to need Rinkeby ETH</Heading.h4>
-              <Text mb={4}>
-                If you don't have any, you can request some for free. All you need is a Facebook or Twitter account.{" "}
+        <Box maxWidth={"640px"} mt={4} mx={3}>
+          <Flash variant={'info'}>
+            <Flex>
+              <Box m={1} mr={3} >
+                <Icon name="Info" size={'2rem'} />
+              </Box>
+              <Box mr={3} pt={1}>
+                <Heading fontSize={3} my={0} lineHeight={1.5}>
+                  You're going to need Rinkeby ETH
+                </Heading>
+                <Text color={'inherit'} my={2}>
+                  If you don't have any, you can request some for free. All you need is a Facebook or Twitter account.{" "}
+                </Text>
                 <Link
                   href="https://faucet.rinkeby.io/"
                   target="_blank"
                   title="Head to the Rinkeby faucet"
                 >
-                  Get Rinkeby ETH
+                  <Box display={'inline-flex'} alignItems={'center'}>
+                    Get Rinkeby ETH
+                    <Icon name={'OpenInNew'} size={'18px'} mb={'2px'} ml={2} />
+                  </Box>
                 </Link>
-              </Text>
-            </Box>
-          </Flex>
+              </Box>
+            </Flex>
+          </Flash>
           <Flex
-            borderTop={1}
-            borderColor={"#ccc"}
             py={4}
             px={3}
             alignItems={"center"}

diff --git a/src/components/PrimaryCard.js b/src/components/PrimaryCard.js
@@ -20,7 +20,7 @@ class PrimaryCard extends React.Component {
           contractMethodSendWrapper
         }) => (
           <div>
-            <Card maxWidth={"400px"} mx={"auto"} px={4}>
+            <Card maxWidth={'640px'} px={4} mx={'auto'}>
               <SmartContractControls
                 contract={contract}
                 account={account}

diff --git a/src/components/SmartContractControls.js b/src/components/SmartContractControls.js
@@ -139,101 +139,43 @@ class SmartContractControls extends React.Component {
   render() {
     return (
       <Box>
-        <Box display={["none", "block"]}>
-          <Flex px={0} justifyContent="space-between" alignItems="end">
-            <Text mb={2} fontSize={3}>
-              Smart contract value
-            </Text>
-
-            <Button.Outline
-              size={"small"}
-              onClick={this.resetCounter}
-              disabled={!this.props.account}
-            >
-              Reset
-            </Button.Outline>
-          </Flex>
-        </Box>
-
-        <Box display={["block", "none"]}>
-          <Button
-            size="medium"
-            width={[1, "initial"]}
-            onClick={this.incrementCounter}
-            my={1}
-            px={3}
-          >
-            Increase value
-          </Button>
-        </Box>
-
-        <Box
-          my={4}
-          pt={3}
-          pb={3}
-          borderTop={1}
-          borderBottom={1}
-          borderColor={"#E8E8E8"}
-        >
-          <Box display={["block", "none"]}>
-            <Flex px={0} justifyContent="space-between" alignItems="end">
-              <Text mb={2} fontSize={3}>
-                Smart contract value
-              </Text>
-
-              <Button.Outline
-                size={"small"}
-                onClick={this.resetCounter}
-                disabled={!this.props.account}
-              >
-                Reset
-              </Button.Outline>
-            </Flex>
-          </Box>
-          <Text fontSize={6} textAlign={"center"}>
-            {this.state.value}
+
+        <Flex px={0} justifyContent="space-between" alignItems={'center'}>
+          <Text fontWeight={3}>
+            Smart contract value:
           </Text>
-        </Box>
 
-        <Box display={["block", "none"]}>
+          <Button.Outline
+            size={"small"}
+            onClick={this.resetCounter}
+            disabled={!this.props.account}
+          >
+            Reset
+          </Button.Outline>
+        </Flex>
+
+        <Text fontSize={'5rem'} fontWeight={1} lineHeight={1} textAlign={'center'} my={5}>
+          {this.state.value}
+        </Text>
+
+        <Flex flexDirection={'row'}>
           <Button
-            size="medium"
-            width={[1, "initial"]}
             onClick={this.decrementCounter}
-            my={1}
-            px={3}
+            flex={'1'}
+            mr={[2, 3]}
           >
             Decrease value
           </Button>
-        </Box>
-
-        <Box mx={-1} display={["none", "block"]}>
-          <Flex
-            px={0}
-            justifyContent="space-between"
-            flexWrap={["wrap", "no-wrap"]}
+          <Button
+            onClick={this.incrementCounter}
+            flex={'1'}
           >
-            <Button
-              size="medium"
-              width={[1, "initial"]}
-              onClick={this.decrementCounter}
-              my={1}
-              px={3}
-            >
-              Decrease value
-            </Button>
-            <Button
-              size="medium"
-              width={[1, "initial"]}
-              onClick={this.incrementCounter}
-              my={1}
-              px={3}
-            >
-              Increase value
-            </Button>
-          </Flex>
-        </Box>
+            Increase value
+          </Button>
+        </Flex>
+
       </Box>
+
     );
   }
 }