Start of new design changes

resources/manifest.json

@@ -1,9 +1,9 @@
 {
     "manifest_version": 2,
-    "name": "Kuna.io Exchange Ticker",
-    "version": "0.3.1",
+    "name": "Kuna Exchange ticker",
+    "version": "0.4.0",
     "short_name": "Kuna Ticker",
-    "description": "Лучший способ следить за ценой Bitcoin к Гривне.",
+    "description": "Be first at changes of Bitcoin - Kuna Exchange ticker",
     "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'",
     "permissions": [
         "tabs",
@@ -26,6 +26,6 @@
             "144": "/images/kuna_144.png"
         },
         "default_popup": "/views/popup.html",
-        "default_title": "Kuna Ticker"
+        "default_title": "Kuna Exchange ticker"
     }
 }

src/Core/Kuna/ApiClient.ts

@@ -1,6 +1,6 @@
-import Axios, { AxiosInstance, AxiosPromise, AxiosResponse, AxiosError } from 'axios';
-import { TickerInterface } from 'Core/Interfaces/TickerInterface';
-import { KunaTickerInterface } from "Core/Kuna/KunaTickerInterface";
+import Axios, {AxiosInstance, AxiosPromise, AxiosResponse, AxiosError} from 'axios';
+import {TickerInterface} from 'Core/Interfaces/TickerInterface';
+import {KunaTickerInterface} from 'Core/Kuna/KunaTickerInterface';
 
 export class KunApiClient {
 
@@ -16,14 +16,14 @@ export class KunApiClient {
 
         const onSuccess = (response: AxiosResponse) => {
 
-            const { data } = response;
+            const {data} = response;
 
             return data.ticker;
         };
 
         const onError = (error: AxiosError) => {
 
-            const { response = null } = error;
+            const {response = null} = error;
 
             console.error(error);
             console.error(response);

src/Popup/Screens/HomeScreen.jsx

@@ -98,6 +98,12 @@ class HomeScreen extends React.Component {
 
         return (
             <div>
+                <header className="header">
+                    <a href="https://kuna.io/" target="_blank" className="header__logo">
+                        <img className="header__logo-img" src="/images/kuna-logo.png"/>
+                    </a>
+                </header>
+
                 {this.drawTickerList()}
                 {
                     currentTicker && (

src/Style/popup.scss

@@ -13,7 +13,8 @@ body {
     overflow: hidden;
     font-size: 16px;
     background: white;
-    color: rgb(38, 38, 38);
+    color: $color-shuttle-gray;
+    background: $color-all-ocean;
     font-family: $font;
 }
 
@@ -48,4 +49,22 @@ body {
     letter-spacing: 0.8px;
 }
 
+.header {
+    height: 50px;
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &__logo {
+        display: block;
+        &-img {
+            height: 16px;
+        }
+    }
+}
+
+.application {
+    padding: 0;
+}
+
 @import "screens/home";

src/Style/screens/home.scss

@@ -1,7 +1,3 @@
-.application {
-    padding: 16px 8px 16px 8px
-}
-
 .current-ticker {
     &__price {
         font-size: 24px;
@@ -89,7 +85,7 @@
         }
 
         &-price {
-            color: $color-blue;
+            color: $color-kuna-blue;
             font-weight: 100;
         }
     }
@@ -106,11 +102,11 @@
         padding: 0 22px 0 8px;
         border-radius: 4px;
         font-size: 14px;
-        color: $color-blue;
+        color: $color-kuna-blue;
 
         &:after {
             border-style: solid;
-            border-color: $color-blue;
+            border-color: $color-kuna-blue;
             border-width: 1px 1px 0 0;
             content: ' ';
             transform: rotate(135deg);

src/Style/variable.scss

@@ -1 +1,7 @@
-$color-blue: #0078c8;
+$color-kuna-blue: #3FA9F5;
+$color-kuna-dark-blue: #3F97F5;
+
+$color-shuttle-gray: #5A6170;
+$color-gull-gray: #9DA6B8;
+$color-alto: #DADFEA;
+$color-all-ocean: #F4F6F9;