pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

a bit of refactor, use context for overall broacast status; move files around for routing

pull/1886/head
Ginger Wong 5 years ago
parent
2b278c45e1
commit
a062856726
15 changed files with 406 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      web/favicon.ico
  2. 1
      web/package.json
  3. 20
      web/pages/_app.tsx
  4. 18
      web/pages/broadcast-info.tsx
  5. 15
      web/pages/components/broadcast-info.tsx
  6. 85
      web/pages/components/logo.tsx
  7. 119
      web/pages/components/main-layout.tsx
  8. 3
      web/pages/connected-clients.tsx
  9. 2
      web/pages/hardware-info.tsx
  10. 12
      web/pages/home.tsx
  11. 45
      web/pages/index2.tsx
  12. 40
      web/pages/update-server-config.tsx
  13. 51
      web/pages/utils/broadcast-status-context.tsx
  14. 5
      web/pages/viewer-info.tsx
  15. 69
      web/styles/styles.module.css

BIN
web/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

1
web/package.json
Unescape View File

@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
"dependencies": {
"@ant-design/icons": "^4.2.2",
"antd": "^4.6.6",
"classnames": "^2.2.6",
"d3-scale": "^3.2.3",
"d3-time-format": "^3.0.0",
"next": "9.5.3",

20
web/pages/_app.tsx
Unescape View File

@ -1,15 +1,21 @@ @@ -1,15 +1,21 @@
// import 'antd/dist/antd.css';
// import '../styles/globals.scss'
import 'antd/dist/antd.dark.css';
import 'antd/dist/antd.compact.css';
import "../styles/globals.scss";
import { AppProps } from 'next/app'
import { AppProps } from 'next/app';
import BroadcastStatusProvider from './utils/broadcast-status-context';
import MainLayout from './components/main-layout';
function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
return (
<BroadcastStatusProvider>
<MainLayout>
<Component {...pageProps} />
</MainLayout>
</BroadcastStatusProvider>
)
}
export default App
export default App;

18
web/pages/broadcast-info.tsx
Unescape View File

@ -0,0 +1,18 @@ @@ -0,0 +1,18 @@
import React, { useContext } from 'react';
import { BroadcastStatusContext } from './utils/broadcast-status-context';
export default function BroadcastInfo() {
const context = useContext(BroadcastStatusContext);
const { broadcaster } = context || {};
const { remoteAddr, time, streamDetails } = broadcaster || {};
return (
<div style={{border: '1px solid green', width: '100%'}}>
<h2>Broadcast Info</h2>
<p>Remote Address: {remoteAddr}</p>
<p>Time: {(new Date(time)).toLocaleTimeString()}</p>
<p>Stream Details: {JSON.stringify(streamDetails)}</p>
</div>
);
}

15
web/pages/components/broadcast-info.tsx
Unescape View File

@ -1,15 +0,0 @@ @@ -1,15 +0,0 @@
import React, { useState, useEffect } from 'react';
export default function BroadcastInfo(props) {
const { remoteAddr, streamDetails, time } = props;
return (
<div style={{border: '1px solid green', width: '100%'}}>
<h2>Broadcast Info</h2>
<p>Remote Address: {remoteAddr}</p>
<p>Time: {(new Date(time)).toLocaleTimeString()}</p>
<p>Stream Details: {JSON.stringify(streamDetails)}</p>
</div>
);
}

85
web/pages/components/logo.tsx
Unescape View File

