styles: refactor remaining text styles

Author: jamaljsr

app/src/components/common/PageHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { styled } from 'components/theme';
 import { ArrowLeft, Icon } from './icons';
-import { PageTitle } from './text';
+import { HeaderThree } from './text';
 
 const Styled = {
   Wrapper: styled.div`
@@ -66,7 +66,7 @@ const PageHeader: React.FC<Props> = ({
         )}
       </Left>
       <Center>
-        <PageTitle>{title}</PageTitle>
+        <HeaderThree>{title}</HeaderThree>
       </Center>
       <Right>
         {onHistoryClick && <ActionIcon icon="clock" onClick={onHistoryClick} />}

app/src/components/common/Radio.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { styled } from 'components/theme';
-import { SmallText } from './text';
+import { Small } from './text';
 
 const Styled = {
   Wrapper: styled.div<{ right?: boolean }>`
@@ -43,7 +43,7 @@ const Radio: React.FC<Props> = ({ text, description, active, right, onClick }) =
       <RadioBlock active={active} onClick={onClick} role="switch" aria-checked={!!active}>
         {text}
       </RadioBlock>
-      <SmallText>{description}</SmallText>
+      <Small>{description}</Small>
     </Wrapper>
   );
 };

app/src/components/common/Tile.tsx

@@ -57,7 +57,7 @@ const Tile: React.FC<Props> = ({ title, text, onMaximizeClick, children }) => {
   return (
     <TileWrap>
       <Header>
-        <HeaderFour>{title}</HeaderFour>
+        <HeaderFour marginless>{title}</HeaderFour>
         {onMaximizeClick && <MaximizeIcon title="maximize" onClick={onMaximizeClick} />}
       </Header>
       {text ? <Text>{text}</Text> : children}

app/src/components/common/text.tsx

@@ -1,9 +1,5 @@
 import { styled } from 'components/theme';
 
-interface BlockProps {
-  block?: boolean;
-}
-
 interface HeaderProps {
   marginless?: boolean;
 }
@@ -21,7 +17,7 @@ export const HeaderTwo = styled.h2`
 `;
 
 export const HeaderThree = styled.h3`
-  font-family: ${props => props.theme.fonts.open.regular};
+  font-family: ${props => props.theme.fonts.open.light};
   font-size: ${props => props.theme.sizes.l};
   line-height: 30px;
   letter-spacing: 2.7px;
@@ -37,6 +33,11 @@ export const HeaderFour = styled.h4<HeaderProps>`
   margin-bottom: ${props => (props.marginless ? '0' : '0.5rem')};
 `;
 
+export const HeaderFive = styled.h5`
+  font-family: ${props => props.theme.fonts.open.bold};
+  font-size: ${props => props.theme.sizes.m};
+`;
+
 export const Small = styled.p`
   font-size: ${props => props.theme.sizes.s};
   line-height: 19px;
@@ -46,35 +47,3 @@ export const Jumbo = styled.span`
   font-size: ${props => props.theme.sizes.xl};
   line-height: 38px;
 `;
-
-export const SmallText = styled.span<BlockProps>`
-  ${props => props.block && 'display: block;'}
-  font-size: ${props => props.theme.sizes.s};
-  letter-spacing: 0.22px;
-`;
-
-export const LargeText = styled.span<BlockProps>`
-  ${props => props.block && 'display: block;'}
-  font-size: ${props => props.theme.sizes.l};
-  letter-spacing: 0.43px;
-`;
-
-export const XLargeText = styled.span<BlockProps>`
-  ${props => props.block && 'display: block;'}
-  font-size: ${props => props.theme.sizes.xl};
-  letter-spacing: 0.43px;
-`;
-
-export const PageTitle = styled.h2`
-  font-family: ${props => props.theme.fonts.open.light};
-  font-size: ${props => props.theme.sizes.l};
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 2.7px;
-  line-height: 30px;
-`;
-
-export const H3Text = styled.h3`
-  font-family: ${props => props.theme.fonts.open.bold};
-  font-size: ${props => props.theme.sizes.m};
-`;

app/src/components/loop/LoopHistory.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'store';
 import { Column, Row } from 'components/common/grid';
-import { SmallText } from 'components/common/text';
+import { Small } from 'components/common/text';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
 import SwapDot from './SwapDot';
@@ -11,9 +11,11 @@ const Styled = {
   RightColumn: styled(Column)`
     text-align: right;
   `,
-  SmallText: styled(SmallText)`
+  SmallText: styled(Small)`
+    display: inline-block;
     line-height: 1;
     margin-left: 10px;
+    margin-bottom: 0;
   `,
 };
 

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, HeaderFour, SmallText } from 'components/common/text';
+import { HeaderFive, HeaderFour, Small } from 'components/common/text';
 import { styled } from 'components/theme';
 
 const Styled = {
@@ -13,10 +13,7 @@ const Styled = {
     justify-content: space-between;
     max-width: 240px;
   `,
-  Heading: styled(H3Text)`
-    margin-top: 10px;
-  `,
-  Description: styled(SmallText)`
+  Description: styled(Small)`
     opacity: 0.5;
   `,
   Channels: styled.div`
@@ -34,12 +31,12 @@ const StepSummary: React.FC<Props> = ({ title, heading, description }) => {
   const { l } = usePrefixedTranslation('cmps.loop.swap.StepSummary');
   const { buildSwapStore } = useStore();
 
-  const { Wrapper, Heading, Description } = Styled;
+  const { Wrapper, Description } = Styled;
   return (
     <Wrapper>
       <div>
         <HeaderFour>{title}</HeaderFour>
-        <Heading>{heading}</Heading>
+        <HeaderFive>{heading}</HeaderFive>
         <Description>{description}</Description>
       </div>
       <div>

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 { HeaderFour, XLargeText } from 'components/common/text';
+import { HeaderFour, Jumbo } from 'components/common/text';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
 import StepButtons from './StepButtons';
@@ -70,9 +70,9 @@ const SwapReviewStep: React.FC = () => {
           <Divider />
           <InvoiceRow>
             <HeaderFour marginless>{l('total')}</HeaderFour>
-            <XLargeText>
+            <Jumbo>
               <Unit sats={buildSwapStore.invoiceTotal} />
-            </XLargeText>
+            </Jumbo>
           </InvoiceRow>
         </div>
         <StepButtons