Night theme improvements

src/components/chat/bubbles.ts

@@ -2515,6 +2515,8 @@ export default class ChatBubbles {
 
     if(canHaveTail) {
       bubble.classList.add('can-have-tail');
+
+      bubbleContainer.append(generateTail());
     }
 
     return bubble;
@@ -3097,4 +3099,19 @@ export default class ChatBubbles {
       }
     }
   }
-}
+}
+
+export function generateTail() {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttributeNS(null, 'viewBox', '0 0 11 20');
+  svg.setAttributeNS(null, 'width', '11');
+  svg.setAttributeNS(null, 'height', '20');
+  svg.classList.add('bubble-tail');
+
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttributeNS(null, 'href', '#message-tail-filled');
+
+  svg.append(use);
+
+  return svg;
+}

src/components/chat/input.ts

@@ -39,6 +39,7 @@ import { tsNow } from '../../helpers/date';
 import appNavigationController from '../appNavigationController';
 import { isMobile } from '../../helpers/userAgent';
 import { i18n } from '../../lib/langPack';
+import { generateTail } from './bubbles';
 
 const RECORD_MIN_TIME = 500;
 const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
@@ -136,6 +137,9 @@ export default class ChatInput {
     this.rowsWrapper = document.createElement('div');
     this.rowsWrapper.classList.add('rows-wrapper', 'chat-input-wrapper');
 
+    const tail = generateTail();
+    this.rowsWrapper.append(tail);
+
     const fakeRowsWrapper = this.fakeRowsWrapper = document.createElement('div');
     fakeRowsWrapper.classList.add('fake-wrapper', 'fake-rows-wrapper');
 

src/components/popups/stickers.ts

@@ -44,16 +44,17 @@ export default class PopupStickers extends PopupElement {
     div.classList.add('sticker-set');
 
     this.stickersDiv = document.createElement('div');
-    this.stickersDiv.classList.add('sticker-set-stickers');
+    this.stickersDiv.classList.add('sticker-set-stickers', 'is-loading');
 
-    putPreloader(this.stickersDiv);
+    putPreloader(this.stickersDiv, true);
 
     this.stickersFooter = document.createElement('div');
     this.stickersFooter.classList.add('sticker-set-footer');
 
     div.append(this.stickersDiv);
 
-    this.stickersFooter.append(i18n('Loading'));
+    const btn = Button('btn-primary btn-primary-transparent disable-hover', {noRipple: true, text: 'Loading'});
+    this.stickersFooter.append(btn);
 
     this.body.append(div);
     const scrollable = new Scrollable(this.body);
@@ -98,15 +99,15 @@ export default class PopupStickers extends PopupElement {
       animationIntersector.setOnlyOnePlayableGroup(ANIMATION_GROUP);
 
       this.h6.innerHTML = RichTextProcessor.wrapEmojiText(set.set.title);
-      !set.set.installed_date ? this.stickersFooter.classList.add('add') : this.stickersFooter.classList.remove('add');
+      this.stickersFooter.classList.toggle('add', !set.set.installed_date);
 
       let button: HTMLElement;
-      if(set.set.hasOwnProperty('installed_date')) {
+      if(set.set.installed_date) {
         button = Button('btn-primary btn-primary-transparent danger', {noRipple: true});
-        button.append(i18n('StickerPack.Remove', [set.set.count]));
+        button.append(i18n('RemoveStickersCount', [i18n('Stickers', [set.set.count])]));
       } else {
         button = Button('btn-primary btn-color-primary', {noRipple: true});
-        button.append(i18n('StickerPack.Add1', [set.set.count]));
+        button.append(i18n('AddStickersCount', [i18n('Stickers', [set.set.count])]));
       }
 
       this.stickersFooter.textContent = '';
@@ -120,6 +121,7 @@ export default class PopupStickers extends PopupElement {
 
       const lazyLoadQueue = new LazyLoadQueue();
       
+      this.stickersDiv.classList.remove('is-loading');
       this.stickersDiv.innerHTML = '';
       for(let doc of set.documents) {
         if(doc._ === 'documentEmpty') {

src/components/ripple.ts

@@ -147,7 +147,7 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
       //console.log('ripple touchstart', e);
       if(e.touches.length > 1 
         || touchStartFired 
-        || ((e.target as HTMLElement).tagName === 'BUTTON' && e.target !== elem) 
+        || (['BUTTON', 'A'].includes((e.target as HTMLElement).tagName) && e.target !== elem) 
         || findUpClassName(e.target as HTMLElement, 'c-ripple') !== r) {
         return;
       }
@@ -177,7 +177,7 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
       }
       //console.log('ripple mousedown', e, e.target, findUpClassName(e.target as HTMLElement, 'c-ripple') === r);
 
-      if(elem.dataset.ripple === '0' || findUpClassName(e.target as HTMLElement, 'c-ripple') !== r) {
+      if(elem.dataset.ripple === '0' || findUpClassName(e.target as HTMLElement, 'c-ripple') !== r || (e.target as HTMLElement).tagName === 'A') {
         return false;
       } else if(touchStartFired) {
         touchStartFired = false;

src/components/sidebarLeft/index.ts

@@ -113,14 +113,21 @@ export class AppSidebarLeft extends SidebarSlider {
       onClick: () => {
         
       },
-      checkboxField: new CheckboxField({toggle: true})
+      checkboxField: new CheckboxField({
+        toggle: true,
+        stateKey: 'settings.nightTheme',
+      })
     }, {
       icon: 'lamp',
       text: 'Animations',
       onClick: () => {
         
       },
-      checkboxField: new CheckboxField({toggle: true, checked: true})
+      checkboxField: new CheckboxField({
+        toggle: true, 
+        checked: true,
+        stateKey: 'settings.animationsEnabled',
+      })
     }, {
       icon: 'help',
       text: 'SettingsHelp',

src/components/sidebarLeft/tabs/background.ts

@@ -2,7 +2,7 @@ import { generateSection } from "..";
 import { averageColor } from "../../../helpers/averageColor";
 import blur from "../../../helpers/blur";
 import { deferredPromise } from "../../../helpers/cancellablePromise";
-import { rgbToHsl } from "../../../helpers/color";
+import { highlightningColor, rgbToHsl } from "../../../helpers/color";
 import { attachClickEvent, findUpClassName } from "../../../helpers/dom";
 import { AccountWallPapers, WallPaper } from "../../../layer";
 import appDocsManager, { MyDocument } from "../../../lib/appManagers/appDocsManager";
@@ -56,18 +56,6 @@ export default class AppBackgroundTab extends SliderSuperTab {
       });
     };
 
-    // * https://github.com/TelegramMessenger/Telegram-iOS/blob/3d062fff78cc6b287c74e6171f855a3500c0156d/submodules/TelegramPresentationData/Sources/PresentationData.swift#L453
-    const highlightningColor = (pixel: Uint8ClampedArray) => {
-      let {h, s, l} = rgbToHsl(pixel[0], pixel[1], pixel[2]);
-      if(s > 0.0) {
-        s = Math.min(1.0, s + 0.05 + 0.1 * (1.0 - s));
-      }
-      l = Math.max(0.0, l * 0.65);
-      
-      const hsla = `hsla(${h * 360}, ${s * 100}%, ${l * 100}%, .4)`;
-      return hsla;
-    };
-
     let tempId = 0;
     const setBackgroundDocument = (slug: string, doc: MyDocument) => {
       let _tempId = ++tempId;

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -132,7 +132,11 @@ export default class AppSharedMediaTab extends SliderSuperTab {
       title: ' ',
       subtitleLangKey: 'UserBio',
       icon: 'info',
-      clickable: () => {
+      clickable: (e) => {
+        if((e.target as HTMLElement).tagName === 'A') {
+          return;
+        }
+        
         appProfileManager.getProfileByPeerId(this.peerId).then(full => {
           copyTextToClipboard(full.about);
           toast(I18n.format('BioCopied', true));
@@ -140,6 +144,8 @@ export default class AppSharedMediaTab extends SliderSuperTab {
       }
     });
 
+    this.profileElements.bio.title.classList.add('pre-wrap');
+
     this.profileElements.username = new Row({
       title: ' ',
       subtitleLangKey: 'Username',

src/components/sidebarRight/tabs/stickers.ts

@@ -97,7 +97,7 @@ export default class AppStickersTab extends SliderSuperTab {
 
     const countDiv = document.createElement('div');
     countDiv.classList.add('sticker-set-count');
-    countDiv.append(i18n('Stickers.Count', [set.count]));
+    countDiv.append(i18n('Stickers', [set.count]));
     details.append(countDiv);
     
     const button = document.createElement('button');

src/helpers/color.ts

@@ -28,4 +28,16 @@ export function rgbToHsl(r: number, g: number, b: number) {
     s: s,
     l: l,
   });
-}
+}
+
+// * https://github.com/TelegramMessenger/Telegram-iOS/blob/3d062fff78cc6b287c74e6171f855a3500c0156d/submodules/TelegramPresentationData/Sources/PresentationData.swift#L453
+export function highlightningColor(pixel: Uint8ClampedArray) {
+  let {h, s, l} = rgbToHsl(pixel[0], pixel[1], pixel[2]);
+  if(s > 0.0) {
+    s = Math.min(1.0, s + 0.05 + 0.1 * (1.0 - s));
+  }
+  l = Math.max(0.0, l * 0.65);
+  
+  const hsla = `hsla(${h * 360}, ${s * 100}%, ${l * 100}%, .4)`;
+  return hsla;
+};

src/index.hbs

@@ -83,6 +83,11 @@
         <path id="logo" fill="#50A2E9" fill-rule="evenodd" d="M80,0 C124.18278,0 160,35.81722 160,80 C160,124.18278 124.18278,160 80,160 C35.81722,160 0,124.18278 0,80 C0,35.81722 35.81722,0 80,0 Z M114.262551,46.4516129 L114.123923,46.4516129 C111.089589,46.5056249 106.482806,48.0771432 85.1289541,56.93769 L81.4133571,58.4849956 C72.8664779,62.0684477 57.2607933,68.7965125 34.5963033,78.66919 C30.6591745,80.2345564 28.5967328,81.765936 28.4089783,83.2633288 C28.0626453,86.0254269 31.8703852,86.959903 36.7890378,88.5302703 L38.2642674,89.0045258 C42.3926354,90.314406 47.5534685,91.7248852 50.3250916,91.7847532 C52.9151948,91.8407003 55.7944784,90.8162976 58.9629426,88.7115451 L70.5121776,80.9327422 C85.6657026,70.7535853 93.6285785,65.5352892 94.4008055,65.277854 L94.6777873,65.216416 C95.1594319,65.1213105 95.7366278,65.0717596 96.1481181,65.4374337 C96.6344248,65.8695939 96.5866185,66.6880224 96.5351057,66.9075859 C96.127514,68.6448691 75.2839361,87.6143392 73.6629144,89.2417998 L73.312196,89.6016896 C68.7645143,94.2254793 63.9030972,97.1721503 71.5637945,102.355193 L73.3593638,103.544598 C79.0660342,107.334968 82.9483395,110.083813 88.8107882,113.958377 L90.3875424,114.996094 C95.0654739,118.061953 98.7330313,121.697601 103.562866,121.253237 C105.740839,121.052855 107.989107,119.042224 109.175465,113.09692 L109.246762,112.727987 C112.002037,98.0012935 117.417883,66.09303 118.669527,52.9443975 C118.779187,51.7924073 118.641237,50.318088 118.530455,49.6708963 L118.474159,49.3781963 C118.341081,48.7651315 118.067967,48.0040758 117.346762,47.4189793 C116.412565,46.6610871 115.002114,46.4638844 114.262551,46.4516129 Z"/>
         <path id="poll-line" d="M4.47,5.33v13.6c0,4.97,4.03,9,9,9h458.16"/>
         <path id="check" fill="none" d="M 4.7071 12.2929 l 5 5 c 0.3905 0.3905 1.0237 0.3905 1.4142 0 l 11 -11" />
+        <symbol id="message-tail-filled" viewBox="0 0 11 20">
+          <g transform="translate(9 -14)" fill="inherit" fill-rule="evenodd">
+            <path d="M-6 16h6v17c-.193-2.84-.876-5.767-2.05-8.782-.904-2.325-2.446-4.485-4.625-6.48A1 1 0 01-6 16z" transform="matrix(1 0 0 -1 0 49)" id="corner-fill" fill="inherit"/>
+          </g>
+        </symbol>
       </defs>
     </svg>
     <div id="main-columns" class="tabs-container" data-animation="navigation">

src/lang.ts

@@ -79,10 +79,6 @@ const lang = {
   "Link.Taken": "Link is already taken",
   "Link.Invalid": "Link is invalid",
   "StickersTab.SearchPlaceholder": "Search Stickers",
-  "StickerPack.Remove": {
-    "one_value": "Remove %d Sticker",
-    "other_value": "Remove %d Stickers"
-  },
   "ForwardedFrom": "Forwarded from %s",
   "Popup.Avatar.Title": "Drag to Reposition",
   "Popup.Unpin.AllTitle": "Unpin all messages",
@@ -377,6 +373,12 @@ const lang = {
   "RecoveryEmailTitle": "Recovery Email",
   "ResendCode": "Resend code",
   "PasswordAsHintError": "Hint must be different from your password",
+  "AddStickersCount": "ADD %1$s",
+  "RemoveStickersCount": "REMOVE %1$s",
+  "Stickers": {
+    "one_value": "%1$d sticker",
+    "other_value": "%1$d stickers"
+  },
 
   // * macos
   "AccountSettings.Filters": "Chat Folders",
@@ -480,14 +482,6 @@ const lang = {
   "Telegram.InstalledStickerPacksController": "Stickers",
   "Telegram.NotificationSettingsViewController": "Notifications",
   "Telegram.PeerInfoController": "Info",
-  "StickerPack.Add1": {
-    "one_value": "Add %d Sticker",
-    "other_value": "Add %d Stickers"
-  },
-  "Stickers.Count": {
-    "one_value": "%d sticker",
-    "other_value": "%d stickers"
-  },
   "Stickers.SearchAdd": "Add",
   "Stickers.SearchAdded": "Added",
   "Stickers.SuggestStickers": "Suggest Stickers by Emoji",

src/lib/appManagers/appImManager.ts

@@ -40,6 +40,7 @@ import appNotificationsManager from './appNotificationsManager';
 import AppPrivateSearchTab from '../../components/sidebarRight/tabs/search';
 import { i18n } from '../langPack';
 import { SendMessageAction } from '../../layer';
+import { highlightningColor } from '../../helpers/color';
 
 //console.log('appImManager included33!');
 
@@ -250,12 +251,18 @@ export class AppImManager {
   private setSettings = () => {
     document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
 
-    if(rootScope.settings.background.highlightningColor) {
-      document.documentElement.style.setProperty('--message-highlightning-color', rootScope.settings.background.highlightningColor);
+    if(rootScope.settings.nightTheme) {
+      document.documentElement.style.setProperty('--message-highlightning-color', highlightningColor(new Uint8ClampedArray([15, 15, 15, 1])));
     } else {
-      document.documentElement.style.removeProperty('--message-highlightning-color');
+      if(rootScope.settings.background.highlightningColor) {
+        document.documentElement.style.setProperty('--message-highlightning-color', rootScope.settings.background.highlightningColor);
+      } else {
+        document.documentElement.style.removeProperty('--message-highlightning-color');
+      }
     }
-
+    
+    document.documentElement.classList.toggle('night', rootScope.settings.nightTheme);
+    
     document.body.classList.toggle('animation-level-0', !rootScope.settings.animationsEnabled);
     document.body.classList.toggle('animation-level-1', false);
     document.body.classList.toggle('animation-level-2', rootScope.settings.animationsEnabled);

src/lib/appManagers/appStateManager.ts

@@ -66,7 +66,8 @@ export type State = Partial<{
     },
     notifications: {
       sound: boolean
-    }
+    },
+    nightTheme: boolean,
   },
   drafts: AppDraftsManager['drafts']
 }>;
@@ -115,7 +116,8 @@ export const STATE_INIT: State = {
     },
     notifications: {
       sound: false
-    }
+    },
+    nightTheme: false
   },
   drafts: {}
 };

src/scss/components/_global.scss

@@ -143,6 +143,10 @@ Utility Classes
   text-transform: uppercase;
 }
 
+.pre-wrap {
+  white-space: pre-wrap;
+}
+
 /* .flex-grow {
   flex-grow: 1;
 }

src/scss/partials/_button.scss

@@ -288,6 +288,7 @@
   }
 
   &-transparent {
+    color: var(--primary-color);
     background-color: transparent;
 
     @include hover() {

src/scss/partials/_chat.scss

@@ -664,7 +664,7 @@ $chat-helper-size: 39px;
 		width: 100%;
 
 		&-count {
-			color: #000;
+			color: var(--primary-text-color);
 			font-weight: 500;
 			flex-grow: 1;
 			white-space: nowrap;
@@ -673,7 +673,7 @@ $chat-helper-size: 39px;
 
 		.btn-icon {
 			margin: 0 5px 0 6px;
-			color: #3f454a;
+			//color: #3f454a;
 			height: 42px;
 			width: 42px;
 			line-height: 42px;
@@ -760,14 +760,14 @@ $chat-helper-size: 39px;
 		}
 	}
 
-	&:after {
+	.bubble-tail {
 		transition: transform .1s;
 	}
 
 	&.is-centering:not(.backwards), &.is-centered {
 		border-bottom-right-radius: 12px;
 
-		&:after {
+		.bubble-tail {
 			transform: scaleX(-1) translateX(#{.5625rem * 2});
 		}
 	}
@@ -786,17 +786,18 @@ $chat-helper-size: 39px;
 		--padding-horizontal: .5rem;
 	}
 	
-	&:after {
-		content: '';
+	.bubble-tail {
+		//content: '';
 		position: absolute;
 		//bottom: -.1875rem;
-		bottom: -.1925rem;
+		bottom: -1px;
 		right: -8.4px;
-		width: .5625rem;
-		height: 1.25rem;
-		background-repeat: no-repeat no-repeat;
-		background-position: 0 100%;
-		background-image: url('assets/img/msg-tail-left-blur.svg');
+		width: 11px;
+		height: 20px;
+		//background-repeat: no-repeat no-repeat;
+		//background-position: 0 100%;
+		//background-image: url('assets/img/msg-tail-left-blur.svg');
+		fill: var(--surface-color);
 		transform: scaleX(-1);
 	}
 

src/scss/partials/_chatBubble.scss

@@ -102,11 +102,11 @@ $bubble-margin: .25rem;
       margin-left: -50%;
       margin-right: -50%;
       text-align: center;
-      color: #538BCC;
+      color: var(--primary-text-color);
       line-height: 2.1;
       font-weight: 500;
       font-size: 15px;
-      background-color: rgba(255, 255, 255, .95);
+      background-color: var(--surface-color);
       z-index: 2;
       position: relative;
     }
@@ -302,7 +302,7 @@ $bubble-margin: .25rem;
     align-items: center;
     display: flex;
     justify-content: center;
-    color: #fff;
+    color: var(--badge-color);
     border-radius: 50%;
     //background: rgba(0, 0, 0, .16);
     background: var(--message-highlightning-color);
@@ -1339,29 +1339,39 @@ $bubble-margin: .25rem;
       }
     }
   }
+
+  .bubble-tail {
+    display: none;
+  }
   
-  &.can-have-tail.is-group-last .bubble-content:after {
+  //&.can-have-tail.is-group-last .bubble-content:after {
+  &.can-have-tail.is-group-last .bubble-tail {
     position: absolute;
     //bottom: 0;
     width: 11px;
     height: 20px;
-    background-repeat: no-repeat no-repeat;
-    content: '';
-    background-size: 11px 20px;
-    background-position-y: 1px;
+    //background-repeat: no-repeat no-repeat;
+    //content: '';
+    //background-size: 11px 20px;
+    //background-position-y: 1px;
     z-index: -2;
+    display: block;
+    fill: var(--message-background-color);
+    transform: translateY(1px);
   }
 
   &.photo, &.video {
     &.is-message-empty.is-group-last:not(.with-replies) {
-      .bubble-content:after {
+      //.bubble-content:after {
+      .bubble-tail {
         display: none;
       }
     }
   }
 
   &.is-message-empty.is-group-last.with-media-tail {
-    .bubble-content:after {
+    //.bubble-content:after {
+    .bubble-tail {
       display: none;
     }
 
@@ -1415,7 +1425,7 @@ $bubble-margin: .25rem;
 
     &-footer {
       height: 51px;
-      border-top: 2px solid #e6e7ea;
+      border-top: 2px solid var(--border-color);
       position: relative;
       display: flex;
       align-items: center;
@@ -1435,7 +1445,7 @@ $bubble-margin: .25rem;
         margin-left: 9px;
         display: flex;
         align-items: center;
-        color: #1f88e3;
+        color: var(--primary-color);
       }
   
       &-avatars {
@@ -1445,7 +1455,7 @@ $bubble-margin: .25rem;
         avatar-element {
           width: 34px;
           height: 34px;
-          border: 2px solid #fff;
+          border: 2px solid var(--surface-color);
           cursor: pointer;
           z-index: 0; // * fix border blinking
 
@@ -1609,11 +1619,15 @@ $bubble-margin: .25rem;
       .bubble-content, .poll-footer-button {
         border-bottom-left-radius: 0;
       }
+
+      .bubble-tail {
+        margin-left: -8.4px;
+      }
   
-      .bubble-content:after {
+      /* .bubble-content:after {
         margin-left: -8.4px;
         background-image: url('assets/img/msg-tail-left.svg');
-      }
+      } */
     }
 
     &:not(.can-have-tail) {
@@ -1751,11 +1765,16 @@ $bubble-margin: .25rem;
       .bubble-content, .poll-footer-button {
         border-bottom-right-radius: 0;
       }
+
+      .bubble-tail {
+        right: -8.4px;
+        transform: translateY(1px) scaleX(-1);
+      }
       
-      .bubble-content:after {
+      /* .bubble-content:after {
         right: -8.4px;
         background-image: url('assets/img/msg-tail-right.svg');
-      }
+      } */
     }
 
     &:not(.can-have-tail) {

src/scss/partials/_chatPinned.scss

@@ -20,8 +20,19 @@
 
     &-wrapper {
       color: var(--primary-color);
-      background: #50a2e988;
       position: relative;
+
+      &:before {
+        position: absolute;
+        content: " ";
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        display: block;
+        background: var(--primary-color);
+        opacity: .53;
+      }
     }
 
     &-bars {
@@ -99,10 +110,6 @@
     // 	line-height: 13px;
     // }
   }
-  
-  &-subtitle {
-    color: #111;
-  }
 
   &-media {
     height: 2rem;
@@ -178,7 +185,7 @@
     position: absolute !important;
     top: 100%;
     width: 100% !important;
-    background: #fff !important;
+    background: var(--surface-color) !important;
     left: 0;
     max-height: 100% !important;
     height: 52px;

src/scss/partials/_chatSearch.scss

@@ -8,7 +8,7 @@
 		padding: 0 8px;
 		flex: 0 0 auto;
 		width: 100%;
-		background-color: #fff;
+		background-color: var(--surface-color);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -17,7 +17,7 @@
 
 		.chat-search-count {
 			margin-left: 8px;
-			color: #949596;
+			color: var(--secondary-text-color);
 		}
 	
 		& + .chat-input {
@@ -49,7 +49,7 @@
 		left: 0;
 		visibility: hidden;
 		opacity: 0;
-		background-color: #fff;
+		background-color: var(--surface-color);
 		transition: .2s ease;
 
 		body.animation-level-0 & {

src/scss/partials/_checkbox.scss

@@ -122,7 +122,7 @@
     border-radius: 50%;
 
     &-border {
-      border: 2px solid #fff;
+      border: 2px solid var(--secondary-color);
       z-index: 1;
     }
 

src/scss/partials/_input.scss

@@ -46,7 +46,7 @@
     z-index: 2;
     height: 1.5rem;
     transform: translate(0, 0);
-    background-color: #fff;
+    background-color: var(--surface-color);
     transition: .2s transform, .2s padding, .1s opacity, font-weight 0s .1s;
     transform-origin: left center;
     pointer-events: none;
@@ -65,6 +65,7 @@
     --border-width-top: 2px;
     border: var(--border-width) solid #DADCE0;
     border-radius: $border-radius-medium;
+    background-color: transparent;
     //padding: 0 1rem;
     padding: calc(var(--padding) - var(--border-width-top)) calc(var(--padding-horizontal) - var(--border-width));
     box-sizing: border-box;
@@ -298,7 +299,7 @@ input:focus, button:focus {
     font-size: 24px;
     color: var(--secondary-text-color);
     opacity: .6;
-    transition: all .2s ease-out;
+    transition: opacity .2s ease-out, color .2s ease-out;
     line-height: 1;
     z-index: 1;
 
@@ -316,6 +317,8 @@ input:focus, button:focus {
   > .tgico-close {
     right: 0px;
     z-index: 1;
+    width: 42px;
+    height: 42px;
 
     &:before { // ! я сгорел, почему-то здесь иконка сдвигается на пиксель влево, и это происходит из-за position: absolute на .tgico ...
       margin-right: -1px;

src/scss/partials/_leftSidebar.scss

@@ -244,8 +244,8 @@
       }
     }
 
-    .btn-menu {
-      @include respond-to(handhelds) {
+    @include respond-to(handhelds) {
+      .btn-menu {
         margin-top: -.25rem;
       }
     }
@@ -347,14 +347,14 @@
         z-index: 1;
 
         &:not(.is-hidden) {
-          transform: translateZ(0px);
+          transform: translateZ(0);
         }
       }
     }
 
     @include respond-to(not-handhelds) {
       html.no-touch &:hover .btn-corner:not(.is-hidden) {
-        transform: translateZ(0px);
+        transform: translateZ(0);
       }
     }
   }

src/scss/partials/_poll.scss

@@ -256,7 +256,7 @@ poll-element {
   }
 
   avatar-element {
-    border: 1px solid #fff;
+    border: 1px solid var(--border-color);
     cursor: pointer;
     width: 18px;
     height: 18px;

src/scss/partials/_scrollable.scss

@@ -31,9 +31,10 @@ html:not(.is-safari):not(.is-ios) {
   }
   
   .scrollable:hover::-webkit-scrollbar-thumb {
-    height: 200px;
+    min-height: 5rem;
+    max-height: 12.5rem;
     border-radius: $border-radius-medium;
-    background-color: rgba(0, 0, 0, .2);
+    background-color: var(--scrollbar-color);
     opacity: 1;
   }
 }
@@ -96,4 +97,4 @@ html:not(.is-safari):not(.is-ios) {
   /* html.is-safari &-padding {
     margin-right: -6px;
   } */
-}
+}

src/scss/partials/_selector.scss

@@ -45,7 +45,7 @@
   }
 
   &-user {
-    color: #000;
+    color: var(--primary-text-color);
     background-color: var(--light-secondary-text-color);
     font-size: 16px;
     padding: 0 17px 0px 0px;
@@ -99,7 +99,7 @@
         content: $tgico-close;
         left: 0;
         top: 0;
-        background-color: #df3f40;
+        background-color: $color-error;
         height: 100%;
         width: 100%;
         z-index: 2;
@@ -174,12 +174,12 @@
   }
 
   .checkbox-field-round {
+    pointer-events: none;
     position: absolute;
     right: 1.125rem;
     --size: 1.25rem;
 
     .checkbox-box-border {
-      border-color: #dadbdc;
       z-index: unset;
     }
 

src/scss/partials/popups/_datePicker.scss

@@ -99,15 +99,15 @@
       }
 
       &-date:disabled {
-        color: #c2c3c4;
+        opacity: .7 !important;
       }
 
       .btn-icon:not(:disabled) {
-        color: #000;
+        color: var(--primary-text-color);
       }
 
       .btn-icon.active {
-        color: #fff;
+        color: var(--badge-text-color);
         border-radius: 50%;
         background-color: var(--primary-color) !important;
       }
@@ -129,10 +129,6 @@
     .btn-icon {
       font-size: 22px;
     }
-
-    .popup-close {
-      color: #52585d;
-    }
   }
 
   .popup-container {
@@ -191,7 +187,7 @@
 
       &-day {
         font-weight: bold;
-        color: black !important;
+        color: var(--primary-text-color) !important;
         font-size: 14px !important;
       }
     }
@@ -228,8 +224,6 @@
 
     &-controls {
       .btn-icon {
-        color: #2a8ee4;
-
         &:disabled {
           visibility: visible;
           //opacity: 1;

src/scss/partials/popups/_popup.scss

@@ -83,7 +83,6 @@
     display: flex;
     margin-bottom: 2rem;
     align-items: center;
-    color: var(--primary-text-color);
   }
 
   &-body {

src/scss/partials/popups/_stickers.scss

@@ -59,6 +59,15 @@
       @include respond-to(handhelds) {
         grid-template-columns: repeat(4, 1fr);
       }
+
+      &.is-loading {
+        min-height: 6rem;
+      }
+
+      .preloader-circular {
+        width: 3rem;
+        height: 3rem;
+      }
     }
 
     &-sticker {

src/scss/style.scss

@@ -94,6 +94,18 @@ $chat-padding-handhelds: .5rem;
   }
 }
 
+@mixin splitColor($property, $color, $light: true, $dark: true) {
+  --#{$property}: #{$color};
+
+  @if $light != false {
+    --light-#{$property}: #{hover-color($color)};
+  }
+
+  @if $dark != false {
+    --dark-#{$property}: #{darken($color, $hover-alpha * 100)};
+  }
+}
+
 :root {
   // * Day theme
   --body-background-color: #fff;
@@ -101,22 +113,18 @@ $chat-padding-handhelds: .5rem;
   --background-color: #fff;
   --border-color: #dfe1e5;
   --surface-color: #fff;
+  --scrollbar-color: rgba(0, 0, 0, .2);
 
   --input-search-background-color: #fff;
   --input-search-border-color: #dfe1e5;
 
-  $primary-color: #3390ec;
-  --primary-color: #{$primary-color};
+  @include splitColor(primary-color, #3390ec, true, true);
   --primary-text-color: #000;
 
-  --light-primary-color: #{hover-color($primary-color)};
-  --dark-primary-color: #{darken($primary-color, $hover-alpha * 100)};
-
-  $secondary-text-color: #707579;
   --secondary-color: #c4c9cc;
-  --secondary-text-color: #707579;
+  @include splitColor(secondary-text-color, #707579, true, false);
 
-  --light-secondary-text-color: #{hover-color($secondary-text-color)};
+  @include splitColor(danger-color, #df3f40, true, false);
 
   --avatar-online-color: #0ac630;
   --chatlist-status-color: var(--avatar-online-color);
@@ -140,22 +148,18 @@ html.night {
   --background-color: #212121;
   --border-color: #0f0f0f;
   --surface-color: #212121;
+  --scrollbar-color: rgba(255, 255, 255, .2);
 
   --input-search-background-color: #181818;
   --input-search-border-color: #2f2f2f;
 
-  $primary-color: #878afd;
-  --primary-color: #{$primary-color};
+  @include splitColor(primary-color, #878afd, true, true);
   --primary-text-color: #fff;
 
-  --light-primary-color: #{hover-color($primary-color)};
-  --dark-primary-color: #{darken($primary-color, $hover-alpha * 100)};
-
-  $secondary-text-color: #aaaaaa;
   --secondary-color: #707579;
-  --secondary-text-color: #{$secondary-text-color};
+  @include splitColor(secondary-text-color, #aaaaaa, true, false);
 
-  --light-secondary-text-color: #{hover-color($secondary-text-color)};
+  @include splitColor(danger-color, #ff595a, true, false);
 
   --avatar-online-color: #0ac630;
   --chatlist-status-color: var(--primary-color);
@@ -347,6 +351,7 @@ html {
 body {
   touch-action: pan-x pan-y;
   background-color: var(--body-background-color);
+  color: var(--primary-text-color);
 }
 
 /* body {
@@ -416,6 +421,7 @@ h4 {
 input, [contenteditable=true] {
   caret-color: var(--primary-color);
   color: var(--primary-text-color);
+  background-color: transparent;
 }
 
 input, textarea {
@@ -1167,6 +1173,11 @@ middle-ellipsis-element {
   flex-direction: column;
   justify-content: center;
 
+  a {
+    position: relative;
+    z-index: 1;
+  }
+
   &-title-row {
     display: flex;
     justify-content: space-between;
@@ -1202,6 +1213,7 @@ middle-ellipsis-element {
       left: 1rem;
       font-size: 1.5rem;
       color: var(--secondary-text-color);
+      pointer-events: none;
     }
   }