rework stream info box in offline notice to conform more with the overall design (#196)

* rework stream info field to conform with the offline page layout

* moved offline notice css to separate file

* used ant design bold text option

web/pages/_app.tsx

@@ -18,6 +18,7 @@ import '../styles/config-public-details.scss';
 import '../styles/home.scss';
 import '../styles/chat.scss';
 import '../styles/pages.scss';
+import '../styles/offline-notice.scss';
 
 import { AppProps } from 'next/app';
 import ServerStatusProvider from '../utils/server-status-context';

web/pages/offline-notice.tsx

@@ -43,27 +43,20 @@ export default function Offline({ logs = [], config }) {
             Learn how to point your existing software to your new server and start streaming your
             content.
           </a>
-          <Row align="middle">
-            <Col flex="none">
-              <Text>Streaming URL:</Text>
-            </Col>
-            <Col flex="auto">
-              <Paragraph className="stream-info-box" copyable>
-                {generateStreamURL(instanceUrl, rtmpServerPort)}
-              </Paragraph>
-            </Col>
-          </Row>
-
-          <Row align="middle">
-            <Col flex="none">
-              <Text>Stream Key:</Text>
-            </Col>
-            <Col flex="auto">
-              <Paragraph className="stream-info-box" copyable={{ text: streamKey }}>
-                *********************
-              </Paragraph>
-            </Col>
-          </Row>
+          <div className="stream-info-container">
+            <Text strong className="stream-info-label">
+              Streaming URL:
+            </Text>
+            <Paragraph className="stream-info-box" copyable>
+              {generateStreamURL(instanceUrl, rtmpServerPort)}
+            </Paragraph>
+            <Text strong className="stream-info-label">
+              Stream Key:
+            </Text>
+            <Paragraph className="stream-info-box" copyable={{ text: streamKey }}>
+              *********************
+            </Paragraph>
+          </div>
         </div>
       ),
     },

web/styles/globals.scss

@@ -99,19 +99,6 @@ strong {
   }
 }
 
-.stream-info-box {
-  font-size: 0.8em;
-  background-color: var(--purple-dark);
-  padding: 0.25rem 0.5rem;
-  margin-left: 0.5rem;
-  color: var(--white);
-  margin-bottom: 0px !important;
-
-  .ant-typography-copy {
-    font-size: 0.92em;
-  }
-}
-
 input {
   &:not(:focus) {
     &:invalid {

web/styles/offline-notice.scss

@@ -0,0 +1,26 @@
+.stream-info-box {
+  background-color: var(--purple-dark);
+  color: var(--white);
+  padding: 0.25rem 0.5rem;
+  .ant-typography-copy {
+    margin-left: 0.25rem;
+  }
+  margin: 0 !important;
+}
+
+.stream-info-label {
+  align-self: center;
+  text-align: right;
+  margin: 0;
+}
+
+.stream-info-container {
+  margin: 8px 0 4px 0;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  grid-template-rows: min-content min-content;
+  gap: 8px 8px;
+  grid-template-areas:
+    '. .'
+    '. .';
+}