Handle when API returns no SBCs, with better styling

src/components/blocks/Sbcs.js

@@ -1,9 +1,23 @@
 import React, { useState, useEffect, useContext } from 'react';
 import axios from 'axios';
+import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
 import { NotificationDispatchContext } from '../../contexts/NotificationContext';
 
-const Sbcs = () => {
+const Container = styled.div`
+  margin-top: 0.25rem;
+  ${props => props.centered && `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    & ul {
+      padding: 0;
+      margin-bottom: 0;
+    }
+  `}
+`;
+
+const Sbcs = props => {
   let history = useHistory();
   const dispatch = useContext(NotificationDispatchContext);
   const [ sbcs, setSbcs ] = useState('');
@@ -52,25 +66,24 @@ const Sbcs = () => {
     // eslint-disable-next-line
   }, []);
 
+  const text = 'Have your SIP trunking provider(s) send calls to';
   return (
-    <div style={{ margin: '1rem 0 1.5rem' }}>
-      Have your SIP trunking provider(s) send calls to
-      {sbcs.length > 1
-        ? <React.Fragment>
-            {':'}
-            <ul>
-              {sbcs.map(sbc => (
-                <li key={sbc.sbc_address_sid}>
-                  {`${sbc.ipv4}:${sbc.port}`}
-                </li>
-              ))}
-            </ul>
-          </React.Fragment>
-        : sbcs.length === 1
-          ? ` ${sbcs[0].ipv4}:${sbcs[0].port}`
-          : null
-      }
-    </div>
+    sbcs.length > 1
+      ? <Container centered={props.centered}>
+          {text}:
+          <ul>
+            {sbcs.map(sbc => (
+              <li key={sbc.sbc_address_sid}>
+                {`${sbc.ipv4}:${sbc.port}`}
+              </li>
+            ))}
+          </ul>
+        </Container>
+      : sbcs.length === 1
+        ? <Container>
+            {text} {sbcs[0].ipv4}:{sbcs[0].port}
+          </Container>
+        : null
   );
 };
 

src/components/elements/H1.js

@@ -2,7 +2,7 @@ import styled from 'styled-components/macro';
 
 const H1 = styled.h1`
   font-size: 3rem;
-  margin: 1rem 0 0;
+  margin: 1rem 0;
   font-weight: normal;
 `;
 

src/components/pages/setup/ConfigureSipTrunk.js

@@ -11,7 +11,7 @@ const ConfigureSipTrunk = () => {
     <SetupTemplate
       wide
       title="Configure SIP Trunk"
-      subtitle={<Sbcs />}
+      subtitle={<Sbcs centered />}
       progress={3}
     >
       <SipTrunkForm

src/components/templates/InternalTemplate.js

@@ -13,11 +13,8 @@ const PageMain = styled.main`
   padding: 2.5rem 3rem;
 `;
 
-const P = styled.p`
-  margin: 0.75rem 0 1.5rem;
-`;
-
 const ContentContainer = styled.div`
+  margin-top: 1.5rem;
   background: #FFF;
   border-radius: 0.5rem;
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1),
@@ -61,9 +58,9 @@ const InternalTemplate = props => {
           to={props.addButtonLink}
         />
       )}
-      {typeof props.subtitle === 'object'
-        ? props.subtitle
-        : <P>{props.subtitle}</P>
+      {props.subtitle
+        ? <div>{props.subtitle}</div>
+        : null
       }
       <ContentContainer
         type={props.type}

src/components/templates/SetupTemplate.js

@@ -14,8 +14,8 @@ const StyledH1 = styled(H1)`
   text-align: center;
 `;
 
-const P = styled.p`
-  margin: 0.75rem 0 1.5rem;
+const Subtitle = styled.div`
+  margin: -0.25rem 0 0.25rem;
   text-align: center;
 `;
 
@@ -30,6 +30,7 @@ const ContentContainer = styled.div`
   }) {
     width: 100%;
   }
+  margin-top: 1.25rem;
   background: #FFF;
   border-radius: 0.5rem;
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1),
@@ -49,10 +50,9 @@ const SetupTemplate = props => (
   <PageContainer>
     <ProgressVisualization progress={props.progress} />
     <StyledH1>{props.title}</StyledH1>
-    {
-      typeof props.subtitle === 'object'
-        ? props.subtitle
-        : <P>{props.subtitle}</P>
+    {props.subtitle
+      ? <Subtitle>{props.subtitle}</Subtitle>
+      : null
     }
     <ContentContainer wide={props.wide}>
       {props.children}