Merge pull request #192 from poanetwork/feature/#190-update-style-for…

…-ethereum-classic-network (Feature) Update style for Ethereum Classic network
omni · Mar 22, 2019 · 4be5c19 · 4be5c19
2 parents 346452a + 765d9e1
commit 4be5c19
Show file tree

Hide file tree

Showing 147 changed files with 2,440 additions and 1,803 deletions.
diff --git a/.env.example b/.env.example
@@ -31,3 +31,6 @@ REACT_APP_DESCRIPTION="The POA cross-chain bridge serves as a method of transfer
 
 # RSK
 #REACT_APP_DESCRIPTION="The TokenBridge serves as a method of transferring Bancor Network tokens between the Ethereum network to Rootstock network in a quick and cost-efficient manner."
+
+# To use Ethereum-classic styles
+#APP_STYLES=classic
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "bignumber.js": "^6.0.0",
     "chromedriver": "^2.35.0",
     "coveralls": "^3.0.0",
+    "dotenv": "^7.0.0",
     "fs-extra": "^5.0.0",
     "gh-pages": "^1.1.0",
     "mobx": "^4.0.2",
@@ -29,10 +30,11 @@
     "web3": "1.0.0-beta.30"
   },
   "scripts": {
-    "build-css": "node-sass-chokidar src/assets/stylesheets/application.scss -o src/assets/stylesheets --output-style=compressed",
+    "select-css-theme": "node scripts/selectTheme.js",
+    "build-css": "node-sass-chokidar src/assets/stylesheets -o src/assets/stylesheets --output-style=compressed -m application*.css",
     "watch-css": "nodemon -e scss -x \"npm run build-css\"",
-    "start": "npm run build-css && react-app-rewired start",
-    "build": "npm run compile:contracts && npm run build-css && react-app-rewired build",
+    "start": "npm run build-css && npm run select-css-theme && react-app-rewired start",
+    "build": "npm run compile:contracts && npm run build-css && npm run select-css-theme && react-app-rewired build",
     "test": "react-app-rewired test --env=jsdom",
     "startE2e": "mocha -b ./e2e-script/test.js",
     "start:blocks": "node ./e2e-script/scripts/blocks.js",

diff --git a/public/index.html b/public/index.html
@@ -10,21 +10,9 @@
         <meta property="og:url" content="https://poanetwork.github.io/bridge-ui" />
         <meta property="og:type" content="website" />
         <meta property="og:image" content="/images/bridgeogimage.jpg">
-        <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
+        <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">
         <link rel="manifest" href="%PUBLIC_URL%/favicons/manifest.json">
         <link rel="shortcut icon" href="%PUBLIC_URL%/favicons/favicon.ico">
-        <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
         <title>POA Bridge UI app</title>
         <!-- Start of poanet Zendesk Widget script -->
         <script>
@@ -54,16 +42,5 @@
       You need to enable JavaScript to run this app.
     </noscript>
         <div id="root"></div>
-        <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
     </body>
-
 </html>
diff --git a/scripts/selectTheme.js b/scripts/selectTheme.js
@@ -0,0 +1,15 @@
+const path = require('path');
+require('dotenv').config({
+    path: path.resolve(__dirname, '..', '.env')
+});
+const fs = require('fs');
+
+const stylePath = path.resolve(__dirname, '..', 'src', 'assets', 'stylesheets');
+const destinationFilename = 'application.css';
+let filename;
+if (process.env.APP_STYLES === 'classic') {
+    filename = 'application.classic.css'
+} else {
+    filename = 'application.core.css'
+}
+fs.copyFileSync(path.resolve(stylePath, filename), path.resolve(stylePath, destinationFilename));
diff --git a/src/App.js b/src/App.js
@@ -15,6 +15,7 @@ export class App extends React.Component {
 
   componentDidMount() {
     const disclaimerDisplayed = getItem(DISCLAIMER_KEY)
+
     if(!disclaimerDisplayed) {
       this.setState({ showDisclaimer: true })
     }
@@ -32,7 +33,7 @@ export class App extends React.Component {
   render() {
     const { showDisclaimer, showMobileMenu } = this.state
     return (
-      <div>
+      <div className={showMobileMenu ? 'mobile-menu-is-open' : ''}>
         <Route component={Loading}/>
         <Route component={SweetAlert}/>
         <Route render={() =>

diff --git a/src/assets/images/bg.png b/src/assets/images/bg.png
diff --git a/src/assets/images/bridge.png b/src/assets/images/bridge.png
diff --git a/src/assets/images/bridge@2x.png b/src/assets/images/bridge@2x.png
diff --git a/src/assets/images/disclaimer@2x.png → ...images/disclaimer-modal/disclaimer@2x.png b/src/assets/images/disclaimer@2x.png → ...images/disclaimer-modal/disclaimer@2x.png
diff --git a/src/assets/images/eth@2x.png b/src/assets/images/eth@2x.png
diff --git a/src/assets/images/i.png b/src/assets/images/i.png
diff --git a/src/assets/images/i@2x.png b/src/assets/images/i@2x.png
diff --git a/src/assets/images/icons/copy.svg b/src/assets/images/icons/copy.svg
diff --git a/src/assets/images/icons/corner-1.svg b/src/assets/images/icons/corner-1.svg
diff --git a/src/assets/images/icons/corner-2.svg b/src/assets/images/icons/corner-2.svg
diff --git a/src/assets/images/icons/icon-arrow-right.svg b/src/assets/images/icons/icon-arrow-right.svg
diff --git a/src/assets/images/icons/icon-close.svg b/src/assets/images/icons/icon-close.svg
diff --git a/src/assets/images/icons/icon-events.svg b/src/assets/images/icons/icon-events.svg
diff --git a/src/assets/images/icons/icon-info.svg b/src/assets/images/icons/icon-info.svg
diff --git a/src/assets/images/icons/icon-menu.svg b/src/assets/images/icons/icon-menu.svg
diff --git a/src/assets/images/icons/icon-statistics.svg b/src/assets/images/icons/icon-statistics.svg
diff --git a/src/assets/images/icons/icon-status.svg b/src/assets/images/icons/icon-status.svg
diff --git a/src/assets/images/icons/icon-wallet.svg b/src/assets/images/icons/icon-wallet.svg
diff --git a/src/assets/images/loading.png b/src/assets/images/loading.png
diff --git a/src/assets/images/loading@2x.png b/src/assets/images/loading@2x.png
diff --git a/src/assets/images/logos/logo-ethereum@2x.png b/src/assets/images/logos/logo-ethereum@2x.png
diff --git a/src/assets/images/logos/logo-poa-bottom.png b/src/assets/images/logos/logo-poa-bottom.png
diff --git a/src/assets/images/logos/logo-poa-bottom@2x.png b/src/assets/images/logos/logo-poa-bottom@2x.png
diff --git a/src/assets/images/logos/logo-poa-main-net_small.svg b/src/assets/images/logos/logo-poa-main-net_small.svg
diff --git a/src/assets/images/logos/logo-poa-sokol-purple.png b/src/assets/images/logos/logo-poa-sokol-purple.png
diff --git a/src/assets/images/logos/logo-top.png b/src/assets/images/logos/logo-top.png
diff --git a/src/assets/images/logos/logo-top@2x.png b/src/assets/images/logos/logo-top@2x.png
diff --git a/src/assets/images/icons/close.svg → src/assets/images/modal/close.svg b/src/assets/images/icons/close.svg → src/assets/images/modal/close.svg
diff --git a/src/assets/images/i@3x.png → src/assets/images/no-wallet-modal/i@3x.png b/src/assets/images/i@3x.png → src/assets/images/no-wallet-modal/i@3x.png
diff --git a/src/assets/images/poa@2x.png b/src/assets/images/poa@2x.png
diff --git a/src/assets/images/socials.png b/src/assets/images/socials.png
diff --git a/src/assets/images/socials/git.png b/src/assets/images/socials/git.png
diff --git a/src/assets/images/socials/git@2x.png b/src/assets/images/socials/git@2x.png
diff --git a/src/assets/images/socials/telegram.png b/src/assets/images/socials/telegram.png
diff --git a/src/assets/images/socials/telegram@2x.png b/src/assets/images/socials/telegram@2x.png
diff --git a/src/assets/images/socials/tw.png b/src/assets/images/socials/tw.png
diff --git a/src/assets/images/socials/tw@2x.png b/src/assets/images/socials/tw@2x.png
diff --git a/src/assets/images/socials@2x.png b/src/assets/images/socials@2x.png
diff --git a/src/assets/images/pattern.svg → ...ges/themes/core/background/bg-pattern.svg b/src/assets/images/pattern.svg → ...ges/themes/core/background/bg-pattern.svg
diff --git a/src/assets/images/arrows-down@2x.png → .../bridge/center-image-pointing-down@2x.png b/src/assets/images/arrows-down@2x.png → .../bridge/center-image-pointing-down@2x.png
diff --git a/src/assets/images/arrows-2.svg → ...ore/bridge/center-image-pointing-left.svg b/src/assets/images/arrows-2.svg → ...ore/bridge/center-image-pointing-left.svg
diff --git a/src/assets/images/arrows-1.svg → ...re/bridge/center-image-pointing-right.svg b/src/assets/images/arrows-1.svg → ...re/bridge/center-image-pointing-right.svg
diff --git a/src/assets/images/pattern-1.png → ...s/images/themes/core/bridge/pattern-1.png b/src/assets/images/pattern-1.png → ...s/images/themes/core/bridge/pattern-1.png
diff --git a/src/assets/images/pattern-2.png → ...s/images/themes/core/bridge/pattern-2.png b/src/assets/images/pattern-2.png → ...s/images/themes/core/bridge/pattern-2.png
diff --git a/src/assets/images/themes/core/logos/logo-foreign-modal.svg b/src/assets/images/themes/core/logos/logo-foreign-modal.svg
diff --git a/src/assets/images/themes/core/logos/logo-foreign.svg b/src/assets/images/themes/core/logos/logo-foreign.svg
diff --git a/src/assets/images/themes/core/logos/logo-home-modal.png b/src/assets/images/themes/core/logos/logo-home-modal.png
diff --git a/src/assets/images/themes/core/logos/logo-home.png b/src/assets/images/themes/core/logos/logo-home.png
diff --git a/src/assets/images/themes/core/logos/logo-loading.svg b/src/assets/images/themes/core/logos/logo-loading.svg
diff --git a/src/assets/images/themes/core/logos/logo.svg b/src/assets/images/themes/core/logos/logo.svg
diff --git a/src/assets/images/pic-1.svg → ...s/themes/core/status/authority/logo-0.svg b/src/assets/images/pic-1.svg → ...s/themes/core/status/authority/logo-0.svg
diff --git a/src/assets/images/pic-2.svg → ...s/themes/core/status/authority/logo-1.svg b/src/assets/images/pic-2.svg → ...s/themes/core/status/authority/logo-1.svg
diff --git a/src/assets/images/pic-3.svg → ...s/themes/core/status/authority/logo-2.svg b/src/assets/images/pic-3.svg → ...s/themes/core/status/authority/logo-2.svg
diff --git a/src/assets/images/themes/ethereum-classic/background/bg-pattern.svg b/src/assets/images/themes/ethereum-classic/background/bg-pattern.svg
diff --git a/src/assets/images/themes/ethereum-classic/bridge/center-image-pointing-down@2x.png b/src/assets/images/themes/ethereum-classic/bridge/center-image-pointing-down@2x.png
diff --git a/src/assets/images/themes/ethereum-classic/bridge/center-image-pointing-left.svg b/src/assets/images/themes/ethereum-classic/bridge/center-image-pointing-left.svg
diff --git a/src/assets/images/themes/ethereum-classic/bridge/center-image-pointing-right.svg b/src/assets/images/themes/ethereum-classic/bridge/center-image-pointing-right.svg
diff --git a/src/assets/images/themes/ethereum-classic/bridge/pattern-1.png b/src/assets/images/themes/ethereum-classic/bridge/pattern-1.png
diff --git a/src/assets/images/themes/ethereum-classic/bridge/pattern-2.png b/src/assets/images/themes/ethereum-classic/bridge/pattern-2.png
diff --git a/src/assets/images/themes/ethereum-classic/logos/logo-foreign.svg b/src/assets/images/themes/ethereum-classic/logos/logo-foreign.svg
diff --git a/src/assets/images/themes/ethereum-classic/logos/logo-home.svg b/src/assets/images/themes/ethereum-classic/logos/logo-home.svg