styles: work on style improvements

app/components/input.js

@@ -28,7 +28,7 @@ type DefaultStylesProps = PropsWithTheme<{
 const getDefaultStyles: ($PropertyType<Props, 'inputType'>) => Element<*> = t => styled[t]`
   border-radius: ${(props: DefaultStylesProps) => props.theme.boxBorderRadius};
   border: none;
-  background-color: ${(props: DefaultStylesProps) => props.bgColor || props.theme.colors.inputBackground};
+  background-color: ${(props: DefaultStylesProps) => props.bgColor || props.theme.colors.inputBg};
   color: ${(props: DefaultStylesProps) => props.theme.colors.text};
   padding: 15px;
   padding-right: ${(props: DefaultStylesProps) => (props.withRightElement ? '85px' : '15px')};
@@ -104,5 +104,5 @@ InputComponent.defaultProps = {
   onChange: () => {},
   onFocus: () => {},
   step: 1,
-  bgColor: appTheme.colors.inputBackground,
+  bgColor: appTheme.colors.inputBg,
 };

app/components/select.js

@@ -22,7 +22,7 @@ const SelectWrapper = styled.div`
   flex-direction: row;
   border-radius: ${(props: SelectWrapperProps) => props.theme.boxBorderRadius};
   border: none;
-  background-color: ${(props: SelectWrapperProps) => props.bgColor || props.theme.colors.inputBackground};
+  background-color: ${(props: SelectWrapperProps) => props.bgColor || props.theme.colors.inputBg};
   color: ${(props: SelectWrapperProps) => props.theme.colors.text};
   width: 100%;
   outline: none;
@@ -125,7 +125,7 @@ export class SelectComponent extends PureComponent<Props, State> {
   static defaultProps = {
     placeholder: '',
     placement: 'bottom',
-    bgColor: appTheme.colors.inputBackground,
+    bgColor: appTheme.colors.inputBg,
     capitalize: true,
   };
 

app/components/sidebar.js

@@ -25,23 +25,23 @@ const StyledLink = styled.a`
     ? props.theme.colors.sidebarItemActive
     : props.theme.colors.sidebarItem
   )};
-  font-size: ${(props: StyledLinkProps) => `${props.theme.fontSize.regular}em`};
-  text-decoration: none;
-  font-weight: ${(props: StyledLinkProps) => String(props.theme.fontWeight.bold)};
   background-color: ${(props: StyledLinkProps) => (props.isActive
     ? `${props.theme.colors.sidebarHoveredItem}`
     : 'transparent'
   )};
+  font-size: ${(props: StyledLinkProps) => `${props.theme.fontSize.regular}em`};
+  text-decoration: none;
+  font-weight: ${(props: StyledLinkProps) => String(props.theme.fontWeight.bold)};
   letter-spacing: 0.25px;
   padding: 25px 20px;
   height: 35px;
   width: 100%;
   display: flex;
   align-items: center;
-  outline: none;
-  border-right: ${(props: StyledLinkProps) => (props.isActive ? `3px solid ${props.theme.colors.sidebarItemActive}` : 'none')};
   cursor: pointer;
+  outline: none;
   transition: all 0.03s ${(props: StyledLinkProps) => props.theme.transitionEase};
+  border-right: ${(props: StyledLinkProps) => (props.isActive ? `3px solid ${props.theme.colors.sidebarActiveItemBorder}` : 'none')};
 
   &:hover {
     background-color: ${(props: StyledLinkProps) => props.theme.colors.sidebarHoveredItem};
@@ -85,7 +85,11 @@ export const SidebarComponent = ({ options, location, history }: Props) => (
           key={item.route}
           onClick={() => (isActive ? {} : history.push(item.route))}
         >
-          <Icon isActive={isActive} src={item.icon(isActive)} Alt={`${item.route}`} />
+          <Icon
+            isActive={isActive}
+            src={item.icon(isActive)}
+            Alt={`${item.route}`}
+          />
           {item.label}
         </StyledLink>
       );

app/components/wallet-address.js

@@ -20,7 +20,7 @@ const AddressWrapper = styled.div`
 const Input = styled.input`
   border-radius: ${props => props.theme.boxBorderRadius};
   border: none;
-  background-color: ${props => props.theme.colors.inputBackground};
+  background-color: ${props => props.theme.colors.inputBg};
   color: ${props => props.theme.colors.text};
   padding: 15px;
   width: 100%;
@@ -35,7 +35,7 @@ const Input = styled.input`
 const QRCodeWrapper = styled.div`
   align-items: center;
   display: flex;
-  background-color: #000;
+  background-color: ${props => props.theme.colors.qrCodeWrapperBg}
   border-radius: 6px;
   padding: 20px;
   margin-top: 10px;

app/theme/colors/dark.js

@@ -42,12 +42,18 @@ export const DARK_COLORS = {
   sidebarLogoGradientEnd: brand2,
   sidebarHoveredItem: '#1C1C1C',
   sidebarHoveredItemLabel: '#8e8e96',
+  sidebarActiveItemBorder: 'red',
+
 
   // Misc
   divider: black,
+  qrCodeWrapperBg: black,
   headerTitle: text,
   selectButtonShadow: 'rgba(238,201,76,0.65)',
 
+  // Forms
+  inputBg: black,
+
   // Wallet Summary
   walletSummaryBg: black,
   walletSummaryBorder: black,

app/theme/colors/light.js

@@ -1,64 +1,79 @@
 // @flow
 
-const white = '#ffffff';
+const white = '#FFFFFF';
+const offWhite = '#F9F9F9';
+const black = '#000000';
 const text = '#142533';
-const brand = '#5684eb';
-const brand2 = '#1e5fef';
+const secondaryText = '#777777';
+const brand = '#5684EB';
 const error = '#FF6C6C';
 const success = '#6AEAC0';
+const logo = '#F4B728';
+const logo2 = '#FFE240';
+const border = '#DDDDDD';
 
 export const LIGHT_COLORS = {
   // General
-  background: '#f9f9f9',
+  background: offWhite,
+  text,
   darkOne: brand,
   blackTwo: '#171717',
   lightOne: white,
   brandOne: '#000',
-  brandThree: '#5d5d65',
-  buttonBorderColor: '#3e3c42',
+  brandThree: '#5D5D65',
+  buttonBorderColor: '#3E3C42',
   activeItem: brand,
-  text,
 
   // Buttons
   buttonPrimaryText: white,
   buttonSecondaryText: text,
 
   // Card
-  cardBackgroundColor: '#000',
+  cardBackgroundColor: black,
 
   // Sidebar
-  sidebarLogoGradientBegin: brand,
-  sidebarLogoGradientEnd: brand2,
-  sidebarHoveredItem: '#f9f9f9',
-  sidebarHoveredItemLabel: '#8e8e96',
   sidebarBg: white,
-  sidebarBorderRight: '#ddd',
+  sidebarBorderRight: border,
+  sidebarLogoGradientBegin: logo,
+  sidebarLogoGradientEnd: logo2,
+  sidebarHoveredItem: offWhite,
+  sidebarHoveredItemLabel: '#8E8E96',
+  sidebarItem: offWhite,
+  sidebarItemLabel: '#8E8E96',
+  sidebarActiveItem: 'red',
+  sidebarActiveItemLabel: '#8E8E96',
+  sidebarActiveItemBorder: 'red',
 
   // Transactions
   transactionSent: error,
   transactionReceived: success,
-  transactionsDate: '#777777',
+  transactionsDate: secondaryText,
   transactionsItemHovered: '#222222',
-  transactionsDetailsLabel: '#777777',
+  transactionsDetailsLabel: secondaryText,
 
   // Select
   selectButtonShadow: 'rgba(238,201,76,0.65)',
 
-  // Status
+  // Status Pill
   statusPillLabel: text,
-  statusPillBg: '#f2f2f2',
-  statusPillBorder: '#ddd',
+  statusPillBg: '#F2F2F2',
+  statusPillBorder: border,
+
+  qrCodeWrapperBg: white,
 
   // Header
   headerTitle: text,
 
   // Wallet Summary
   walletSummaryBg: white,
-  walletSummaryBorder: '#ddd',
+  walletSummaryBorder: border,
+
+  // Forms
+  inputBg: white,
 
   // Console
   consoleBg: white,
 
   // Misc
-  divider: '#aaa',
+  divider: '#AAAAAA',
 };

app/theme/theme.js

@@ -102,9 +102,9 @@ export const appTheme: AppTheme = {
       [LIGHT]: LIGHT_COLORS.transactionsItemHovered,
       [DARK]: DARK_COLORS.transactionsItemHovered,
     }),
-    inputBackground: theme('mode', {
-      [LIGHT]: LIGHT_COLORS.brandOne,
-      [DARK]: DARK_COLORS.brandOne,
+    inputBg: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.inputBg,
+      [DARK]: DARK_COLORS.inputBg,
     }),
     selectButtonShadow: theme('mode', {
       [LIGHT]: LIGHT_COLORS.selectButtonShadow,
@@ -162,9 +162,17 @@ export const appTheme: AppTheme = {
       [LIGHT]: LIGHT_COLORS.buttonPrimaryText,
       [DARK]: DARK_COLORS.buttonPrimaryText,
     }),
+    qrCodeWrapperBg: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.qrCodeWrapperBg,
+      [DARK]: DARK_COLORS.qrCodeWrapperBg,
+    }),
     statusPillBorder: theme('mode', {
       [LIGHT]: LIGHT_COLORS.statusPillBorder,
       [DARK]: DARK_COLORS.statusPillBorder,
     }),
+    sidebarActiveItemBorder: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.sidebarActiveItemBorder,
+      [DARK]: DARK_COLORS.sidebarActiveItemBorder,
+    }),
   },
 };

flow-custom-typedefs/theme.js

@@ -6,22 +6,27 @@ type Colors = {
   primary: ThemeSet,
   secondary: ThemeSet,
   sidebarBg: ThemeSet,
+
+  // Sidebar
   sidebarItem: ThemeSet,
   sidebarItemActive: ThemeSet,
+  sidebarActiveItemBorder:  ThemeSet,
   sidebarHoveredItem: ThemeSet,
   sidebarHoveredItemLabel: ThemeSet,
+  sidebarLogoGradientBegin: ThemeSet,
+  sidebarLogoGradientEnd: ThemeSet,
+
   cardBackgroundColor: ThemeSet,
   text: ThemeSet,
   activeItem: ThemeSet,
   inactiveItem: ThemeSet,
-  sidebarLogoGradientBegin: ThemeSet,
-  sidebarLogoGradientEnd: ThemeSet,
   background: ThemeSet,
+
+  // Transactions
   transactionSent: ThemeSet,
   transactionReceived: ThemeSet,
   transactionsDate: ThemeSet,
   transactionsItemHovered: ThemeSet,
-  inputBackground: ThemeSet,
   selectButtonShadow: ThemeSet,
   transactionsDetailsLabel: ThemeSet,
   statusPillLabel: ThemeSet,
@@ -39,6 +44,8 @@ type Colors = {
   buttonPrimaryText: ThemeSet,
   buttonSecondaryText: ThemeSet,
   statusPillBorder: ThemeSet,
+  inputBg: ThemeSet,
+  qrCodeWrapperBg: ThemeSet,
 };
 
 type FontSize = {