summaryrefslogtreecommitdiffstats
path: root/web/react/components/user_settings
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/user_settings')
-rw-r--r--web/react/components/user_settings/custom_theme_chooser.jsx7
-rw-r--r--web/react/components/user_settings/manage_incoming_hooks.jsx65
-rw-r--r--web/react/components/user_settings/premade_theme_chooser.jsx5
-rw-r--r--web/react/components/user_settings/user_settings_notifications.jsx6
4 files changed, 46 insertions, 37 deletions
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 44630a318..c680d75d1 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -53,9 +53,12 @@ export default class CustomThemeChooser extends React.Component {
const elements = [];
let colors = '';
- Constants.THEME_ELEMENTS.forEach((element) => {
+ Constants.THEME_ELEMENTS.forEach((element, index) => {
elements.push(
- <div className='col-sm-4 form-group'>
+ <div
+ className='col-sm-4 form-group'
+ key={'custom-theme-key' + index}
+ >
<label className='custom-label'>{element.uiName}</label>
<div
className='input-group color-picker'
diff --git a/web/react/components/user_settings/manage_incoming_hooks.jsx b/web/react/components/user_settings/manage_incoming_hooks.jsx
index df089a403..12c041c7f 100644
--- a/web/react/components/user_settings/manage_incoming_hooks.jsx
+++ b/web/react/components/user_settings/manage_incoming_hooks.jsx
@@ -107,23 +107,23 @@ export default class ManageIncomingHooks extends React.Component {
this.state.hooks.forEach((hook) => {
const c = ChannelStore.get(hook.channel_id);
hooks.push(
- <div>
- <div className='divider-light'></div>
- <span>
- <strong>{'URL: '}</strong>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}
- </span>
- <br/>
- <span>
+ <div className='font--small'>
+ <div className='padding-top x2 divider-light'></div>
+ <div className='padding-top x2'>
+ <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span>
+ </div>
+ <div className='padding-top'>
<strong>{'Channel: '}</strong>{c.name}
- </span>
- <br/>
- <a
- className={'btn btn-sm btn-primary'}
- href='#'
- onClick={this.removeHook.bind(this, hook.id)}
- >
- {'Remove'}
- </a>
+ </div>
+ <div className='padding-top'>
+ <a
+ className={'text-danger'}
+ href='#'
+ onClick={this.removeHook.bind(this, hook.id)}
+ >
+ {'Remove'}
+ </a>
+ </div>
</div>
);
});
@@ -134,41 +134,38 @@ export default class ManageIncomingHooks extends React.Component {
} else if (hooks.length > 0) {
displayHooks = hooks;
} else {
- displayHooks = <label>{'None'}</label>;
+ displayHooks = <label>{' None'}</label>;
}
const existingHooks = (
- <div>
- <label className='control-label'>{'Existing incoming webhooks'}</label>
- <br/>
+ <div className='padding-top x2'>
+ <label className='control-label padding-top x2'>{'Existing incoming webhooks'}</label>
{displayHooks}
</div>
);
return (
- <div
- key='addIncomingHook'
- className='form-group'
- >
+ <div key='addIncomingHook'>
<label className='control-label'>{'Add a new incoming webhook'}</label>
- <br/>
- <div>
+ <div className='padding-top'>
<select
ref='channelName'
+ className='form-control'
value={this.state.channelId}
onChange={this.updateChannelId}
>
{options}
</select>
- <br/>
{serverError}
- <a
- className={'btn btn-sm btn-primary' + disableButton}
- href='#'
- onClick={this.addNewHook}
- >
- {'Add'}
- </a>
+ <div className='padding-top'>
+ <a
+ className={'btn btn-sm btn-primary' + disableButton}
+ href='#'
+ onClick={this.addNewHook}
+ >
+ {'Add'}
+ </a>
+ </div>
</div>
{existingHooks}
</div>
diff --git a/web/react/components/user_settings/premade_theme_chooser.jsx b/web/react/components/user_settings/premade_theme_chooser.jsx
index e6aa2f5b9..f8f916bd0 100644
--- a/web/react/components/user_settings/premade_theme_chooser.jsx
+++ b/web/react/components/user_settings/premade_theme_chooser.jsx
@@ -23,7 +23,10 @@ export default class PremadeThemeChooser extends React.Component {
}
premadeThemes.push(
- <div className='col-sm-3 premade-themes'>
+ <div
+ className='col-sm-3 premade-themes'
+ key={'premade-theme-key' + k}
+ >
<div
className={activeClass}
onClick={() => this.props.updateTheme(premadeTheme)}
diff --git a/web/react/components/user_settings/user_settings_notifications.jsx b/web/react/components/user_settings/user_settings_notifications.jsx
index 8d364cde7..ba14f019f 100644
--- a/web/react/components/user_settings/user_settings_notifications.jsx
+++ b/web/react/components/user_settings/user_settings_notifications.jsx
@@ -265,9 +265,12 @@ export default class NotificationsTab extends React.Component {
e.preventDefault();
}.bind(this);
+ const extraInfo = <span>{'Desktop notifications are available on Firefox, Safari, and Chrome.'}</span>;
+
desktopSection = (
<SettingItemMax
title='Send desktop notifications'
+ extraInfo={extraInfo}
inputs={inputs}
submit={this.handleSubmit}
server_error={serverError}
@@ -343,9 +346,12 @@ export default class NotificationsTab extends React.Component {
e.preventDefault();
}.bind(this);
+ const extraInfo = <span>{'Desktop notification sounds are available on Firefox, Safari, Chrome, Internet Explorer, and Edge.'}</span>;
+
soundSection = (
<SettingItemMax
title='Desktop notification sounds'
+ extraInfo={extraInfo}
inputs={inputs}
submit={this.handleSubmit}
server_error={serverError}