From 1601388ff3303455f70cf73cb4accea87940a30a Mon Sep 17 00:00:00 2001
From: Kamil <kamil@ethworks.io>
Date: Tue, 10 Dec 2019 15:05:29 +0100
Subject: [PATCH 1/3] add new background color

---
 packages/extension-ui/src/components/View.tsx  | 17 ++++++++++++-----
 packages/extension-ui/src/components/themes.ts |  2 ++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/extension-ui/src/components/View.tsx b/packages/extension-ui/src/components/View.tsx
index a9142f251e0..54e2f324e4c 100644
--- a/packages/extension-ui/src/components/View.tsx
+++ b/packages/extension-ui/src/components/View.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useState } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
 import { AvailableThemes, chooseTheme, themes, ThemeSwitchContext } from '.';
 
 interface Props {
@@ -12,16 +12,17 @@ interface Props {
 }
 
 function View ({ children, className }: Props): React.ReactElement<Props> {
-  const [theme, setTheme] = useState(chooseTheme());
+  const [selectedTheme, setSelectedTheme] = useState(chooseTheme());
 
   const switchTheme = (theme: AvailableThemes): void => {
     localStorage.setItem('theme', theme);
-    setTheme(theme);
+    setSelectedTheme(theme);
   };
 
   return (
     <ThemeSwitchContext.Provider value={switchTheme}>
-      <ThemeProvider theme={themes[theme]}>
+      <ThemeProvider theme={themes[selectedTheme]}>
+        <Global bg={themes[selectedTheme].bodyColor}/>
         <Main className={className}>
           {children}
         </Main>
@@ -30,6 +31,12 @@ function View ({ children, className }: Props): React.ReactElement<Props> {
   );
 }
 
+const Global = createGlobalStyle<{ bg: string}>`
+  body {
+    background-color: ${({ bg }): string => bg};
+  }
+`;
+
 const Main = styled.main`
   display: flex;
   flex-direction: column;
@@ -39,7 +46,7 @@ const Main = styled.main`
   font-size: ${({ theme }): string => theme.fontSize};
   line-height: ${({ theme }): string => theme.lineHeight};
   border: 1px solid ${({ theme }): string => theme.inputBorderColor};
-  
+
   * {
     font-family: ${({ theme }): string => theme.fontFamily};
   }
diff --git a/packages/extension-ui/src/components/themes.ts b/packages/extension-ui/src/components/themes.ts
index 38b364fb4bf..12b30bf62f0 100644
--- a/packages/extension-ui/src/components/themes.ts
+++ b/packages/extension-ui/src/components/themes.ts
@@ -5,6 +5,7 @@
 const darkTheme = {
   id: 'dark',
   background: '#181A23',
+  bodyColor: '#20222A',
   highlightedAreaBackground: '#0B0C10',
   popupBackground: '#0B0C10',
   accountBackground: '#0B0C10',
@@ -44,6 +45,7 @@ const lightTheme: Theme = {
   ...darkTheme,
   id: 'light',
   background: '#FFFFFF',
+  bodyColor: '#FFFFFF',
   highlightedAreaBackground: '#F4F5F7',
   accountBackground: '#FFFFFF',
   popupBackground: '#FFFFFF',

From 481119990c3b00197e4e1f7ba460ddff37977db1 Mon Sep 17 00:00:00 2001
From: Kamil <kamil@ethworks.io>
Date: Wed, 11 Dec 2019 10:17:05 +0100
Subject: [PATCH 2/3] requested changes

---
 packages/extension-ui/src/components/View.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/extension-ui/src/components/View.tsx b/packages/extension-ui/src/components/View.tsx
index 54e2f324e4c..6b3d8292b22 100644
--- a/packages/extension-ui/src/components/View.tsx
+++ b/packages/extension-ui/src/components/View.tsx
@@ -12,17 +12,17 @@ interface Props {
 }
 
 function View ({ children, className }: Props): React.ReactElement<Props> {
-  const [selectedTheme, setSelectedTheme] = useState(chooseTheme());
+  const [theme, setTheme] = useState(chooseTheme());
 
   const switchTheme = (theme: AvailableThemes): void => {
     localStorage.setItem('theme', theme);
-    setSelectedTheme(theme);
+    setTheme(theme);
   };
 
   return (
     <ThemeSwitchContext.Provider value={switchTheme}>
-      <ThemeProvider theme={themes[selectedTheme]}>
-        <Global bg={themes[selectedTheme].bodyColor}/>
+      <ThemeProvider theme={themes[theme]}>
+        <BodyTheme theme={themes[theme].bodyColor}/>
         <Main className={className}>
           {children}
         </Main>
@@ -31,9 +31,9 @@ function View ({ children, className }: Props): React.ReactElement<Props> {
   );
 }
 
-const Global = createGlobalStyle<{ bg: string}>`
+const BodyTheme = createGlobalStyle<{ theme: string}>`
   body {
-    background-color: ${({ bg }): string => bg};
+    background-color: ${({ theme }): string => theme};
   }
 `;
 

From ee69626856d20fc3096fb96373739c9b37eb5817 Mon Sep 17 00:00:00 2001
From: Ivan Rukhavets <ivanruch@gmail.com>
Date: Wed, 11 Dec 2019 14:28:53 +0100
Subject: [PATCH 3/3] Apply suggestions from code review

---
 packages/extension-ui/src/components/View.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/extension-ui/src/components/View.tsx b/packages/extension-ui/src/components/View.tsx
index 6b3d8292b22..28f6b3c320a 100644
--- a/packages/extension-ui/src/components/View.tsx
+++ b/packages/extension-ui/src/components/View.tsx
@@ -4,7 +4,7 @@
 
 import React, { useState } from 'react';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
-import { AvailableThemes, chooseTheme, themes, ThemeSwitchContext } from '.';
+import { AvailableThemes, chooseTheme, themes, ThemeSwitchContext, Theme } from '.';
 
 interface Props {
   children: React.ReactNode;
@@ -22,7 +22,7 @@ function View ({ children, className }: Props): React.ReactElement<Props> {
   return (
     <ThemeSwitchContext.Provider value={switchTheme}>
       <ThemeProvider theme={themes[theme]}>
-        <BodyTheme theme={themes[theme].bodyColor}/>
+        <BodyTheme theme={themes[theme]} />
         <Main className={className}>
           {children}
         </Main>
@@ -31,9 +31,9 @@ function View ({ children, className }: Props): React.ReactElement<Props> {
   );
 }
 
-const BodyTheme = createGlobalStyle<{ theme: string}>`
+const BodyTheme = createGlobalStyle<{ theme: Theme }>`
   body {
-    background-color: ${({ theme }): string => theme};
+    background-color: ${({ theme }): string => theme.bodyColor};
   }
 `;