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 (
-
- Have your SIP trunking provider(s) send calls to
- {sbcs.length > 1
- ?
- {':'}
-
- {sbcs.map(sbc => (
- -
- {`${sbc.ipv4}:${sbc.port}`}
-
- ))}
-
-
- : sbcs.length === 1
- ? ` ${sbcs[0].ipv4}:${sbcs[0].port}`
- : null
- }
-
+ sbcs.length > 1
+ ?
+ {text}:
+
+ {sbcs.map(sbc => (
+ -
+ {`${sbc.ipv4}:${sbc.port}`}
+
+ ))}
+
+
+ : sbcs.length === 1
+ ?
+ {text} {sbcs[0].ipv4}:{sbcs[0].port}
+
+ : 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 = () => {
}
+ subtitle={}
progress={3}
>
{
to={props.addButtonLink}
/>
)}
- {typeof props.subtitle === 'object'
- ? props.subtitle
- : {props.subtitle}
+ {props.subtitle
+ ? {props.subtitle}
+ : null
}
(
{props.title}
- {
- typeof props.subtitle === 'object'
- ? props.subtitle
- : {props.subtitle}
+ {props.subtitle
+ ? {props.subtitle}
+ : null
}
{props.children}