Stylize the Application

15Dkatz · Sep 29, 2022 · 80d8b41 · 80d8b41
1 parent 823eba3
commit 80d8b41
Show file tree

Hide file tree

Showing 12 changed files with 177 additions and 16 deletions.
diff --git a/client/dist/index.html b/client/dist/index.html
@@ -1,6 +1,10 @@
 <!doctype html>
 <html>
-  <head></head>
+  <head>
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
+  <link rel="stylesheet" href="/src.e31bb0bc.css"></head>
   <body>
     <div id="root"></div>
     <script src="/src.e31bb0bc.js"></script>

diff --git a/client/dist/logo.e9a9c890.png b/client/dist/logo.e9a9c890.png
diff --git a/client/dist/src.e31bb0bc.css b/client/dist/src.e31bb0bc.css
diff --git a/client/dist/src.e31bb0bc.css.map b/client/dist/src.e31bb0bc.css.map
diff --git a/client/dist/src.e31bb0bc.js b/client/dist/src.e31bb0bc.js
@@ -23188,7 +23188,8 @@ var Blocks = /*#__PURE__*/function (_Component) {
       console.log('this.state', this.state);
       return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Blocks"), this.state.blocks.map(function (block) {
         return /*#__PURE__*/_react.default.createElement("div", {
-          key: block.hash
+          key: block.hash,
+          className: "Block"
         }, block.hash);
       }));
     }
@@ -23199,7 +23200,9 @@ var Blocks = /*#__PURE__*/function (_Component) {
 
 var _default = Blocks;
 exports.default = _default;
-},{"react":"../../node_modules/react/index.js"}],"components/App.js":[function(require,module,exports) {
+},{"react":"../../node_modules/react/index.js"}],"assets/logo.png":[function(require,module,exports) {
+module.exports = "/logo.e9a9c890.png";
+},{}],"components/App.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -23211,6 +23214,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Blocks = _interopRequireDefault(require("./Blocks"));
 
+var _logo = _interopRequireDefault(require("../assets/logo.png"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -23283,7 +23288,14 @@ var App = /*#__PURE__*/function (_Component) {
       var _this$state$walletInf = this.state.walletInfo,
           address = _this$state$walletInf.address,
           balance = _this$state$walletInf.balance;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, "Welcome to the blockchain..."), /*#__PURE__*/_react.default.createElement("div", null, "Address: ", address), /*#__PURE__*/_react.default.createElement("div", null, "Balance: ", balance), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Blocks.default, null));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "App"
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        className: "logo",
+        src: _logo.default
+      }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, "Welcome to the blockchain..."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
+        className: "WalletInfo"
+      }, /*#__PURE__*/_react.default.createElement("div", null, "Address: ", address), /*#__PURE__*/_react.default.createElement("div", null, "Balance: ", balance)), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Blocks.default, null));
     }
   }]);
 
