Multiple UI improvements (#2838)

* Multiple UI improvements

* Adding translations in en.json

webapp/components/audit_table.jsx

@@ -221,20 +221,20 @@ class AuditTable extends React.Component {
             if (this.props.showUserId) {
                 var profile = UserStore.getProfile(auditInfo.userId);
                 if (profile) {
-                    uContent = <td>{profile.email}</td>;
+                    uContent = <td className='word-break--all'>{profile.email}</td>;
                 } else {
-                    uContent = <td>{auditInfo.userId}</td>;
+                    uContent = <td className='word-break--all'>{auditInfo.userId}</td>;
                 }
             }
 
             let iContent;
             if (this.props.showIp) {
-                iContent = <td>{auditInfo.ip}</td>;
+                iContent = <td className='word-break--all'>{auditInfo.ip}</td>;
             }
 
             let sContent;
             if (this.props.showSession) {
-                sContent = <td>{auditInfo.sessionId}</td>;
+                sContent = <td className='word-break--all'>{auditInfo.sessionId}</td>;
             }
 
             let descStyle = {};
@@ -244,9 +244,14 @@ class AuditTable extends React.Component {
 
             accessList[i] = (
                 <tr key={audit.id}>
-                    <td>{auditInfo.timestamp}</td>
+                    <td className='word-break--all'>{auditInfo.timestamp}</td>
                     {uContent}
-                    <td style={descStyle}>{auditInfo.desc}</td>
+                    <td
+                        className='word-break--all'
+                        style={descStyle}
+                    >
+                        {auditInfo.desc}
+                    </td>
                     {iContent}
                     {sContent}
                 </tr>

webapp/components/user_settings/premade_theme_chooser.jsx

@@ -51,7 +51,10 @@ export default class PremadeThemeChooser extends React.Component {
 
         return (
             <div className='row appearance-section'>
+                <div className='clearfix'>
                     {premadeThemes}
+                </div>
+                <div className='clearfix'>
                     <div className='col-sm-12 padding-bottom x2'>
                         <a
                             href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples'
@@ -64,6 +67,7 @@ export default class PremadeThemeChooser extends React.Component {
                         </a>
                     </div>
                 </div>
+            </div>
         );
     }
 }

webapp/components/user_settings/user_settings_display.jsx

@@ -369,7 +369,7 @@ export default class UserSettingsDisplay extends React.Component {
                             />
                             <FormattedMessage
                                 id='user.settings.display.fixedWidthCentered'
-                                defaultMessage='Fixed with, centered'
+                                defaultMessage='Fixed width, centered'
                             />
                         </label>
                         <br/>
@@ -383,7 +383,7 @@ export default class UserSettingsDisplay extends React.Component {
                             />
                             <FormattedMessage
                                 id='user.settings.display.fullScreen'
-                                defaultMessage='Full screen'
+                                defaultMessage='Full width'
                             />
                         </label>
                         <br/>
@@ -392,7 +392,7 @@ export default class UserSettingsDisplay extends React.Component {
                         <br/>
                         <FormattedMessage
                             id='user.settings.display.channeldisplaymode'
-                            defaultMessage='How to display channels.'
+                            defaultMessage='Select how text in a channel is displayed.'
                         />
                     </div>
                 </div>
@@ -421,14 +421,14 @@ export default class UserSettingsDisplay extends React.Component {
                 describe = (
                     <FormattedMessage
                         id='user.settings.display.fixedWidthCentered'
-                        defaultMessage='Fixed with, centered'
+                        defaultMessage='Fixed width, centered'
                     />
                 );
             } else {
                 describe = (
                     <FormattedMessage
                         id='user.settings.display.fullScreen'
-                        defaultMessage='Full screen'
+                        defaultMessage='Full width'
                     />
                 );
             }

webapp/i18n/en.json

@@ -1299,6 +1299,9 @@
   "user.settings.display.theme.themeColors": "Theme Colors",
   "user.settings.display.theme.title": "Theme",
   "user.settings.display.title": "Display Settings",
+  "user.settings.display.fixedWidthCentered": "Fixed width, centered",
+  "user.settings.display.fullScreen": "Full width",
+  "user.settings.display.channeldisplaymode": "Select how text in a channel is displayed.",
   "user.settings.general.checkEmail": "Check your email at {email} to verify the address.",
   "user.settings.general.checkEmailNoAddress": "Check your email to verify your new address",
   "user.settings.general.close": "Close",

webapp/non_npm_dependencies/google-fonts/google-fonts.css

@@ -635,46 +635,46 @@
 }
 
 
-.font--open_sans {
+.app__body.font--open_sans {
     font-family: 'Open Sans', 'sans-serif';
 }
 
-.font--droid_serif {
+.app__body.font--droid_serif {
     font-family: 'Droid Serif', 'serif';
 }
 
-.font--roboto_slab {
+.app__body.font--roboto_slab {
     font-family: 'Roboto Slab', 'serif';
 }
 
-.font--lora {
+.app__body.font--lora {
     font-family: 'Lora', 'serif';
 }
 
-.font--arvo {
+.app__body.font--arvo {
     font-family: 'Arvo', 'serif';
 }
 
-.font--roboto {
+.app__body.font--roboto {
     font-family: 'Roboto', 'sans-serif';
 }
 
-.font--pt_sans {
+.app__body.font--pt_sans {
     font-family: 'PT Sans', 'sans-serif';
 }
 
-.font--lato {
+.app__body.font--lato {
     font-family: 'Lato', 'sans-serif';
 }
 
-.font--source_sans_pro {
+.app__body.font--source_sans_pro {
     font-family: 'Source Sans Pro', 'sans-serif';
 }
 
-.font--exo_2 {
+.app__body.font--exo_2 {
     font-family: 'Exo 2', 'sans-serif';
 }
 
-.font--ubuntu {
+.app__body.font--ubuntu {
     font-family: Ubuntu, 'sans-serif';
 }