Night theme improvements

Await for tracking monkey load
Await for QR load
Language loading fixed on sign pages
Close global search by escape

src/components/appNavigationController.ts

@@ -5,7 +5,7 @@ import { logger } from "../lib/logger";
 import { doubleRaf } from "../helpers/schedulers";
 
 export type NavigationItem = {
-  type: 'left' | 'right' | 'im' | 'chat' | 'popup' | 'media' | 'menu' | 'esg' | 'multiselect' | 'input-helper' | 'markup',
+  type: 'left' | 'right' | 'im' | 'chat' | 'popup' | 'media' | 'menu' | 'esg' | 'multiselect' | 'input-helper' | 'markup' | 'global-search',
   onPop: (canAnimate: boolean) => boolean | void,
   onEscape?: () => boolean,
   noHistory?: boolean,

src/components/chat/markupTooltip.ts

@@ -6,6 +6,7 @@ import { clamp } from "../../helpers/number";
 import { isTouchSupported } from "../../helpers/touchSupport";
 import { isApple, isMobile } from "../../helpers/userAgent";
 import appNavigationController from "../appNavigationController";
+import { _i18n } from "../../lib/langPack";
 //import { logger } from "../../lib/logger";
 
 export default class MarkupTooltip {
@@ -64,7 +65,7 @@ export default class MarkupTooltip {
 
     this.linkBackButton = ButtonIcon('arrow_back', {noRipple: true});
     this.linkInput = document.createElement('input');
-    this.linkInput.placeholder = 'Enter URL...';
+    _i18n(this.linkInput, 'MarkupTooltip.LinkPlaceholder', undefined, 'placeholder');
     this.linkInput.classList.add('input-clear');
     this.linkInput.addEventListener('keydown', (e) => {
       const valid = !this.linkInput.value.length || !!RichTextProcessor.matchUrl(this.linkInput.value);///^(http)|(https):\/\//i.test(this.linkInput.value);

src/components/monkeys/tracking.ts

@@ -81,7 +81,7 @@ export default class TrackingMonkey {
 
   public load() {
     if(this.loadPromise) return this.loadPromise;
-    this.loadPromise = Promise.all([
+    return this.loadPromise = Promise.all([
       lottieLoader.loadAnimationFromURL({
         container: this.container,
         loop: true,

src/components/poll.ts

@@ -85,12 +85,12 @@ rootScope.on('poll_update', (e) => {
 rootScope.on('poll_update', (e) => {
   const {poll, results} = e as {poll: Poll, results: PollResults};
 
-  const pollElement = document.querySelector(`poll-element[poll-id="${poll.id}"]`) as PollElement;
+  const pollElements = Array.from(document.querySelectorAll(`poll-element[poll-id="${poll.id}"]`)) as PollElement[];
-  //console.log('poll_update', poll, results);
+  pollElements.forEach(pollElement => {
-  if(pollElement) {
+    //console.log('poll_update', poll, results);
     pollElement.isClosed = !!poll.pFlags.closed;
     pollElement.performResults(results, poll.chosenIndexes);
-  }
+  });
 });
 
 rootScope.on('peer_changed', () => {

src/components/sidebarLeft/index.ts

@@ -25,6 +25,8 @@ import AppAddMembersTab from "./tabs/addMembers";
 import { i18n_, LangPackKey } from "../../lib/langPack";
 import ButtonMenu, { ButtonMenuItemOptions } from "../buttonMenu";
 import CheckboxField from "../checkboxField";
+import { isMobileSafari } from "../../helpers/userAgent";
+import appNavigationController from "../appNavigationController";
 
 export const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown';
 
@@ -34,15 +36,9 @@ export class AppSidebarLeft extends SidebarSlider {
   //private searchInput = document.getElementById('global-search') as HTMLInputElement;
   private inputSearch: InputSearch;
   
-  private menuEl: HTMLElement;
   public archivedCount: HTMLSpanElement;
 
   private newBtnMenu: HTMLElement;
-  private newButtons: {
-    channel: HTMLButtonElement,
-    group: HTMLButtonElement,
-    privateChat: HTMLButtonElement,
-  } = {} as any;
 
   //private log = logger('SL');
 
@@ -140,7 +136,6 @@ export class AppSidebarLeft extends SidebarSlider {
 
     this.toolsBtn.append(btnMenu);
 
-    this.menuEl = this.toolsBtn.querySelector('.btn-menu');
     this.newBtnMenu = this.sidebarEl.querySelector('#new-menu');
 
     const _newBtnMenu = ButtonMenu([{
@@ -242,7 +237,7 @@ export class AppSidebarLeft extends SidebarSlider {
     let selectedMinDate = 0;
     let selectedMaxDate = 0;
     const updatePicked = () => {
-      (this.inputSearch.input as HTMLInputElement).placeholder = pickedElements.length ? 'Search' : 'Telegram Search';
+      //(this.inputSearch.input as HTMLInputElement).placeholder = pickedElements.length ? 'Search' : 'Telegram Search';
       this.inputSearch.container.classList.toggle('is-picked-twice', pickedElements.length === 2);
       this.inputSearch.container.classList.toggle('is-picked', !!pickedElements.length);
 
@@ -438,6 +433,15 @@ export class AppSidebarLeft extends SidebarSlider {
       this.newBtnMenu.classList.add('is-hidden');
       this.toolsBtn.parentElement.firstElementChild.classList.toggle('state-back', true);
 
+      if(!isMobileSafari) {
+        appNavigationController.pushItem({
+          onPop: () => {
+            close();
+          },
+          type: 'global-search'
+        });
+      }
+
       transition(1);
     };
 
@@ -449,6 +453,8 @@ export class AppSidebarLeft extends SidebarSlider {
       this.backBtn.classList.remove(activeClassName);
       this.toolsBtn.parentElement.firstElementChild.classList.toggle('state-back', false);
 
+      appNavigationController.removeByType('global-search');
+
       transition(0);
     });
 

src/config/app.ts

@@ -4,6 +4,7 @@ const App = {
   version: '0.4.0',
   langPackVersion: '0.0.5',
   langPack: 'macos',
+  langPackCode: 'en',
   domains: [] as string[],
   baseDcId: 2
 };

src/lang.ts

@@ -88,6 +88,7 @@ const lang = {
   "TwoStepAuth.InvalidPassword": "Invalid password",
   "TwoStepAuth.EmailCodeChangeEmail": "Change Email",
   "PleaseWait": "Please wait...",
+  "MarkupTooltip.LinkPlaceholder": "Enter URL...",
 
   // * android
   "ActionCreateChannel": "Channel created",

src/lib/appManagers/appStickersManager.ts

@@ -123,7 +123,7 @@ export class AppStickersManager {
   }
 
   public getStickerSetThumbDownloadOptions(stickerSet: StickerSet.stickerSet) {
-    const thumb = stickerSet.thumbs[0] as PhotoSize.photoSize;
+    const thumb = stickerSet.thumbs.find(thumb => thumb._ === 'photoSize') as PhotoSize.photoSize;
     const dcId = stickerSet.thumb_dc_id;
 
     const isAnimated = stickerSet.pFlags?.animated;

src/lib/langPack.ts

@@ -58,11 +58,11 @@ namespace I18n {
 		]).then(([langPack]) => {
 			if(!langPack/*  || true */) {
 				return loadLocalLangPack();
-			} else if(DEBUG/*  && false */) {
+			} else if(DEBUG && false) {
 				return getLangPack(langPack.lang_code);
-			} else if(langPack.appVersion !== App.langPackVersion) {
+			}/*  else if(langPack.appVersion !== App.langPackVersion) {
 				return getLangPack(langPack.lang_code);
-			}
+			} */
 			
 			if(!lastRequestedLangCode) {
 				lastRequestedLangCode = langPack.lang_code;
@@ -76,15 +76,15 @@ namespace I18n {
 	}
 
 	export function loadLocalLangPack() {
-		const defaultCode = 'en';
+		const defaultCode = App.langPackCode;
 		lastRequestedLangCode = defaultCode;
 		return Promise.all([
 			import('../lang'),
 			import('../langSign')
 		]).then(([lang, langSign]) => {
 			const strings: LangPackString[] = [];
-			formatLocalStrings(lang, strings);
+			formatLocalStrings(lang.default, strings);
-			formatLocalStrings(langSign, strings);
+			formatLocalStrings(langSign.default, strings);
 
 			const langPack: LangPackDifference = {
 				_: 'langPackDifference',

src/lib/lottieLoader.ts

@@ -657,6 +657,11 @@ class LottieLoader {
 
   public waitForFirstFrame(player: RLottiePlayer): Promise<void> {
     return Promise.race([
+      /* new Promise<void>((resolve) => {
+        player.addEventListener('firstFrame', () => {
+          setTimeout(() => resolve(), 1500);
+        }, true);
+      }) */
       new Promise<void>((resolve) => {
         player.addEventListener('firstFrame', resolve, true);
       }),

src/pages/pageSignIn.ts

@@ -17,6 +17,7 @@ import App from "../config/app";
 import Modes from "../config/modes";
 import I18n, { _i18n, i18n } from "../lib/langPack";
 import { LangPackString } from "../layer";
+import lottieLoader from "../lib/lottieLoader";
 
 type Country = _Country & {
   li?: HTMLLIElement[]
@@ -240,6 +241,8 @@ let onFirstMount = () => {
     //console.log('input', this.value);
     this.classList.remove('error');
 
+    lottieLoader.loadLottieWorkers();
+
     const value = this.value;
     const diff = Math.abs(value.length - lastValue.length);
     if(diff > 1 && !pasted && isAppleMobile) {
@@ -351,9 +354,24 @@ let onFirstMount = () => {
 
   const btnQr = Button('btn-primary btn-secondary btn-primary-transparent primary', {text: 'Login.QR.Login'});
 
+  let qrMounted = false;
   btnQr.addEventListener('click', () => {
-    import('./pageSignQR').then(module => {
+    const promise = import('./pageSignQR');
+    btnQr.disabled = true;
+
+    let preloaderDiv: HTMLElement;
+    if(!qrMounted) {
+      preloaderDiv = putPreloader(btnQr);
+      qrMounted = true;
+    }
+
+    promise.then(module => {
       module.default.mount();
+
+      setTimeout(() => {
+        btnQr.removeAttribute('disabled');
+        preloaderDiv.remove();
+      }, 200);
     });
   });
 

src/pages/pageSignQR.ts

@@ -56,112 +56,123 @@ let onFirstMount = async() => {
   let options: {dcId?: number, ignoreErrors: true} = {ignoreErrors: true};
   let prevToken: Uint8Array | number[];
 
-  return async() => {
+  const iterate = async(isLoop: boolean) => {
-    stop = false;
+    try {
-
+      let loginToken = await apiManager.invokeApi('auth.exportLoginToken', {
-    do {
+        api_id: App.id,
-      if(stop) {
+        api_hash: App.hash,
-        break;
+        except_ids: []
-      }
+      }, {ignoreErrors: true});
-  
-      try {
-        let loginToken = await apiManager.invokeApi('auth.exportLoginToken', {
-          api_id: App.id,
-          api_hash: App.hash,
-          except_ids: []
-        }, {ignoreErrors: true});
-    
-        if(loginToken._ === 'auth.loginTokenMigrateTo') {
-          if(!options.dcId) {
-            options.dcId = loginToken.dc_id;
-            apiManager.setBaseDcId(loginToken.dc_id);
-            //continue;
-          }
-          
-          loginToken = await apiManager.invokeApi('auth.importLoginToken', {
-            token: loginToken.token
-          }, options) as AuthLoginToken.authLoginToken;
-        }
   
-        if(loginToken._ === 'auth.loginTokenSuccess') {
+      if(loginToken._ === 'auth.loginTokenMigrateTo') {
-          const authorization = loginToken.authorization as any as AuthAuthorization.authAuthorization;
+        if(!options.dcId) {
-          apiManager.setUserAuth(authorization.user.id);
+          options.dcId = loginToken.dc_id;
-          pageIm.mount();
+          apiManager.setBaseDcId(loginToken.dc_id);
-          break;
+          //continue;
         }
-  
+        
-        /* // to base64
+        loginToken = await apiManager.invokeApi('auth.importLoginToken', {
-        var decoder = new TextDecoder('utf8');
+          token: loginToken.token
-        var b64encoded = btoa(String.fromCharCode.apply(null, [...loginToken.token])); */
+        }, options) as AuthLoginToken.authLoginToken;
-  
+      }
-        if(!prevToken || !bytesCmp(prevToken, loginToken.token)) {
+
-          prevToken = loginToken.token;
+      if(loginToken._ === 'auth.loginTokenSuccess') {
-  
+        const authorization = loginToken.authorization as any as AuthAuthorization.authAuthorization;
-          let encoded = bytesToBase64(loginToken.token);
+        apiManager.setUserAuth(authorization.user.id);
-          let url = "tg://login?token=" + encoded.replace(/\+/g, "-").replace(/\//g, "_").replace(/\=+$/, "");
+        pageIm.mount();
-
+        return true;
-          const qrCode = new QRCodeStyling({
+      }
-            width: 240 * window.devicePixelRatio,
-            height: 240 * window.devicePixelRatio,
-            data: url,
-            image: "assets/img/logo_padded.svg",
-            dotsOptions: {
-              color: "#000000",
-              type: "rounded"
-            },
-            imageOptions: {
-              imageSize: .75
-            },
-            backgroundOptions: {
-              color: "#ffffff"
-            },
-            qrOptions: {
-              errorCorrectionLevel: "L"
-            }
-          });
 
-          qrCode.append(imageDiv);
+      /* // to base64
-          (imageDiv.lastChild as HTMLCanvasElement).classList.add('qr-canvas');
+      var decoder = new TextDecoder('utf8');
-
+      var b64encoded = btoa(String.fromCharCode.apply(null, [...loginToken.token])); */
-          let promise: Promise<void>;
+
-          if(qrCode._drawingPromise) {
+      if(!prevToken || !bytesCmp(prevToken, loginToken.token)) {
-            promise = qrCode._drawingPromise;
+        prevToken = loginToken.token;
-          } else {
+
-            promise = Promise.race([
+        let encoded = bytesToBase64(loginToken.token);
-              pause(1000),
+        let url = "tg://login?token=" + encoded.replace(/\+/g, "-").replace(/\//g, "_").replace(/\=+$/, "");
-              new Promise<void>((resolve) => {
+
-                qrCode._canvas._image.addEventListener('load', () => {
+        const qrCode = new QRCodeStyling({
-                  window.requestAnimationFrame(() => resolve());
+          width: 240 * window.devicePixelRatio,
-                }, {once: true});
+          height: 240 * window.devicePixelRatio,
-              })
+          data: url,
-            ]);
+          image: "assets/img/logo_padded.svg",
+          dotsOptions: {
+            color: "#000000",
+            type: "rounded"
+          },
+          imageOptions: {
+            imageSize: .75
+          },
+          backgroundOptions: {
+            color: "#ffffff"
+          },
+          qrOptions: {
+            errorCorrectionLevel: "L"
           }
+        });
+
+        qrCode.append(imageDiv);
+        (imageDiv.lastChild as HTMLCanvasElement).classList.add('qr-canvas');
+
+        let promise: Promise<void>;
+        if(qrCode._drawingPromise) {
+          promise = qrCode._drawingPromise;
+        } else {
+          promise = Promise.race([
+            pause(1000),
+            new Promise<void>((resolve) => {
+              qrCode._canvas._image.addEventListener('load', () => {
+                window.requestAnimationFrame(() => resolve());
+              }, {once: true});
+            })
+          ]);
+        }
 
-          // * это костыль, но библиотека не предоставляет никаких событий
+        // * это костыль, но библиотека не предоставляет никаких событий
-          promise.then(() => {
+        await promise.then(() => {
-            Array.from(imageDiv.children).slice(0, -1).forEach(el => {
+          Array.from(imageDiv.children).slice(0, -1).forEach(el => {
-              el.remove();
+            el.remove();
-            });
           });
-        }
+        });
-  
+      }
+
+      if(isLoop) {
         let timestamp = Date.now() / 1000;
         let diff = loginToken.expires - timestamp - serverTimeManager.serverTimeOffset;
   
         await pause(diff > 5 ? 5e3 : 1e3 * diff | 0);
-      } catch(err) {
+      }
-        switch(err.type) {
+    } catch(err) {
-          case 'SESSION_PASSWORD_NEEDED':
+      switch(err.type) {
-            console.warn('pageSignQR: SESSION_PASSWORD_NEEDED');
+        case 'SESSION_PASSWORD_NEEDED':
-            err.handled = true;
+          console.warn('pageSignQR: SESSION_PASSWORD_NEEDED');
-            pagePassword.mount();
+          err.handled = true;
-            stop = true;
+          pagePassword.mount();
-            cachedPromise = null;
+          stop = true;
-            break;
+          cachedPromise = null;
-          default:
+          break;
-            console.error('pageSignQR: default error:', err);
+        default:
-            break;
+          console.error('pageSignQR: default error:', err);
-        }
+          break;
+      }
+    }
+  };
+
+  await iterate(false);
+
+  return async() => {
+    stop = false;
+
+    do {
+      if(stop) {
+        break;
+      }
+  
+      const needBreak = await iterate(true);
+      if(needBreak) {
+        break;
       }
     } while(true);
   };

src/scss/components/_global.scss

@@ -144,7 +144,7 @@ Utility Classes
 }
 
 .pre-wrap {
-  white-space: pre-wrap;
+  white-space: pre-wrap !important;
 }
 
 /* .flex-grow {

src/scss/mixins/_hover.scss

@@ -5,7 +5,7 @@
     } @else if $color == blue or $color == primary {
       $color: var(--light-primary-color);
     } @else if $color == red {
-      $color: var(--color-red-hover);
+      $color: var(--light-danger-color);
     }
   }
 

src/scss/mixins/_textOverflow.scss

@@ -0,0 +1,10 @@
+@mixin text-overflow($no-wrap: true) {
+  @if $no-wrap != false {
+    white-space: nowrap;
+  } @else {
+    word-break: break-word;
+  }
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

src/scss/partials/_audio.scss

@@ -5,9 +5,9 @@
   height: 54px;
   user-select: none;
 
-  @include respond-to(handhelds) {
+  /* @include respond-to(handhelds) {
     padding-left: 45px;
-  }
+  } */
 
   &-toggle, &-download {
     overflow: hidden;
@@ -399,7 +399,7 @@
 
   &-title {
     font-size: 1rem;
-    color: #000;
+    color: var(--primary-text-color);
   }
 
   &-time, &-subtitle {
@@ -473,23 +473,8 @@
     flex: 1 1 auto;
     margin-left: 5px;
 
-    &__filled {
-      background-color: var(--primary-color);
-
-      &:not(.progress-line__loaded) {
-        z-index: 1;
-      }
-    }
-
-    &__loaded {
-      background-color: #cacaca;
-    }
-
     &__seek {
-      --thumb-size: 12px;
+      --thumb-size: .75rem;
-      --thumb-color: var(--primary-color);
-      //background-color: #e6ecf0;
-      background-color: rgba(193, 207, 220, .39);
     }
   }
 }

src/scss/partials/_button.scss

@@ -34,9 +34,8 @@
   }
 
   &:disabled {
-    color: #cacaca;
     pointer-events: none !important;
-    opacity: .25;
+    opacity: var(--disabled-opacity);
   }
 }
 
@@ -296,9 +295,7 @@
     }
 
     &.danger {
-      @include hover() {
+      @include hover-background-effect(red, false);
-        background: hover-color($color-red);
-      }
     }
 
     .preloader-circular .preloader-path {
@@ -318,7 +315,7 @@
 
   &:disabled {
     pointer-events: none !important;
-    opacity: .25;
+    opacity: var(--disabled-opacity);
   }
 }
 

src/scss/partials/_chatBubble.scss

@@ -164,9 +164,13 @@ $bubble-margin: .25rem;
     left: 0;
     display: flex;
     margin: 0;
+    
+    .checkbox-box-border {
+      border-color: var(--message-checkbox-border-color);
+    }
 
     .checkbox-box-background {
-      background-color: #61c642;
+      background-color: var(--message-checkbox-color);
     }
 
     .checkbox-box-check {
@@ -302,7 +306,7 @@ $bubble-margin: .25rem;
     align-items: center;
     display: flex;
     justify-content: center;
-    color: var(--badge-color);
+    color: var(--badge-text-color);
     border-radius: 50%;
     //background: rgba(0, 0, 0, .16);
     background: var(--message-highlightning-color);
@@ -360,11 +364,11 @@ $bubble-margin: .25rem;
     display: none;
   }
 
-  &:not(.hide-name) {
+  /* &:not(.hide-name) {
     .audio {
       margin: 4px 0;
     }
-  }
+  } */
 
   /* .goto-original {
     opacity: 1;
@@ -614,7 +618,7 @@ $bubble-margin: .25rem;
   }
 
   .album-item {
-    background-color: rgba(0, 0, 0, .06);
+    background-color: var(--message-highlightning-color);
     max-width: 100%;
     cursor: pointer;
     position: absolute;
@@ -667,6 +671,12 @@ $bubble-margin: .25rem;
     }
   }
 
+  a {
+    @include hover() {
+      text-decoration: underline;
+    }
+  }
+
   .web {
     padding-top: 1px;
     margin: 4px 0 -5px 1px;
@@ -786,7 +796,8 @@ $bubble-margin: .25rem;
       .reply {
         padding: 10px;
         border-radius: 12px;
-        border: 1px solid #ccc;
+        background-color: var(--message-background-color);
+        border: 1px solid var(--border-color);
         max-width: 300px;
         height: 54px;
         max-height: 54px;
@@ -828,6 +839,15 @@ $bubble-margin: .25rem;
     }
   }
 
+  @include respond-to(handhelds) {
+    .document, .audio {
+      &-ico, &-download {
+        height: 2.25rem;
+        width: 2.25rem;
+      }
+    }
+  }
+
   .audio {
     padding-right: 2px;
     
@@ -843,8 +863,8 @@ $bubble-margin: .25rem;
     }
     
     @include respond-to(handhelds) {
-      height: 42px;
+      height: 2.375rem;
-      padding-left: 47px;
+      padding-left: calc(2.375rem + .5625rem);
 
       .audio-details {
         margin-top: 2px;
@@ -918,6 +938,15 @@ $bubble-margin: .25rem;
 
       @include respond-to(handhelds) {
         padding-left: 44px; //было 44
+        height: 44px;
+
+        .document-size {
+          font-size: .75rem;
+        }
+
+        &:not(.document-with-thumb) .document-ico {
+          padding: 1.125rem 0px 0px 0px;
+        }
       }
 
       &-name {
@@ -1019,24 +1048,24 @@ $bubble-margin: .25rem;
       .bubble-select-checkbox {
         left: 2rem;
         top: 2rem;
-        width: 1.5rem;
-        height: 1.5rem;
         background: #fff;
         border-radius: 50%;
 
         @include respond-to(handhelds) {
+          --size: 1.125rem;
           left: 20px;
           top: 25px;
         }
 
         &:before {
+          --inner-size: .125rem;
           content: " ";
           position: absolute;
-          width: 1.25rem;
+          width: calc(var(--size) - (var(--inner-size) * 2));
-          height: 1.25rem;
+          height: calc(var(--size) - (var(--inner-size) * 2));
-          left: .125rem;
+          left: var(--inner-size);
-          top: .125rem;
+          top: var(--inner-size);
-          border: 2px solid #c4c9cc;
+          border: 2px solid var(--secondary-color);
           border-radius: inherit;
         }
       }
@@ -1084,10 +1113,14 @@ $bubble-margin: .25rem;
 
     .document {
       height: 54px !important;
+      
+      @include respond-to(handhelds) {
+        height: 38px !important;
+      }
     }
 
     .document-wrapper {
-      background-color: #fff;
+      background-color: var(--message-background-color);
       padding: .25rem .5rem;
 
       > .name {
@@ -1424,8 +1457,8 @@ $bubble-margin: .25rem;
     }
 
     &-footer {
-      height: 51px;
+      height: 50px;
-      border-top: 2px solid var(--border-color);
+      border-top: 1px solid var(--border-color);
       position: relative;
       display: flex;
       align-items: center;
@@ -1655,7 +1688,7 @@ $bubble-margin: .25rem;
     &.emoji-big, &.sticker {
       .reply {
         left: calc(100% + 10px);
-        background-color: #fff;
+        background-color: var(--message-background-color);
 
         @include respond-to(handhelds) {
           left: calc(100% + 1px);
@@ -1718,6 +1751,9 @@ $bubble-margin: .25rem;
 .bubble.is-out {
   flex-direction: row-reverse;
   --message-background-color: var(--message-out-background-color);
+  --light-message-background-color: var(--light-message-out-background-color);
+  --dark-message-background-color: var(--dark-message-out-background-color);
+  --link-color: var(--message-out-link-color);
 
   .bubble-content {
     &, .poll-footer-button {
@@ -1729,20 +1765,22 @@ $bubble-margin: .25rem;
     }
 
     &-wrapper {
-      transform: translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
+      @include respond-to(not-handhelds) {
-
+        transform: translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
-      @include respond-to(no-floating-left-sidebar) {
-        body.is-right-column-shown & {
-          transform: translateX(0);
 
-          &.zoom-fade {
+        @include respond-to(no-floating-left-sidebar) {
-            transform: scale3d(.8, .8, 1) translateX(0);
+          body.is-right-column-shown & {
+            transform: translateX(0);
+  
+            &.zoom-fade {
+              transform: scale3d(.8, .8, 1) translateX(0);
+            }
           }
         }
-      }
+  
-
+        &.zoom-fade {
-      &.zoom-fade {
+          transform: scale3d(.8, .8, 1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
-        transform: scale3d(.8, .8, 1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
+        }
       }
     }
   }
@@ -1792,16 +1830,14 @@ $bubble-margin: .25rem;
 
   .quote {
     @include hover() {
-      background-color: rgba($color-green, .12);
+      background-color: var(--light-message-background-color);
     }
   }
 
   &.is-reply {
     &.emoji-big, &.sticker {
       .web, .reply {
-        background-color: var(--message-out-background-color);
         right: calc(100% + 10px);
-        border-color: rgba($color-green, .12);
       }
     }
   }
@@ -1868,8 +1904,8 @@ $bubble-margin: .25rem;
   } */
 
   .document-ico:after {
-    border-top-color: var(--message-out-background-color);
+    border-top-color: var(--message-background-color);
-    border-right-color: var(--message-out-background-color);
+    border-right-color: var(--message-background-color);
   }
 
   .audio {
@@ -1970,21 +2006,18 @@ $bubble-margin: .25rem;
     pointer-events: none;
   }
 
-  .audio:not(.is-voice) {
+  .audio {
     .progress-line {
-      &__loaded {
+      --color: var(--message-out-primary-color);
-        background-color: #90e18d !important;
+
-      }
+      &:before, &__loaded {
-  
+        background-color: var(--message-out-primary-color);
-      &__filled {
-        background-color: #47aa41;
-      }
-  
-      &__seek {
-        --thumb-color: #47aa41;
-        background-color: rgba(124, 195, 107, .52);
       }
     }
+
+    .preloader-container {
+      --color: var(--message-background-color);
+    }
   }
 
   .bubble-beside-button {
@@ -2000,14 +2033,14 @@ $bubble-margin: .25rem;
   &.is-multiple-documents {
     .document-container {
       .bubble-select-checkbox {
-        background-color: var(--message-out-background-color);
+        background-color: var(--message-background-color);
 
         &:before {
-          border-color: #9ed695;
+          border-color: var(--dark-message-background-color);
         }
 
         .checkbox-box-border {
-          border-color: var(--message-out-background-color);
+          border-color: var(--message-background-color);
         }
       }
 
@@ -2017,7 +2050,7 @@ $bubble-margin: .25rem;
     }
 
     .document-wrapper {
-      background-color: var(--message-out-background-color);
+      background-color: var(--message-background-color);
     }
   }
 }

src/scss/partials/_chatMarkupTooltip.scss

@@ -3,7 +3,7 @@
 	$widthLink: 420px;
 	$padding: 7px;
 
-	background: #fff;
+	background: var(--surface-color);
 	border-radius: $border-radius-medium;
 	transform: translateZ(0);
 	opacity: 0;
@@ -67,7 +67,7 @@
 	&-delimiter {
 		width: 1px;
 		height: 25px;
-		background-color: #DADCE0;
+		background-color: var(--border-color);
 	}
 
 	.btn-icon {

src/scss/partials/_chatPinned.scss

@@ -450,7 +450,7 @@
   }
 
   &-ico {
-    color: #50a2e9;
+    color: var(--primary-color);
     margin-right: .375rem;
 
     &:before {

src/scss/partials/_chatlist.scss

@@ -9,7 +9,6 @@
 
   .search-group {
     width: 100%;
-    //border-bottom: 1px solid #DADCE0;
     padding: 1rem 0 .5rem;
     margin-bottom: 17px;
 
@@ -31,7 +30,7 @@
     }
 
     &-contacts {
-      border-bottom: 1px solid #dadce0;
+      border-bottom: 1px solid var(--border-color);
 
       @include respond-to(handhelds) {
         padding: 0px 0 2px;
@@ -130,9 +129,10 @@ ul.chatlist {
         &:after {
           flex: 0 0 auto;
           content: $tgico-nosound;
-          color: #a3a3a3;
+          color: var(--secondary-text-color);
           font-size: 1.125rem;
           margin-left: .125rem;
+          opacity: .7;
         }
       }
 

src/scss/partials/_checkbox.scss

@@ -11,7 +11,7 @@
 
   &.checkbox-disabled {
     pointer-events: none !important;
-    opacity: .25;
+    opacity: var(--disabled-opacity);
   }
 
   @include respond-to(handhelds) {
@@ -127,7 +127,7 @@
     }
 
     &-check {
-      --offset: 10px;
+      --offset: calc(var(--size) - (var(--size) / 2 + .125rem));
     }
   }
 }
@@ -250,7 +250,7 @@
 
   &:disabled + .checkbox-box, &:disabled ~ .checkbox-caption {
     cursor: default;
-    opacity: .25;
+    opacity: var(--disabled-opacity);
   }
 }
 
@@ -288,7 +288,7 @@
     }
 
     .checkbox-box-background {
-      background-color: $color-red;
+      background-color: var(--danger-color);
     }
   }
 }

src/scss/partials/_ckin.scss

@@ -141,7 +141,7 @@
       border-radius: var(--border-radius);
   
       &__filled {
-        background: #63a2e3;
+        background: var(--primary-color);
       }
   
       &__loaded, & {
@@ -272,6 +272,7 @@ video::-webkit-media-controls-enclosure {
 }
 
 .progress-line {
+  --color: var(--primary-color);
   --height: 5px;
   --border-radius: 6px;
   border-radius: var(--border-radius);
@@ -279,9 +280,19 @@ video::-webkit-media-controls-enclosure {
   position: relative;
   cursor: pointer;
 
+  &:before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    content: " ";
+    border-radius: inherit;
+  }
+
   &__seek {
     --thumb-size: 13px;
-    --thumb-color: var(--primary-color);
     -webkit-appearance: none;
     -moz-appearance: none;
     background: transparent;
@@ -315,7 +326,7 @@ video::-webkit-media-controls-enclosure {
       height: var(--thumb-size);
       width: var(--thumb-size);
       border-radius: 50%;
-      background-color: var(--thumb-color);
+      background-color: var(--color);
       cursor: pointer;
       -webkit-appearance: none;
       border: none;
@@ -326,7 +337,7 @@ video::-webkit-media-controls-enclosure {
       height: var(--thumb-size);
       width: var(--thumb-size);
       border-radius: 50%;
-      background-color: var(--thumb-color);
+      background-color: var(--color);
       cursor: pointer;
       -webkit-appearance: none;
       border: none;
@@ -337,7 +348,7 @@ video::-webkit-media-controls-enclosure {
       height: var(--thumb-size);
       width: var(--thumb-size);
       border-radius: 50%;
-      background-color: var(--thumb-color);
+      background-color: var(--color);
       cursor: pointer;
       -webkit-appearance: none;
       border: none;
@@ -357,6 +368,16 @@ video::-webkit-media-controls-enclosure {
   &__filled {
     padding-right: 1px; // * need because there is border-radius
     max-width: 100%;
+
+    &:not(.progress-line__loaded) {
+      background-color: var(--color);
+      z-index: 1;
+    }
+  }
+
+  &__loaded, &:before {
+    opacity: .3;
+    background-color: var(--secondary-color);
   }
 
   &__seek, &__filled, &__loaded {

src/scss/partials/_document.scss

@@ -14,24 +14,31 @@
       padding: 1.5625rem .25rem 0 .25rem;
 
       @include respond-to(handhelds) {
-        padding: 14px 0px 0px 0px;
+        padding: 1.5rem 0px 0px 0px;
         font-size: 14px;
+
+        &:after {
+          --size: .875rem;
+        }
       }
     }
 
     &:after {
+      --size: 1.125rem;
       content: "";
       display: block;
       position: absolute;
       top: 0;
       right: 0;
-      width: 1.125rem;
+      width: var(--size);
-      height: 1.125rem;
+      height: var(--size);
       border-bottom-left-radius: .25rem;
-      border-left: .5625rem solid rgba(0, 0, 0, .25);
+      border-style: solid;
-      border-bottom: .5625rem solid rgba(0, 0, 0, .25);
+      border-width: calc(var(--size) / 2);
-      border-top: .5625rem solid #fff;
+      border-left-color: rgba(0, 0, 0, .25);
-      border-right: .5625rem solid #fff;
+      border-bottom-color: rgba(0, 0, 0, .25);
+      border-top-color: #fff;
+      border-right-color: #fff;
     }
   }
   
@@ -141,11 +148,6 @@
     width: 3.375rem;
     height: 3.375rem;
     color: #fff;
-
-    @include respond-to(handhelds) {
-      height: 2.25rem;
-      width: 2.25rem;
-    }
   }
 
   &-download {
@@ -188,4 +190,4 @@
     width: 100%;
     height: 100%;
   }
-}
+}

src/scss/partials/_emojiDropdown.scss

@@ -11,7 +11,7 @@
 	
 	@include respond-to(esg-top) {
 		position: absolute !important;
-		left: 1rem;
+		left: $chat-padding;
 		bottom: 85px;
 		width: 420px !important;
 		height: 420px;
@@ -51,10 +51,6 @@
 		height: 100%;
 	}
 
-	.btn-icon {
-		color: #8d969c;
-	}
-
 	.emoji-tabs {
 		justify-content: center;
 

src/scss/partials/_input.scss

@@ -63,7 +63,7 @@
     --padding-horizontal: 1rem;
     --border-width: 1px;
     --border-width-top: 2px;
-    border: var(--border-width) solid #DADCE0;
+    border: var(--border-width) solid var(--input-search-border-color);
     border-radius: $border-radius-medium;
     background-color: transparent;
     //padding: 0 1rem;
@@ -118,10 +118,10 @@
     }
     
     &.error {
-      border-color: $color-error;
+      border-color: var(--danger-color);
 
       & ~ label {
-        color: $color-error!important;
+        color: var(--danger-color) !important;
       }
     }
 
@@ -208,7 +208,7 @@ input:focus, button:focus {
 
   &.error {
     body.animation-level-0 & {
-      color: $color-error!important;
+      color: var(--danger-color) !important;
     }
 
     body:not(.animation-level-0) & {
@@ -312,6 +312,7 @@ input:focus, button:focus {
     width: 24px;
     height: 24px;
     left: .8125rem;
+    pointer-events: none;
   }
 
   > .tgico-close {

src/scss/partials/_leftSidebar.scss

@@ -134,9 +134,8 @@
       .selector-user {
         height: 30px;
         position: absolute!important;
-        left: 5px;
+        left: 6px;
-        top: 5px;
+        top: 6px;
-        background: #f1f3f4;
         z-index: 1;
         margin-left: 0;
       }
@@ -174,8 +173,8 @@
         margin-top: 7px;
         font-size: 14px;
 
-        &:hover {
+        @include hover() {
-          background-color: rgba(80, 162, 233, .2);
+          background-color: var(--light-primary-color);
         }
 
         &-avatar:after {
@@ -726,29 +725,6 @@
     }
   }
 
-  .checkbox [type="checkbox"] {
-    & + span:after {
-      border-radius: 50%;
-      height: 20px;
-      width: 20px;
-      border-color: #dadbdc;
-    }
-
-    &:checked {
-      & + span {
-        &:before {
-          top: 5px;
-          left: 0px;
-        }
-
-        &:after {
-          background-color: #4EA4F6;
-          border: none;
-        }
-      }
-    }
-  }
-
   .folder-category-button {
     cursor: pointer;
   }

src/scss/partials/_poll.scss

@@ -314,7 +314,7 @@ poll-element {
       stroke-dashoffset: 0;
       stroke-opacity: 1;
       stroke-width: 2;
-      stroke: #dadbdc;
+      stroke: var(--border-color);
       fill: transparent;
     }
   }

src/scss/partials/_preloader.scss

@@ -55,6 +55,8 @@ $transition: .2s ease-in-out;
 }
 
 .preloader-container {
+  --color: #fff;
+
   .you-spin-me-round {
     width: 100%;
     height: 100%;
@@ -74,7 +76,7 @@ $transition: .2s ease-in-out;
     stroke-dashoffset: 0;
     
     stroke-linecap: round;
-    stroke: white;
+    stroke: var(--color);
     stroke-width: 2;
   }
 
@@ -112,7 +114,7 @@ $transition: .2s ease-in-out;
     bottom: 0;
     right: 0;
     margin: auto;
-    color: #fff;
+    color: var(--color);
     width: 56%;
     height: 56%;
     transition: opacity .2s ease-in-out/* , transform .2s ease-in-out */;
@@ -120,7 +122,7 @@ $transition: .2s ease-in-out;
     opacity: 1;
 
     path {
-      fill: #fff;
+      fill: var(--color);
     }
 
     @include hover() {
@@ -159,7 +161,7 @@ $transition: .2s ease-in-out;
       width: .8125rem;
       height: .8125rem;
       border-radius: .125rem;
-      background-color: #fff;
+      background-color: var(--color);
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);

src/scss/partials/_rightSidebar.scss

@@ -135,6 +135,10 @@
       flex-direction: column;
       //transform: none;
     }
+
+    .row-title {
+      word-break: break-word;
+    }
   }
 
   &-name {
@@ -171,67 +175,6 @@
     }
   }
 
-  &-row {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    padding-left: 80px;
-    padding-right: 12px;
-    //font-size: 15px;
-    position: relative;
-    margin-top: 27px;
-    margin-bottom: 1px;
-    line-height: 1.4;
-    
-    @include respond-to(handhelds) {
-      padding-left: 71px;
-    }
-    
-    &:before {
-      position: absolute;
-      left: 24px;
-      /* top: 0; */
-      font-size: 24px;
-      color: var(--secondary-text-color);
-
-      @include respond-to(handhelds) {
-        left: 15px;
-      }
-    }
-
-    p {
-      color: #000;
-      margin: 0;
-      font-size: 1rem;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      word-break: break-word;
-      white-space: pre-wrap;
-    }
-
-    &-bio {
-      .emoji {
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    &-label {
-      color: var(--secondary-text-color) !important;
-      font-size: 14px !important;
-      line-height: 1.6;
-
-      @include respond-to(handhelds) {
-        line-height: 1.6;
-      }
-    }
-
-    &-notifications {
-      margin-top: 26px;
-      line-height: 1.3;
-    }
-  }
-
   &-avatar {
     margin: .5rem auto 10px;
     display: block;
@@ -244,7 +187,7 @@
     }
   }
 
-  &-name, &-subtitle, &-row, &-avatar {
+  &-name, &-subtitle, &-avatar {
     flex: 0 0 auto;
   }
 }
@@ -288,7 +231,7 @@
   }
 
   .search-super-month-name {
-    border-top: 1px solid #dadce0;
+    border-top: 1px solid var(--border-color);
     padding: 24px 0px 0px 24px;
     font-weight: 500;
     color: var(--secondary-text-color);

src/scss/partials/_selector.scss

@@ -58,13 +58,16 @@
     user-select: none;
     flex: 0 0 auto;
     transition: .2s opacity, .2s transform, .2s background-color;
+    max-width: 10rem;
+
+    @include text-overflow();
 
     body.animation-level-0 & {
       transition: none;
     }
 
     @include hover() {
-      background-color: #fae2e3;
+      background-color: var(--light-danger-color);
       cursor: pointer;
 
       .selector-user-avatar:after {
@@ -99,7 +102,7 @@
         content: $tgico-close;
         left: 0;
         top: 0;
-        background-color: $color-error;
+        background-color: var(--danger-color);
         height: 100%;
         width: 100%;
         z-index: 2;

src/scss/partials/pages/_authCode.scss

@@ -19,11 +19,11 @@
     }
     
     .phone.error {
-      border-color: $color-error!important;
+      border-color: var(--danger-color) !important;
     }
   }
 
   .subtitle {
     margin-top: 0;
   }
-}
+}

src/scss/partials/pages/_chats.scss

@@ -83,21 +83,6 @@
     }
   } */
   
-  .preloader {
-    width: 50px;
-    height: 50px;
-    
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-    
-    // ! do not change it to &-path
-    .preloader-path {
-      stroke: var(--primary-color);
-    }
-  }
-
   #search-container, .sidebar-search {
     flex-direction: column;
     width: 100%;
@@ -108,7 +93,6 @@
     left: 0;
     top: 0;
     z-index: 3;
-    background: #fff;
   }
 
   @include respond-to(large-screens) {

src/scss/partials/popups/_stickers.scss

@@ -61,12 +61,8 @@
       }
 
       &.is-loading {
-        min-height: 6rem;
+        min-height: 9rem;
-      }
+        position: relative;
-
-      .preloader-circular {
-        width: 3rem;
-        height: 3rem;
       }
     }
 

src/scss/style.scss

@@ -4,8 +4,6 @@ $border-radius-medium: 10px;
 $border-radius-big: 12px;
 
 $color-green: #4DCD5E;
-$color-error: #df3f40;
-$color-red: #df3f40;
 $hover-alpha: .08;
 
 //$small-screen: 720px;
@@ -29,6 +27,7 @@ $chat-padding-handhelds: .5rem;
 
 @import "mixins/hover";
 @import "mixins/respondTo";
+@import "mixins/textOverflow";
 
 :root {
   --vh: 1vh;
@@ -36,7 +35,6 @@ $chat-padding-handhelds: .5rem;
   --hover-alpha: #{$hover-alpha};
 
   --color-gray: #c4c9cc;
-  --color-red-hover: #{hover-color($color-red)};
   --pm-transition: .2s ease-in-out;
   --layer-transition: .2s ease-in-out;
   --slide-header-transition: .4s ease-in-out;
@@ -53,6 +51,7 @@ $chat-padding-handhelds: .5rem;
   --messages-secondary-text-size: calc(var(--messages-text-size) - 1px);
   --line-height: 1.3125;
   --esg-sticker-size: 80px;
+  --disabled-opacity: .3;
 
   // https://github.com/overtake/TelegramSwift/blob/5cc7d2475fe4738a6aa0486c23eaf80a89d33b97/submodules/TGUIKit/TGUIKit/PresentationTheme.swift#L2054
   --peer-avatar-red-top: #ff885e;
@@ -130,11 +129,16 @@ $chat-padding-handhelds: .5rem;
   --chatlist-status-color: var(--avatar-online-color);
   --chatlist-pinned-color: #a2abb2;
   --badge-text-color: #fff;
+  --link-color: #00488f;
 
   --message-background-color: var(--surface-color);
-  --message-out-background-color: #eeffde;
+  --message-checkbox-color: #61c642;
+  --message-checkbox-border-color: #fff;
+  --message-secondary-color: var(--secondary-color);
+
+  @include splitColor(message-out-background-color, #eeffde, true, true);
+  --message-out-link-color: var(--link-color);
   --message-out-primary-color: #4fae4e;
-  --message-out-secondary-color: #4fae4e;
   --message-out-audio-play-button-color: #fff;
 
   // * Day theme end
@@ -165,11 +169,16 @@ html.night {
   --chatlist-status-color: var(--primary-color);
   --chatlist-pinned-color: var(--secondary-color);
   --badge-text-color: #fff;
+  --link-color: var(--primary-color);
 
   --message-background-color: var(--surface-color);
-  --message-out-background-color: #ae582d;
+  --message-checkbox-color: var(--primary-color);
+  --message-checkbox-border-color: #fff;
+  --message-secondary-color: var(--secondary-color);
+
+  @include splitColor(message-out-background-color, #ae582d, true, true);
+  --message-out-link-color: #fff;
   --message-out-primary-color: #fff;
-  --message-out-secondary-color: #4fae4e;
   --message-out-audio-play-button-color: var(--message-out-background-color);
   // * Night theme end
 }
@@ -364,7 +373,7 @@ body {
 } */
 
 a {
-  color: var(--primary-color);
+  color: var(--link-color);
 }
 
 button, input, optgroup, select, textarea, html {
@@ -435,15 +444,15 @@ input, textarea {
 }
 
 .danger {
-  color: $color-error!important;
+  color: var(--danger-color) !important;
 
   .c-ripple__circle {
-    background-color: var(--color-red-hover);
+    background-color: var(--light-danger-color);
   }
 }
 
 .blue, .primary {
-  color: var(--primary-color)!important;
+  color: var(--primary-color) !important;
 
   .c-ripple__circle {
     background-color: var(--light-primary-color);
@@ -466,6 +475,21 @@ input, textarea {
   z-index: 4 !important;
 }
 
+.preloader {
+  width: 50px;
+  height: 50px;
+  
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  
+  // ! do not change it to &-path
+  .preloader-path {
+    stroke: var(--primary-color);
+  }
+}
+
 @keyframes fade-in-opacity {
   0% {
     opacity: 0;
@@ -1195,6 +1219,8 @@ middle-ellipsis-element {
     color: var(--primary-text-color);
     line-height: var(--line-height);
 
+    @include text-overflow();
+
     &-right {
       flex: 0 0 auto !important;
       margin-left: 1rem;