feature: further work into making WalletSummary, Sidebar, Header, Button and Divider components themeable

app/components/button.js

@@ -15,13 +15,13 @@ const DefaultButton = styled.button`
   cursor: pointer;
   outline: none;
   min-width: 100px;
-  border-radius: 100px;
+  border-radius: 3px;
   transition: background-color 0.1s ${props => props.theme.transitionEase};
 `;
 
 const Primary = styled(DefaultButton)`
   background-color: ${props => props.theme.colors.primary};
-  color: ${props => props.theme.colors.secondary};
+  color: ${props => props.theme.colors.buttonPrimaryText};
   border: none;
 
   &:hover {
@@ -37,7 +37,7 @@ const Primary = styled(DefaultButton)`
 
 const Secondary = styled(DefaultButton)`
   background-color: transparent;
-  color: ${props => props.theme.colors.secondary};
+  color: ${props => props.theme.colors.buttonSecondaryText};
   border: 2px solid ${props => props.theme.colors.buttonBorderColor};
 
   &:hover {

app/components/divider.js

@@ -12,7 +12,7 @@ type Props = PropsWithTheme<{
 export const Divider = styled.div`
   width: 100%;
   height: 1px;
-  background-color: ${(props: Props) => props.color || props.theme.colors.text};
+  background-color: ${(props: Props) => props.color || props.theme.colors.divider};
   opacity: ${(props: Props) => String(props.opacity || 1)};
   margin-bottom: ${(props: Props) => props.marginBottom || '0'};
   margin-top: ${(props: Props) => props.marginTop || '0'};

app/components/header.js

