Add classes for mobile dividers

Remove specific management settings based on hardcoded configs

components/user_settings/user_settings_display.jsx

@@ -254,14 +254,17 @@ export default class UserSettingsDisplay extends React.Component {
  ];
 
  return (
- <SettingItemMax
- title={messageTitle}
- inputs={inputs}
- submit={this.handleSubmit}
- saving={this.state.isSaving}
- server_error={this.state.serverError}
- updateSection={handleUpdateSection}
- />
+ <div>
+ <SettingItemMax
+ title={messageTitle}
+ inputs={inputs}
+ submit={this.handleSubmit}
+ saving={this.state.isSaving}
+ server_error={this.state.serverError}
+ updateSection={handleUpdateSection}
+ />
+ <div className='divider-dark'/>
+ </div>
  );
  }
 
@@ -277,11 +280,14 @@ export default class UserSettingsDisplay extends React.Component {
  };
 
  return (
- <SettingItemMin
- title={messageTitle}
- describe={describe}
- updateSection={handleUpdateSection}
- />
+ <div>
+ <SettingItemMin
+ title={messageTitle}
+ describe={describe}
+ updateSection={handleUpdateSection}
+ />
+ <div className='divider-dark'/>
+ </div>
  );
  }
 
@@ -317,7 +323,7 @@ export default class UserSettingsDisplay extends React.Component {
 
  const isEnableLinkPreviews = global.window.mm_config.EnableLinkPreviews === 'true';
  let linkPreviewSection = null;
- let divider = null;
+
  if (isEnableLinkPreviews) {
  linkPreviewSection = this.createSection({
  section: 'linkpreview',
@@ -347,7 +353,6 @@ export default class UserSettingsDisplay extends React.Component {
  message: 'When available, the first web link in a message will show a preview of the website content below the message.'
  }
  });
- divider = <div className='divider-dark'/>;
  }
 
  const clockSection = this.createSection({
@@ -448,14 +453,17 @@ export default class UserSettingsDisplay extends React.Component {
  userLocale = global.window.mm_config.DefaultClientLocale;
  }
  languagesSection = (
- <ManageLanguages
- user={this.props.user}
- locale={userLocale}
- updateSection={(e) => {
- this.updateSection('');
- e.preventDefault();
- }}
- />
+ <div>
+ <ManageLanguages
+ user={this.props.user}
+ locale={userLocale}
+ updateSection={(e) => {
+ this.updateSection('');
+ e.preventDefault();
+ }}
+ />
+ <div className='divider-dark'/>
+ </div>
  );
  } else {
  let locale;
@@ -466,31 +474,37 @@ export default class UserSettingsDisplay extends React.Component {
  }
 
  languagesSection = (
- <SettingItemMin
- title={
- <FormattedMessage
- id='user.settings.display.language'
- defaultMessage='Language'
- />
- }
- width='medium'
- describe={locale}
- updateSection={() => {
- this.updateSection('languages');
- }}
- />
+ <div>
+ <SettingItemMin
+ title={
+ <FormattedMessage
+ id='user.settings.display.language'
+ defaultMessage='Language'
+ />
+ }
+ width='medium'
+ describe={locale}
+ updateSection={() => {
+ this.updateSection('languages');
+ }}
+ />
+ <div className='divider-dark'/>
+ </div>
  );
  }
 
  let themeSection;
  if (global.mm_config.EnableThemeSelection !== 'false') {
  themeSection = (
- <ThemeSetting
- selected={this.props.activeSection === 'theme'}
- updateSection={this.updateSection}
- setRequireConfirm={this.props.setRequireConfirm}
- setEnforceFocus={this.props.setEnforceFocus}
- />
+ <div>
+ <ThemeSetting
+ selected={this.props.activeSection === 'theme'}
+ updateSection={this.updateSection}
+ setRequireConfirm={this.props.setRequireConfirm}
+ setEnforceFocus={this.props.setEnforceFocus}
+ />
+ <div className='divider-dark'/>
+ </div>
  );
  }
 
@@ -535,17 +549,11 @@ export default class UserSettingsDisplay extends React.Component {
  </h3>
  <div className='divider-dark first'/>
  {themeSection}
- <div className='divider-dark'/>
  {clockSection}
- {divider}
  {linkPreviewSection}
- <div className='divider-dark'/>
  {collapseSection}
- <div className='divider-dark'/>
  {messageDisplaySection}
- <div className='divider-dark'/>
  {channelDisplayModeSection}
- <div className='divider-dark'/>
  {languagesSection}
  </div>
  </div>
@@ -556,7 +564,6 @@ export default class UserSettingsDisplay extends React.Component {
 UserSettingsDisplay.propTypes = {
  user: PropTypes.object,
  updateSection: PropTypes.func,
- updateTab: PropTypes.func,
  activeSection: PropTypes.string,
  closeModal: PropTypes.func.isRequired,
  collapseModal: PropTypes.func.isRequired,