diff --git a/packages/ui/apollo/queries/feed.gql b/packages/ui/apollo/queries/feed.gql index 9dfeed57..935a52aa 100644 --- 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 index 110c2b8b..ab88f9a1 100644 --- 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,7 +166,7 @@ //NavBar - --nav-bar-background: #fff; + --nav-bar-background: #fdfdfd; // links @@ -170,7 +174,7 @@ // links - --transaction-blur-background: #2d2c3909; + --transaction-blur-background: #2d2c3907; //ThemeSwitch diff --git a/packages/ui/assets/svg/bitcoin.svg b/packages/ui/assets/svg/btcusd.svg similarity index 100% rename from packages/ui/assets/svg/bitcoin.svg rename to packages/ui/assets/svg/btcusd.svg diff --git a/packages/ui/components/DataFeedDetails.vue b/packages/ui/components/DataFeedDetails.vue index 738cb09b..1d8c0a5a 100644 --- a/packages/ui/components/DataFeedDetails.vue +++ b/packages/ui/components/DataFeedDetails.vue @@ -4,7 +4,8 @@ - + +

{{ network }}

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 index 1676d486..a0e2b684 100644 --- 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 index 04e42f5e..39ab98c4 100644 --- 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 index dc7e3097..fb233566 100644 --- a/packages/ui/components/Transaction.vue +++ b/packages/ui/components/Transaction.vue @@ -2,7 +2,6 @@
  • {{ value }}
    diff --git a/packages/ui/components/TransactionsList.vue b/packages/ui/components/TransactionsList.vue index c2ba62e5..6eb987ef 100644 --- a/packages/ui/components/TransactionsList.vue +++ b/packages/ui/components/TransactionsList.vue @@ -9,9 +9,6 @@
    {{ $t('transactions_list.witnet_explorer') }}
    -
    - {{ $t('transactions_list.etherscan') }} -
    @@ -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 index 3632d0c8..bb44a6b1 100644 Binary files a/packages/ui/static/favicon.ico and b/packages/ui/static/favicon.ico differ