streamkey field style update

This commit is contained in:
gingervitis 2021-02-01 14:12:26 -08:00
parent ad00991f93
commit 3db97f1bec
3 changed files with 18 additions and 18 deletions

View file

@ -97,7 +97,7 @@ export const TEXTFIELD_PROPS_STREAM_KEY = {
maxLength: TEXT_MAXLENGTH, maxLength: TEXT_MAXLENGTH,
placeholder: 'abc123', placeholder: 'abc123',
label: 'Stream Key', 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, required: true,
}; };
export const TEXTFIELD_PROPS_FFMPEG = { export const TEXTFIELD_PROPS_FFMPEG = {

View file

@ -75,16 +75,18 @@ export default function EditInstanceDetails() {
onChange={handleFieldChange} onChange={handleFieldChange}
/> />
<div className="streamkey-actions"> <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} /> <Button icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
</Tooltip> </Tooltip>
<Button icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
</div> </div>
</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> </div>
<TextFieldWithSubmit <TextFieldWithSubmit
fieldName="ffmpegPath" fieldName="ffmpegPath"

View file

@ -355,6 +355,10 @@
.field-streamkey-container { .field-streamkey-container {
margin-bottom: 1.5em;
.field-tip {
color: var(--ant-warning);
}
.left-side { .left-side {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -362,21 +366,15 @@
} }
.textfield-with-submit-container { .textfield-with-submit-container {
margin-bottom: 0; margin-bottom: 0;
.textfield-container {
max-width: 400px;
}
} }
.streamkey-actions { .streamkey-actions {
max-width: 90px; white-space: nowrap;
button { button {
margin: .25em; 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;
}
}