@@ -55,6 +55,7 @@ const Title = styled(TextComponent)`
   text-transform: capitalize;
   letter-spacing: 0.25px;
   font-weight: ${props => String(props.theme.fontWeight.bold)};
+  color: ${props => props.theme.colors.headerTitle};
 `;
 
 type Props = {
@@ -73,7 +74,7 @@ export const HeaderComponent = ({ title }: Props) => (
         <Title value={title} />
         <Status type='syncing' progress={0} />
       </TitleRow>
-      <Divider opacity={0.1} />
+      <Divider opacity={0.2} />
     </TitleWrapper>
   </Wrapper>
 );

app/components/sidebar.js

@@ -13,6 +13,7 @@ const Wrapper = styled.div`
   height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
   font-family: ${props => props.theme.fontFamily};
   background-color: ${props => props.theme.colors.sidebarBg};
+  border-right: 1px solid ${props => props.theme.colors.sidebarBorderRight};
   padding-top: 15px;
   position: relative;
 `;
@@ -20,11 +21,17 @@ const Wrapper = styled.div`
 /* eslint-disable max-len */
 type StyledLinkProps = PropsWithTheme<{ isActive: boolean }>;
 const StyledLink = styled.a`
-  color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItem)};
+  color: ${(props: StyledLinkProps) => (props.isActive
+    ? 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')};
+  background-color: ${(props: StyledLinkProps) => (props.isActive
+    ? `${props.theme.colors.sidebarHoveredItem}`
+    : 'transparent'
+  )};
   letter-spacing: 0.25px;
   padding: 25px 20px;
   height: 35px;
@@ -37,8 +44,11 @@ const StyledLink = styled.a`
   transition: all 0.03s ${(props: StyledLinkProps) => props.theme.transitionEase};
 
   &:hover {
-    color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')}
     background-color: ${(props: StyledLinkProps) => props.theme.colors.sidebarHoveredItem};
+    color: ${(props: StyledLinkProps) => (props.isActive
+    ? props.theme.colors.sidebarItemActive
+    : '#ddd'
+  )}
   }
 `;
 

app/components/status-pill.js

@@ -24,7 +24,8 @@ const rotate = keyframes`
 const Wrapper = styled.div`
   align-items: center;
   display: flex;
-  background-color: #000;
+  background: ${props => props.theme.colors.statusPillBg};
+  border: 1px solid ${props => props.theme.colors.statusPillBorder}
   border-radius: 27px;
   padding: 8px 16px;
 `;

app/components/wallet-summary.js

@@ -13,7 +13,8 @@ import { appTheme } from '../theme';
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
-  background-color: ${props => props.theme.colors.cardBackgroundColor};
+  background-color: ${props => props.theme.colors.walletSummaryBg};
+  border: 1px solid ${props => props.theme.colors.walletSummaryBorder};
   border-radius: ${props => props.theme.boxBorderRadius};
   padding: 37px 45px;
   min-height: 250px;

app/theme/colors/dark.js

@@ -1,25 +1,57 @@
 // @flow
 
+const text = '#ffffff';
+const brand = '#F4B728';
+const brand2 = '#FFE240';
+const black = '#000000';
+const error = '#FF6C6C';
+const success = '#6AEAC0';
+
 export const DARK_COLORS = {
-  darkOne: '#F4B728',
+  darkOne: brand,
   blackTwo: '#171717',
-  lightOne: '#ffffff',
-  brandOne: '#000',
+  lightOne: text,
+  brandOne: black,
   brandThree: '#5d5d65',
   buttonBorderColor: '#3e3c42',
-  activeItem: '#F4B728',
-  text: '#FFF',
-  cardBackgroundColor: '#000',
-  sidebarLogoGradientBegin: '#F4B728',
-  sidebarLogoGradientEnd: '#FFE240',
-  sidebarHoveredItem: '#1C1C1C',
-  sidebarHoveredItemLabel: '#8e8e96',
+  activeItem: brand,
+  text,
+  cardBackgroundColor: black,
   background: '#212124',
-  transactionSent: '#FF6C6C',
-  transactionReceived: '#6AEAC0',
+
+  // Buttons
+  buttonPrimaryText: text,
+  buttonSecondaryText: black,
+
+  // Transactions
+  transactionSent: error,
+  transactionReceived: success,
   transactionsDate: '#777777',
   transactionsItemHovered: '#222222',
-  selectButtonShadow: 'rgba(238,201,76,0.65)',
-  statusPillLabel: '#727272',
   transactionsDetailsLabel: '#777777',
+
+  // Status Pill
+  statusPillLabel: '#727272',
+  statusPillBg: black,
+  statusPillBorder: black,
+
+  // Sidebar
+  sidebarBg: black,
+  sidebarBorderRight: '#212124',
+  sidebarLogoGradientBegin: brand,
+  sidebarLogoGradientEnd: brand2,
+  sidebarHoveredItem: '#1C1C1C',
+  sidebarHoveredItemLabel: '#8e8e96',
+
+  // Misc
+  divider: black,
+  headerTitle: text,
+  selectButtonShadow: 'rgba(238,201,76,0.65)',
+
+  // Wallet Summary
+  walletSummaryBg: black,
+  walletSummaryBorder: black,
+
+  // Console
+  consoleBg: black,
 };

app/theme/colors/light.js

@@ -1,25 +1,64 @@
 // @flow
 
+const white = '#ffffff';
+const text = '#142533';
+const brand = '#5684eb';
+const brand2 = '#1e5fef';
+const error = '#FF6C6C';
+const success = '#6AEAC0';
+
 export const LIGHT_COLORS = {
-  darkOne: '#F4B728',
+  // General
+  background: '#f9f9f9',
+  darkOne: brand,
   blackTwo: '#171717',
-  lightOne: '#ffffff',
+  lightOne: white,
   brandOne: '#000',
   brandThree: '#5d5d65',
   buttonBorderColor: '#3e3c42',
-  activeItem: '#F4B728',
-  text: '#FFF',
+  activeItem: brand,
+  text,
+
+  // Buttons
+  buttonPrimaryText: white,
+  buttonSecondaryText: text,
+
+  // Card
   cardBackgroundColor: '#000',
-  sidebarLogoGradientBegin: '#F4B728',
-  sidebarLogoGradientEnd: '#FFE240',
-  sidebarHoveredItem: '#1C1C1C',
+
+  // Sidebar
+  sidebarLogoGradientBegin: brand,
+  sidebarLogoGradientEnd: brand2,
+  sidebarHoveredItem: '#f9f9f9',
   sidebarHoveredItemLabel: '#8e8e96',
-  background: '#fff',
-  transactionSent: '#FF6C6C',
-  transactionReceived: '#6AEAC0',
+  sidebarBg: white,
+  sidebarBorderRight: '#ddd',
+
+  // Transactions
+  transactionSent: error,
+  transactionReceived: success,
   transactionsDate: '#777777',
   transactionsItemHovered: '#222222',
-  selectButtonShadow: 'rgba(238,201,76,0.65)',
-  statusPillLabel: '#727272',
   transactionsDetailsLabel: '#777777',
+
+  // Select
+  selectButtonShadow: 'rgba(238,201,76,0.65)',
+
+  // Status
+  statusPillLabel: text,
+  statusPillBg: '#f2f2f2',
+  statusPillBorder: '#ddd',
+
+  // Header
+  headerTitle: text,
+
+  // Wallet Summary
+  walletSummaryBg: white,
+  walletSummaryBorder: '#ddd',
+
+  // Console
+  consoleBg: white,
+
+  // Misc
+  divider: '#aaa',
 };

app/theme/theme.js

@@ -34,9 +34,13 @@ export const appTheme: AppTheme = {
       [LIGHT]: LIGHT_COLORS.darkOne,
       [DARK]: DARK_COLORS.darkOne,
     }),
+    divider: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.divider,
+      [DARK]: DARK_COLORS.divider,
+    }),
     sidebarBg: theme('mode', {
-      [LIGHT]: LIGHT_COLORS.brandOne,
-      [DARK]: DARK_COLORS.brandOne,
+      [LIGHT]: LIGHT_COLORS.sidebarBg,
+      [DARK]: DARK_COLORS.sidebarBg,
     }),
     sidebarItem: theme('mode', {
       [LIGHT]: LIGHT_COLORS.brandThree,
@@ -126,5 +130,41 @@ export const appTheme: AppTheme = {
       [LIGHT]: LIGHT_COLORS.buttonBorderColor,
       [DARK]: DARK_COLORS.buttonBorderColor,
     }),
+    headerTitle: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.headerTitle,
+      [DARK]: DARK_COLORS.headerTitle,
+    }),
+    statusPillBg: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.statusPillBg,
+      [DARK]: DARK_COLORS.statusPillBg,
+    }),
+    walletSummaryBg: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.walletSummaryBg,
+      [DARK]: DARK_COLORS.walletSummaryBg,
+    }),
+    walletSummaryBorder: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.walletSummaryBorder,
+      [DARK]: DARK_COLORS.walletSummaryBorder,
+    }),
+    consoleBg: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.consoleBg,
+      [DARK]: DARK_COLORS.consoleBg,
+    }),
+    sidebarBorderRight: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.sidebarBorderRight,
+      [DARK]: DARK_COLORS.sidebarBorderRight,
+    }),
+    buttonSecondaryText: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.buttonSecondaryText,
+      [DARK]: DARK_COLORS.buttonSecondaryText,
+    }),
+    buttonPrimaryText: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.buttonPrimaryText,
+      [DARK]: DARK_COLORS.buttonPrimaryText,
+    }),
+    statusPillBorder: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.statusPillBorder,
+      [DARK]: DARK_COLORS.statusPillBorder,
+    }),
   },
 };

app/views/console.js

@@ -12,7 +12,7 @@ import ConsoleSymbol from '../assets/images/console_zcash.png';
 const Wrapper = styled.div`
   max-height: 100%;
   overflow-y: auto;
-  background-color: ${props => props.theme.colors.cardBackgroundColor};
+  background-color: ${props => props.theme.colors.consoleBg};
   margin-top: ${props => props.theme.layoutContentPaddingTop};
   border-radius: ${props => props.theme.boxBorderRadius};
   padding: 38px 33.5px;

flow-custom-typedefs/theme.js

@@ -1,3 +1,5 @@
+// @flow
+
 import { ThemeSet } from 'styled-theming';
 
 type Colors = {
@@ -26,6 +28,17 @@ type Colors = {
   modalItemLabel: ThemeSet,
   blackTwo: ThemeSet,
   buttonBorderColor: ThemeSet,
+  divider: ThemeSet,
+  sidebarBg: ThemeSet,
+  headerTitle: ThemeSet,
+  statusPillBg: ThemeSet,
+  walletSummaryBg: ThemeSet,
+  walletSummaryBorder: ThemeSet,
+  consoleBg: ThemeSet,
+  sidebarBorderRight: ThemeSet,
+  buttonPrimaryText: ThemeSet,
+  buttonSecondaryText: ThemeSet,
+  statusPillBorder: ThemeSet,
 };
 
 type FontSize = {
@@ -42,17 +55,26 @@ type FontWeight = {
 };
 
 type AppTheme = {
+  // General
   mode: string,
+
+  // Typography
   fontFamily: string,
   fontWeight: FontWeight,
   fontSize: FontSize,
+
+  // Colors
   colors: Colors,
+
+  // Spacing
   sidebarWidth: string,
   headerHeight: string,
   layoutPaddingLeft: string,
   layoutPaddingRight: string,
   layoutContentPaddingTop: string,
   boxBorderRadius: string,
+
+  // Misc
   transitionEase: string,
 };