3 files changed, 41 insertions, 12 deletions

diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 2009e07dd..0180d6dc5 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -49,7 +49,8 @@ export default {
         TOGGLE_IMPORT_THEME_MODAL: null,
         TOGGLE_INVITE_MEMBER_MODAL: null,
         TOGGLE_DELETE_POST_MODAL: null,
-        TOGGLE_GET_TEAM_INVITE_LINK_MODAL: null
+        TOGGLE_GET_TEAM_INVITE_LINK_MODAL: null,
+        TOGGLE_REGISTER_APP_MODAL: null
     }),
 
     PayloadSources: keyMirror({
@@ -137,6 +138,7 @@ export default {
     ],
     MONTHS: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     MAX_DMS: 20,
+    MAX_CHANNEL_POPOVER_COUNT: 20,
     DM_CHANNEL: 'D',
     OPEN_CHANNEL: 'O',
     PRIVATE_CHANNEL: 'P',
@@ -344,6 +346,21 @@ export default {
         }
     ],
     DEFAULT_CODE_THEME: 'github',
+    FONTS: {
+        'Droid Serif': 'font--droid_serif',
+        'Roboto Slab': 'font--roboto_slab',
+        Lora: 'font--lora',
+        Slabo: 'font--slabo',
+        Arvo: 'font--arvo',
+        'Open Sans': 'font--open_sans',
+        Roboto: 'font--roboto',
+        'PT Sans': 'font--pt_sans',
+        Lato: 'font--lato',
+        'Source Sans Pro': 'font--source_sans_pro',
+        'Exo 2': 'font--exo_2',
+        Ubuntu: 'font--ubuntu'
+    },
+    DEFAULT_FONT: 'Open Sans',
     Preferences: {
         CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',
         CATEGORY_DISPLAY_SETTINGS: 'display_settings',
diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx
index 3a912fd75..f0bd46f9d 100644
--- a/web/react/utils/text_formatting.jsx
+++ b/web/react/utils/text_formatting.jsx
@@ -188,7 +188,7 @@ function highlightCurrentMentions(text, tokens) {
             const newAlias = `MM_SELFMENTION${index}`;
 
             newTokens.set(newAlias, {
-                value: `<span class='mention-highlight'>${alias}</span>` + token.extraText,
+                value: `<span class='mention-highlight'>${alias}</span>` + (token.extraText || ''),
                 originalText: token.originalText
             });
             output = output.replace(alias, newAlias);
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 0c08c2df6..9f80f1bb8 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -607,7 +607,7 @@ export function applyTheme(theme) {
         changeCss('.popover.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1);
         changeCss('.popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg, 1);
         changeCss('.popover.top>.arrow:after, .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg, 1);
-        changeCss('.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1);
+        changeCss('@media(min-width: 960px){.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1);
         changeCss('.attachment__content', 'background:' + theme.centerChannelBg, 1);
     }
 
@@ -638,8 +638,7 @@ export function applyTheme(theme) {
         changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2);
         changeCss('.post-image__column .post-image__details', 'color:' + theme.centerChannelColor, 2);
         changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1);
-        changeCss('.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2);
-        changeCss('@media(max-width: 960px){.search-bar__container .search__form .search-bar', 'background:' + changeOpacity(theme.centerChannelColor, 0.2) + '; color: inherit;', 1);
+        changeCss('@media(min-width: 960px){.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2);
         changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
@@ -694,6 +693,17 @@ export function applyTheme(theme) {
     }
     updateCodeTheme(theme.codeTheme);
 }
+
+export function applyFont(fontName) {
+    const body = document.querySelector('body');
+    body.classList.forEach((className) => {
+        if (className.lastIndexOf('font') === 0) {
+            body.classList.remove(className);
+        }
+    });
+    body.classList.add(Constants.FONTS[fontName]);
+}
+
 export function changeCss(className, classValue, classRepeat) {
     // we need invisible container to store additional css definitions
     var cssMainContainer = $('#css-modifier-container');
@@ -981,13 +991,15 @@ export function displayUsername(userId) {
     const nameFormat = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value;
 
     let username = '';
-    if (nameFormat === 'nickname_full_name') {
-        username = user.nickname || getFullName(user);
-    } else if (nameFormat === 'full_name') {
-        username = getFullName(user);
-    }
-    if (!username.trim().length) {
-        username = user.username;
+    if (user) {
+        if (nameFormat === 'nickname_full_name') {
+            username = user.nickname || getFullName(user);
+        } else if (nameFormat === 'full_name') {
+            username = getFullName(user);
+        }
+        if (!username.trim().length) {
+            username = user.username;
+        }
     }
 
     return username;