@ -0,0 +1,85 @@ @@ -0,0 +1,85 @@
import React from 'react';
import adminStyles from '../../styles/styles.module.css';
export default function Logo() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.68623352050781 104.46271514892578" className={adminStyles.logoSVG}>
<g transform="matrix(1 0 0 1 -37.08803939819336 -18.940391540527344)">
<g>
<g>
<g>
<g transform="matrix(1.0445680396949917 0 0 1.0445679172996596 36.34559138380523 18.877718021903796)">
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient120" gradientTransform="rotate(-90 .5 .5)">
<stop offset="0" stopColor="#1f2022" stopOpacity="1"/>
<stop offset="1" stopColor="#635e69" stopOpacity="1"/>
</linearGradient>
</defs>
<path fill="url(#gradient120)" d="M91.5 75.35Q93.05 71.15 91.65 67.7 90.35 64.5 86.65 62.3 83.2 60.3 78.3 59.4 73.85 58.6 68.6 58.7 63.55 58.85 58.8 59.8 54.25 60.75 50.8 62.2 47.4 63.65 45.5 65.35 43.6 67.15 43.5 69.05 43.35 71.3 45.8 73.9 48.05 76.3 52.1 78.6 56.15 80.9 61.05 82.55 66.3 84.3 71.4 84.8 74.7 85.1 77.55 84.9 80.65 84.6 83.3 83.6 86.15 82.5 88.15 80.55 90.4 78.4 91.5 75.35M70.6 67.5Q72.3 68.4 73.1 69.7 73.9 71.15 73.45 73 73.1 74.3 72.3 75.25 71.55 76.1 70.3 76.6 69.25 77.05 67.75 77.25 66.3 77.4 64.85 77.3 62.3 77.15 59.25 76.3 56.6 75.5 54.15 74.3 51.9 73.2 50.45 72 49.05 70.75 49.1 69.8 49.2 69 50.25 68.25 51.3 67.55 53.15 67 55 66.4 57.25 66.1 59.8 65.8 62.1 65.8 64.65 65.85 66.7 66.2 68.9 66.65 70.6 67.5Z"/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient121" gradientTransform="rotate(-180 .5 .5)">
<stop offset="0" stopColor="#2087e2" stopOpacity="1"/>
<stop offset="1" stopColor="#b63fff" stopOpacity="1"/>
</linearGradient>
</defs>
<path fill="url(#gradient121)" d="M66.6 15.05Q66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.75 18.45 32.7 23.4 31.7 28.05 31.35 32.85 31.05 37.2 31.3 41.2 31.6 45.15 32.4 48.35 34 54.9 37.3 56.4 37.6 56.55 37.9 56.65L39.2 56.85Q39.45 56.85 39.95 56.8 42.05 56.6 44.7 55.05 47.25 53.5 50.05 50.8 53.05 47.9 55.85 44.05 58.8 40.05 61.1 35.6 63.8 30.35 65.25 25.3 66.75 19.75 66.6 15.05M47.55 23.15Q48.05 23.25 48.4 23.4 52.45 24.8 52.55 29.85 52.6 34 50 39.4 47.85 43.9 44.85 47.3 42.05 50.5 40.15 50.7L39.9 50.75 39.45 50.7 39.2 50.6Q37.8 49.95 37.25 46.35 36.7 42.7 37.3 38 37.95 32.75 39.75 28.8 41.9 24.1 45.05 23.25 45.6 23.1 45.85 23.1 46.25 23.05 46.65 23.05 47.05 23.05 47.55 23.15Z"/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient122" gradientTransform="rotate(-90 .5 .5)">
<stop offset="0" stopColor="#100f0f" stopOpacity="1"/>
<stop offset="1" stopColor="#49261F" stopOpacity="1"/>
</linearGradient>
</defs>
<path fill="url(#gradient122)" d="M2.7 33.6Q2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7 0 42.6 2.2 47.2 4 51 8 54.35 11.55 57.3 16 59.15 20.5 61 23.85 60.85 24.5 60.85 25.25 60.7 26 60.55 26.5 60.3 27 60.05 27.45 59.65 27.9 59.25 28.15 58.75 29.35 56.45 27.5 51.65 25.6 47 21.75 42.1 17.75 37 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6M10.1 43.55Q10.35 43.1 10.6 42.85 10.85 42.6 11.2 42.4 11.6 42.25 11.9 42.2 13.5 41.9 15.95 43.6 18.15 45.05 20.35 47.7 22.35 50.1 23.55 52.4 24.7 54.75 24.25 55.7 24.15 55.9 24 56 23.85 56.2 23.65 56.25 23.55 56.35 23.25 56.4L22.7 56.5Q21.1 56.6 18.55 55.6 16.05 54.6 13.85 52.95 11.5 51.2 10.35 49.15 9.05 46.8 9.75 44.45 9.9 43.95 10.1 43.55Z"/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient123" gradientTransform="rotate(-180 .5 .5)">
<stop offset="0" stopColor="#222020" stopOpacity="1"/>
<stop offset="1" stopColor="#49261F" stopOpacity="1"/>
</linearGradient>
</defs>
<path fill="url(#gradient123)" d="M34.95 74.2L34.75 74.2Q33.2 74.15 31.9 75.25 30.7 76.3 29.85 78.25 29.1 80 28.8 82.2 28.5 84.4 28.7 86.65 29.1 91.4 31.5 94.7 34.3 98.5 39.3 99.7L39.4 99.7 39.7 99.8 39.85 99.8Q45.3 100.85 47.15 97.75 48 96.3 48 94.05 47.95 91.9 47.2 89.35 46.45 86.75 45.1 84.15 43.75 81.5 42.05 79.35 40.25 77.1 38.45 75.75 36.55 74.35 34.95 74.2M33.55 80.4Q34.35 78.2 35.6 78.3L35.65 78.3Q36.9 78.45 38.6 80.9 40.3 83.35 41.15 86.05 42.1 89 41.55 90.75 40.9 92.6 38.35 92.25L38.3 92.25 38.25 92.2 38.1 92.2Q35.6 91.7 34.25 89.6 33.1 87.7 32.95 85 32.8 82.35 33.55 80.4Z"/>
</g>
<g transform="matrix(0.9999999999999999 0 0 1 0 5.684341886080802e-14)">
<defs>
<linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient124" gradientTransform="rotate(-180 .5 .5)"> <stop offset="0" stopColor="#1e1c1c" stopOpacity="1"/>
<stop offset="1" stopColor="#49261F" stopOpacity="1"/>
</linearGradient>
</defs>
<path fill="url(#gradient124)" d="M22.7 69.65Q22.25 69.3 21.6 69.05 20.95 68.8 20.25 68.7 19.6 68.55 18.85 68.5 16.7 68.45 14.65 69.15 12.65 69.8 11.4 71.1 10.15 72.5 10.2 74.2 10.25 76.05 11.95 78.2 12.4 78.75 13.05 79.4 13.55 79.9 14.2 80.3 14.7 80.6 15.3 80.85 16 81.1 16.4 81.1 18.2 81.35 19.9 80.35 21.55 79.4 22.75 77.65 24 75.85 24.3 73.95 24.6 71.85 23.55 70.5 23.15 70 22.7 69.65M21.7 71.7Q22.15 72.3 21.9 73.3 21.7 74.25 21 75.25 20.3 76.2 19.4 76.75 18.45 77.35 17.55 77.25L17 77.15Q16.7 77.05 16.45 76.85 16.25 76.75 15.9 76.45 15.7 76.25 15.4 75.9 14.5 74.75 14.7 73.8 14.8 72.95 15.75 72.3 16.6 71.7 17.8 71.4 19 71.1 20.1 71.15L20.65 71.2 21.1 71.3Q21.3 71.4 21.45 71.5L21.7 71.7Z"/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient125" gradientTransform="rotate(-360 .5 .5)">
<stop offset="0" stopColor="#FFFFFF" stopOpacity="0.5"/>
<stop offset="1" stopColor="#FFFFFF" stopOpacity="0.2"/>
</linearGradient>
</defs>
<path fill="url(#gradient125)" d="M52.6 19.25Q59.6 19.25 66.2 20.95 66.7 17.8 66.6 15.05 66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.85 18.3 32.8 22.85 42.25 19.25 52.6 19.25Z"/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient126" gradientTransform="rotate(-360 .5 .5)">
<stop offset="0" stopColor="#FFFFFF" stopOpacity="0.5"/>
<stop offset="1" stopColor="#FFFFFF" stopOpacity="0.2"/>
</linearGradient>
</defs>
<path fill="url(#gradient126)" d="M1.05 37.7Q0 42.6 2.2 47.2 2.95 48.8 4.05 50.25 7.55 41.65 14.4 34.75 14 34.45 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6 2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7Z"/>
</g>
</g>
</g>
<g transform="matrix(1.219512230276127 0 0 1.2195122143630526 32.82519274395008 88.56945194723018)">
<path fill="#000000" fillOpacity="1" d=""/>
</g>
</g>
</g>
</g>
</svg>
);
}

