From 3db97f1bec3a748e349e15a3260d275be98c0466 Mon Sep 17 00:00:00 2001
From: gingervitis <omqmail@gmail.com>
Date: Mon, 1 Feb 2021 14:12:26 -0800
Subject: [PATCH] streamkey field style update

---
 web/pages/components/config/constants.tsx     |  2 +-
 .../components/config/edit-server-details.tsx | 14 +++++++------
 web/styles/config.scss                        | 20 +++++++++----------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/web/pages/components/config/constants.tsx b/web/pages/components/config/constants.tsx
index cf6ec3606..10111bed0 100644
--- a/web/pages/components/config/constants.tsx
+++ b/web/pages/components/config/constants.tsx
@@ -97,7 +97,7 @@ export const TEXTFIELD_PROPS_STREAM_KEY = {
   maxLength: TEXT_MAXLENGTH,
   placeholder: 'abc123',
   label: 'Stream Key',
-  tip: 'Secret stream key',
+  tip: 'Save this key somewhere safe, you will need it to stream or login to the admin dashboard!',
   required: true,
 };
 export const TEXTFIELD_PROPS_FFMPEG = {
diff --git a/web/pages/components/config/edit-server-details.tsx b/web/pages/components/config/edit-server-details.tsx
index 2164e70c3..679922121 100644
--- a/web/pages/components/config/edit-server-details.tsx
+++ b/web/pages/components/config/edit-server-details.tsx
@@ -75,16 +75,18 @@ export default function EditInstanceDetails() {
             onChange={handleFieldChange}
           />
           <div className="streamkey-actions">
-            <Tooltip className="copy-tooltip" title="Copied!" trigger="" visible={copyIsVisible}>
+            <Tooltip title="Generate a stream key">
+              <Button icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
+            </Tooltip>
+
+            <Tooltip
+              className="copy-tooltip"
+              title={copyIsVisible ? 'Copied!' : 'Copy to clipboard'}
+            >
               <Button icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
             </Tooltip>
-            <Button icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
           </div>
         </div>
-        <div className="streamkey-notice">
-          Save this key somewhere safe, you will need it to stream or login to the admin
-          dashboard!
-        </div>
       </div>
       <TextFieldWithSubmit
         fieldName="ffmpegPath"
diff --git a/web/styles/config.scss b/web/styles/config.scss
index 74b584599..769433842 100644
--- a/web/styles/config.scss
+++ b/web/styles/config.scss
@@ -355,6 +355,10 @@
 
 
 .field-streamkey-container {
+  margin-bottom: 1.5em;
+  .field-tip {
+    color: var(--ant-warning);
+  }
   .left-side {
     display: flex;
     flex-direction: row;
@@ -362,21 +366,15 @@
   }
   .textfield-with-submit-container {
     margin-bottom: 0;
-    .textfield-container {
-     max-width: 400px;
-    }
   }
 
   .streamkey-actions {
-    max-width: 90px;
+    white-space: nowrap;
     button {
       margin: .25em;
     }
+    @media (max-width: 800px) {
+      margin-top: 2em;
+    }
   }
-  .streamkey-notice {
-    font-size: 0.75em;
-    color: var(--ant-error);
-    margin-left: 12em;
-    margin-bottom: 1em;
-  }
-}
\ No newline at end of file
+}