styles: update colors from style guide

Author: jamaljsr

app/src/components/NodeStatus.tsx

@@ -17,7 +17,7 @@ const Styled = {
   `,
   Divider: styled.div`
     height: 2px;
-    background-color: ${props => props.theme.colors.gray};
+    background-color: ${props => props.theme.colors.darkGray};
     margin: 20px 0;
     opacity: 0.5;
   `,

app/src/components/common/Radio.tsx

@@ -13,17 +13,17 @@ const Styled = {
     display: inline-block;
     padding: 5px 15px;
     margin-bottom: 10px;
-    border: 1px solid ${props => props.theme.colors.whitish};
+    border: 1px solid ${props => props.theme.colors.offWhite};
     color: ${props =>
-      props.active ? props.theme.colors.darkBlue : props.theme.colors.whitish};
+      props.active ? props.theme.colors.darkBlue : props.theme.colors.offWhite};
     background-color: ${props =>
       props.active ? props.theme.colors.white : props.theme.colors.darkBlue};
     cursor: pointer;
 
     &:hover {
-      color: ${props => props.theme.colors.whitish};
+      color: ${props => props.theme.colors.offWhite};
       background-color: ${props => props.theme.colors.darkBlue};
-      border: 1px solid ${props => props.theme.colors.whitish}33;
+      border: 1px solid ${props => props.theme.colors.offWhite}33;
     }
   `,
 };

app/src/components/common/Tile.tsx

@@ -7,7 +7,7 @@ const Styled = {
   TileWrap: styled.div`
     min-height: 105px;
     padding: 15px;
-    background-color: ${props => props.theme.colors.tileBack};
+    background-color: ${props => props.theme.colors.overlay};
     border-radius: 4px;
   `,
   Header: styled.div`

app/src/components/common/base.tsx

@@ -20,7 +20,7 @@ export const Pill = styled.span`
   padding: 5px;
   margin-right: 10px;
   text-align: center;
-  background-color: ${props => props.theme.colors.tileBack};
+  background-color: ${props => props.theme.colors.overlay};
   border-radius: 40px;
 `;
 
@@ -43,9 +43,9 @@ export const Button = styled.button<ButtonProps>`
   padding-left: 15px;
   padding-right: 15px;
   text-align: center;
-  color: ${props => props.theme.colors.whitish};
+  color: ${props => props.theme.colors.offWhite};
   background-color: ${props => props.theme.colors.blue};
-  border: 1px solid ${props => props.theme.colors.whitish};
+  border: 1px solid ${props => props.theme.colors.offWhite};
   border-radius: 22px;
 
   &:hover {
@@ -64,7 +64,7 @@ export const Button = styled.button<ButtonProps>`
     `
     background-color: transparent;
     &:hover {
-      color: ${props.theme.colors.whitish};
+      color: ${props.theme.colors.offWhite};
       text-decoration: underline;
       background-color: transparent;
     }
@@ -118,8 +118,8 @@ export const RadioButton = styled.span<RadioButtonProps>`
   width: 14px;
   height: 14px;
   border-radius: 14px;
-  border: 1px solid ${props => props.theme.colors.whitish};
-  background-color: ${props => (props.checked ? props.theme.colors.whitish : 'none')};
+  border: 1px solid ${props => props.theme.colors.offWhite};
+  background-color: ${props => (props.checked ? props.theme.colors.offWhite : 'none')};
 
   &:hover {
     opacity: 0.8;
@@ -181,15 +181,15 @@ export const RangeInput = styled.input`
     height: 2rem;
     margin-top: -0.9rem; /* (track-height - thumb-height) / 2 */
     color: ${props => props.theme.colors.darkBlue};
-    background-color: ${props => props.theme.colors.whitish};
+    background-color: ${props => props.theme.colors.offWhite};
     background-image: url(${Chevrons});
     border: 0.2rem solid ${props => props.theme.colors.darkBlue};
     box-shadow: 0 0 0 2px ${props => props.theme.colors.pink};
     border-radius: 2rem;
 
     &:active,
     &:hover {
-      background-color: ${props => props.theme.colors.whitish}dd;
+      background-color: ${props => props.theme.colors.offWhite}dd;
     }
   }
 
@@ -203,14 +203,14 @@ export const RangeInput = styled.input`
     width: 2rem;
     height: 2rem;
     color: ${props => props.theme.colors.darkBlue};
-    background-color: ${props => props.theme.colors.whitish};
+    background-color: ${props => props.theme.colors.offWhite};
     border: 0.2rem solid ${props => props.theme.colors.darkBlue};
     box-shadow: 0 0 0 2px ${props => props.theme.colors.pink};
     border-radius: 2rem;
 
     &:active,
     &:hover {
-      background-color: ${props => props.theme.colors.whitish}dd;
+      background-color: ${props => props.theme.colors.offWhite}dd;
     }
   }
 
@@ -224,14 +224,14 @@ export const RangeInput = styled.input`
     width: 2rem;
     height: 2rem;
     color: ${props => props.theme.colors.darkBlue};
-    background-color: ${props => props.theme.colors.whitish};
+    background-color: ${props => props.theme.colors.offWhite};
     border: 0.2rem solid ${props => props.theme.colors.darkBlue};
     box-shadow: 0 0 0 2px ${props => props.theme.colors.pink};
     border-radius: 2rem;
 
     &:active,
     &:hover {
-      background-color: ${props => props.theme.colors.whitish}dd;
+      background-color: ${props => props.theme.colors.offWhite}dd;
     }
   }
 

