fix: style last touches

witnet · Jun 17, 2021 · 49399c6 · 49399c6
1 parent 21d9bbe
commit 49399c6
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 53 deletions.
diff --git a/packages/ui/apollo/queries/feed.gql b/packages/ui/apollo/queries/feed.gql
@@ -4,12 +4,12 @@ query feed($id: String!) {
     name
     address
     lastResult
+    network
+    label
     requests {
       feedId,
       result,
       drTxHash,
-      label,
-      address,
       requestId,
       timestamp,
     }

diff --git a/packages/ui/assets/styles/main.scss b/packages/ui/assets/styles/main.scss
@@ -1,19 +1,19 @@
 :root {
   --bg: #2D2C39;
-  --responsive-menu: white;
-  --text: white;
+  --responsive-menu: #fdfdfd;
+  --text: #fdfdfd;
   --link: #E54343;
   --text-background: #2d2c39d3;
-  --default-border: 1px solid white;
+  --default-border: 1px solid #fdfdfd;
 
   // Select
 
   --selected-background: #37414c;
-  --selected-text: rgb(233, 231, 231);
+  --selected-text: #e9e7e7;
   --selected-border: 2px solid #62B1B015;
   --selected-icon: #62B1B058;
   --selected-options-background: #37414c;
-  --selected-options-text: rgb(231, 231, 231);
+  --selected-options-text: #e7e7e7;
   --selected-options-border: 2px solid #62B1B015;;
   --selected-options-shadow: 1px 1px 10 2px #62B1B029;
   --selected-options-highlight: #62B1B015;
@@ -25,16 +25,17 @@
   --network-color: #41BEA562;
   --mainnet-network-color: #41BEA562;
   --rinkeby-network-color: #BEA24162;
-  --goerly-network-color: #4182BE62;
+  --goerli-network-color: #4182BE62;
+  --kovan-network-color: #be419862;
 
   //Fieledset
 
-  --fieldset-title: white;
+  --fieldset-title: #fdfdfd;
   --fieldset-background: #FFFFFF08;
 
   //Logo
 
-  --logo-main: white;
+  --logo-main: #fdfdfd;
   --logo-dot: #41BEA5;
 
   //NavBar
@@ -51,7 +52,7 @@
 
   //ThemeSwitch
 
-  --icon-color: #fff;
+  --icon-color: #fdfdfd;
   --icon-background: #37414c94;
 
   //ContractAddress
@@ -61,41 +62,42 @@
 
 .dark-mode {
   --bg: #2D2C39;
-  --responsive-menu: white;
-  --text: white;
+  --responsive-menu: #fdfdfd;
+  --text: #fdfdfd;
   --link: #E54343;
   --text-background: #2d2c39d3;
-  --default-border: 1px solid white;
+  --default-border: 1px solid #fdfdfd;
 
   // Select
 
   --selected-background: #37414c;
-  --selected-text: white;
+  --selected-text: #fdfdfd;
   --selected-icon: #62B1B058;
   --selected-border: 2px solid #62B1B015;
   --selected-options-background: #37414c;
-  --selected-options-text: white;
+  --selected-options-text: #fdfdfd;
   --selected-options-border: 2px solid #62B1B015;
   --selected-options-shadow: 1px 1px 10 2px #62B1B029;
   --selected-options-highlight: #62B1B015;
 
   // FeedCard
 
-  --card-border: 2px solid #62B1B015;
+  --card-border: 2px solid #62b1b048;
   --card-background: #62B1B015;
-  --network-color: #41BEA562;
-  --mainnet-network-color: #41BEA562;
-  --rinkeby-network-color: #BEA24162;
-  --goerly-network-color: #4182BE62;
+  --network-color: #41BEA5de;
+  --mainnet-network-color: #41BEA5de;
+  --rinkeby-network-color: #BEA241de;
+  --goerli-network-color: #4d97ddde;
+  --kovan-network-color: #be4198de;
 
   //Fieledset
 
-  --fieldset-title: white;
-  --fieldset-background: #FFFFFF08;
+  --fieldset-title: #fdfdfd;
+  --fieldset-background: #FFFFFF10;
 
   //Logo
 
-  --logo-main: white;
+  --logo-main: #fdfdfd;
   --logo-dot: #41BEA5;
 
   //NavBar
@@ -108,11 +110,11 @@
 
   // links
 
-  --transaction-blur-background: #FFFFFF10;
+  --transaction-blur-background: #ffffff08;
 
   //ThemeSwitch
 
-  --icon-color: #fff;
+  --icon-color: #fdfdfd;
   --icon-background: #37414c94;
 
   //ContractAddress
@@ -121,7 +123,7 @@
 }
 
 .light-mode {
-  --bg: white;
+  --bg: #fdfdfd;
   --responsive-menu: #2D2C39;
   --text: #2D2C39;
   --link: #E54343;
@@ -131,25 +133,27 @@
   // Select
 
   --selected-background: linear-gradient(90deg, #3f92a5 0%, #41bea5 57%);;
-  --selected-text: white;
-  --selected-icon: white;
+  --selected-text: #fdfdfd;
+  --selected-icon: #fdfdfd;
   --selected-border: none;
   --selected-options-background: #F6F6F6;
   --selected-options-text: #1F1F24;
-  --selected-options-border: 1px solid white;
+  --selected-options-border: 1px solid #fdfdfd;
   --selected-options-shadow: 1px 1px 10 2px #1F1F24;
   --selected-options-highlight: #1F1F2414;
 
   // FeedCard
 
-  --card-border: 2px solid #41BEA5;
-  --card-background: white;
+  --card-border: 2px solid hsl(168, 49%, 50%);
+  --card-background: #fdfdfd;
   --network-color: #41BEA5;
   --name-color: #1F1F24;
   --value-color: #1F1F24;
-  --mainnet-network-color: #41BEA5;
-  --rinkeby-network-color: #E9BD28;
-  --goerly-network-color: #2584DC;
+  --card-box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
+  --mainnet-network-color: #41BEA5de;
+  --rinkeby-network-color: #BEA241de;
+  --goerli-network-color: #4182bede;
+  --kovan-network-color: #be4198de;
 
   //Fieledset
 
@@ -162,15 +166,15 @@
 
   //NavBar
 
-  --nav-bar-background: #fff;
+  --nav-bar-background: #fdfdfd;
 
   // links
 
   --text-hover: #41BEA5;
 
   // links
 
-  --transaction-blur-background: #2d2c3909;
+  --transaction-blur-background: #2d2c3907;
 
   //ThemeSwitch
 

diff --git a/packages/ui/assets/svg/bitcoin.svg → packages/ui/assets/svg/btcusd.svg b/packages/ui/assets/svg/bitcoin.svg → packages/ui/assets/svg/btcusd.svg
diff --git a/packages/ui/components/DataFeedDetails.vue b/packages/ui/components/DataFeedDetails.vue
@@ -4,7 +4,8 @@
       <nuxt-link class="back-to-list" :to="localePath('/')">
         <font-awesome-icon class="icon" icon="arrow-alt-circle-left" />
       </nuxt-link>
-      <SvgIcon name="bitcoin" />
+      <SvgIcon name="btcusd" />
+      <p class="network" :class="feed.network">{{ network }}</p>
     </div>
     <Chart class="chart" :data="chartData" data-label="$" :name="feedName" />
     <Fieldset
@@ -55,6 +56,9 @@ export default {
     feedAddress() {
       return this.feed.address
     },
+    network() {
+      return this.feed.network.toUpperCase()
+    },
     chartData() {
       if (this.feed.requests.length > 0) {
         return this.feed.requests.map((request) => {
@@ -74,7 +78,7 @@ export default {
             witnetLink: request.drTxHash,
             etherscanLink: request.address,
             data: {
-              label: request.label,
+              label: this.feed.label,
               value: request.result,
             },
             timestamp: request.timestamp,
@@ -108,14 +112,31 @@ export default {
     height: 400px;
   }
   .section-header {
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
+    display: grid;
+    grid-template: 1fr / 1fr 1fr 1fr;
+    justify-items: center;
+    align-items: center;
     margin-top: 16px;
     width: 100%;
+    .network {
+      font-size: 16px;
+      justify-self: flex-end;
+      font-weight: bold;
+      &.mainnet {
+        color: var(--mainnet-network-color);
+      }
+      &.rinkeby {
+        color: var(--rinkeby-network-color);
+      }
+      &.goerli {
+        color: var(--goerli-network-color);
+      }
+      &.kovan {
+        color: var(--kovan-network-color);
+      }
+    }
     .back-to-list {
-      position: absolute;
-      left: 120px;
+      justify-self: flex-start;
       .icon {
         font-size: 24px;
         color: var(--text);
@@ -132,7 +153,10 @@ export default {
   .content {
     .section-header {
       .back-to-list {
-        left: 16px;
+        margin-left: 16px;
+      }
+      .network {
+        margin-right: 16px;
       }
     }
   }

diff --git a/packages/ui/components/FeedCard.vue b/packages/ui/components/FeedCard.vue
@@ -66,6 +66,7 @@ a {
   height: max-content;
   border: var(--card-border);
   background: var(--card-background);
+  box-shadow: var(--card-box-shadow);
   font-weight: bold;
   display: grid;
   grid-template-columns: max-content 1fr;
@@ -83,8 +84,11 @@ a {
     &.rinkeby {
       color: var(--rinkeby-network-color);
     }
-    &.goerly {
-      color: var(--goerly-network-color);
+    &.goerli {
+      color: var(--goerli-network-color);
+    }
+    &.kovan {
+      color: var(--kovan-network-color);
     }
   }
   .img {

diff --git a/packages/ui/components/Main.vue b/packages/ui/components/Main.vue
@@ -46,7 +46,7 @@ export default {
           value: feed.lastResult,
           label: feed.label,
           img: {
-            name: 'bitcoin',
+            name: 'btcusd',
             alt: 'BTC/USD',
           },
           network: feed.network,

diff --git a/packages/ui/components/Transaction.vue b/packages/ui/components/Transaction.vue
@@ -2,7 +2,6 @@
   <li class="item-container">
     <div class="attribute-container links">
       <div class="attribute truncate">{{ witnetLink }}</div>
-      <div class="attribute truncate">{{ etherscanLink }}</div>
     </div>
     <div class="attribute-container values-time">
       <div class="attribute">{{ value }}</div>

diff --git a/packages/ui/components/TransactionsList.vue b/packages/ui/components/TransactionsList.vue
@@ -9,9 +9,6 @@
           <div class="attribute">
             {{ $t('transactions_list.witnet_explorer') }}
           </div>
-          <div class="attribute">
-            {{ $t('transactions_list.etherscan') }}
-          </div>
         </div>
         <div class="attribute-container values-time">
           <div class="attribute">
@@ -49,7 +46,7 @@ export default {
 .item-container {
   padding: 16px;
   display: grid;
-  grid-template-columns: 3fr 1fr;
+  grid-template-columns: 2fr 1fr;
   align-items: center;
   column-gap: 16px;
   row-gap: 24px;
@@ -63,6 +60,7 @@ export default {
       auto-fit,
       minmax(var(--column-width-min), 1fr)
     );
+    align-items: center;
     column-gap: 16px;
     row-gap: 24px;
   }

diff --git a/packages/ui/static/favicon.ico b/packages/ui/static/favicon.ico