119
web/pages/components/main-layout.tsx
Unescape View File

@ -0,0 +1,119 @@ @@ -0,0 +1,119 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { Layout, Menu } from 'antd';
import {
SettingOutlined,
HomeOutlined,
LineChartOutlined,
CloseCircleOutlined,
PlayCircleFilled,
} from '@ant-design/icons';
import classNames from 'classNames';
import OwncastLogo from './logo';
import { BroadcastStatusContext } from '../utils/broadcast-status-context';
import adminStyles from '../../styles/styles.module.css';
export default function MainLayout(props) {
const { children } = props;
const context = useContext(BroadcastStatusContext);
const { broadcastActive } = context || {};
const router = useRouter();
const { route } = router || {};
const { Header, Footer, Content, Sider } = Layout;
const { SubMenu } = Menu;
const statusMessage = broadcastActive ?
'Online' : 'Offline';
const appClass = classNames({
'owncast-layout': true,
[adminStyles.online]: broadcastActive,
})
return (
<Layout className={appClass}>
<Sider
width={240}
style={{
overflow: 'auto',
height: '100vh',
}}
>
<Menu
theme="dark"
defaultSelectedKeys={[route.substring(1)]}
defaultOpenKeys={['current-stream-menu', 'utilities-menu']}
mode="inline"
>
<h1 className={adminStyles.owncastTitleContainer}>
<span className={adminStyles.logoContainer}>
<OwncastLogo />
</span>
<span className={adminStyles.owncastTitle}>Owncast Admin</span>
</h1>
<Menu.Item key="home" icon={<HomeOutlined />}>
<Link href="/index2">Home</Link>
</Menu.Item>
<SubMenu key="current-stream-menu" icon={<LineChartOutlined />} title="Stream Details">
<Menu.Item key="hardware-info">
<Link href="/hardware-info">Hardware</Link>
</Menu.Item>
<Menu.Item key="broadcast-info">
<Link href="/broadcast-info">Broadcaster Info</Link>
</Menu.Item>
<Menu.Item key="viewer-info">
<Link href="/viewer-info">Viewers</Link>
</Menu.Item>
<Menu.Item key="connected-clients">
<Link href="/connected-clients">Connected Clients</Link>
</Menu.Item>
{ broadcastActive ? (
<Menu.Item key="disconnect-stream" icon={<CloseCircleOutlined />}>
<Link href="/disconnect-stream">Disconnect Stream...</Link>
</Menu.Item>
) : null}
</SubMenu>
<SubMenu key="utilities-menu" icon={<SettingOutlined />} title="Utilities">
<Menu.Item key="update-server-config">
<Link href="/update-server-config">Update Server Configuration</Link>
</Menu.Item>
<Menu.Item key="update-stream-key">
<Link href="/update-stream-key">Change Stream Key</Link>
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header className={adminStyles.header}>
<div className={adminStyles.statusIndicatorContainer}>
<span className={adminStyles.statusIcon}>
<PlayCircleFilled />
</span>
<span className={adminStyles.statusLabel}>
{statusMessage}
</span>
</div>
</Header>
<Content className={adminStyles.contentMain}>
{children}
</Content>
<Footer style={{ textAlign: 'center' }}><a href="https://owncast.online/">About Owncast</a></Footer>
</Layout>
</Layout>
);
}
MainLayout.propTypes = {
children: PropTypes.element.isRequired,
};