@@ -23292,7 +23304,79 @@ var App = /*#__PURE__*/function (_Component) {
 
 var _default = App;
 exports.default = _default;
-},{"react":"../../node_modules/react/index.js","./Blocks":"components/Blocks.js"}],"index.js":[function(require,module,exports) {
+},{"react":"../../node_modules/react/index.js","./Blocks":"components/Blocks.js","../assets/logo.png":"assets/logo.png"}],"../../node_modules/parcel-bundler/src/builtins/bundle-url.js":[function(require,module,exports) {
+var bundleURL = null;
+
+function getBundleURLCached() {
+  if (!bundleURL) {
+    bundleURL = getBundleURL();
+  }
+
+  return bundleURL;
+}
+
+function getBundleURL() {
+  // Attempt to find the URL of the current script and use that as the base URL
+  try {
+    throw new Error();
+  } catch (err) {
+    var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
+
+    if (matches) {
+      return getBaseURL(matches[0]);
+    }
+  }
+
+  return '/';
+}
+
+function getBaseURL(url) {
+  return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)?\/[^/]+(?:\?.*)?$/, '$1') + '/';
+}
+
+exports.getBundleURL = getBundleURLCached;
+exports.getBaseURL = getBaseURL;
+},{}],"../../node_modules/parcel-bundler/src/builtins/css-loader.js":[function(require,module,exports) {
+var bundle = require('./bundle-url');
+
+function updateLink(link) {
+  var newLink = link.cloneNode();
+
+  newLink.onload = function () {
+    link.remove();
+  };
+
+  newLink.href = link.href.split('?')[0] + '?' + Date.now();
+  link.parentNode.insertBefore(newLink, link.nextSibling);
+}
+
+var cssTimeout = null;
+
+function reloadCSS() {
+  if (cssTimeout) {
+    return;
+  }
+
+  cssTimeout = setTimeout(function () {
+    var links = document.querySelectorAll('link[rel="stylesheet"]');
+
+    for (var i = 0; i < links.length; i++) {
+      if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
+        updateLink(links[i]);
+      }
+    }
+
+    cssTimeout = null;
+  }, 50);
+}
+
+module.exports = reloadCSS;
+},{"./bundle-url":"../../node_modules/parcel-bundler/src/builtins/bundle-url.js"}],"index.css":[function(require,module,exports) {
+var reloadCSS = require('_css_loader');
+
+module.hot.dispose(reloadCSS);
+module.hot.accept(reloadCSS);
+},{"_css_loader":"../../node_modules/parcel-bundler/src/builtins/css-loader.js"}],"index.js":[function(require,module,exports) {
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
@@ -23301,10 +23385,12 @@ var _reactDom = require("react-dom");
 
 var _App = _interopRequireDefault(require("./components/App"));
 
+require("./index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_App.default, null), document.getElementById('root'));
-},{"react":"../../node_modules/react/index.js","react-dom":"../../node_modules/react-dom/index.js","./components/App":"components/App.js"}],"../../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
+},{"react":"../../node_modules/react/index.js","react-dom":"../../node_modules/react-dom/index.js","./components/App":"components/App.js","./index.css":"index.css"}],"../../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
 var global = arguments[3];
 var OVERLAY_ID = '__parcel__error__overlay__';
 var OldModule = module.bundle.Module;
@@ -23332,11 +23418,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-<<<<<<< HEAD
   var ws = new WebSocket(protocol + '://' + hostname + ':' + "54827" + '/');
-=======
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "63937" + '/');
->>>>>>> 2a22398 (Seed the Backend with Data)
 
   ws.onmessage = function (event) {
     checkedAssets = {};

diff --git a/client/dist/src.e31bb0bc.js.map b/client/dist/src.e31bb0bc.js.map
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/components/App.js b/client/src/components/App.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Blocks from './Blocks';
+import logo from '../assets/logo.png';
 
 class App extends Component {
   state = { walletInfo: {} };
@@ -14,10 +15,15 @@ class App extends Component {
     const { address, balance } = this.state.walletInfo;
 
     return (
-      <div>
+      <div className="App">
+        <img className='logo' src={logo}></img>
+        <br />
         <div>Welcome to the blockchain...</div>
-        <div>Address: {address}</div>
-        <div>Balance: {balance}</div>
+        <br />
+        <div className='WalletInfo'>
+          <div>Address: {address}</div>
+          <div>Balance: {balance}</div>
+        </div>
         <br />
         <Blocks />
       </div>

diff --git a/client/src/components/Blocks.js b/client/src/components/Blocks.js
@@ -18,7 +18,7 @@ class Blocks extends Component {
         {
           this.state.blocks.map(block => {
             return (
-              <div key={block.hash}>{block.hash}</div>
+              <div key={block.hash} className='Block'>{block.hash}</div>
             )
           })
         }

diff --git a/client/src/index.css b/client/src/index.css
@@ -0,0 +1,30 @@
+body {
+  background-color: #444;
+  color: #fff;
+  text-align: center;
+  font-size: 20px;
+  font-family: 'Quicksand';
+  padding-top: 5%;
+  word-wrap: break-word;
+}
+
+.logo {
+  width: 250px;
+  height: 250px;
+}
+
+.App {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.WalletInfo {
+  width: 500px;
+}
+
+.Block {
+  border: 1px solid #fff;
+  padding: 5%;
+  margin: 2%;
+}
diff --git a/client/src/index.html b/client/src/index.html
@@ -1,6 +1,10 @@
 <!doctype html>
 <html>
-  <head></head>
+  <head>
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
+  </head>
   <body>
     <div id="root"></div>
     <script src="index.js"></script>

diff --git a/client/src/index.js b/client/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from 'react-dom';
 import App from './components/App';
+import './index.css';
 
 render(
   <App></App>,