Night theme improvements

Await for tracking monkey load Await for QR load Language loading fixed on sign pages Close global search by escape
2021-04-03 23:25:43 +04:00 · 2021-04-03 23:25:43 +04:00 · b4b0ced131
commit b4b0ced131
parent 9d30e8fd61
35 changed files with 387 additions and 369 deletions
--- a/src/components/appNavigationController.ts
+++ b/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,
--- a/src/components/chat/markupTooltip.ts
+++ b/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);
--- a/src/components/monkeys/tracking.ts
+++ b/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,
--- a/src/components/poll.ts
+++ b/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[];
+  pollElements.forEach(pollElement => {
    //console.log('poll_update', poll, results);
-  if(pollElement) {
    pollElement.isClosed = !!poll.pFlags.closed;
    pollElement.performResults(results, poll.chosenIndexes);
-  }
+  });
 });

 rootScope.on('peer_changed', () => {
--- a/src/components/sidebarLeft/index.ts
+++ b/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);
    });

--- a/src/config/app.ts
+++ b/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
 };
--- a/src/lang.ts
+++ b/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",
--- a/src/lib/appManagers/appStickersManager.ts
+++ b/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;
--- a/src/lib/langPack.ts
+++ b/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(langSign, strings);
+			formatLocalStrings(lang.default, strings);
+			formatLocalStrings(langSign.default, strings);

 			const langPack: LangPackDifference = {
 				_: 'langPackDifference',
--- a/src/lib/lottieLoader.ts
+++ b/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);
      }),
--- a/src/pages/pageSignIn.ts
+++ b/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);
    });
  });

