Backgrounds for night theme

src/components/checkboxField.ts

@@ -16,6 +16,7 @@ export type CheckboxFieldOptions = {
   round?: boolean, 
   toggle?: boolean,
   stateKey?: string,
+  stateValues?: any[],
   disabled?: boolean,
   checked?: boolean,
   restriction?: boolean,
@@ -55,10 +56,25 @@ export default class CheckboxField {
 
     if(options.stateKey) {
       appStateManager.getState().then(state => {
-        this.checked = getDeepProperty(state, options.stateKey);
+        const stateValue = getDeepProperty(state, options.stateKey);
+        let checked: boolean;
+        if(options.stateValues) {
+          checked = options.stateValues.indexOf(stateValue) === 1;
+        } else {
+          checked = stateValue;
+        }
+
+        this.setValueSilently(checked);
 
         input.addEventListener('change', () => {
-          appStateManager.setByKey(options.stateKey, input.checked);
+          let value: any;
+          if(options.stateValues) {
+            value = options.stateValues[input.checked ? 1 : 0];
+          } else {
+            value = input.checked;
+          }
+
+          appStateManager.setByKey(options.stateKey, value);
         });
       });
     }

src/components/sidebarLeft/index.ts

@@ -8,7 +8,7 @@
 import { formatNumber } from "../../helpers/number";
 import appImManager from "../../lib/appManagers/appImManager";
 import appPeersManager from "../../lib/appManagers/appPeersManager";
-import appStateManager from "../../lib/appManagers/appStateManager";
+import appStateManager, { State } from "../../lib/appManagers/appStateManager";
 import appUsersManager from "../../lib/appManagers/appUsersManager";
 import rootScope from "../../lib/rootScope";
 import { SearchGroup } from "../appSearch";
@@ -100,6 +100,16 @@ export class AppSidebarLeft extends SidebarSlider {
       }
     };
 
+    const themeCheckboxField = new CheckboxField({
+      toggle: true,
+      checked: rootScope.settings.theme === 'night'
+    });
+    themeCheckboxField.input.addEventListener('change', () => {
+      rootScope.settings.theme = themeCheckboxField.input.checked ? 'night' : 'day';
+      appStateManager.pushToState('settings', rootScope.settings);
+      appImManager.applyCurrentTheme();
+    });
+
     const menuButtons: (ButtonMenuItemOptions & {verify?: () => boolean})[] = [{
       icon: 'saved',
       text: 'SavedMessages',
@@ -124,10 +134,7 @@ export class AppSidebarLeft extends SidebarSlider {
       onClick: () => {
         
       },
-      checkboxField: new CheckboxField({
+      checkboxField: themeCheckboxField
-        toggle: true,
-        stateKey: 'settings.nightTheme',
-      })
     }, {
       icon: 'animations',
       text: 'Animations',

src/components/sidebarLeft/tabs/background.ts

@@ -34,16 +34,20 @@ export default class AppBackgroundTab extends SliderSuperTab {
       //const uploadButton = Button('btn-primary btn-transparent', {icon: 'cameraadd', text: 'ChatBackground.UploadWallpaper', disabled: true});
       //const colorButton = Button('btn-primary btn-transparent', {icon: 'colorize', text: 'ChatBackground.SetColor', disabled: true});
 
+      const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme);
       const blurCheckboxField = new CheckboxField({
         text: 'ChatBackground.Blur', 
         name: 'blur', 
-        stateKey: 'settings.background.blur',
+        checked: theme.background.blur,
         withRipple: true
       });
       blurCheckboxField.input.addEventListener('change', () => {
         const active = grid.querySelector('.active') as HTMLElement;
         if(!active) return;
 
+        theme.background.blur = blurCheckboxField.input.checked;
+        appStateManager.pushToState('settings', rootScope.settings);
+
         // * wait for animation end
         setTimeout(() => {
           setBackgroundDocument(active.dataset.slug, appDocsManager.getDoc(active.dataset.docId));
@@ -75,35 +79,38 @@ export default class AppBackgroundTab extends SliderSuperTab {
 
       download.then(() => {
         if(!middleware()) {
+          deferred.resolve();
           return;
         }
 
+        const background = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme).background;
         const onReady = (url: string) => {
           //const perf = performance.now();
           averageColor(url).then(pixel => {
             if(!middleware()) {
+              deferred.resolve();
               return;
             }
             
             const hsla = highlightningColor(pixel);
             //console.log(doc, hsla, performance.now() - perf);
 
-            rootScope.settings.background.slug = slug;
+            background.slug = slug;
-            rootScope.settings.background.type = 'image';
+            background.type = 'image';
-            rootScope.settings.background.highlightningColor = hsla;
+            background.highlightningColor = hsla;
-            appImManager.applyBackgroundColor();
             appStateManager.pushToState('settings', rootScope.settings);
 
             saveToCache(slug, url);
-            appImManager.setBackground(url).then(deferred.resolve);
+            appImManager.applyCurrentTheme(slug, url).then(deferred.resolve);
           });
         };
 
-        if(rootScope.settings.background.blur) {
+        if(background.blur) {
           setTimeout(() => {
             blur(doc.url, 12, 4)
             .then(url => {
               if(!middleware()) {
+                deferred.resolve();
                 return;
               }
 
@@ -120,7 +127,8 @@ export default class AppBackgroundTab extends SliderSuperTab {
 
     const setActive = () => {
       const active = grid.querySelector('.active');
-      const target = rootScope.settings.background.type === 'image' ? grid.querySelector(`.grid-item[data-slug="${rootScope.settings.background.slug}"]`) : null;
+      const background = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme).background;
+      const target = background.type === 'image' ? grid.querySelector(`.grid-item[data-slug="${background.slug}"]`) : null;
       if(active === target) {
         return;
       }
@@ -137,6 +145,7 @@ export default class AppBackgroundTab extends SliderSuperTab {
     rootScope.on('background_change', setActive);
 
     apiManager.invokeApiHashable('account.getWallPapers').then((accountWallpapers) => {
+      const background = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme).background;
       const wallpapers = (accountWallpapers as AccountWallPapers.accountWallPapers).wallpapers as WallPaper.wallPaper[];
       wallpapers.forEach((wallpaper) => {
         if(wallpaper.pFlags.pattern || (wallpaper.document as MyDocument).mime_type.indexOf('application/') === 0) {
@@ -164,7 +173,7 @@ export default class AppBackgroundTab extends SliderSuperTab {
         container.dataset.docId = wallpaper.document.id;
         container.dataset.slug = wallpaper.slug;
 
-        if(rootScope.settings.background.type === 'image' && rootScope.settings.background.slug === wallpaper.slug) {
+        if(background.type === 'image' && background.slug === wallpaper.slug) {
           container.classList.add('active');
         }
 
@@ -189,7 +198,7 @@ export default class AppBackgroundTab extends SliderSuperTab {
 
         const load = () => {
           const promise = setBackgroundDocument(slug, doc);
-          if(!doc.url || rootScope.settings.background.blur) {
+          if(!doc.url || background.blur) {
             preloader.attach(target, true, promise);
           }
         };

src/helpers/dom.ts

@@ -13,7 +13,7 @@ import { MessageEntity } from "../layer";
 import RichTextProcessor from "../lib/richtextprocessor";
 import ListenerSetter from "./listenerSetter";
 import { isTouchSupported } from "./touchSupport";
-import { isApple, isMobileSafari } from "./userAgent";
+import { isApple, isMobile, isMobileSafari } from "./userAgent";
 import rootScope from "../lib/rootScope";
 import { MOUNT_CLASS_TO } from "../config/debug";
 import { doubleRaf } from "./schedulers";
@@ -598,7 +598,7 @@ export const handleScrollSideEvent = (elem: HTMLElement, side: 'top' | 'bottom',
 } */
 
 export function isSendShortcutPressed(e: KeyboardEvent) {
-  if(e.key === 'Enter' && !isTouchSupported) {
+  if(e.key === 'Enter' && !isMobile) {
     /* if(e.ctrlKey || e.metaKey) {
       this.messageInput.innerHTML += '<br>';
       placeCaretAtEnd(this.message)

src/index.ts

@@ -139,7 +139,7 @@ console.timeEnd('get storage1'); */
     });
 
     if(userAgent.isApple) {
-      if(userAgent.isSafari) {
+      if(userAgent.isSafari && userAgent.isMobile) {
         document.documentElement.classList.add('is-safari');
 
         if(touchSupport.isTouchSupported) {

src/lang.ts

@@ -93,7 +93,7 @@ const lang = {
   "ReportBug": "Report Bug",
   "Notifications.Count": {
     "one_value": "%d notification",
-    "other_value": "%d notifications",
+    "other_value": "%d notifications"
   },
   "Notifications.Forwarded": {
     "one_value": "Forwarded %d message",

src/lib/appManagers/appImManager.ts

@@ -45,8 +45,8 @@ import appNotificationsManager from './appNotificationsManager';
 import AppPrivateSearchTab from '../../components/sidebarRight/tabs/search';
 import { i18n } from '../langPack';
 import { SendMessageAction } from '../../layer';
-import { highlightningColor, hslaStringToRgbString } from '../../helpers/color';
+import { hslaStringToRgbString } from '../../helpers/color';
-import { getObjectKeysAndSort } from '../../helpers/object';
+import { copy, getObjectKeysAndSort } from '../../helpers/object';
 import { getFilesFromEvent } from '../../helpers/files';
 
 //console.log('appImManager included33!');
@@ -80,6 +80,7 @@ export class AppImManager {
   
   public markupTooltip: MarkupTooltip;
   private themeColorElem: Element;
+  private backgroundPromises: {[slug: string]: Promise<string>} = {};
 
   get myId() {
     return rootScope.myId;
@@ -148,18 +149,7 @@ export class AppImManager {
       animationIntersector.checkAnimations(false);
     });
 
-    const isDefaultBackground = rootScope.settings.background.blur === AppStateManager.STATE_INIT.settings.background.blur && 
+    this.applyCurrentTheme();
-      rootScope.settings.background.slug === AppStateManager.STATE_INIT.settings.background.slug;
-    if(!isDefaultBackground) {
-      appDownloadManager.cacheStorage.getFile('backgrounds/' + rootScope.settings.background.slug).then(blob => {
-        this.setBackground(URL.createObjectURL(blob), false);
-      }, () => { // * if NO_ENTRY_FOUND
-        this.setBackground('');
-        appStateManager.setByKey('settings.background', AppStateManager.STATE_INIT.settings.background); // * reset background
-      });
-    } else {
-      this.setBackground('');
-    }
 
     // * fix simultaneous opened both sidebars, can happen when floating sidebar is opened with left sidebar
     mediaSizes.addEventListener('changeScreen', (from, to) => {
@@ -230,6 +220,31 @@ export class AppImManager {
     });
   }
 
+  public setCurrentBackground(broadcastEvent = false) {
+    const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme);
+    const defaultTheme = AppStateManager.STATE_INIT.settings.themes.find(t => t.name === theme.name);
+
+    const isDefaultBackground = theme.background.blur === defaultTheme.background.blur && 
+      theme.background.slug === defaultTheme.background.slug;
+    if(!isDefaultBackground) {
+      return this.getBackground(theme.background.slug).then((url) => {
+        return this.setBackground(url, broadcastEvent);
+      }, () => { // * if NO_ENTRY_FOUND
+        theme.background = copy(defaultTheme.background); // * reset background
+        return this.setBackground('', true);
+      });
+    } else {
+      return this.setBackground('', broadcastEvent);
+    }
+  }
+
+  private getBackground(slug: string) {
+    if(this.backgroundPromises[slug]) return this.backgroundPromises[slug];
+    return this.backgroundPromises[slug] = appDownloadManager.cacheStorage.getFile('backgrounds/' + slug).then(blob => {
+      return URL.createObjectURL(blob);
+    });
+  }
+
   public setBackground(url: string, broadcastEvent = true): Promise<void> {
     const promises = this.chats.map(chat => chat.setBackground(url));
     return promises[promises.length - 1].then(() => {
@@ -280,19 +295,15 @@ export class AppImManager {
     return sessionStorage.getFromCache('chatPositions')[key];
   }
 
-  public applyBackgroundColor() {
+  public applyHighlightningColor() {
     let hsla: string;
-    if(rootScope.settings.nightTheme) {
+    const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme);
-      hsla = highlightningColor(new Uint8ClampedArray([15, 15, 15, 1]));
+    if(theme.background.highlightningColor) {
-      document.documentElement.style.setProperty('--message-highlightning-color', hsla);
+      hsla = theme.background.highlightningColor;
-    } else {
-      if(rootScope.settings.background.highlightningColor) {
-        hsla = rootScope.settings.background.highlightningColor;
       document.documentElement.style.setProperty('--message-highlightning-color', hsla);
     } else {
       document.documentElement.style.removeProperty('--message-highlightning-color');
     }
-    }
 
     let themeColor = '#ffffff';
     if(hsla) {
@@ -308,12 +319,20 @@ export class AppImManager {
     }
   }
 
-  private setSettings = () => {
+  public applyCurrentTheme(slug?: string, backgroundUrl?: string) {
-    document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
+    this.applyHighlightningColor();
 
-    this.applyBackgroundColor();
+    document.documentElement.classList.toggle('night', rootScope.settings.theme === 'night');
 
-    document.documentElement.classList.toggle('night', rootScope.settings.nightTheme);
+    if(backgroundUrl) {
+      this.backgroundPromises[slug] = Promise.resolve(backgroundUrl);
+    }
+    
+    return this.setCurrentBackground(!!slug);
+  }
+
+  private setSettings = () => {
+    document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
     
     document.body.classList.toggle('animation-level-0', !rootScope.settings.animationsEnabled);
     document.body.classList.toggle('animation-level-1', false);

src/lib/appManagers/appStateManager.ts

@@ -24,6 +24,19 @@ import DEBUG, { MOUNT_CLASS_TO } from '../../config/debug';
 const REFRESH_EVERY = 24 * 60 * 60 * 1000; // 1 day
 const STATE_VERSION = App.version;
 
+type Background = {
+  type: 'color' | 'image' | 'default',
+  blur: boolean,
+  highlightningColor?: string,
+  color?: string,
+  slug?: string,
+};
+
+type Theme = {
+  name: 'day' | 'night',
+  background: Background
+};
+
 export type State = Partial<{
   dialogs: Dialog[],
   allDialogsLoaded: DialogsStorage['allDialogsLoaded'],
@@ -63,17 +76,13 @@ export type State = Partial<{
       suggest: boolean,
       loop: boolean
     },
-    background: {
+    background?: Background, // ! DEPRECATED
-      type: 'color' | 'image' | 'default',
+    themes: Theme[],
-      blur: boolean,
+    theme: Theme['name'],
-      highlightningColor?: string,
-      color?: string,
-      slug?: string,
-    },
     notifications: {
       sound: boolean
     },
-    nightTheme: boolean,
+    nightTheme?: boolean, // ! DEPRECATED
   },
   drafts: AppDraftsManager['drafts']
 }>;
@@ -115,16 +124,26 @@ export const STATE_INIT: State = {
       suggest: true,
       loop: true
     },
+    themes: [{
+      name: 'day',
       background: {
         type: 'image',
         blur: false,
         slug: 'ByxGo2lrMFAIAAAAmkJxZabh8eM', // * new blurred camomile,
         highlightningColor: 'hsla(85.5319, 36.9171%, 40.402%, 0.4)'
-    },
+      }
+    }, {
+      name: 'night',
+      background: {
+        type: 'color',
+        blur: false,
+        highlightningColor: 'hsla(0, 0%, 3.82353%, 0.4)'
+      }
+    }],
+    theme: 'day',
     notifications: {
       sound: false
-    },
+    }
-    nightTheme: false
   },
   drafts: {}
 };
@@ -170,7 +189,6 @@ export class AppStateManager extends EventListenerBase<{
         });
 
         const time = Date.now();
-        if(state) {
         /* if(state.version !== STATE_VERSION) {
           state = copy(STATE_INIT);
         } else  */if((state.stateCreatedTime + REFRESH_EVERY) < time/*  || true *//*  && false */) {
@@ -194,10 +212,20 @@ export class AppStateManager extends EventListenerBase<{
           state.users = users;
           state.chats = chats;
         }
-        }
 
         validateInitObject(STATE_INIT, state);
 
+        if(!state.settings.hasOwnProperty('themes') && state.settings.background) {
+          const theme = state.settings.themes.find(t => t.name === STATE_INIT.settings.theme);
+          if(theme) {
+            theme.background = state.settings.background;
+          }
+        }
+
+        if(!state.settings.hasOwnProperty('theme') && state.settings.hasOwnProperty('nightTheme')) {
+          state.settings.theme = state.settings.nightTheme ? 'night' : 'day';
+        }
+
         this.state = state;
         this.state.version = STATE_VERSION;
 

src/lib/rootScope.ts

@@ -170,10 +170,10 @@ const rootScope = new RootScope();
 MOUNT_CLASS_TO.rootScope = rootScope;
 export default rootScope;
 
-rootScope.addEventListener('album_edit', (e) => {
+/* rootScope.addEventListener('album_edit', (e) => {
   
 });
 
 rootScope.addEventListener<'album_edit'>('album_edit', (e) => {
   
-});
+}); */

src/scripts/out/langPack.strings

@@ -1,7 +1,7 @@
 "Animations" = "Animations";
 "AttachAlbum" = "Album";
 "BlockModal.Search.Placeholder" = "Block user...";
-"DarkMode" = "Sith Mode";
+"DarkMode" = "Dark Mode";
 "FilterIncludeExcludeInfo" = "Choose chats and types of chats that will\nappear and never appear in this folder.";
 "FilterNameInputLabel" = "Folder Name";
 "FilterMenuDelete" = "Delete Folder";
@@ -54,7 +54,6 @@
 "Checkbox.Disabled" = "Disabled";
 "Error.PreviewSender.CaptionTooLong" = "Caption is too long.";
 "PreviewSender.GroupItems" = "Group items";
-"PreviewSender.Send" = "SEND";
 "PreviewSender.SendAlbum_one" = "Send Album";
 "PreviewSender.SendAlbum_other" = "Send %d Albums";
 "Presence.YourChat" = "chat with yourself";
@@ -78,6 +77,14 @@
 "TwoStepAuth.EmailCodeChangeEmail" = "Change Email";
 "MarkupTooltip.LinkPlaceholder" = "Enter URL...";
 "MediaViewer.Context.Download" = "Download";
+"Profile" = "Profile";
+"Saved" = "Saved";
+"ReportBug" = "Report Bug";
+"Notifications.Count_one" = "%d notification";
+"Notifications.Count_other" = "%d notifications";
+"Notifications.Forwarded_one" = "Forwarded %d message";
+"Notifications.Forwarded_other" = "Forwarded %d messages";
+"Notifications.New" = "New notification";
 "ActionCreateChannel" = "Channel created";
 "ActionCreateGroup" = "un1 created the group";
 "ActionChangedTitle" = "un1 changed the group name to un2";
@@ -276,10 +283,17 @@
 "UserRestrictionsChangeInfo" = "Change Chat Info";
 "UserRestrictionsPinMessages" = "Pin Messages";
 "UserRestrictionsInviteUsers" = "Add Users";
+"UserRestrictionsNoSend" = "can't send messages";
+"UserRestrictionsNoSendMedia" = "no media";
+"UserRestrictionsNoSendPolls" = "no polls";
+"UserRestrictionsNoSendStickers" = "no stickers & GIFs";
+"UserRestrictionsNoEmbedLinks" = "no embed links";
+"UserRestrictionsNoChangeInfo" = "can't change Info";
+"UserRestrictionsNoPinMessages" = "no pins";
+"UserRestrictionsNoInviteUsers" = "can't add users";
 "UserRestrictionsBlock" = "Ban and remove from group";
 "ChannelPublic" = "Public Channel";
 "MegaPublic" = "Public Group";
-"MegaLocation" = "Location-based Group";
 "ChannelPublicInfo" = "Public channels can be found in search, anyone can join them.";
 "MegaPublicInfo" = "Public groups can be found in search, chat history is available to everyone and anyone can join.";
 "ChannelPrivate" = "Private Channel";
@@ -338,6 +352,8 @@
 "RemoveStickersCount" = "REMOVE %1$s";
 "Stickers_one" = "%1$d sticker";
 "Stickers_other" = "%1$d stickers";
+"HidAccount" = "The account was hidden by the user";
+"TelegramFeatures" = "Telegram Features";
 "AccountSettings.Filters" = "Chat Folders";
 "AccountSettings.Notifications" = "Notifications and Sounds";
 "AccountSettings.PrivacyAndSecurity" = "Privacy and Security";
@@ -351,6 +367,9 @@
 "Chat.Context.Scheduled.Reschedule" = "Re-schedule";
 "Chat.Date.ScheduledFor" = "Scheduled for %@";
 "Chat.Date.ScheduledForToday" = "Scheduled for today";
+"Chat.DropTitle" = "Drop files here to send them";
+"Chat.DropQuickDesc" = "in a quick way";
+"Chat.DropAsFilesDesc" = "without compression";
 "Chat.Service.PeerJoinedTelegram" = "%@ joined Telegram";
 "Chat.Service.Channel.UpdatedTitle" = "Channel renamed to \"%@\"";
 "Chat.Service.Channel.UpdatedPhoto" = "Channel photo updated";
@@ -417,13 +436,21 @@
 "EditAccount.Username" = "Username";
 "EditAccount.Title" = "Edit Profile";
 "EditAccount.Logout" = "Log Out";
+"Emoji.Recent" = "Frequently Used";
+"Emoji.SmilesAndPeople" = "Smileys & People";
+"Emoji.AnimalsAndNature" = "Animals & Nature";
+"Emoji.FoodAndDrink" = "Food & Drink";
+"Emoji.ActivityAndSport" = "Activity & Sport";
+"Emoji.TravelAndPlaces" = "Travel & Places";
+"Emoji.Objects" = "Objects";
+"Emoji.Flags" = "Flags";
 "LastSeen.HoursAgo_one" = "last seen %d hour ago";
 "LastSeen.HoursAgo_other" = "last seen %d hours ago";
 "Login.Register.LastName.Placeholder" = "Last Name";
+"Modal.Send" = "Send";
 "Telegram.GeneralSettingsViewController" = "General Settings";
 "Telegram.InstalledStickerPacksController" = "Stickers";
 "Telegram.NotificationSettingsViewController" = "Notifications";
-"Telegram.PeerInfoController" = "Info";
 "Telegram.LanguageViewController" = "Language";
 "Stickers.SearchAdd" = "Add";
 "Stickers.SearchAdded" = "Added";
@@ -456,6 +483,10 @@
 "PeerInfo.SharedMedia" = "Shared Media";
 "PeerInfo.Subscribers" = "Subscribers";
 "PeerInfo.DeleteContact" = "Delete Contact";
+"PeerInfo.Confirm.AddMembers1_one" = "Add %d user to the group?";
+"PeerInfo.Confirm.AddMembers1_other" = "Add %d users to the group?";
+"PeerInfo.Confirm.AddMember" = "Add \"%@\" to the group?";
+"PeerMedia.Members" = "Members";
 "PollResults.Title.Poll" = "Poll Results";
 "PollResults.Title.Quiz" = "Quiz Results";
 "PollResults.LoadMore_other" = "Show More (%d)";

src/scss/partials/_chat.scss

@@ -558,9 +558,9 @@ $chat-helper-size: 39px;
 
 		html.night & {
 			background-color: var(--border-color);
-			.chat-background-item {
+			/* .chat-background-item {
 				display: none;
-			}
+			} */
 		}
 
 		&.no-transition:before {
@@ -781,7 +781,7 @@ $chat-helper-size: 39px;
 
 	@include respond-to(handhelds) {
 		--padding-vertical: .5px;
-		--padding-horizontal: .5rem;
+		--padding-horizontal: #{$chat-padding-handhelds};
 	}
 
 	@media only screen and (max-width: 420px) { 
@@ -790,7 +790,7 @@ $chat-helper-size: 39px;
 	
 	@include respond-to(esg-bottom) {
 		--padding-vertical: .5px;
-		--padding-horizontal: .5rem;
+		--padding-horizontal: #{$chat-padding-handhelds};
 	}
 	
 	.bubble-tail {
@@ -1166,7 +1166,7 @@ $chat-helper-size: 39px;
     top: -.25rem;
 		right: -.25rem;
 
-		&.badge-primary {
+		&.badge-primary:not(.badge-gray) {
 			background-color: var(--chatlist-status-color);
 		}
 		

src/scss/style.scss

@@ -24,7 +24,7 @@ $messages-container-width: 728px;
 $chat-input-size: 3.375rem;
 $chat-input-handhelds-size: 2.875rem;
 $chat-padding: .8125rem;
-$chat-padding-handhelds: .5rem;
+$chat-padding-handhelds: .25rem;
 
 @function hover-color($color) {
   @return rgba($color, $hover-alpha);