reactor(ui): add info on send and receive view for shielded address support

app/components/layout.js

@@ -14,6 +14,7 @@ const Layout = styled.div`
   padding-left: ${props => props.theme.layoutPaddingLeft};
   padding-right: ${props => props.theme.layoutPaddingRight};
   overflow: auto;
+  padding-bottom: 20px;
 
   ::-webkit-scrollbar {
     display: none;

app/components/wallet-summary.js

@@ -9,8 +9,8 @@ import { formatNumber } from '../utils/format-number';
 import { getCoinName } from '../utils/get-coin-name';
 import { DARK } from '../constants/themes';
 
-import shieldDarkImage from '../assets/images/shield-dark.png';
-import shieldLightImage from '../assets/images/shield-light.png';
+import ShieldDarkImage from '../assets/images/shield-dark.png';
+import ShieldLightImage from '../assets/images/shield-light.png';
 
 const OutsideWrapper = styled.div`
   margin-top: ${props => props.theme.layoutContentPaddingTop};
@@ -63,22 +63,26 @@ const MiddleLabel = styled(TextComponent)`
 
 const ShieldedValue = styled(DefaultLabel)`
   color: ${props => props.theme.colors.activeItem};
-  padding-left: 13px;
+  padding-left: 14px;
   position: relative;
 
   &:before {
     position: absolute;
-    left: -1px;
+    left: 0;
     top: -1px;
     content: '';
-    background: url(${props => (props.theme.mode === DARK ? shieldDarkImage : shieldLightImage)});
+    background: url(${props => (props.theme.mode === DARK ? ShieldDarkImage : ShieldLightImage)});
     background-size: cover;
     height: 12px;
     width: 11px;
   }
 `;
 
-const UnconfirmedValue = styled(DefaultLabel)`
+const UnconfirmedLabel = styled(DefaultLabel)`
+  color: ${props => props.theme.colors.walletSummaryUnconfirmed};
+`;
+
+const UnconfirmedValue = styled(MiddleLabel)`
   color: ${props => props.theme.colors.walletSummaryUnconfirmed};
 `;
 
@@ -135,8 +139,8 @@ export const Component = ({
           <USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
         </DetailContainer>
         <DetailContainer>
-          <UnconfirmedValue value='UNCONFIRMED' isBold size={theme.fontSize.small} />
-          <MiddleLabel
+          <UnconfirmedLabel value='UNCONFIRMED' isBold size={theme.fontSize.small} />
+          <UnconfirmedValue
             value={`${coinName} ${formatNumber({ value: transparent })}`}
             isBold
             size='16px'

app/views/receive.js

@@ -15,6 +15,7 @@ import MenuIconDark from '../assets/images/menu_icon_dark.svg';
 import MenuIconLight from '../assets/images/menu_icon_light.svg';
 import PlusIconDark from '../assets/images/plus_icon_dark.svg';
 import PlusIconLight from '../assets/images/plus_icon_light.svg';
+import ShieldGrayImage from '../assets/images/shield-dark-gray.png';
 
 import type { addressType } from '../redux/modules/receive';
 import type { MapStateToProps, MapDispatchToProps } from '../containers/receive';
@@ -87,6 +88,22 @@ const RevealsMain = styled.div`
   justify-content: flex-start;
 `;
 
+const ShieldedLabel = styled(Label)`
+  padding-left: 14px;
+  position: relative;
+
+  &:before {
+    position: absolute;
+    left: 0;
+    top: -1px;
+    content: '';
+    background: url(${ShieldGrayImage});
+    background-size: cover;
+    height: 12px;
+    width: 11px;
+  }
+`;
+
 type Props = MapDispatchToProps &
   MapStateToProps & {
     theme: AppTheme,
@@ -131,7 +148,7 @@ class Component extends PureComponent<Props, State> {
 
     return (
       <div id='receive-wrapper'>
-        <Label value='Shielded Address' id='shielded-address-label' />
+        <ShieldedLabel value='Shielded Address' id='shielded-address-label' />
         {shieldedAddresses.map(({ address, balance }) => (
           <WalletAddress key={address} address={address} balance={balance} />
         ))}

app/views/send.js

@@ -387,6 +387,13 @@ const ZSuccessTransactionId = styled(TextComponent)`
   word-break: break-all !important;
 `;
 
+const CustomFeeWarning = styled(TextComponent)`
+  padding: 15px 10px 0 0;
+  letter-spacing: 0.5px;
+  font-size: 12px;
+  color: ${props => props.theme.colors.error};
+`;
+
 type Props = {
   match: Match,
   theme: AppTheme,
@@ -902,15 +909,17 @@ class Component extends PureComponent<Props, State> {
                           />
                         </ColumnComponent>
                       </RowComponent>
+                      <RowComponent>
+                        {feeType === FEES.CUSTOM && (
+                          <CustomFeeWarning value='Custom fees may compromise your privacy since fees are transparent.' />
+                        )}
+                      </RowComponent>
                     </FeeWrapper>
                   </animated.div>
                 ))
               }
             </Transition>
           </RevealsMain>
-          {feeType === FEES.CUSTOM && (
-            <TextComponent value='Custom fees may compromise your privacy since fees are transparent' />
-          )}
         </FormWrapper>
         <SendWrapper>
           <InfoCard>

app/views/settings.js

@@ -71,7 +71,6 @@ const ClipboardButton = styled(Clipboard)`
 `;
 
 const SettingsWrapper = styled.div`
-  margin-bottom: 20px;
   min-width: 200px;
   width: 70%;
   max-width: 600px;