diff --git a/resources/images/wex-logo.png b/resources/images/wex-logo.png new file mode 100644 index 0000000..87e533c Binary files /dev/null and b/resources/images/wex-logo.png differ diff --git a/resources/manifest.json b/resources/manifest.json index 9d298a6..9777c21 100644 --- a/resources/manifest.json +++ b/resources/manifest.json @@ -1,8 +1,8 @@ { "manifest_version": 2, - "name": "Wex Exchange Ticker", - "version": "0.1.1", - "short_name": "Wex Ticker", + "name": "WEX Exchange ticker", + "version": "0.2.0", + "short_name": "WEX Ticker", "description": "The best way to track Bitcoin, Litecoin and other cryptocurrencies price at Wex exchange", "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'", "permissions": [ @@ -23,6 +23,6 @@ "128": "/images/wex_128.png" }, "default_popup": "/views/popup.html", - "default_title": "Wex Exchange Ticker" + "default_title": "WEX Exchange ticker" } } \ No newline at end of file diff --git a/src/Popup/Screens/HomeScreen.jsx b/src/Popup/Screens/HomeScreen.jsx index 60f086d..3c41755 100644 --- a/src/Popup/Screens/HomeScreen.jsx +++ b/src/Popup/Screens/HomeScreen.jsx @@ -42,18 +42,6 @@ class HomeScreen extends React.Component { this.setState({selectMode: false}); }; - - getDropDownOptions() { - const {tickers = []} = this.props; - - return _.map(tickers, (trc) => { - return { - value: trc.key, - label: `${trc.baseCurrency}/${trc.quoteCurrency}` - }; - }); - } - drawTickerList() { const {tickers = [], currentTickerKey = null} = this.props; const {selectMode = false} = this.state; @@ -89,8 +77,8 @@ class HomeScreen extends React.Component { const currentTicker = _.find(tickers, {key: currentTickerKey}); - const currentTickerLabelProps = { - className: "current-ticker-label", + const currentMarketLabelProps = { + className: "header__current-market", onClick: () => { this.setState({selectMode: true}); } @@ -99,15 +87,20 @@ class HomeScreen extends React.Component { return (
{this.drawTickerList()} - { - currentTicker && ( -
-
- ) - } + ) + } + +
); diff --git a/src/Popup/Screens/HomeViews/CurrentTickerView.tsx b/src/Popup/Screens/HomeViews/CurrentTickerView.tsx index 3dc85da..f65eb92 100644 --- a/src/Popup/Screens/HomeViews/CurrentTickerView.tsx +++ b/src/Popup/Screens/HomeViews/CurrentTickerView.tsx @@ -19,34 +19,52 @@ class CurrentTickerView extends React.Component - - -
- Market {ticker.baseCurrency}/{ticker.quoteCurrency} +
+ + +
+ Market {ticker.baseCurrency}/{ticker.quoteCurrency} +
-
Volume 24h
- - - - +
+ + + + + + + + + +
); } diff --git a/src/Style/parts/header.scss b/src/Style/parts/header.scss new file mode 100644 index 0000000..db09570 --- /dev/null +++ b/src/Style/parts/header.scss @@ -0,0 +1,42 @@ +.header { + padding: 0 10px; + height: 50px; + background: white; + display: flex; + justify-content: space-between; + align-items: center; + + border-bottom: 1px solid $color-alto; + + &__logo { + display: block; + &-img { + display: block; + height: 21px; + } + } + + &__current-market { + display: block; + cursor: pointer; + padding: 0 22px 0 8px; + border-radius: 4px; + font-size: 14px; + color: $color-shuttle-gray; + + &:after { + border-style: solid; + border-color: $color-shuttle-gray; + border-width: 1px 1px 0 0; + content: ''; + transform: rotate(135deg); + display: block; + height: 4px; + width: 4px; + margin-top: -4px; + position: absolute; + right: 8px; + top: 50%; + } + } +} \ No newline at end of file diff --git a/src/Style/popup.scss b/src/Style/popup.scss index 8169175..b078e96 100644 --- a/src/Style/popup.scss +++ b/src/Style/popup.scss @@ -9,14 +9,16 @@ html { body { width: 300px; - height: 200px; + height: 255px; overflow: hidden; font-size: 16px; background: white; - color: rgb(38, 38, 38); + color: $color-dark-gray; font-family: $font; } +@import "parts/header"; + .created-by { display: none; position: fixed; @@ -48,4 +50,8 @@ body { letter-spacing: 0.8px; } +.application { + padding: 0; +} + @import "screens/home"; \ No newline at end of file diff --git a/src/Style/screens/home.scss b/src/Style/screens/home.scss index 7244052..e8f3004 100644 --- a/src/Style/screens/home.scss +++ b/src/Style/screens/home.scss @@ -1,59 +1,74 @@ -.application { - padding: 16px 8px 16px 8px -} - .current-ticker { + + &__bugged { + padding: 24px 0; + } + &__price { font-size: 24px; - display: inline-block; + display: block; position: relative; - margin: 0; + text-align: center; + width: 100%; + line-height: 24px; + letter-spacing: 0.6px; &-currency { - position: absolute; bottom: 0; - left: 100%; margin-bottom: 3px; margin-left: 6px; font-size: 14px; - color: rgb(200, 200, 200); + color: $color-gull-gray; + font-weight: 100; + letter-spacing: 0.4px; } } &__market { display: block; - margin: 4px 0 8px 0; + text-align: center; + line-height: 16px; + font-weight: 100; + letter-spacing: 0.4px; &-link { font-size: 10px; + color: $color-gull-gray; + text-decoration: none; + &:hover { + color: darken($color-gull-gray, 10%); + } } } - &__title { - font-size: 12px; - color: rgb(160, 160, 160); - } + &__info { + &-container { + padding: 0 10px; + } - &__vol { display: inline-block; - margin-right: 16px; - &-currency, &-value { - display: inline-block; - vertical-align: middle; - font-size: 12px; - } + width: 50%; + padding: 0; + margin-bottom: 16px; - &-currency { - color: rgb(200, 200, 200); - margin-right: 4px; + &-label { + display: block; + color: $color-gull-gray; + text-transform: uppercase; + font-size: 10px; + font-weight: 100; + letter-spacing: 0.8px; } &-value { + font-size: 14px; + font-weight: 100; + letter-spacing: 0.8px; } } } .ticker-list { - transition: all 0.2s; + transition: all 0.4s; position: fixed; left: 0; top: 0; @@ -62,22 +77,25 @@ background: rgb(255, 255, 255); overflow-y: scroll; z-index: 100; + padding: 4px; visibility: hidden; opacity: 0; + transform: scale(0.8); &.-active { visibility: visible; opacity: 1; + transform: scale(1); } &__item { transition: all 0.2s; position: relative; - padding: 8px 8px; + padding: 8px; + border-radius: 4px; font-size: 12px; + margin-bottom: 2px; cursor: pointer; - border-bottom: 1px solid rgb(240, 240, 240); - display: flex; justify-content: space-between; @@ -89,38 +107,17 @@ } &-price { - color: $color-blue; + color: $color-violet; font-weight: 100; } - } -} -.current-ticker-label { - display: block; - text-align: center; - margin-bottom: 16px; + &.-active { + background: linear-gradient(45deg, $color-dark-violet, $color-violet); + } - &__item { - display: inline-block; - cursor: pointer; - padding: 0 22px 0 8px; - border-radius: 4px; - font-size: 14px; - color: $color-blue; - - &:after { - border-style: solid; - border-color: $color-blue; - border-width: 1px 1px 0 0; - content: ' '; - transform: rotate(135deg); - display: block; - height: 4px; - width: 4px; - margin-top: -4px; - position: absolute; - right: 8px; - top: 50%; + &.-active &-price, + &.-active &-name { + color: white; } } } \ No newline at end of file diff --git a/src/Style/variable.scss b/src/Style/variable.scss index a7c0ccd..6686f4a 100644 --- a/src/Style/variable.scss +++ b/src/Style/variable.scss @@ -1 +1,8 @@ -$color-blue: #0078c8; \ No newline at end of file +$color-violet: #8090CC; +$color-dark-violet: #6779A9; + +$color-dark-gray: #373C46; +$color-shuttle-gray: #5A6170; +$color-gull-gray: #9DA6B8; +$color-alto: #DADFEA; +$color-all-ocean: #F4F6F9; \ No newline at end of file diff --git a/src/background.js b/src/background.js index eeceefc..681b067 100644 --- a/src/background.js +++ b/src/background.js @@ -91,7 +91,7 @@ const updateBudgetTexts = () => { ExtensionPlatform.getExtension().browserAction.setTitle({ title: 'Wex Ticker: ' + `${currentTicker.baseCurrency} / ${currentTicker.quoteCurrency}` + - ` - ${Numeral(currentTicker.price).format('0,0.[0000]')}` + ` - ${Numeral(currentTicker.price).format(currentTicker.format)}` }); } };