From 47e4bb0177c86c6a6a44340032bdeba5b9ed72b2 Mon Sep 17 00:00:00 2001
From: Torresmorah <torresmorah@gmail.com>
Date: Tue, 31 Oct 2023 14:50:42 -0600
Subject: [PATCH] feat(webapp): apply webapp button styles and change network's
 container background color

---
 docs/index.html |  2 +-
 docs/styles.css | 67 ++++++++++++++++++-------------------------------
 2 files changed, 25 insertions(+), 44 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 4505e9e7..c7279e5e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -135,7 +135,7 @@ <h1>Unlock Real-Time Visibility into Antelope Blockchains</h1>
             </p>
           </div>
         </div>
-        <a href="#nav" class="myButton">
+        <a href="#nav" class="customButton">
           <div class="visit-text">View Monitored Networks</div>
         </a>
       </div>
diff --git a/docs/styles.css b/docs/styles.css
index c26cf5f1..83ceb47d 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -1,8 +1,11 @@
 :root {
   --colors-primary: #1ccbff;
+  --colors-primary-dark: #138eb2;
+
   --colors-secondary: #d6f5ff;
   --colors-secondary-light: rgb(88, 116, 124);
   --colors-secondary-dark: rgba(28, 203, 255, 0.2);
+
   --colors-links: #1ccbff;
 
   --shadows-button: 5.8px -34.8px 40.6px 0 rgba(53, 64, 82, 0.05);
@@ -25,6 +28,7 @@
 
 .light-mode {
   --colors-secondary-light: rgba(186, 239, 255, 0.6);
+
   --colors-links: #1565c0;
 
   --bg-main: white;
@@ -209,20 +213,23 @@ p {
   text-align: center;
 }
 
-.myButton {
+.customButton {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   box-shadow: var(--shadows-button);
-  background-color: var(--colors-secondary);
+  background-color: var(--colors-primary);
+  border-radius: 70px;
 }
 
-.myButton:hover {
+.customButton:hover {
   text-decoration: none;
+  background-color: var(--colors-primary-dark);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.myButton:active {
+.customButton:active {
   position: relative;
   top: 1px;
 }
@@ -315,6 +322,14 @@ p {
   display: none;
 }
 
+#networks {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0px;
+  background-color: var(--bg-secondary);
+}
+
 @media screen and (max-width: 767px) {
   #bg-image-mobile {
     width: 100%;
@@ -340,7 +355,6 @@ p {
   .box-network {
     flex-grow: 0;
     padding: 16px 0;
-    background-color: var(--bg-secondary);
   }
 
   #middle-logo {
@@ -413,7 +427,6 @@ p {
     height: 58px;
     font-size: 24px;
     line-height: 1.2;
-    letter-spacing: normal;
     margin: auto auto 16px;
     color: var(--text-color);
   }
@@ -550,7 +563,7 @@ p {
     width: 20px;
   }
 
-  .myButton {
+  .customButton {
     background-color: var(--bg-main);
     box-shadow: none;
     display: block;
@@ -697,22 +710,16 @@ p {
     letter-spacing: 0.18px;
   }
 
-  .myButton {
+  .customButton {
     width: 245px;
     height: 40px;
     gap: 29px;
     padding: 19px 0;
-    border-radius: 58px;
-    border: solid 2px var(--colors-primary);
     margin: 22px 0 64px;
   }
 
   .visit-text {
-    width: 245px;
-    flex-grow: 0;
     font-size: 14px;
-    line-height: 3.16;
-    letter-spacing: 0.23px;
   }
 
   .name-networks {
@@ -723,11 +730,6 @@ p {
     line-height: 1.09;
   }
 
-  #networks {
-    display: flex;
-    flex-direction: column;
-    margin-left: calc(100% / 2 - 348px);
-  }
   .image-box-desktop {
     width: 546px;
     height: 240px;
@@ -816,7 +818,7 @@ p {
     background-position: top right;
     background-repeat: no-repeat;
     align-items: flex-start;
-    margin-top: 16px;
+    margin-top: 0px;
     margin-left: calc(100% / 2 - 570px);
   }
 
@@ -932,23 +934,16 @@ p {
     line-height: 1.72;
     letter-spacing: 0.18px;
   }
-  .myButton {
+  .customButton {
     width: 340px;
     height: 60px;
     gap: 29px;
     padding: 19px 0;
-    border-radius: 75px;
-    border: solid 5.8px var(--colors-primary);
     margin-top: 20px;
     margin-bottom: 80px;
   }
   .visit-text {
-    width: 381.9px;
-    height: 70px;
-    flex-grow: 0;
     font-size: 22px;
-    line-height: 3.16;
-    letter-spacing: 0.23px;
   }
 
   .name-networks {
@@ -959,11 +954,6 @@ p {
     line-height: 1.09;
   }
 
-  #networks {
-    display: flex;
-    flex-direction: column;
-    margin-left: calc(100% / 2 - 570px);
-  }
   .image-box-desktop {
     width: 546px;
     height: 240px;
@@ -1060,10 +1050,6 @@ p {
     margin-bottom: 30px;
   }
 
-  #networks {
-    margin-left: calc(100% / 2 - 870px);
-  }
-
   .box-paragraph-text > h1 {
     width: 550px;
     height: 96px;
@@ -1142,21 +1128,16 @@ p {
     margin-bottom: 80px;
   }
 
-  .myButton {
+  .customButton {
     width: 506px;
     height: 91px;
     gap: 24.4px;
     padding: 16px 0;
-    border-radius: 63px;
-    border: solid 4.9px var(--colors-primary);
     margin-bottom: 100px;
   }
 
   .visit-text {
-    flex-grow: 0;
     font-size: 32px;
-    line-height: 2.09;
-    letter-spacing: 0.19px;
   }
 
   .flex {