--- a/src/pages/pageSignQR.ts
+++ b/src/pages/pageSignQR.ts
@ -56,14 +56,7 @@ let onFirstMount = async() => {
  let options: {dcId?: number, ignoreErrors: true} = {ignoreErrors: true};
  let prevToken: Uint8Array | number[];

-  return async() => {
-    stop = false;
-
-    do {
-      if(stop) {
-        break;
-      }
-  
+  const iterate = async(isLoop: boolean) => {
    try {
      let loginToken = await apiManager.invokeApi('auth.exportLoginToken', {
        api_id: App.id,
@ -87,7 +80,7 @@ let onFirstMount = async() => {
        const authorization = loginToken.authorization as any as AuthAuthorization.authAuthorization;
        apiManager.setUserAuth(authorization.user.id);
        pageIm.mount();
-          break;
+        return true;
      }

      /* // to base64
@ -138,17 +131,19 @@ let onFirstMount = async() => {
        }

        // * это костыль, но библиотека не предоставляет никаких событий
-          promise.then(() => {
+        await promise.then(() => {
          Array.from(imageDiv.children).slice(0, -1).forEach(el => {
            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) {
        case 'SESSION_PASSWORD_NEEDED':
@ -163,6 +158,22 @@ let onFirstMount = async() => {
          break;
      }
    }
+  };
+
+  await iterate(false);
+
+  return async() => {
+    stop = false;
+
+    do {
+      if(stop) {
+        break;
+      }
+  
+      const needBreak = await iterate(true);
+      if(needBreak) {
+        break;
+      }
    } while(true);
  };
 };
--- a/src/scss/components/_global.scss
+++ b/src/scss/components/_global.scss
@ -144,7 +144,7 @@ Utility Classes
 }

 .pre-wrap {
-  white-space: pre-wrap;
+  white-space: pre-wrap !important;
 }

 /* .flex-grow {
--- a/src/scss/mixins/_hover.scss
+++ b/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);
    }
  }

--- a/src/scss/mixins/_textOverflow.scss
+++ b/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;
+}
--- a/src/scss/partials/_audio.scss
+++ b/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-color: var(--primary-color);
-      //background-color: #e6ecf0;
-      background-color: rgba(193, 207, 220, .39);
+      --thumb-size: .75rem;
    }
  }
 }
--- a/src/scss/partials/_button.scss
+++ b/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() {
-        background: hover-color($color-red);
-      }
+      @include hover-background-effect(red, false);
    }

    .preloader-circular .preloader-path {
@ -318,7 +315,7 @@

  &:disabled {
    pointer-events: none !important;
-    opacity: .25;
+    opacity: var(--disabled-opacity);
  }
 }

--- a/src/scss/partials/_chatBubble.scss
+++ b/src/scss/partials/_chatBubble.scss
@ -165,8 +165,12 @@ $bubble-margin: .25rem;
    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;
-      padding-left: 47px;
+      height: 2.375rem;
+      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;
-          height: 1.25rem;
-          left: .125rem;
-          top: .125rem;
-          border: 2px solid #c4c9cc;
+          width: calc(var(--size) - (var(--inner-size) * 2));
+          height: calc(var(--size) - (var(--inner-size) * 2));
+          left: var(--inner-size);
+          top: var(--inner-size);
+          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;
-      border-top: 2px solid var(--border-color);
+      height: 50px;
+      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,6 +1765,7 @@ $bubble-margin: .25rem;
    }

    &-wrapper {
+      @include respond-to(not-handhelds) {
        transform: translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));

        @include respond-to(no-floating-left-sidebar) {
@ -1746,6 +1783,7 @@ $bubble-margin: .25rem;
        }
      }
    }
+  }

  /* .bubble-content-wrapper {
    > .user-avatar {
@ -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-right-color: var(--message-out-background-color);
+    border-top-color: var(--message-background-color);
+    border-right-color: var(--message-background-color);
  }

  .audio {
@ -1970,20 +2006,17 @@ $bubble-margin: .25rem;
    pointer-events: none;
  }

-  .audio:not(.is-voice) {
+  .audio {
    .progress-line {
-      &__loaded {
-        background-color: #90e18d !important;
+      --color: var(--message-out-primary-color);
+
+      &: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);
    }
  }

@ -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);
    }
  }
 }
--- a/src/scss/partials/_chatMarkupTooltip.scss
+++ b/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 {
--- a/src/scss/partials/_chatPinned.scss
+++ b/src/scss/partials/_chatPinned.scss
@ -450,7 +450,7 @@
  }

  &-ico {
-    color: #50a2e9;
+    color: var(--primary-color);
    margin-right: .375rem;

    &:before {
--- a/src/scss/partials/_chatlist.scss
+++ b/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;
        }
      }

--- a/src/scss/partials/_checkbox.scss
+++ b/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);
    }
  }
 }
--- a/src/scss/partials/_ckin.scss
+++ b/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 {
--- a/src/scss/partials/_document.scss
+++ b/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;
-      height: 1.125rem;
+      width: var(--size);
+      height: var(--size);
      border-bottom-left-radius: .25rem;
-      border-left: .5625rem solid rgba(0, 0, 0, .25);
-      border-bottom: .5625rem solid rgba(0, 0, 0, .25);
-      border-top: .5625rem solid #fff;
-      border-right: .5625rem solid #fff;
+      border-style: solid;
+      border-width: calc(var(--size) / 2);
+      border-left-color: rgba(0, 0, 0, .25);
+      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 {
--- a/src/scss/partials/_emojiDropdown.scss
+++ b/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;

--- a/src/scss/partials/_input.scss
+++ b/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 {
--- a/src/scss/partials/_leftSidebar.scss
+++ b/src/scss/partials/_leftSidebar.scss
@ -134,9 +134,8 @@
      .selector-user {
        height: 30px;
        position: absolute!important;
-        left: 5px;
-        top: 5px;
-        background: #f1f3f4;
+        left: 6px;
+        top: 6px;
        z-index: 1;
        margin-left: 0;
      }
@ -174,8 +173,8 @@
        margin-top: 7px;
        font-size: 14px;

-        &:hover {
-          background-color: rgba(80, 162, 233, .2);
+        @include hover() {
+          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;
  }
--- a/src/scss/partials/_poll.scss
+++ b/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;
    }
  }
--- a/src/scss/partials/_preloader.scss
+++ b/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%);
--- a/src/scss/partials/_rightSidebar.scss
+++ b/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);
--- a/src/scss/partials/_selector.scss
+++ b/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;
--- a/src/scss/partials/pages/_authCode.scss
+++ b/src/scss/partials/pages/_authCode.scss
@ -19,7 +19,7 @@
    }
    
    .phone.error {
-      border-color: $color-error!important;
+      border-color: var(--danger-color) !important;
    }
  }

--- a/src/scss/partials/pages/_chats.scss
+++ b/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) {
--- a/src/scss/partials/popups/_stickers.scss
+++ b/src/scss/partials/popups/_stickers.scss
@ -61,12 +61,8 @@
      }

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

--- a/src/scss/style.scss
+++ b/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,10 +444,10 @@ 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);
  }
 }

@ -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;