From b7b686ff6bf98bb17199cf73b77536c9a8561643 Mon Sep 17 00:00:00 2001
From: user <james@jamesnuanez.com>
Date: Mon, 1 Jun 2020 11:17:42 -0700
Subject: [PATCH] Handle when API returns no SBCs, with better styling

---
 src/components/blocks/Sbcs.js                 | 51 ++++++++++++-------
 src/components/elements/H1.js                 |  2 +-
 .../pages/setup/ConfigureSipTrunk.js          |  2 +-
 src/components/templates/InternalTemplate.js  | 11 ++--
 src/components/templates/SetupTemplate.js     | 12 ++---
 5 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/components/blocks/Sbcs.js b/src/components/blocks/Sbcs.js
index 40093f0..441353c 100644
--- a/src/components/blocks/Sbcs.js
+++ b/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
   );
 };
 
diff --git a/src/components/elements/H1.js b/src/components/elements/H1.js
index c0ada32..782e30f 100644
--- a/src/components/elements/H1.js
+++ b/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;
 `;
 
diff --git a/src/components/pages/setup/ConfigureSipTrunk.js b/src/components/pages/setup/ConfigureSipTrunk.js
index 727f5d5..f011d93 100644
--- a/src/components/pages/setup/ConfigureSipTrunk.js
+++ b/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
diff --git a/src/components/templates/InternalTemplate.js b/src/components/templates/InternalTemplate.js
index f7a3581..cc93258 100644
--- a/src/components/templates/InternalTemplate.js
+++ b/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}
diff --git a/src/components/templates/SetupTemplate.js b/src/components/templates/SetupTemplate.js
index 70e14f1..a55df5f 100644
--- a/src/components/templates/SetupTemplate.js
+++ b/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}