From 4823427fa1dd9ba30ebaefa199d4415dd99bc01c Mon Sep 17 00:00:00 2001
From: FallenGravity <ethanvb55@gmail.com>
Date: Sat, 19 Oct 2019 19:54:41 +0200
Subject: [PATCH] CSS Flare

---
 assets/styles/buttons.css  | 242 ++++++++++++++++++++++++++++++-------
 assets/styles/style.css    |  14 +--
 assets/templates/send.html |  12 +-
 3 files changed, 210 insertions(+), 58 deletions(-)

diff --git a/assets/styles/buttons.css b/assets/styles/buttons.css
index 8c1ab85..b894394 100755
--- a/assets/styles/buttons.css
+++ b/assets/styles/buttons.css
@@ -1,45 +1,197 @@
-.btn-etho { 
-    color: #ffffff; 
-    background-color: #7A1336; 
-    border-color: #450118; 
-  } 
-   
-  .btn-etho:hover, 
-  .btn-etho:focus, 
-  .btn-etho:active, 
-  .btn-etho.active, 
-  .open .dropdown-toggle.btn-etho { 
-    color: #ffffff; 
-    background-color: #B01549; 
-    border-color: #450118; 
-  } 
-   
-  .btn-etho:active, 
-  .btn-etho.active, 
-  .open .dropdown-toggle.btn-etho { 
-    background-image: none; 
-  } 
-   
-  .btn-etho.disabled, 
-  .btn-etho[disabled], 
-  fieldset[disabled] .btn-etho, 
-  .btn-etho.disabled:hover, 
-  .btn-etho[disabled]:hover, 
-  fieldset[disabled] .btn-etho:hover, 
-  .btn-etho.disabled:focus, 
-  .btn-etho[disabled]:focus, 
-  fieldset[disabled] .btn-etho:focus, 
-  .btn-etho.disabled:active, 
-  .btn-etho[disabled]:active, 
-  fieldset[disabled] .btn-etho:active, 
-  .btn-etho.disabled.active, 
-  .btn-etho[disabled].active, 
-  fieldset[disabled] .btn-etho.active { 
-    background-color: #7A1336; 
-    border-color: #450118; 
-  } 
-   
-  .btn-etho .badge { 
-    color: #7A1336; 
-    background-color: #ffffff; 
-  }
\ No newline at end of file
+.btn-etho {
+  color: #ffffff;
+  background-color: #840032;
+  border-color: #103024;
+}
+
+.btn-etho:hover {
+  background: #fff;
+  box-shadow: 0px 2px 10px 5px #840032;
+  color: #000;
+}
+
+,
+.btn-etho:focus,
+.btn-etho:active,
+.btn-etho.active,
+.open .dropdown-toggle.btn-etho {
+  color: #ffffff;
+  background-color: #3cc492;
+  border-color: #103024;
+}
+
+.btn-etho:active,
+.btn-etho.active,
+.open .dropdown-toggle.btn-etho {
+  background-image: none;
+}
+
+.btn-etho.disabled,
+.btn-etho[disabled],
+fieldset[disabled] .btn-etho,
+.btn-etho.disabled:hover,
+.btn-etho[disabled]:hover,
+fieldset[disabled] .btn-etho:hover,
+.btn-etho.disabled:focus,
+.btn-etho[disabled]:focus,
+fieldset[disabled] .btn-etho:focus,
+.btn-etho.disabled:active,
+.btn-etho[disabled]:active,
+fieldset[disabled] .btn-etho:active,
+.btn-etho.disabled.active,
+.btn-etho[disabled].active,
+fieldset[disabled] .btn-etho.active {
+  background-color: #840032;
+  border-color: #450118;
+}
+
+.btn-etho .badge {
+  color: #840032;
+  background-color: #ffffff;
+}
+
+.button2 {
+  text-align: center;
+  text-transform: uppercase;
+  cursor: pointer;
+  font-size: 12px;
+  letter-spacing: 2px;
+  position: relative;
+  background-color: #840032;
+  border: none;
+  color: #fff;
+  padding: 2px;
+  width: 100px;
+  text-align: center;
+  transition-duration: 0.4s;
+  overflow: hidden;
+  box-shadow: 0 5px 15px #193047;
+  border-radius: 4px;
+}
+
+.button2:hover {
+  background: #fff;
+  box-shadow: 0px 2px 10px 5px #840032;
+  color: #000;
+}
+
+.button2:after {
+  content: "";
+  background: #840032;
+  display: block;
+  position: absolute;
+  padding-top: 300%;
+  padding-left: 350%;
+  margin-left: -20px !important;
+  margin-top: -120%;
+  opacity: 0;
+  transition: all 0.8s
+}
+
+.button2:active:after {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s
+}
+
+.button2:focus {
+  outline: 0;
+}
+
+.button3 {
+  text-align: center;
+  text-transform: uppercase;
+  cursor: pointer;
+  font-size: 10px;
+  letter-spacing: 1px;
+  position: relative;
+  background-color: #840032;
+  border: none;
+  color: #fff;
+  padding: 2px;
+  width: 110px;
+  text-align: center;
+  transition-duration: 0.4s;
+  overflow: hidden;
+  box-shadow: 0 5px 15px #193047;
+  border-radius: 4px;
+}
+
+.button3:hover {
+  background: #fff;
+  box-shadow: 0px 2px 10px 5px #840032;
+  color: #000;
+}
+
+.button3:after {
+  content: "";
+  background: #840032;
+  display: block;
+  position: absolute;
+  padding-top: 300%;
+  padding-left: 350%;
+  margin-left: -20px !important;
+  margin-top: -120%;
+  opacity: 0;
+  transition: all 0.8s
+}
+
+.button3:active:after {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s
+}
+
+.button3:focus {
+  outline: 0;
+}
+
+.button4 {
+  text-align: center;
+  text-transform: uppercase;
+  cursor: pointer;
+  font-size: 12px;
+  letter-spacing: 2px;
+  position: relative;
+  background-color: #840032;
+  border: none;
+  color: #fff;
+  padding: 8px;
+  width: 150px;
+  text-align: center;
+  transition-duration: 0.4s;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.button4:hover {
+  background: #fff;
+  box-shadow: 0px 2px 10px 5px #840032;
+  color: #000;
+}
+
+.button4:after {
+  content: "";
+  background: #840032;
+  display: block;
+  position: absolute;
+  padding-top: 300%;
+  padding-left: 350%;
+  margin-left: -20px !important;
+  margin-top: -120%;
+  opacity: 0;
+  transition: all 0.8s
+}
+
+.button4:active:after {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s
+}
+
+.button4:focus {
+  outline: 0;
+}
diff --git a/assets/styles/style.css b/assets/styles/style.css
index aa14549..4ed37a8 100755
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -1,6 +1,6 @@
 html {
-  color: #aaa;
-  font-family: 'Roboto', sans-serif;
+  color: #fff;
+  font-family: Arial, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -42,7 +42,7 @@ body.pg-loaded>.inner {
 #peerCount {
   bottom: 0;
   height: 20px;
-  color: #aaa;
+  color: #fff;
   position: absolute;
   font-size: 0.8em;
   padding-left: 5px;
@@ -110,7 +110,7 @@ body.pg-loaded>.inner {
 
 .modalBody {
   margin: 20px;
-  color: #333;
+  color: #fff;
 }
 
 #dlgGeneralError .modalBody {
@@ -161,11 +161,11 @@ body.pg-loaded>.inner {
 #dlgAddressListBody {
   margin: 0px;
   padding: 20px;
-  background-color: #333;
+  background-color: #fff;
 }
 
 #dlgAddressList .modalBody {
-  color: #aaa;
+  color: #fff;
 }
 
 .btn-dialog-confirm {
@@ -198,7 +198,7 @@ body.pg-loaded>.inner {
 }
 
 #transactionsWrapper {
-  color: #aaa;
+  color: #fff;
   padding-top: 10px;
 }
 
diff --git a/assets/templates/send.html b/assets/templates/send.html
index 1326010..87c9f4f 100755
--- a/assets/templates/send.html
+++ b/assets/templates/send.html
@@ -15,10 +15,10 @@
           <label for="sendToAddress" class="active">To address:</label>
           <div class="addressInputWrapper">
             <input id="sendToAddress" placeholder="recipient address" type="text">
-            <button type="button" class="btn btn-etho btnSendToolButton" id="btnAddToAddressBook">
+            <button type="button" class="btn button3 btnSendToolButton" id="btnAddToAddressBook">
               <i class="fas fa-plus"></i>
             </button>
-            <button type="button" class="btn btn-etho btnSendToolButton" id="btnLookForToAddress">
+            <button type="button" class="btn button3 btnSendToolButton" id="btnLookForToAddress">
               <i class="fas fa-search"></i>
             </button>
           </div>
@@ -33,13 +33,13 @@
         <div class="input-field col s6">
           <div class="input-field col s12">
             <span id="sendMaxAmmount">0</span><span>ETHO</span>
-            <button type="button" class="btn btn-etho" id="btnSendAll">ALL</button>
+            <button type="button" class="button4" id="btnSendAll">ALL</button>
           </div>
         </div>
       </div>
       <div class="row">
         <div class="input-field col s12">
-          <button type="button" class="btn btn-etho" id="btnSendTransaction">Send</button>
+          <button type="button" class="button4" id="btnSendTransaction">Send</button>
         </div>
       </div>
     </form>
@@ -96,7 +96,7 @@
       <label for="usr">Type Password:</label>
       <input type="password" class="form-control" id="walletPassword">
     </div>
-    <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnSendWalletPasswordConfirm">Confirm</button>
+    <button type="button" class="btn button3 btn-dialog-confirm" id="btnSendWalletPasswordConfirm">Confirm</button>
   </div>
 </div>
 
@@ -112,7 +112,7 @@
       <label for="usr">Address Name:</label>
       <input type="text" class="form-control" id="inputAddressName">
     </div>
-    <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnAddAddressToBookConfirm">Confirm</button>
+    <button type="button" class="btn button3 btn-dialog-confirm" id="btnAddAddressToBookConfirm">Confirm</button>
   </div>
 </div>
 <span id="nodestorage" style="display:none;">Loading</span>