streamkey field style update

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 = {

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"

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;
     }
-  }
-  .streamkey-notice {
-    font-size: 0.75em;
-    color: var(--ant-error);
-    margin-left: 12em;
-    margin-bottom: 1em;
+    @media (max-width: 800px) {
+      margin-top: 2em;
+    }
   }
 }