Remove old colors

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>

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;

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}

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,

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>

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`

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 {

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,
     }),
   }

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};
   }
 `
 

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 {

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;

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

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>

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({

src/styles/theme.js

@@ -63,8 +63,6 @@ export const fontFamilies = {
 export const colors = {
   transparent: 'transparent',
 
-  argile: '#ff0000',
-  mouse: '#ff0000',
   pearl: '#ff0000',
 
   // new colors