Merge pull request #23 from andrerfneves/feature/pixel-perfecting

Feature/pixel perfecting

app/components/button.js

@@ -20,7 +20,7 @@ const defaultStyles = `
 };
   font-size: ${
   // $FlowFixMe
-  props => `${props.theme.fontSize.text}em`
+  props => `${props.theme.fontSize.regular}em`
 };
   cursor: pointer;
   outline: none;

app/components/dropdown.js

@@ -15,7 +15,7 @@ const MenuWrapper = styled.div`
     0.05,
     props.theme.colors.activeItem,
   )}, ${props.theme.colors.activeItem})`};
-  padding: 10px 20px;
+  padding: 10px 0;
   border-radius: 10px;
   margin-left: -10px;
 `;
@@ -27,7 +27,7 @@ const MenuItem = styled.button`
   border-bottom-style: solid;
   border-bottom-color: ${props => props.theme.colors.text};
   border-bottom-width: 1px;
-  padding: 15px 0;
+  padding: 15px 10px;
   cursor: pointer;
   width: 100%;
   text-align: left;

app/components/header.js

@@ -38,7 +38,7 @@ const TitleWrapper = styled.div`
 `;
 
 const Title = styled(TextComponent)`
-  font-size: ${props => `${props.theme.fontSize.title}em`};
+  font-size: ${props => `${props.theme.fontSize.large}em`};
   margin-top: 10px;
   margin-bottom: 10px;
   text-transform: capitalize;

app/components/sidebar.js

@@ -19,7 +19,7 @@ const StyledLink = styled(Link)`
   color: ${props => (props.isActive
     ? props.theme.colors.sidebarItemActive
     : props.theme.colors.sidebarItem)};
-  font-size: ${props => `${props.theme.fontSize.text}em`};
+  font-size: ${props => `${props.theme.fontSize.regular}em`};
   text-decoration: none;
   font-weight: ${props => (props.isActive
     ? props.theme.fontWeight.bold

app/components/text.js

@@ -48,6 +48,6 @@ TextComponent.defaultProps = {
   className: '',
   isBold: false,
   color: theme.colors.text,
-  size: theme.fontSize.text,
+  size: theme.fontSize.regular,
   align: 'left',
 };

app/components/transaction-daily.js

@@ -21,7 +21,7 @@ const TransactionsWrapper = styled.div`
 const Day = styled(TextComponent)`
   text-transform: uppercase;
   color: ${props => props.theme.colors.transactionsDate};
-  font-size: ${props => `${props.theme.fontSize.text * 0.9}em`};
+  font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`};
   font-weight: ${props => props.theme.fontWeight.bold};
   margin-bottom: 5px;
 `;

app/components/wallet-summary.js

@@ -23,7 +23,7 @@ const Wrapper = styled.div`
 
 const AllAddresses = styled(TextComponent)`
   margin-bottom: 2.5px;
-  font-size: ${props => `${props.theme.fontSize.text}em`};
+  font-size: ${props => `${props.theme.fontSize.small}em`};
 `;
 
 const ValueBox = styled.div`
@@ -39,6 +39,7 @@ const Label = styled(TextComponent)`
 
 const USDValue = styled(TextComponent)`
   opacity: 0.5;
+  font-weight: ${props => props.theme.fontWeight.light};
 `;
 
 const ShieldedValue = styled(Label)`
@@ -101,13 +102,13 @@ export const WalletSummaryComponent = ({
     <AllAddresses value='ALL ADDRESSES' isBold />
     <ValueBox>
       <TextComponent
-        size={theme.fontSize.zecValueBase * 2.5}
+        size={theme.fontSize.medium * 2.5}
         value={`ZEC ${formatNumber({ value: total })}`}
         isBold
       />
       <USDValue
         value={`USD $${formatNumber({ value: total * zecPrice })}`}
-        size={theme.fontSize.zecValueBase * 2}
+        size={theme.fontSize.medium * 2}
       />
     </ValueBox>
     <RowComponent>
@@ -115,12 +116,12 @@ export const WalletSummaryComponent = ({
         <ShieldedValue
           value='&#9679; SHIELDED'
           isBold
-          size={theme.fontSize.text * 0.8}
+          size={theme.fontSize.small}
         />
         <TextComponent
           value={`ZEC ${formatNumber({ value: shielded })}`}
           isBold
-          size={theme.fontSize.zecValueBase}
+          size={theme.fontSize.medium}
         />
         <USDValue
           value={`USD $${formatNumber({ value: shielded * zecPrice })}`}
@@ -130,12 +131,12 @@ export const WalletSummaryComponent = ({
         <Label
           value='&#9679; TRANSPARENT'
           isBold
-          size={theme.fontSize.text * 0.8}
+          size={theme.fontSize.small}
         />
         <TextComponent
           value={`ZEC ${formatNumber({ value: transparent })}`}
           isBold
-          size={theme.fontSize.zecValueBase}
+          size={theme.fontSize.medium}
         />
         <USDValue
           value={`USD $${formatNumber({ value: transparent * zecPrice })}`}

app/theme.js

@@ -27,15 +27,17 @@ const transactionsDetailsLabel = transactionsDate;
 
 const appTheme = {
   mode: DARK,
-  fontFamily: 'PT Sans',
+  fontFamily: 'Roboto',
   fontWeight: {
     bold: 700,
     default: 400,
+    light: 300,
   },
   fontSize: {
-    title: 1.25,
-    text: 0.84375,
-    zecValueBase: 1.125,
+    large: 1.25,
+    medium: 1.125,
+    regular: 0.84375,
+    small: 0.667,
   },
   colors: {
     primary: theme('mode', {

public/index.html

@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="shortcut icon" href="favicon.ico" />
-    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" />
 
     <title>Zcash Reference Wallet</title>
   </head>