From f3cb3940bfdbfd47983477f371ef419a1bbaf089 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 28 Feb 2018 14:28:40 +0100
Subject: [PATCH] Remove old colors

---
 src/components/AccountPage.js               | 2 +-
 src/components/Breadcrumb/Step.js           | 4 ++--
 src/components/DashboardPage/AccountCard.js | 2 +-
 src/components/ReceiveBox.js                | 4 ++--
 src/components/SelectAccount/index.js       | 2 +-
 src/components/TopBar.js                    | 2 +-
 src/components/TransactionsList/index.js    | 2 +-
 src/components/base/Button/index.js         | 4 ++--
 src/components/base/CheckBox/index.js       | 2 +-
 src/components/base/Input/index.js          | 4 ++--
 src/components/base/Modal/index.js          | 2 +-
 src/components/base/Select/Triangles.js     | 2 +-
 src/components/base/Select/index.js         | 8 ++++----
 src/components/base/Tabs/index.js           | 2 +-
 src/styles/theme.js                         | 2 --
 15 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/AccountPage.js b/src/components/AccountPage.js
index 719a53ab..61703c63 100644
--- a/src/components/AccountPage.js
+++ b/src/components/AccountPage.js
@@ -72,7 +72,7 @@ class AccountPage extends PureComponent<Props> {
             <Button
               style={{ width: 50 }}
               icon="sliders-h"
-              color="mouse"
+              color="fog"
               onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}
             />
           </Box>
diff --git a/src/components/Breadcrumb/Step.js b/src/components/Breadcrumb/Step.js
index d2e97774..6525bf32 100644
--- a/src/components/Breadcrumb/Step.js
+++ b/src/components/Breadcrumb/Step.js
@@ -8,7 +8,7 @@ import Box from 'components/base/Box'
 const Wrapper = styled(Box).attrs({
   align: 'center',
   justify: 'center',
-  color: p => (p.isActive ? 'wallet' : 'mouse'),
+  color: p => (p.isActive ? 'wallet' : 'fog'),
 })`
   width: 40px;
   flex-shrink: 0;
@@ -19,7 +19,7 @@ const Wrapper = styled(Box).attrs({
 const Number = styled(Box).attrs({
   align: 'center',
   justify: 'center',
-  color: p => (p.isActive ? 'white' : 'mouse'),
+  color: p => (p.isActive ? 'white' : 'fog'),
   bg: p => (p.isActive ? 'wallet' : 'pearl'),
 })`
   width: 20px;
diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js
index ede20d9b..91b189c2 100644
--- a/src/components/DashboardPage/AccountCard.js
+++ b/src/components/DashboardPage/AccountCard.js
@@ -36,7 +36,7 @@ const AccountCard = ({
           </Box>
         </Box>
       </Box>
-      <Bar size={1} color="argile" />
+      <Bar size={2} color="fog" />
       <Box grow justifyContent="center" color="dark">
         <FormattedVal
           alwaysShowSign={false}
diff --git a/src/components/ReceiveBox.js b/src/components/ReceiveBox.js
index acd6c2e9..d66fe42b 100644
--- a/src/components/ReceiveBox.js
+++ b/src/components/ReceiveBox.js
@@ -24,7 +24,7 @@ export const AddressBox = styled(Box).attrs({
   p: 2,
 })`
   border-radius: 3px;
-  border: 1px solid ${p => p.theme.colors.mouse};
+  border: 1px solid ${p => p.theme.colors.fog};
   cursor: text;
   text-align: center;
   user-select: text;
@@ -33,7 +33,7 @@ export const AddressBox = styled(Box).attrs({
 
 const Action = styled(Box).attrs({
   alignItems: 'center',
-  color: 'mouse',
+  color: 'fog',
   flex: 1,
   flow: 1,
   fontSize: 0,
diff --git a/src/components/SelectAccount/index.js b/src/components/SelectAccount/index.js
index 67f151c6..7adeec1b 100644
--- a/src/components/SelectAccount/index.js
+++ b/src/components/SelectAccount/index.js
@@ -29,7 +29,7 @@ const renderItem = item => (
       </Text>
     </Box>
     <Box>
-      <Text color="mouse" fontSize={4}>
+      <Text color="fog" fontSize={4}>
         {formatBTC(item.balance)}
       </Text>
     </Box>
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index 116300a8..db0024cb 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -46,7 +46,7 @@ const Inner = styled(Box).attrs({
 const Bar = styled.div`
   height: 15px;
   width: 1px;
-  background: #ff0000;
+  background: ${p => p.theme.colors.fog};
 `
 
 const Activity = styled.div`
diff --git a/src/components/TransactionsList/index.js b/src/components/TransactionsList/index.js
index e36973bb..a3a5bef7 100644
--- a/src/components/TransactionsList/index.js
+++ b/src/components/TransactionsList/index.js
@@ -58,7 +58,7 @@ const TransactionRaw = styled(Box).attrs({
   horizontal: true,
   alignItems: 'center',
 })`
-  border-bottom: 1px solid ${p => p.theme.colors.argile};
+  border-bottom: 1px solid ${p => p.theme.colors.fog};
   height: 68px;
 
   &:last-child {
diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js
index bd89f63b..e410280c 100644
--- a/src/components/base/Button/index.js
+++ b/src/components/base/Button/index.js
@@ -14,7 +14,7 @@ const Base = styled.button`
   ${fontSize};
   ${fontWeight};
   border-radius: 5px;
-  border: ${p => (p.primary ? '' : `1px solid ${p.theme.colors.mouse}`)};
+  border: ${p => (p.primary ? '' : `1px solid ${p.theme.colors.fog}`)};
   cursor: ${p => (p.disabled ? 'default' : 'pointer')};
   height: 40px;
   box-shadow: ${p => (p.withShadow ? 'rgba(0, 0, 0, 0.2) 0 3px 10px' : '')};
@@ -57,7 +57,7 @@ function getProps({ disabled, icon, primary }: Object) {
     ),
     ...props(disabled, {
       color: 'white',
-      bg: 'argile',
+      bg: 'fog',
       withShadow: false,
     }),
   }
diff --git a/src/components/base/CheckBox/index.js b/src/components/base/CheckBox/index.js
index aaf689d0..524affda 100644
--- a/src/components/base/CheckBox/index.js
+++ b/src/components/base/CheckBox/index.js
@@ -36,7 +36,7 @@ const Base = styled(Tabbable).attrs({
   transition: all ease-in 0.1s;
 
   &:focus {
-    border-color: ${p => p.theme.colors.mouse};
+    border-color: ${p => p.theme.colors.fog};
   }
 `
 
diff --git a/src/components/base/Input/index.js b/src/components/base/Input/index.js
index e0deb4b6..8fbddfd4 100644
--- a/src/components/base/Input/index.js
+++ b/src/components/base/Input/index.js
@@ -12,7 +12,7 @@ const Base = styled.input.attrs({
 })`
   ${space};
   ${fontFamily};
-  border: 1px solid ${p => p.theme.colors.mouse};
+  border: 1px solid ${p => p.theme.colors.fog};
   border-radius: 3px;
   display: flex;
   width: 100%;
@@ -20,7 +20,7 @@ const Base = styled.input.attrs({
   background: ${p => p.theme.colors.white};
 
   &::placeholder {
-    color: ${p => p.theme.colors.mouse};
+    color: ${p => p.theme.colors.fog};
   }
 
   &:focus {
diff --git a/src/components/base/Modal/index.js b/src/components/base/Modal/index.js
index 5fd54a54..2ff49dcc 100644
--- a/src/components/base/Modal/index.js
+++ b/src/components/base/Modal/index.js
@@ -94,7 +94,7 @@ const Body = styled(Box).attrs({
 
 const CloseContainer = styled(Box).attrs({
   p: 4,
-  color: 'mouse',
+  color: 'fog',
 })`
   cursor: pointer;
   position: absolute;
diff --git a/src/components/base/Select/Triangles.js b/src/components/base/Select/Triangles.js
index 5d33fe82..ee82d4dc 100644
--- a/src/components/base/Select/Triangles.js
+++ b/src/components/base/Select/Triangles.js
@@ -28,6 +28,6 @@ const Triangles = ({ size, color }: { size?: number, color?: string }) => (
   </Box>
 )
 
-Triangles.defaultProps = { size: 5, color: 'mouse' }
+Triangles.defaultProps = { size: 5, color: 'fog' }
 
 export default Triangles
diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index 2a48b4ed..58fd1051 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -41,7 +41,7 @@ const TriggerBtn = styled(Box).attrs({
 })`
   min-height: 64px;
   ${space};
-  border: 1px solid ${p => p.theme.colors.mouse};
+  border: 1px solid ${p => p.theme.colors.fog};
   border-radius: 3px;
   display: flex;
   width: 100%;
@@ -63,7 +63,7 @@ const Item = styled(Box).attrs({
 
 const ItemWrapper = styled(Box)`
   & + & {
-    border-top: 1px solid ${p => p.theme.colors.mouse};
+    border-top: 1px solid ${p => p.theme.colors.fog};
   }
 `
 
@@ -71,7 +71,7 @@ const Dropdown = styled(Box).attrs({
   mt: 1,
 })`
   border-radius: 3px;
-  border: 1px solid ${p => p.theme.colors.mouse};
+  border: 1px solid ${p => p.theme.colors.fog};
   box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
   left: 0;
   position: absolute;
@@ -246,7 +246,7 @@ class Select extends PureComponent<Props> {
                     {selectedItem && renderSelected ? (
                       renderSelected(selectedItem)
                     ) : (
-                      <Text color="mouse">{placeholder}</Text>
+                      <Text color="fog">{placeholder}</Text>
                     )}
                   </Box>
                   <FloatingTriangles>
diff --git a/src/components/base/Tabs/index.js b/src/components/base/Tabs/index.js
index 24072565..ee0869d6 100644
--- a/src/components/base/Tabs/index.js
+++ b/src/components/base/Tabs/index.js
@@ -10,7 +10,7 @@ import Box, { Tabbable } from 'components/base/Box'
 const WrapperTab = styled(Box).attrs({
   horizontal: true,
 })`
-  border-bottom: 1px solid ${p => p.theme.colors.argile};
+  border-bottom: 1px solid ${p => p.theme.colors.fog};
 `
 
 const Tab = styled(Tabbable).attrs({
diff --git a/src/styles/theme.js b/src/styles/theme.js
index a8113ac4..f8fb69fd 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -63,8 +63,6 @@ export const fontFamilies = {
 export const colors = {
   transparent: 'transparent',
 
-  argile: '#ff0000',
-  mouse: '#ff0000',
   pearl: '#ff0000',
 
   // new colors