update to use default color palettes

blockchain · May 6, 2019 · d0e4465 · d0e4465
1 parent db247d2
commit d0e4465
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 11 deletions.
diff --git a/packages/blockchain-info-components/src/Colors/DarkMode.js b/packages/blockchain-info-components/src/Colors/DarkMode.js
@@ -24,8 +24,10 @@ export default {
   'gray-4': '#444444',
   'gray-5': '#eeeeee',
   'gray-6': '#797979',
+  'gray-7': '#677185',
   // Whites
   white: '#1c1c1c',
+  'white-2': '#f0f2f7',
   'white-blue': '#0c0c0c',
   silver: '#838383',
   porcelain: '#acb5c2',
@@ -38,6 +40,7 @@ export default {
   'navy-blue': '#1F283C',
   'darkblue-gray': '#2C343C',
   'lightblue-gray': '#B1B8C7',
+  blue: '#0c6cf2',
   // Alphas
   halftransparentgrey: 'rgba(0, 0, 0, 0.5)',
   whiteAlpha75: 'rgba(0,0,0,0.75)',

diff --git a/packages/blockchain-info-components/src/Colors/Default.js b/packages/blockchain-info-components/src/Colors/Default.js
@@ -24,10 +24,12 @@ export default {
   'gray-4': '#757679',
   'gray-5': '#5F5F5F',
   'gray-6': '#383838',
+  'gray-7': '#677185',
   // Whites
   white: '#FFFFFF',
+  'white-2': '#f0f2f7',
   'white-blue': '#F5F7F9',
-  silver: '#cecece',
+  silver: '#CECECE',
   porcelain: '#F4F6F7',
   // Blacks
   black: '#000000',
@@ -38,6 +40,7 @@ export default {
   'navy-blue': '#27324B',
   'darkblue-gray': '#222D38',
   'lightblue-gray': '#B1B8C7',
+  blue: '#0c6cf2',
   // Alphas
   halftransparentgrey: 'rgba(0, 0, 0, 0.5)',
   whiteAlpha75: 'rgba(255,255,255,0.75)',

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/MenuLeft/index.js b/packages/blockchain-wallet-v4-frontend/src/components/MenuLeft/index.js
@@ -22,14 +22,14 @@ export const MenuItem = styled.li`
   font-size: 14px;
   width: 100%;
   &:hover {
-    color: #0c6cf2;
+    color: ${props => props.theme['blue']};
   }
   & > *:not(div) {
     cursor: pointer;
     transition: color 0.3s;
-    color: #677185;
+    color: ${props => props.theme['gray-7']};
     &:hover {
-      color: #0c6cf2;
+      color: ${props => props.theme['blue']};
     }
   }
   & > span:first-child {
@@ -39,7 +39,7 @@ export const MenuItem = styled.li`
   &.active {
     font-weight: 500;
     & > *:not(div) {
-      color: #0c6cf2;
+      color: ${props => props.theme['blue']};
     }
   }
 `

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/template.js
@@ -23,7 +23,7 @@ import {
 const HelperTipContainer = styled.div`
   margin-left: auto;
   > div span {
-    color: #677185;
+    color: ${props => props.theme['gray-7']};
   }
 `
 const NewCartridge = styled(Cartridge)`

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/template.success.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/template.success.js
@@ -16,7 +16,7 @@ export const Container = styled.div`
   padding: 15px;
   overflow: scroll;
   box-sizing: border-box;
-  background: #f0f2f7;
+  background: ${props => props.theme['white-2']};
   border-right: 1px solid ${props => props.theme['gray-1']};
   transition: left 0.3s ease-in-out;
   z-index: 11;

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/Menu/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/Menu/index.js
@@ -17,7 +17,7 @@ const Wrapper = styled.div`
   width: 100%;
   padding: 6px 30px;
   box-sizing: border-box;
-  background-color: #f0f2f7;
+  background-color: ${props => props.theme['white-2']};
   border-bottom: 1px solid ${props => props.theme['gray-1']};
 `
 const LinkItem = styled(TabMenuItem)`

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/Menu/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/Menu/index.js
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
   width: 100%;
   padding: 8px 30px;
   box-sizing: border-box;
-  background-color: #f0f2f7;
+  background-color: ${props => props.theme['white-2']};
   border-bottom: 1px solid ${props => props.theme['gray-1']};
 `
 const LinkItem = styled(TabMenuItem)`

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Menu/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Menu/index.js
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
   width: 100%;
   padding: 8px 30px;
   box-sizing: border-box;
-  background-color: #f0f2f7;
+  background-color: ${props => props.theme['white-2']};
   border-bottom: 1px solid ${props => props.theme['gray-1']};
 `
 const Container = styled.div`

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Menu/template.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Menu/template.js
@@ -18,7 +18,7 @@ const Wrapper = styled.div`
   width: 100%;
   padding: 8px 30px;
   box-sizing: border-box;
-  background-color: #f0f2f7;
+  background-color: ${props => props.theme['white-2']};
   border-bottom: 1px solid ${props => props.theme['gray-1']};
 `
 const Container = styled.div`