Fix small ui issues

packages/api/test/feeds.spec.ts

@@ -141,7 +141,7 @@ describe('feeds', function () {
             lastResult
             network
             label
-            requests (feedId: $id, page: $page, size: $pageSize){
+            requests(feedId: $id, page: $page, size: $pageSize) {
               id
               feedId
               result
@@ -164,7 +164,7 @@ describe('feeds', function () {
       variables: {
         page: 1,
         pageSize: 6,
-        id: feedResponse.ops[0]._id.toString(),
+        id: feedResponse.ops[0]._id.toString()
       }
     })
     expect(feeds.length).toBe(1)
@@ -222,7 +222,7 @@ describe('feeds', function () {
       variables: {
         id: _id.toString(),
         page: 1,
-        size: 3,
+        size: 3
       }
     })
 

packages/ui/assets/styles/main.scss

@@ -64,6 +64,10 @@
   --icon-color: #fdfdfd;
   --icon-background: #37414c94;
 
+  //Transaction
+
+  --witnet-transaction: #41BEA5;
+
   //ContractAddress
 
   --contract-address: #41BEA5;
@@ -144,6 +148,10 @@
   --icon-color: #fdfdfd;
   --icon-background: #37414c94;
 
+  //Transaction
+
+  --witnet-transaction: #41BEA5;
+
   //ContractAddress
 
   --contract-address: #41BEA5;
@@ -225,6 +233,10 @@
   --icon-color: #2D2C39;
   --icon-background: #ffffffd3;
 
+  //Transaction
+
+  --witnet-transaction: #41BEA5;
+
   //ContractAddress
 
   --contract-address: #41BEA5;

packages/ui/components/DataFeedDetails.vue

@@ -18,6 +18,7 @@
         class="contract-address"
       >
         {{ feedAddress }}
+        <font-awesome-icon class="icon" icon="external-link-alt" />
       </a>
     </Fieldset>
     <TransactionsList
@@ -133,12 +134,17 @@ export default {
   .contract-container {
     margin-top: 150px;
     .contract-address {
+      display: flex;
+      align-items: center;
+      line-break: loose;
       word-break: break-all;
       font-size: 24px;
       padding: 24px;
-      display: block;
       cursor: pointer;
       color: var(--contract-address);
+      .icon {
+        margin-left: 16px;
+      }
     }
   }
   .pagination {

packages/ui/components/DataTooltip.vue

@@ -7,7 +7,7 @@
     >
       {{ value }}
     </div>
-    <div :ref="label" class="truncate" @mousemove="show()">
+    <div :ref="label" class="value truncate" @mousemove="show()">
       {{ value }}
     </div>
     <div
@@ -96,6 +96,8 @@ export default {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-right: 0;
+  margin-right: 8px;
 }
 .tooltip,
 .copy-tooltip {
@@ -109,7 +111,6 @@ export default {
 }
 .container {
   display: flex;
-  justify-content: space-between;
 }
 .copy {
   padding: 16px;

packages/ui/components/Transaction.vue

@@ -3,6 +3,7 @@
     <div class="attribute-container links">
       <a :href="witnetLink" target="_blank" class="link truncate">
         {{ drTxHash }}
+        <font-awesome-icon class="icon" icon="external-link-alt" />
       </a>
     </div>
     <div class="attribute-container values-time">
@@ -50,8 +51,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.link {
+.links {
   text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.link {
+  color: var(--witnet-transaction);
+  .icon {
+    margin-left: 16px;
+  }
 }
 .truncate {
   white-space: nowrap;

packages/ui/locales/en.json

@@ -14,5 +14,7 @@
     "etherscan": "Etherscan",
     "value": "Value",
     "time": "Time"
-  }
+  },
+  "copied": "Copied",
+  "copy": "Copy"
 }

packages/ui/locales/es.json

@@ -14,5 +14,7 @@
     "etherscan": "Etherscan",
     "value": "Resultado",
     "time": "Tiempo"
-  }
+  },
+  "copied": "Copiado",
+  "copy": "Copiar"
 }

packages/ui/nuxt.config.js

@@ -9,7 +9,7 @@ export default {
   },
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    title: 'new-website',
+    title: 'Witnet data feeds',
     htmlAttrs: {
       lang: 'en',
     },
@@ -140,7 +140,13 @@ export default {
 
   fontawesome: {
     icons: {
-      solid: ['faMoon', 'faSun', 'faArrowAltCircleLeft', 'faCopy'],
+      solid: [
+        'faMoon',
+        'faSun',
+        'faArrowAltCircleLeft',
+        'faCopy',
+        'faExternalLinkAlt',
+      ],
     },
   },
 

packages/ui/package.json

@@ -13,7 +13,11 @@
     "test": "yarn jest"
   },
   "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@nuxtjs/apollo": "^4.0.1-rc.5",
+    "@nuxtjs/color-mode": "^2.0.9",
+    "@nuxtjs/date-fns": "^1.5.0",
     "@nuxtjs/style-resources": "^1.0.0",
     "big.js": "^6.1.1",
     "core-js": "^3.8.3",
@@ -27,17 +31,13 @@
     "vue-select": "^3.11.2"
   },
   "devDependencies": {
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@nuxt/test-utils": "^0.2.2",
-    "@nuxtjs/color-mode": "^2.0.9",
-    "@nuxtjs/date-fns": "^1.5.0",
     "@nuxtjs/eslint-config": "^5.0.0",
     "@nuxtjs/eslint-module": "^3.0.2",
     "@nuxtjs/fontawesome": "^1.1.2",
     "@nuxtjs/stylelint-module": "^4.0.0",
     "@nuxtjs/svg": "^0.1.12",
-    "jest": "^27.0.4",
+    "jest": "^27.0.6",
     "vue-i18n-extract": "^1.2.3"
   }
 }