From 51b3fc1f76a2018bca5e01bedf3ab5aee14a0461 Mon Sep 17 00:00:00 2001
From: Thilo Billerbeck <thilo.billerbeck@officerent.de>
Date: Fri, 28 May 2021 00:58:31 +0200
Subject: [PATCH] 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             |  1 +
 web/pages/offline-notice.tsx   | 35 ++++++++++++++--------------------
 web/styles/globals.scss        | 13 -------------
 web/styles/offline-notice.scss | 26 +++++++++++++++++++++++++
 4 files changed, 41 insertions(+), 34 deletions(-)
 create mode 100644 web/styles/offline-notice.scss

diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index fad9a31e8..4322f14e8 100644
--- a/web/pages/_app.tsx
+++ b/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';
diff --git a/web/pages/offline-notice.tsx b/web/pages/offline-notice.tsx
index b2acd1f8b..f96dc5b45 100644
--- a/web/pages/offline-notice.tsx
+++ b/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>
       ),
     },
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index b1393b02d..5652868ca 100644
--- a/web/styles/globals.scss
+++ b/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 {
diff --git a/web/styles/offline-notice.scss b/web/styles/offline-notice.scss
new file mode 100644
index 000000000..f0c0fd3ee
--- /dev/null
+++ b/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:
+    '. .'
+    '. .';
+}