styles: refactor Title to HeaderFour

jamaljsr · jamaljsr · commit 7e9dd6eb474b · 2020-05-23T17:33:04.000-04:00
diff --git a/app/src/components/NodeStatus.tsx b/app/src/components/NodeStatus.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { SmallText, Title, XLargeText } from 'components/common/text';
+import { HeaderFour, Jumbo, Small } from 'components/common/text';
 import { Bitcoin, Bolt } from './common/icons';
 import Unit from './common/Unit';
 import { styled } from './theme';
@@ -17,9 +17,6 @@ const Styled = {
     margin: 20px 0;
     opacity: 0.5;
   `,
-  StatusTitle: styled(Title)`
-    margin-bottom: 10px;
-  `,
   BoltIcon: styled(Bolt)`
     width: 10px;
     height: 10px;
@@ -36,18 +33,18 @@ const NodeStatus: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.NodeStatus');
   const { nodeStore } = useStore();
 
-  const { Wrapper, StatusTitle, BoltIcon, BitcoinIcon, Divider } = Styled;
+  const { Wrapper, BoltIcon, BitcoinIcon, Divider } = Styled;
   return (
     <Wrapper>
-      <StatusTitle>{l('title')}</StatusTitle>
-      <XLargeText block>
+      <HeaderFour>{l('title')}</HeaderFour>
+      <Jumbo>
         <BoltIcon title="bolt" />
         <Unit sats={nodeStore.wallet.channelBalance} />
-      </XLargeText>
-      <SmallText block>
+      </Jumbo>
+      <Small>
         <BitcoinIcon title="bitcoin" />
         <Unit sats={nodeStore.wallet.walletBalance} suffix={false} />
-      </SmallText>
+      </Small>
       <Divider />
     </Wrapper>
   );
diff --git a/app/src/components/common/Tile.tsx b/app/src/components/common/Tile.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { styled } from 'components/theme';
 import { Maximize } from './icons';
-import { Title } from './text';
+import { HeaderFour } from './text';
 
 const Styled = {
   TileWrap: styled.div`
@@ -57,7 +57,7 @@ const Tile: React.FC<Props> = ({ title, text, onMaximizeClick, children }) => {
   return (
     <TileWrap>
       <Header>
-        <Title>{title}</Title>
+        <HeaderFour>{title}</HeaderFour>
         {onMaximizeClick && <MaximizeIcon title="maximize" onClick={onMaximizeClick} />}
       </Header>
       {text ? <Text>{text}</Text> : children}
diff --git a/app/src/components/common/text.tsx b/app/src/components/common/text.tsx
@@ -4,6 +4,10 @@ interface BlockProps {
   block?: boolean;
 }
 
+interface HeaderProps {
+  marginless?: boolean;
+}
+
 export const HeaderOne = styled.h1`
   font-family: ${props => props.theme.fonts.work.medium};
   font-size: ${props => props.theme.sizes.xxl};
@@ -24,11 +28,13 @@ export const HeaderThree = styled.h3`
   text-transform: uppercase;
 `;
 
-export const HeaderFour = styled.h4`
+export const HeaderFour = styled.h4<HeaderProps>`
   font-family: ${props => props.theme.fonts.open.semiBold};
   font-size: ${props => props.theme.sizes.s};
   line-height: 20px;
   text-transform: uppercase;
+  color: ${props => props.theme.colors.gray};
+  margin-bottom: ${props => (props.marginless ? '0' : '0.5rem')};
 `;
 
 export const Small = styled.p`
@@ -41,15 +47,6 @@ export const Jumbo = styled.span`
   line-height: 38px;
 `;
 
-export const Title = styled.div`
-  font-size: ${props => props.theme.sizes.s};
-  font-family: ${props => props.theme.fonts.open.semiBold};
-  text-transform: uppercase;
-  letter-spacing: 0;
-  line-height: 19px;
-  color: ${props => props.theme.colors.gray};
-`;
-
 export const SmallText = styled.span<BlockProps>`
   ${props => props.block && 'display: block;'}
   font-size: ${props => props.theme.sizes.s};
diff --git a/app/src/components/history/HistoryRow.tsx b/app/src/components/history/HistoryRow.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { Swap } from 'store/models';
 import { Column, Row } from 'components/common/grid';
-import { Title } from 'components/common/text';
+import { HeaderFour } from 'components/common/text';
 import Unit from 'components/common/Unit';
 import SwapDot from 'components/loop/SwapDot';
 import { styled } from 'components/theme';
@@ -27,7 +27,7 @@ const Styled = {
     text-overflow: ellipsis;
     line-height: ${ROW_HEIGHT}px;
   `,
-  StatusTitle: styled(Title)`
+  StatusHeader: styled(HeaderFour)`
     margin-left: 35px;
   `,
   StatusIcon: styled.span`
@@ -38,23 +38,23 @@ const Styled = {
 
 export const HistoryRowHeader: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.history.HistoryRowHeader');
-  const { StatusTitle } = Styled;
+  const { StatusHeader } = Styled;
   return (
     <Row>
       <Column>
-        <StatusTitle>{l('status')}</StatusTitle>
+        <StatusHeader>{l('status')}</StatusHeader>
       </Column>
       <Column>
-        <Title>{l('type')}</Title>
+        <HeaderFour>{l('type')}</HeaderFour>
       </Column>
       <Column>
-        <Title>{l('amount')} (sats)</Title>
+        <HeaderFour>{l('amount')} (sats)</HeaderFour>
       </Column>
       <Column right>
-        <Title>{l('created')}</Title>
+        <HeaderFour>{l('created')}</HeaderFour>
       </Column>
       <Column right>
-        <Title>{l('updated')}</Title>
+        <HeaderFour>{l('updated')}</HeaderFour>
       </Column>
     </Row>
   );
diff --git a/app/src/components/layout/NavMenu.tsx b/app/src/components/layout/NavMenu.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { Title } from 'components/common/text';
+import { HeaderFour } from 'components/common/text';
 import { styled } from 'components/theme';
 
 const Styled = {
-  NavTitle: styled(Title)`
+  NavHeader: styled(HeaderFour)`
     padding: 8px 14px;
   `,
   Nav: styled.ul`
@@ -60,10 +60,10 @@ const NavMenu: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
   const { uiStore } = useStore();
 
-  const { NavTitle, Nav } = Styled;
+  const { NavHeader, Nav } = Styled;
   return (
     <>
-      <NavTitle>{l('menu')}</NavTitle>
+      <NavHeader>{l('menu')}</NavHeader>
       <Nav>
         <NavItem page="loop" onClick={uiStore.goToLoop} />
         <NavItem page="history" onClick={uiStore.goToHistory} />
diff --git a/app/src/components/loop/ChannelRow.tsx b/app/src/components/loop/ChannelRow.tsx
@@ -8,7 +8,7 @@ import { Channel } from 'store/models';
 import Checkbox from 'components/common/Checkbox';
 import { Column, Row } from 'components/common/grid';
 import StatusDot from 'components/common/StatusDot';
-import { Title } from 'components/common/text';
+import { HeaderFour } from 'components/common/text';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
 import ChannelBalance from './ChannelBalance';
@@ -54,20 +54,20 @@ export const ChannelRowHeader: React.FC = () => {
   return (
     <Row>
       <Column right>
-        <Title>{l('canReceive')}</Title>
+        <HeaderFour>{l('canReceive')}</HeaderFour>
       </Column>
       <Column cols={3}></Column>
       <Column>
-        <Title>{l('canSend')}</Title>
+        <HeaderFour>{l('canSend')}</HeaderFour>
       </Column>
       <Column>
-        <Title>{l('upTime')}</Title>
+        <HeaderFour>{l('upTime')}</HeaderFour>
       </Column>
       <Column>
-        <Title>{l('peer')}</Title>
+        <HeaderFour>{l('peer')}</HeaderFour>
       </Column>
       <Column right>
-        <Title>{l('capacity')}</Title>
+        <HeaderFour>{l('capacity')}</HeaderFour>
       </Column>
     </Row>
   );
diff --git a/app/src/components/loop/processing/ProcessingSwaps.tsx b/app/src/components/loop/processing/ProcessingSwaps.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Minimize } from 'components/common/icons';
-import { Title } from 'components/common/text';
+import { HeaderFour } from 'components/common/text';
 import { styled } from 'components/theme';
 import ProcessingSwapRow from './ProcessingSwapRow';
 
@@ -46,7 +46,7 @@ const ProcessingSwaps: React.FC = () => {
   return (
     <Wrapper>
       <Header>
-        <Title>{l('title')}</Title>
+        <HeaderFour>{l('title')}</HeaderFour>
         <MinimizeIcon onClick={uiStore.toggleProcessingSwaps} />
       </Header>
       <Content>
diff --git a/app/src/components/loop/processing/SwapInfo.tsx b/app/src/components/loop/processing/SwapInfo.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Swap } from 'store/models';
-import { Title } from 'components/common/text';
+import { HeaderFour } from 'components/common/text';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
 import SwapDot from '../SwapDot';
@@ -36,7 +36,7 @@ const SwapInfo: React.FC<Props> = ({ swap }) => {
         <SwapDot swap={swap} />
       </Dot>
       <Details>
-        <Title>{swap.idEllipsed}</Title>
+        <HeaderFour marginless>{swap.idEllipsed}</HeaderFour>
         <div>
           <Unit sats={swap.amount} />
         </div>
diff --git a/app/src/components/loop/swap/StepSummary.tsx b/app/src/components/loop/swap/StepSummary.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Pill } from 'components/common/base';
-import { H3Text, SmallText, Title } from 'components/common/text';
+import { H3Text, HeaderFour, SmallText } from 'components/common/text';
 import { styled } from 'components/theme';
 
 const Styled = {
@@ -38,7 +38,7 @@ const StepSummary: React.FC<Props> = ({ title, heading, description }) => {
   return (
     <Wrapper>
       <div>
-        <Title>{title}</Title>
+        <HeaderFour>{title}</HeaderFour>
         <Heading>{heading}</Heading>
         <Description>{description}</Description>
       </div>
diff --git a/app/src/components/loop/swap/SwapProcessing.tsx b/app/src/components/loop/swap/SwapProcessing.tsx
@@ -4,7 +4,7 @@ import loadingJson from 'assets/animations/loading.json';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import Animation from 'components/common/Animation';
-import { Title } from 'components/common/text';
+import { HeaderFour } from 'components/common/text';
 import { styled } from 'components/theme';
 
 const Styled = {
@@ -37,7 +37,7 @@ const SwapProcessingStep: React.FC = () => {
     <Wrapper>
       <Loader animationData={loadingJson} />
       <LoadingMessage>
-        <Title>{l('loadingMsg')}</Title>
+        <HeaderFour>{l('loadingMsg')}</HeaderFour>
       </LoadingMessage>
       {buildSwapStore.swapError && (
         <ErrorMessage>{buildSwapStore.swapError.message}</ErrorMessage>
diff --git a/app/src/components/loop/swap/SwapReviewStep.tsx b/app/src/components/loop/swap/SwapReviewStep.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { Title, XLargeText } from 'components/common/text';
+import { HeaderFour, XLargeText } from 'components/common/text';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
 import StepButtons from './StepButtons';
@@ -30,6 +30,7 @@ const Styled = {
   InvoiceRow: styled.div`
     display: flex;
     justify-content: space-between;
+    align-items: center;
     margin-bottom: 30px;
   `,
   Divider: styled.div`
@@ -55,18 +56,20 @@ const SwapReviewStep: React.FC = () => {
       <Invoice>
         <div>
           <InvoiceRow>
-            <Title>{l('amount', { type: buildSwapStore.direction })}</Title>
+            <HeaderFour marginless>
+              {l('amount', { type: buildSwapStore.direction })}
+            </HeaderFour>
             <span>
               <Unit sats={buildSwapStore.amount} />
             </span>
           </InvoiceRow>
           <InvoiceRow>
-            <Title>{l('fees')}</Title>
+            <HeaderFour marginless>{l('fees')}</HeaderFour>
             <span>{buildSwapStore.feesLabel}</span>
           </InvoiceRow>
           <Divider />
           <InvoiceRow>
-            <Title>{l('total')}</Title>
+            <HeaderFour marginless>{l('total')}</HeaderFour>
             <XLargeText>
               <Unit sats={buildSwapStore.invoiceTotal} />
             </XLargeText>
diff --git a/app/src/components/settings/BalanceSettings.tsx b/app/src/components/settings/BalanceSettings.tsx
@@ -4,7 +4,7 @@ import { usePrefixedTranslation } from 'hooks';
 import { BalanceMode } from 'util/constants';
 import { useStore } from 'store';
 import PageHeader from 'components/common/PageHeader';
-import { Title } from 'components/common/text';
+import { HeaderFour } from 'components/common/text';
 import { styled } from 'components/theme';
 import SettingItem from './SettingItem';
 
@@ -49,7 +49,7 @@ const BalanceSettings: React.FC = () => {
         onBackClick={handleBack}
       />
       <Content>
-        <Title>{l('title')}</Title>
+        <HeaderFour>{l('title')}</HeaderFour>
         <BalanceModeItem mode={BalanceMode.receive} />
         <BalanceModeItem mode={BalanceMode.send} />
         <BalanceModeItem mode={BalanceMode.routing} />
diff --git a/app/src/components/settings/GeneralSettings.tsx b/app/src/components/settings/GeneralSettings.tsx
@@ -4,7 +4,7 @@ import { usePrefixedTranslation } from 'hooks';
 import { formatUnit } from 'util/formatters';
 import { useStore } from 'store';
 import PageHeader from 'components/common/PageHeader';
-import { Title } from 'components/common/text';
+import { HeaderFour } from 'components/common/text';
 import { styled } from 'components/theme';
 import SettingItem from './SettingItem';
 
@@ -17,7 +17,6 @@ const Styled = {
 
 const GeneralSettings: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.settings.GeneralSettings');
-  const { l: lbm } = usePrefixedTranslation('enums.BalanceMode');
   const { uiStore, settingsStore } = useStore();
 
   const handleUnit = useCallback(() => uiStore.showSettings('unit'), [uiStore]);
@@ -28,7 +27,7 @@ const GeneralSettings: React.FC = () => {
     <Wrapper>
       <PageHeader title={l('pageTitle')} />
       <Content>
-        <Title>{l('title')}</Title>
+        <HeaderFour>{l('title')}</HeaderFour>
         <SettingItem
           name={l('bitcoinUnit')}
           value={formatUnit(settingsStore.unit)}
@@ -37,7 +36,9 @@ const GeneralSettings: React.FC = () => {
         />
         <SettingItem
           name={l('balances')}
-          value={l('balancesValue', { mode: lbm(settingsStore.balanceMode) })}
+          value={l('balancesValue', {
+            mode: l(`enums.BalanceMode.${settingsStore.balanceMode}`),
+          })}
           onClick={handleBalance}
           icon="arrow"
         />