app/src/components/layout/NavMenu.tsx

@@ -24,17 +24,18 @@ const Styled = {
       line-height: 50px;
       padding: 0 12px;
       border-left: 3px solid transparent;
-      color: ${props => props.theme.colors.whitish};
+      color: ${props => props.theme.colors.offWhite};
       cursor: pointer;
 
       &:hover {
         text-decoration: none;
         border-left: 3px solid ${props => props.theme.colors.pink};
+        background-color: ${props => props.theme.colors.overlay};
       }
     }
 
     &.active span {
-      border-left: 3px solid ${props => props.theme.colors.whitish};
+      border-left: 3px solid ${props => props.theme.colors.offWhite};
       background-color: ${props => props.theme.colors.blue};
 
       &:hover {

app/src/components/loop/ChannelRow.tsx

@@ -33,7 +33,7 @@ const Styled = {
       `
       &:hover {
         cursor: pointer;
-        background-color: ${props.theme.colors.tileBack};
+        background-color: ${props.theme.colors.overlay};
       }
     `}
   `,

app/src/components/loop/LoopActions.tsx

@@ -21,7 +21,7 @@ const Styled = {
 
     > button {
       margin-left: 10px;
-      background-color: ${props => props.theme.colors.tileBack};
+      background-color: ${props => props.theme.colors.overlay};
     }
   `,
   CloseIcon: styled(Close)`

app/src/components/loop/processing/FailedSwap.tsx

@@ -17,7 +17,7 @@ const Styled = {
     height: 34px;
     text-align: center;
     line-height: 30px;
-    background-color: ${props => props.theme.colors.darkGray};
+    background-color: ${props => props.theme.colors.gray};
     border-radius: 34px;
     margin-right: 10px;
     cursor: pointer;

app/src/components/theme.tsx

@@ -31,12 +31,12 @@ export interface Theme {
     gray: string;
     darkGray: string;
     white: string;
-    whitish: string;
+    offWhite: string;
     pink: string;
     green: string;
     orange: string;
-    tileBack: string;
     purple: string;
+    overlay: string;
   };
 }
 
@@ -67,14 +67,14 @@ const theme: Theme = {
     blue: '#252f4a',
     darkBlue: '#212133',
     gray: '#848a99',
-    darkGray: '#6b6969',
+    darkGray: '#6b6969ef',
     white: '#ffffff',
-    whitish: '#f5f5f5',
+    offWhite: '#f5f5f5',
     pink: '#f5406e',
     green: '#46E80E',
     orange: '#f66b1c',
-    tileBack: 'rgba(245,245,245,0.04)',
     purple: '#57038d',
+    overlay: 'rgba(245,245,245,0.04)',
   },
 };