Some Styling updates, Removed rebuild, Added About page + Semantic UI.

assets/dashboard/plugins/bootstrap/css/bootstrap.css

@@ -1101,10 +1101,7 @@ a {
   text-decoration: none;
 }
 a:hover,
-a:focus {
+a:focus {}
-  color: #23527c;
-  text-decoration: underline;
-}
 a:focus {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;

assets/styles/materialize.min.css

@@ -6633,20 +6633,20 @@ input[type=checkbox]:not(:disabled)~.lever:active:before, input[type=checkbox]:n
   background-color: #949494
 }
 
-select {
+select {}
-}
 
 select.browser-default {
   display: block
 }
 
 select {
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: #443e3ee6;
   width: 100%;
   padding: 5px;
-  border: 1px solid #f2f2f2;
+  border: 1px solid #000000;
-  border-radius: 2px;
+  height: 30px;
-  height: 3rem
+  padding-top: 35px;
+  margin-top: 10px;
 }
 
 .select-label {

assets/styles/style.css

@@ -5,39 +5,38 @@ html {
 }
 
 /* hide / show the body when the loader is finished */
-body > .inner {
+body>.inner {
   display: none;
 }
 
-body.pg-loaded > .inner {
+body.pg-loaded>.inner {
   display: block;
 }
 
 /* Style the sidebar - fixed full height */
 .sidebar {
   height: 100%;
-  width: 120px;
+  width: 160px;
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
-  background-color: #111;
+  background-color: #000;
   overflow-x: hidden;
   padding-top: 16px;
 }
 
 /* Style sidebar links */
 .sidebar a {
-  padding: 6px 8px 6px 16px;
   text-decoration: none;
   font-size: 20px;
-  color: #818181;
+  color: #840032;
   display: block;
 }
 
 /* Style links on mouse-over */
 .sidebar a:hover {
-  color: #f1f1f1;
+  color: #786798;
 }
 
 #peerCount {
@@ -49,23 +48,21 @@ body.pg-loaded > .inner {
   padding-left: 5px;
 }
 
-#syncProgress
+#syncProgress {
-{
   height: 20px;
   position: fixed;
   z-index: 1;
-  left: 120px;
+  left: 160px;
   right: 0;
   bottom: 0;
   background-color: #111;
   border-top: 1px solid #111;
 }
 
-#mainContent
+#mainContent {
-{
   position: fixed;
   z-index: 1;
-  left: 120px;
+  left: 160px;
   top: 0;
   right: 0;
   bottom: 20px;
@@ -75,14 +72,20 @@ body.pg-loaded > .inner {
 
 /* Style the main content */
 .main {
-  margin-left: 160px; /* Same as the width of the sidenav */
+  margin-left: 160px;
+  /* Same as the width of the sidenav */
   padding: 0px 10px;
 }
 
 /* Add media queries for small screens (when the height of the screen is less than 450px, add a smaller padding and font-size) */
 @media screen and (max-height: 450px) {
-  .sidebar {padding-top: 15px;}
+  .sidebar {
-  .sidebar a {font-size: 18px;}
+    padding-top: 15px;
+  }
+
+  .sidebar a {
+    font-size: 18px;
+  }
 }
 
 .sidebarIcon {
@@ -194,7 +197,6 @@ body.pg-loaded > .inner {
   height: 60px;
 }
 
-
 #transactionsWrapper {
   color: #aaa;
   padding-top: 10px;
@@ -249,8 +251,7 @@ div.sidebar svg {
 }
 
 .sendWrapper,
-.settingsWrapper
+.settingsWrapper {
-{
   padding: 30px;
 }
 
@@ -292,7 +293,7 @@ div.sidebar svg {
   font-size: 1em;
 }
 
-.txInfo label + label {
+.txInfo label+label {
   color: #7A1336;
   margin-left: 0px;
 }
@@ -331,7 +332,7 @@ div.sidebar svg {
   background-color: #212529;
   display: none;
   position: fixed;
-  left: 120px;
+  left: 160px;
   right: 0;
   bottom: 20px;
   top: 0;
@@ -377,7 +378,6 @@ div.sidebar svg {
 
 div.noWalletsWrapper,
 div.noAddressWrapper {
-
   display: flex;
   align-items: center;
   justify-content: center;

assets/templates/about.html

@@ -0,0 +1,7 @@
+<div id="walletsToolbar">
+    <span style="font-size: 28px;"> About Ether-1 </span>
+</div>
+
+<h1>
+  Coming Soon
+</h1>

assets/templates/send.html

@@ -4,11 +4,8 @@
       <div class="row">
         <div class="input-field col s6">
           <select id="sendFromAddress">
-            <option value="" disabled="disabled" selected="selected">Choose your address</option>
             {{#addressData}}
-              <option value="{{address}}">{{name}}
+              <option value="{{address}}">{{name}} - {{address}}</option>
-                -
-                {{address}}</option>
             {{/addressData}}
           </select>
           <label for="sendFromAddress">From address:</label>

assets/templates/wallets.html

@@ -24,10 +24,8 @@
     <table class="bordered" id="addressTable">
       <thead>
         <tr>
-          <th scope="col" class="noSortCollumn" data-sort-method='none'></th>
           <th scope="col">Name</th>
           <th scope="col">Address</th>
-          <th scope="col" class="noSortCollumn" data-sort-method='none'></th>
           <th scope="col" data-sort-method='number'>Balance</th>
         </tr>
       </thead>

index.html

@@ -18,6 +18,7 @@
   <link rel="stylesheet" href="./assets/styles/buttons.css">
   <link rel="stylesheet" href="./assets/styles/style.css">
   <link rel="stylesheet" href="./assets/styles/forms.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/button.css">
   <!-- Insert this line above script imports -->
   <script>
     if (typeof module === 'object') {
@@ -49,6 +50,7 @@
   <script src="./assets/scripts/jquery.qrcode.min.js"></script>
   <script src="./assets/scripts/all.min.js"></script>
   <script src="./assets/scripts/Chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
 
   <!-- Insert this line after script imports -->
   <script>
@@ -77,39 +79,53 @@
   <div class="inner">
     <!-- The sidebar -->
     <div class="sidebar">
+      <img src="assets/images/logo.png" alt="Ether-1 ethoFS Logo" style="width: 90%;padding-left: 5px;">
       <div class="sidebarIconWrapper iconSelected" id="mainNavBtnWalletsWrapper" data-tippy="Wallets" data-tippy-delay="500">
         <a class="sidebarIcon" id="mainNavBtnWallets" href="#">
-          <i class="fas fa-wallet fa-2x"></i>
+          <i class="fas fa-wallet fa-1x"></i>
+          <span class="walletID"> Wallets </span>
         </a>
       </div>
       <div class="sidebarIconWrapper iconSelected" id="mainNavBtnAddressBoookWrapper" data-tippy="Address Book" data-tippy-delay="500">
         <a class="sidebarIcon" id="mainNavBtnAddressBoook" href="#">
-          <i class="far fa-address-book fa-2x"></i>
+          <i class="far fa-address-book fa-1x"></i>
+          <span class="AddrBook"> Addresses </span>
         </a>
       </div>
       <div class="sidebarIconWrapper" id="mainNavBtnSendWrapper" data-tippy="Send Funds" data-tippy-delay="500">
         <a class="sidebarIcon" id="mainNavBtnSend" href="#">
-          <i class="fas fas fa-share-square fa-2x"></i>
+          <i class="fas fa-comment-dollar fa-1x"></i>
+          <span class="sendEtho"> Send </span>
         </a>
       </div>
       <div class="sidebarIconWrapper" id="mainNavBtnTransactionsWrapper" data-tippy="Transactions" data-tippy-delay="500">
         <a class="sidebarIcon" id="mainNavBtnTransactions" href="#">
-          <i class="fas fa-exchange-alt fa-2x"></i>
+          <i class="fas fa-exchange-alt fa-1x"></i>
+          <span class="txlist"> Transactions </span>
         </a>
       </div>
       <div class="sidebarIconWrapper" id="mainNavBtnUploadsWrapper" data-tippy="Uploads" data-tippy-delay="500">
         <a class="sidebarIcon" id="mainNavBtnUploads" href="#">
-          <i class="fa fa-cloud-upload-alt fa-2x"></i>
+          <i class="fa fa-cloud-upload-alt fa-1x"></i>
+          <span class="ethoFS"> ethoFS </span>
         </a>
       </div>
       <div class="sidebarIconWrapper" id="mainNavBtnMarketsWrapper" data-tippy="Markets" data-tippy-delay="500">
         <a class="sidebarIcon" id="mainNavBtnMarkets" href="#">
-          <i class="fas fa-poll fa-2x"></i>
+          <i class="fas fa-poll fa-1x"></i>
+          <span class="Markets"> Market </span>
         </a>
       </div>
       <div class="sidebarIconWrapper" id="mainNavBtnSettingsWrapper" data-tippy="Settings" data-tippy-delay="500">
         <a class="sidebarIcon" id="mainNavBtnSettings" href="#">
-          <i class="fas fa-cog fa-2x"></i>
+          <i class="fas fa-cog fa-1x"></i>
+          <span class="Settings"> Settings </span>
+        </a>
+      </div>
+      <div class="sidebarIconWrapper" id="mainNavBtnAboutWrapper" data-tippy="About" data-tippy-delay="500">
+        <a class="sidebarIcon" id="mainNavBtnAbout" href="#">
+          <i class="far fa-question-circle fa-1x"></i>
+          <span class="About"> About Us </span>
         </a>
       </div>
       <div id="peerCount">
@@ -133,6 +149,7 @@
       require('./renderer/addressBook.js');
       require('./renderer/transactions.js');
       require('./renderer/tableTransactions.js');
+      require('./renderer/about.js');
     </script>
   </div>
 

package.json

@@ -73,7 +73,6 @@
     "browserify": "^16.5.0",
     "electron": "^3.0.12",
     "electron-builder": "^20.38.3",
-    "electron-rebuild": "^1.8.6",
     "ethereum-private-key-to-address": "0.0.2",
     "ethereumjs-common": "^1.3.2",
     "ipfs": "^0.38.0",

renderer/about.js

@@ -0,0 +1,13 @@
+const {ipcRenderer} = require("electron");
+
+class About {
+  constructor() {}
+
+  renderAbout() {
+    EthoMainGUI.renderTemplate("about.html", {});
+    $(document).trigger("render_about");
+  }
+}
+
+// create new uploads variable
+EthoAbout = new About();

renderer/maingui.js

@@ -1,5 +1,7 @@
 // In renderer process (web page).
-const {ipcRenderer} = require("electron");
+const {
+  ipcRenderer
+} = require("electron");
 
 class MainGUI {
   constructor() {
@@ -32,6 +34,9 @@ class MainGUI {
       case "settings":
         $("#mainNavBtnSettingsWrapper").addClass("iconSelected");
         break;
+      case "about":
+        $("#mainNavBtnAboutWrapper").addClass("iconSelected");
+        break;
       default: // do nothing for now
     }
   }
@@ -47,7 +52,7 @@ class MainGUI {
     $("#dlgGeneralError").iziModal();
     $("#dlgGeneralError").iziModal("open");
 
-    $("#btnGeneralErrorOK").click(function () {
+    $("#btnGeneralErrorOK").click(function() {
       $("#dlgGeneralError").iziModal("close");
     });
   }
@@ -59,12 +64,12 @@ class MainGUI {
     $("#dlgGeneralConfirm").iziModal();
     $("#dlgGeneralConfirm").iziModal("open");
 
-    $("#btnGeneralConfirmYes").click(function () {
+    $("#btnGeneralConfirmYes").click(function() {
       $("#dlgGeneralConfirm").iziModal("close");
       callback(true);
     });
 
-    $("#btnGeneralConfirmNo").click(function () {
+    $("#btnGeneralConfirmNo").click(function() {
       $("#dlgGeneralConfirm").iziModal("close");
       callback(false);
     });
@@ -77,12 +82,12 @@ class MainGUI {
     $("#dlgAboutInfo").iziModal();
     $("#dlgAboutInfo").iziModal("open");
 
-    $("#urlOpenLicence, #urlOpenGitHub").off("click").on("click", function (even) {
+    $("#urlOpenLicence, #urlOpenGitHub").off("click").on("click", function(even) {
       event.preventDefault();
       ipcRenderer.send("openURL", $(this).attr("href"));
     });
 
-    $("#btnAboutInfoClose").off("click").on("click", function (even) {
+    $("#btnAboutInfoClose").off("click").on("click", function(even) {
       $("#dlgAboutInfo").iziModal("close");
     });
   }
@@ -107,44 +112,49 @@ class MainGUI {
   }
 }
 
-ipcRenderer.on("showAboutDialog", function (event, message) {
+ipcRenderer.on("showAboutDialog", function(event, message) {
   EthoMainGUI.showAboutDialog(message);
 });
 
-$("#mainNavBtnTransactions").click(function () {
+$("#mainNavBtnTransactions").click(function() {
   EthoTransactions.clearFilter();
   EthoMainGUI.changeAppState("transactions");
   EthoTransactions.renderTransactions();
 });
 
-$("#mainNavBtnAddressBoook").click(function () {
+$("#mainNavBtnAddressBoook").click(function() {
   EthoMainGUI.changeAppState("addressBook");
   EthoAddressBook.renderAddressBook();
 });
 
-$("#mainNavBtnSend").click(function () {
+$("#mainNavBtnSend").click(function() {
   EthoMainGUI.changeAppState("send");
   EthoSend.renderSendState();
 });
 
-$("#mainNavBtnWallets").click(function () {
+$("#mainNavBtnWallets").click(function() {
   EthoMainGUI.changeAppState("account");
   EthoWallets.renderWalletsState();
 });
 
-$("#mainNavBtnMarkets").click(function () {
+$("#mainNavBtnMarkets").click(function() {
   EthoMainGUI.changeAppState("markets");
   EthoMarkets.renderMarkets();
 });
 
-$("#mainNavBtnUploads").click(function () {
+$("#mainNavBtnUploads").click(function() {
   EthoMainGUI.changeAppState("uploads");
   EthoUploads.renderUploads();
 });
 
-$("#mainNavBtnSettings").click(function () {
+$("#mainNavBtnSettings").click(function() {
   EthoMainGUI.changeAppState("settings");
   EthoSettings.renderSettingsState();
 });
 
+$("#mainNavBtnAbout").click(function() {
+  EthoMainGUI.changeAppState("about");
+  EthoAbout.renderAbout();
+});
+
 EthoMainGUI = new MainGUI();