3
web/pages/components/connected-clients.tsx → web/pages/connected-clients.tsx
Unescape View File

@ -1,7 +1,7 @@ @@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
import { CONNECTED_CLIENTS, fetchData, FETCH_INTERVAL } from '../utils/apis';
import { CONNECTED_CLIENTS, fetchData, FETCH_INTERVAL } from './utils/apis';
/*
geo data looks like this
@ -71,7 +71,6 @@ export default function HardwareInfo() { @@ -71,7 +71,6 @@ export default function HardwareInfo() {
},
];
console.log({clients})
return (
<div>
<h2>Connected Clients</h2>

2
web/pages/components/hardware-info.tsx → web/pages/hardware-info.tsx
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { HARDWARE_STATS, fetchData, FETCH_INTERVAL } from '../utils/apis';
import { HARDWARE_STATS, fetchData, FETCH_INTERVAL } from './utils/apis';
export default function HardwareInfo() {
const [hardwareStatus, setHardwareStatus] = useState({});

12
web/pages/home.tsx
Unescape View File

@ -1,12 +0,0 @@ @@ -1,12 +0,0 @@
import React from 'react';
import adminStyles from './components/styles.module.css';
export default function HomeView(props) {
return (
<div>
&lt; pick something
</div>
);
}

45
web/pages/index2.tsx
Unescape View File

@ -1,43 +1,10 @@ @@ -1,43 +1,10 @@
import React, { useState, useEffect } from 'react';
import { BROADCASTER, fetchData, FETCH_INTERVAL } from './utils/apis';
import MainLayout from './components/main-layout';
import Home from './home';
import React from 'react';
export default function Admin() {
const [broadcasterStatus, setBroadcasterStatus] = useState({});
const [count, setCount] = useState(0);
const getBroadcastStatus = async () => {
try {
const result = await fetchData(BROADCASTER);
const broadcastActive = !!result.broadcaster;
console.log("====",{count, result})
setBroadcasterStatus({ ...result, broadcastActive });
setCount(c => c + 1);
} catch (error) {
setBroadcasterStatus({ ...broadcasterStatus, message: error.message });
}
};
useEffect(() => {
let getStatusIntervalId = null;
getBroadcastStatus();
getStatusIntervalId = setInterval(getBroadcastStatus, FETCH_INTERVAL);
// returned function will be called on component unmount
return () => {
clearInterval(getStatusIntervalId);
}
}, [])
export default function AdminHome() {
return (
<MainLayout {...broadcasterStatus} >
<Home />
</MainLayout>
<div>
&lt; pick something<br />
Home view. pretty pictures. Rainbows. Kittens.
</div>
);
}

40
web/pages/update-server-config.tsx
Unescape View File

@ -0,0 +1,40 @@ @@ -0,0 +1,40 @@
import React, { useState, useEffect } from 'react';
import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis';
export default function ServerConfig() {
const [clients, setClients] = useState({});
const getInfo = async () => {
try {
const result = await fetchData(SERVER_CONFIG);
console.log("viewers result", result)
setClients({ ...result });
} catch (error) {
setClients({ ...clients, message: error.message });
}
};
useEffect(() => {
let getStatusIntervalId = null;
getInfo();
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
// returned function will be called on component unmount
return () => {
clearInterval(getStatusIntervalId);
}
}, []);
return (
<div>
<h2>Server Config</h2>
<p>Display this data all pretty, most things will be editable in the future, not now.</p>
<div style={{border: '1px solid pink', height: '300px', width: '100%', overflow:'auto'}}>
{JSON.stringify(clients)}
</div>
</div>
);
}

51
web/pages/utils/broadcast-status-context.tsx
Unescape View File

@ -0,0 +1,51 @@ @@ -0,0 +1,51 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { BROADCASTER, fetchData, FETCH_INTERVAL } from './apis';
const initialState = {
broadcastActive: false,
message: '',
broadcaster: null,
};
export const BroadcastStatusContext = React.createContext(initialState);
const BroadcastStatusProvider = ({ children }) => {
const [broadcasterStatus, setBroadcasterStatus] = useState(initialState);
const getBroadcastStatus = async () => {
try {
const result = await fetchData(BROADCASTER);
const broadcastActive = !!result.broadcaster;
setBroadcasterStatus({ ...result, broadcastActive });
} catch (error) {
setBroadcasterStatus({ ...broadcasterStatus, message: error.message });
}
};
useEffect(() => {
let getStatusIntervalId = null;
getBroadcastStatus();
getStatusIntervalId = setInterval(getBroadcastStatus, FETCH_INTERVAL);
// returned function will be called on component unmount
return () => {
clearInterval(getStatusIntervalId);
}
}, [])
return (
<BroadcastStatusContext.Provider value={broadcasterStatus}>
{children}
</BroadcastStatusContext.Provider>
);
}
BroadcastStatusProvider.propTypes = {
children: PropTypes.element.isRequired,
};
export default BroadcastStatusProvider;

5
web/pages/components/viewer-info.tsx → web/pages/viewer-info.tsx
Unescape View File

@ -1,7 +1,8 @@ @@ -1,7 +1,8 @@
import React, { useState, useEffect } from 'react';
import {timeFormat} from 'd3-time-format';
import { LineChart, XAxis, YAxis, Line, Tooltip } from 'recharts';
import { VIEWERS_OVER_TIME, fetchData } from '../utils/apis';
import { VIEWERS_OVER_TIME, fetchData } from './utils/apis';
const FETCH_INTERVAL = 5 * 60 * 1000; // 5 mins
@ -65,8 +66,6 @@ export default function ViewersOverTime() { @@ -65,8 +66,6 @@ export default function ViewersOverTime() {
/>
</LineChart>
</div>
</div>
);
}

69
web/styles/styles.module.css
Unescape View File

@ -0,0 +1,69 @@ @@ -0,0 +1,69 @@
.logoSVG {
height: 2rem;
width: 2rem;
}
.owncastTitleContainer {
padding: 1rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logoContainer {
background-color: #fff;
padding: .35rem;
border-radius: 9999px;
}
.owncastTitle {
display: inline-block;
margin-left: 1rem;
color: rgba(203,213,224, 1);
font-size: 1.15rem;
font-weight: 200;
text-transform: uppercase;
line-height: normal;
letter-spacing: .05em;
}
.contentMain {
padding: 3em;
}
.header {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.statusIndicatorContainer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.statusIcon {
font-size: 1.5rem;
}
.statusIcon svg {
fill: #ccc;
}
.statusLabel {
color: #fff;
text-transform: uppercase;
font-size: .75rem;
display: inline-block;
margin-left: .5rem;
color: #ccc;
}
.online .statusIcon svg {
fill: #52c41a;
}
.online .statusLabel {
color: #52c41a;
}
/* //844-227-3943 */
Write Preview
Loading…
Cancel
Save