Replaced rest of icons

Layout fixes in left sidebar
Added animation to chatlist menu button
Changed chat layer transition

src/components/chat/bubbles.ts

@@ -2912,6 +2912,7 @@ export default class ChatBubbles {
 
         const setBubbles: HTMLElement[] = [];
 
+        this.chatInner.classList.add('zoom-fading');
         const delay = isAdditionRender ? 10 : 40;
         const offsetIndex = isAdditionRender ? 0 : 1;
         const animateAsLadder = (mids: number[], offsetIndex = 0) => {
@@ -2979,6 +2980,8 @@ export default class ChatBubbles {
               setBubbles.forEach(contentWrapper => {
                 contentWrapper.style.transitionDelay = '';
               });
+
+              this.chatInner.classList.remove('zoom-fading');
             });
 
             // ! в хроме, каким-то образом из-за zoom-fade класса начинает прыгать скролл при подгрузке сообщений вверх, 

src/components/chat/contextMenu.ts

@@ -239,7 +239,7 @@ export default class ChatContextMenu {
       onClick: this.onUnpinClick,
       verify: () => this.message.pFlags.pinned && this.appPeersManager.canPinMessage(this.peerId),
     }, {
-      icon: 'revote',
+      icon: 'checkretract',
       text: 'Chat.Poll.Unvote',
       onClick: this.onRetractVote,
       verify: () => {

src/components/chat/input.ts

@@ -288,7 +288,7 @@ export default class ChatInput {
     }
 
     this.attachMenuButtons = [{
-      icon: 'photo',
+      icon: 'image',
       text: 'Chat.Input.Attach.PhotoOrVideo',
       onClick: () => {
         this.fileInput.value = '';
@@ -344,12 +344,12 @@ export default class ChatInput {
     this.recordRippleEl = document.createElement('div');
     this.recordRippleEl.classList.add('record-ripple');
 
-    this.btnSend = ButtonIcon('none btn-circle z-depth-1 btn-send');
+    this.btnSend = ButtonIcon('none btn-circle z-depth-1 btn-send animated-button-icon');
     this.btnSend.insertAdjacentHTML('afterbegin', `
     <span class="tgico tgico-send"></span>
     <span class="tgico tgico-schedule"></span>
     <span class="tgico tgico-check"></span>
-    <span class="tgico tgico-microphone2"></span>
+    <span class="tgico tgico-microphone"></span>
     `);
 
     this.btnSendContainer.append(this.recordRippleEl, this.btnSend);

src/components/chat/markupTooltip.ts

@@ -69,7 +69,7 @@ export default class MarkupTooltip {
       }
     });
 
-    this.linkBackButton = ButtonIcon('arrow_back', {noRipple: true});
+    this.linkBackButton = ButtonIcon('left', {noRipple: true});
     this.linkInput = document.createElement('input');
     _i18n(this.linkInput, 'MarkupTooltip.LinkPlaceholder', undefined, 'placeholder');
     this.linkInput.classList.add('input-clear');

src/components/chat/search.ts

@@ -39,7 +39,7 @@ export default class ChatSearch {
     this.element.classList.add('sidebar-header', 'chat-search', 'chatlist-container');
 
     this.backBtn = document.createElement('button');
-    this.backBtn.classList.add('btn-icon', 'tgico-arrow_back', 'sidebar-close-button');
+    this.backBtn.classList.add('btn-icon', 'tgico-left', 'sidebar-close-button');
     ripple(this.backBtn);
     
     this.backBtn.addEventListener('click', () => {

src/components/chat/topbar.ts

@@ -68,7 +68,7 @@ export default class ChatTopbar {
     this.container = document.createElement('div');
     this.container.classList.add('sidebar-header', 'topbar');
 
-    this.btnBack = ButtonIcon('arrow_back sidebar-close-button', {noRipple: true});
+    this.btnBack = ButtonIcon('left sidebar-close-button', {noRipple: true});
 
     // * chat info section
     this.chatInfo = document.createElement('div');

src/components/sidebarLeft/index.ts

@@ -198,7 +198,11 @@ export class AppSidebarLeft extends SidebarSlider {
       text: 'NewPrivateChat',
       onClick: onContactsClick
     }]);
-    this.newBtnMenu.className = 'btn-circle rp btn-corner tgico-newchat_filled btn-menu-toggle';
+    this.newBtnMenu.className = 'btn-circle rp btn-corner btn-menu-toggle animated-button-icon';
+    this.newBtnMenu.insertAdjacentHTML('afterbegin', `
+    <span class="tgico tgico-newchat_filled"></span>
+    <span class="tgico tgico-close"></span>
+    `);
     this.newBtnMenu.id = 'new-menu';
     sidebarHeader.nextElementSibling.append(this.newBtnMenu);
 

src/components/sidebarLeft/tabs/editFolder.ts

@@ -20,6 +20,7 @@ import { ButtonMenuItemOptions } from "../../buttonMenu";
 import Button from "../../button";
 import AppIncludedChatsTab from "./includedChats";
 import { i18n, i18n_, LangPackKey } from "../../../lib/langPack";
+import { SettingSection } from "..";
 
 const MAX_FOLDER_NAME_LENGTH = 12;
 
@@ -31,8 +32,8 @@ export default class AppEditFolderTab extends SliderSuperTab {
   private menuBtn: HTMLElement;
   private nameInputField: InputField;
 
-  private include_peers: HTMLElement;
+  private include_peers: SettingSection;
-  private exclude_peers: HTMLElement;
+  private exclude_peers: SettingSection;
   private flags: {[k in 'contacts' | 'non_contacts' | 'groups' | 'broadcasts' | 'bots' | 'exclude_muted' | 'exclude_archived' | 'exclude_read']: HTMLElement} = {} as any;
 
   private animation: RLottiePlayer;
@@ -81,14 +82,14 @@ export default class AppEditFolderTab extends SliderSuperTab {
     inputWrapper.append(this.nameInputField.container);
 
     const generateList = (className: string, h2Text: LangPackKey, buttons: {icon: string, name?: string, withRipple?: true, text: LangPackKey}[], to: any) => {
-      const container = document.createElement('div');
+      const section = new SettingSection({
-      container.classList.add('folder-list', className);
+        name: h2Text,
+        noDelimiter: true
+      });
 
-      const h2 = document.createElement('div');
+      section.container.classList.add('folder-list', className);
-      h2.classList.add('sidebar-left-h2');
-      i18n_({element: h2, key: h2Text});
 
-      const categories = document.createElement('div');
+      const categories = section.generateContentElement();
       categories.classList.add('folder-categories');
 
       buttons.forEach(o => {
@@ -105,9 +106,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
         categories.append(button);
       });
 
-      container.append(h2, categories);
+      return section;
-
-      return container;
     };
 
     this.include_peers = generateList('folder-list-included', 'FilterInclude', [{
@@ -154,16 +153,16 @@ export default class AppEditFolderTab extends SliderSuperTab {
       name: 'exclude_read'
     }], this.flags);
 
-    this.scrollable.append(this.stickerContainer, this.caption, inputWrapper, this.include_peers, this.exclude_peers);
+    this.scrollable.append(this.stickerContainer, this.caption, inputWrapper, this.include_peers.container, this.exclude_peers.container);
 
-    const includedFlagsContainer = this.include_peers.querySelector('.folder-categories');
+    const includedFlagsContainer = this.include_peers.container.querySelector('.folder-categories');
-    const excludedFlagsContainer = this.exclude_peers.querySelector('.folder-categories');
+    const excludedFlagsContainer = this.exclude_peers.container.querySelector('.folder-categories');
 
-    includedFlagsContainer.firstElementChild.addEventListener('click', () => {
+    includedFlagsContainer.querySelector('.btn').addEventListener('click', () => {
       new AppIncludedChatsTab(this.slider).open(this.filter, 'included', this);
     });
 
-    excludedFlagsContainer.firstElementChild.addEventListener('click', () => {
+    excludedFlagsContainer.querySelector('.btn').addEventListener('click', () => {
       new AppIncludedChatsTab(this.slider).open(this.filter, 'excluded', this);
     });
 
@@ -264,7 +263,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
     }
 
     (['include_peers', 'exclude_peers'] as ['include_peers', 'exclude_peers']).forEach(key => {
-      const container = this[key];
+      const section = this[key];
       const ul = appDialogsManager.createChatList();
 
       const peers = filter[key].slice();
@@ -291,20 +290,17 @@ export default class AppEditFolderTab extends SliderSuperTab {
         }
       };
       
-      container.append(ul);
+      section.generateContentElement().append(ul);
 
       let showMore: HTMLElement;
       if(peers.length) {
-        showMore = document.createElement('div');
+        const content = section.generateContentElement();
-        showMore.classList.add('show-more', 'rp-overflow');
+        showMore = Button('folder-category-button btn btn-primary btn-transparent', {icon: 'down'});
+        showMore.classList.add('load-more', 'rp-overflow');
         showMore.addEventListener('click', () => renderMore(20));
+        showMore.append(i18n('FilterShowMoreChats', [peers.length]));
 
-        ripple(showMore);
+        content.append(showMore);
-        const down = document.createElement('div');
-        down.classList.add('tgico-down');
-        showMore.append(down, i18n('FilterShowMoreChats', [peers.length]));
-
-        container.append(showMore);
       }
 
       renderMore(4);
@@ -321,7 +317,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
 
   setFilter(filter: DialogFilter, firstTime: boolean) {
     // cleanup
-    Array.from(this.container.querySelectorAll('ul, .show-more')).forEach(el => el.remove());
+    Array.from(this.container.querySelectorAll('ul, .load-more')).forEach(el => el.remove());
 
     if(firstTime) {
       this.originalFilter = filter;

src/components/sidebarLeft/tabs/generalSettings.ts

@@ -74,7 +74,7 @@ export default class AppGeneralSettingsTab extends SliderSuperTab {
         appStateManager.setByKey('settings.messagesTextSize', value);
       };
 
-      const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'photo', text: 'ChatBackground'});
+      const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'image', text: 'ChatBackground'});
 
       attachClickEvent(chatBackgroundButton, () => {
         new AppBackgroundTab(this.slider).open();

src/components/sidebarLeft/tabs/includedChats.ts

@@ -17,6 +17,7 @@ import AppEditFolderTab from "./editFolder";
 import { i18n, LangPackKey, _i18n, join } from "../../../lib/langPack";
 import appMessagesManager from "../../../lib/appManagers/appMessagesManager";
 import RichTextProcessor from "../../../lib/richtextprocessor";
+import { SettingSection } from "..";
 
 export default class AppIncludedChatsTab extends SliderSuperTab {
   private editFolderTab: AppEditFolderTab;
@@ -167,12 +168,13 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
     const filter = this.filter;
 
     const fragment = document.createDocumentFragment();
-    const dd = document.createElement('div');
+
-    dd.classList.add('sidebar-left-h2');
+    const categoriesSection = new SettingSection({
-    _i18n(dd, 'FilterChatTypes');
+      noDelimiter: true,
-    
+      name: 'FilterChatTypes'
-    const categories = document.createElement('div');
+    });
-    categories.classList.add('folder-categories');
+
+    categoriesSection.container.classList.add('folder-categories');
 
     let details: {[flag: string]: {ico: string, text: LangPackKey}};
     if(this.type === 'excluded') {
@@ -198,16 +200,13 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
       button.append(this.checkbox());
       f.append(button);
     }
-    categories.append(f);
+    categoriesSection.content.append(f);
 
-    const hr = document.createElement('hr');
+    const chatsSection = new SettingSection({
-    hr.style.margin = '7px 0 9px';
+      name: 'FilterChats'
+    });
 
-    const d = document.createElement('div');
+    fragment.append(categoriesSection.container, chatsSection.container);
-    d.classList.add('sidebar-left-h2');
-    _i18n(d, 'FilterChats');
-
-    fragment.append(dd, categories, hr, d);
 
     /////////////////
 
@@ -231,14 +230,16 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
       return div;
     };
 
-    this.selector.list.parentElement.insertBefore(fragment, this.selector.list);
+    const parent = this.selector.list.parentElement;
+    chatsSection.content.append(this.selector.list);
+    parent.append(fragment);
 
     this.selector.addInitial(selectedPeers);
 
     for(const flag in filter.pFlags) {
       // @ts-ignore
       if(details.hasOwnProperty(flag) && !!filter.pFlags[flag]) {
-        (categories.querySelector(`[data-peer-id="${flag}"]`) as HTMLElement).click();
+        (categoriesSection.content.querySelector(`[data-peer-id="${flag}"]`) as HTMLElement).click();
       }
     }
   }

src/components/sliderTab.ts

@@ -51,7 +51,7 @@ export default class SliderSuperTab implements SliderTab {
     this.header = document.createElement('div');
     this.header.classList.add('sidebar-header');
 
-    this.closeBtn = ButtonIcon('arrow_back sidebar-close-button', {noRipple: true});
+    this.closeBtn = ButtonIcon('left sidebar-close-button', {noRipple: true});
     this.title = document.createElement('div');
     this.title.classList.add('sidebar-header__title');
     this.header.append(this.closeBtn, this.title);

src/index.hbs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="nights">
+<html lang="en">
 
 <head>
   <meta charset="utf-8">

src/lib/appManagers/appProfileManager.ts

@@ -557,7 +557,7 @@ export class AppProfileManager {
       div.innerHTML = '';
       div.dataset.color = '';
       div.classList.add('tgico-saved');
-      div.classList.remove('tgico-avatar_deletedaccount');
+      div.classList.remove('tgico-deletedaccount');
       return;
     }
 
@@ -566,7 +566,7 @@ export class AppProfileManager {
       if(user && user.pFlags && user.pFlags.deleted) {
         div.innerHTML = '';
         div.dataset.color = appPeersManager.getPeerColorById(peerId);
-        div.classList.add('tgico-avatar_deletedaccount');
+        div.classList.add('tgico-deletedaccount');
         div.classList.remove('tgico-saved');
         return;
       }
@@ -579,7 +579,7 @@ export class AppProfileManager {
       }
       
       div.innerHTML = '';
-      div.classList.remove('tgico-saved', 'tgico-avatar_deletedaccount');
+      div.classList.remove('tgico-saved', 'tgico-deletedaccount');
       div.dataset.color = color;
 
       let abbr: string;

src/scss/partials/_animatedIcon.scss

@@ -95,3 +95,20 @@
     }
   }
 }
+
+.animated-button-icon {
+  > .tgico {
+    position: absolute;
+    height: 24px;
+    line-height: 24px;
+    
+    body:not(.animation-level-0) & {
+      animation: hide-icon .4s forwards ease-in-out;
+    }
+
+    @include animation-level(0) {
+      visibility: hidden;
+      animation: none !important;
+    }
+  }
+}

src/scss/partials/_avatar.scss

@@ -69,11 +69,11 @@ avatar-element {
     font-size: calc(21px / var(--multiplier)) !important; // ! IMPORTANT IS TEMPORARY
   }
 
-  &.tgico-savedmessages:before {
+  /* &.tgico-savedmessages:before {
     font-size: calc(25px / var(--multiplier));
-  }
+  } */
 
-  &.tgico-avatar_deletedaccount:before {
+  &.tgico-deletedaccount:before {
     font-size: calc(54px / var(--multiplier));
   }
 

src/scss/partials/_button.scss

@@ -243,9 +243,9 @@
     font-size: .875rem;
     cursor: default;
 
-    &-text {
+    /* &-text {
       margin-top: -.125rem;
-    }
+    } */
   }
 }
 

src/scss/partials/_chat.scss

@@ -23,25 +23,20 @@ $chat-helper-size: 39px;
 	max-width: 100%;
 	padding-top: .25rem;
 	flex-direction: column;
-	flex: 0 0 auto; /* Forces side columns to stay same width */
+	flex: 0 0 auto;
 	position: relative;
-	//overflow: hidden;
+	transition: transform var(--transition-standard-out);
-	transition: transform var(--layer-transition);
 	transform: translateY(var(--translateY));
 
 	body.animation-level-0 & {
 		transition: none;
 	}
 
-	//display: none !important;
-
 	/* // * for no ESG top
 	flex: 1 1 auto;
 	height: calc(100% - 56px); */
 
 	@include respond-to(esg-top) {
-		/* flex: 0 0 auto;
-		height: auto; */
 		max-width: var(--messages-container-width) !important;
 	}
 
@@ -55,15 +50,16 @@ $chat-helper-size: 39px;
 
 	@include respond-to(medium-screens) {
 		width: calc(100% - var(--right-column-width)) !important;
-		//transition: transform var(--layer-transition);
 
 		body.is-right-column-shown & {
+			transition: transform var(--transition-standard-in);
 			transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0) !important;
 		}
 	}
 
 	&.is-hidden {
 		--translateY: 100%;
+		transition: transform var(--transition-standard-in);
 		transform: translate3d(0, var(--translateY), 0) !important;
 		position: absolute !important;
 		bottom: 0;
@@ -227,20 +223,6 @@ $chat-helper-size: 39px;
 		color: var(--secondary-text-color);
 		z-index: 3;
 
-		> .tgico {
-			position: absolute;
-			height: 24px;
-			
-			body:not(.animation-level-0) & {
-				animation: hide-icon .4s forwards ease-in-out;
-			}
-
-			@include animation-level(0) {
-				visibility: hidden;
-				animation: none !important;
-			}
-		}
-
 		.tgico-send {
 			color: var(--primary-color) !important;
 		}
@@ -267,7 +249,7 @@ $chat-helper-size: 39px;
 		}
 
 		&.send .tgico-send, 
-		&.record .tgico-microphone2,
+		&.record .tgico-microphone,
 		&.edit .tgico-check,
 		&.schedule .tgico-schedule {
 			animation: grow-icon .4s forwards ease-in-out !important;
@@ -600,10 +582,11 @@ $chat-helper-size: 39px;
 			background-color: inherit;
 
 			@include animation-level(2) {
-				transition: opacity var(--layer-transition);
+				transition: opacity var(--transition-standard-out);
 				opacity: 0;
-
+				
 				&.is-visible:not(.backwards) {
+					transition: opacity var(--transition-standard-in);
 					opacity: 1;
 				}
 			}
@@ -614,11 +597,12 @@ $chat-helper-size: 39px;
 					margin: -16.5rem 0 -20rem 0;
 					transform: scale(1);
 					transform-origin: left center;
-					transition: transform var(--layer-transition), opacity var(--layer-transition);
+					transition: transform var(--transition-standard-out), opacity var(--transition-standard-out) !important;
 				}
 
 				body.animation-level-2.is-right-column-shown & {
 					transform: scale(.666666667);
+					transition: transform var(--transition-standard-in), opacity var(--transition-standard-in) !important;
 				}
 			}
 		}
@@ -955,7 +939,7 @@ $chat-helper-size: 39px;
 	position: relative;
 
 	transform: translateY(var(--translateY));
-	transition: transform var(--layer-transition);
+	transition: transform var(--transition-standard-out);
 
 	body.animation-level-0 & {
 		transition: none;
@@ -981,6 +965,7 @@ $chat-helper-size: 39px;
 	// }
 
 	.chat.type-chat &.is-chat-input-hidden.is-selecting:not(.backwards) {
+		transition: transform var(--transition-standard-in);
 		--translateY: -78px;
 
 		@include respond-to(handhelds) {
@@ -988,6 +973,7 @@ $chat-helper-size: 39px;
 		}
 
 		.bubbles-inner {
+			transition: transform var(--transition-standard-in);
 			transform: translateY(calc(var(--translateY) * -1));
 			//margin-top: $chat-helper-size;
 			//transition: none;
@@ -1005,14 +991,13 @@ $chat-helper-size: 39px;
 		> .scrollable {
 			height: auto;
 			display: block;
-			/* margin-bottom: 0;
-			transition: margin-bottom var(--layer-transition) */
 		}
 	//}
 
 	// ! WARNING, НЕЛЬЗЯ СТАВИТЬ ТРАНСФОРМ КРОМЕ TRANSLATEZ(0) НА БЛОК С OVERFLOW, ОН БУДЕТ ПРЫГАТЬ ВВЕРХ ПРИ ВКЛЮЧЕННОМ ПРАВИЛЕ И ЭТО НЕ ИСПРАВИТЬ JS'ОМ!
 	@include respond-to(medium-screens) {
 		body.is-right-column-shown & {
+			transition: transform var(--transition-standard-in);
 			transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0);
 		}
 	}
@@ -1082,7 +1067,7 @@ $chat-helper-size: 39px;
 
 	//padding-top: 10000px;
 
-	transition: transform var(--layer-transition);
+	transition: transform var(--transition-standard-out);
 	transform: translateY(0);
 	/* transition: margin-top var(--layer-transition);
 	transition-delay: .2s; */
@@ -1144,8 +1129,8 @@ $chat-helper-size: 39px;
 		opacity: 0.99999 !important; // 0.99999 сделано для сафари, т.к. без этого будет прыжок при скролле в самом низу или верху
 
 		html.is-safari & {
+			transition: transform var(--transition-standard-in);
 			transform: translateY(calc(var(--translateY) * -1));
-			//transition: transform var(--layer-transition); 
 		}
 	}
 }

src/scss/partials/_chatBubble.scss

@@ -672,15 +672,18 @@ $bubble-margin: .25rem;
       }
 
       &.animating {
-        transition: border-radius var(--layer-transition);
+        transition: border-radius var(--transition-standard-out);
 
         .album-item-media {
-          transition: transform var(--layer-transition), border-radius var(--layer-transition);
+          transition: transform var(--transition-standard-out), border-radius var(--transition-standard-out);
         }
       }
 
       &:not(.backwards) {
+        transition: border-radius var(--transition-standard-in);
+        
         .album-item-media {
+          transition: transform var(--transition-standard-in), border-radius var(--transition-standard-in);
           transform: scale(.883333);
         }
 
@@ -1566,11 +1569,15 @@ $bubble-margin: .25rem;
   opacity: 1;
   
   @include animation-level(2) {
-    transition: transform var(--layer-transition), opacity var(--layer-transition);
+    transition: transform var(--transition-standard-out), opacity var(--transition-standard-out);
+  }
+
+  .bubbles-inner.zoom-fading & {
+    transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
+    //transition: transform 10s ease-in-out, opacity 10s ease-in-out;
   }
 
   &.zoom-fade /* .bubble-content */ {
-    //transform: scale(.8) translateZ(0);
     transform: scale3d(.8, .8, 1) translateX(0);
     //transform: scale(.8) translateX(0);
     opacity: 0;
@@ -1594,7 +1601,7 @@ $bubble-margin: .25rem;
     .bubbles.is-selecting & {
       transform: scale3d(1, 1, 1);
       transform-origin: bottom;
-      transition: transform var(--layer-transition);
+      transition: transform var(--transition-standard-out);
 
       body.animation-level-0 & {
         transition: none;
@@ -1603,6 +1610,7 @@ $bubble-margin: .25rem;
 
     .bubbles.is-selecting:not(.backwards) & {
       transform: scale3d(.76, .76, 1);
+      transition: transform var(--transition-standard-in);
     }
 
     // @include respond-to(handhelds) {
@@ -1789,22 +1797,23 @@ $bubble-margin: .25rem;
     }
 
     &-wrapper {
-      @include respond-to(not-handhelds) {
+      @include respond-to(medium-screens) {
-        transform: translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
+        transform: scale(1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
 
-        @include respond-to(no-floating-left-sidebar) {
+        &.zoom-fade {
+          transform: scale3d(.8, .8, 1) 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);
+            transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
+            transform: scale(1) translateX(0);
   
             &.zoom-fade {
               transform: scale3d(.8, .8, 1) translateX(0);
             }
           }
-        }
+        //}
-  
-        &.zoom-fade {
-          transform: scale3d(.8, .8, 1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
-        }
       }
     }
   }

src/scss/partials/_chatTopbar.scss

@@ -157,10 +157,11 @@
     padding-right: inherit; */
 
 		@include respond-to(medium-screens) {
-			transition: transform var(--layer-transition);
+			transition: transform var(--transition-standard-out);
 	
 			body.is-right-column-shown & {
 				transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
+				transition: transform var(--transition-standard-in);
 			}
 
 			body.animation-level-0 & {

src/scss/partials/_checkbox.scss

@@ -95,7 +95,7 @@
 
   .checkbox-caption {
     position: relative;
-    padding-left: 3.3125rem;
+    padding-left: 3.375rem;
     cursor: pointer;
     display: inline-block;
     min-height: 24px;
@@ -329,14 +329,14 @@
     position: relative;
     display: flex;
     align-items: center;
-    transition: background-color .2s;
+    transition: background-color .1s;
     margin: 0 var(--offset);
 
     &:before {
       width: 1.25rem;
       height: 1.25rem;
       border: 2px solid var(--secondary-color);
-      transition: border-color .2s, transform .2s;
+      transition: border-color .1s, transform .1s;
       background-color: var(--surface-color);
       content: " ";
       transform: translateX(calc(var(--offset) * -1));

src/scss/partials/_fonts.scss

@@ -9,9 +9,9 @@
 @font-face {
   font-family: "#{$tgico-font-family}";
   src:
-    url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?xc1ll') format('truetype'),
+    url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?cbcfst') format('truetype'),
-    url('#{$tgico-font-path}/#{$tgico-font-family}.woff?xc1ll') format('woff'),
+    url('#{$tgico-font-path}/#{$tgico-font-family}.woff?cbcfst') format('woff'),
-    url('#{$tgico-font-path}/#{$tgico-font-family}.svg?xc1ll#tgico') format('svg');
+    url('#{$tgico-font-path}/#{$tgico-font-family}.svg?cbcfst#tgico') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -87,11 +87,6 @@
     content: $tgico-archive; 
   }
 }
-.tgico-arrow_back {
-  &:before {
-    content: $tgico-arrow_back; 
-  }
-}
 .tgico-arrow_down {
   &:before {
     content: $tgico-arrow_down; 
@@ -257,6 +252,11 @@
     content: $tgico-delete_filled; 
   }
 }
+.tgico-deletedaccount {
+  &:before {
+    content: $tgico-deletedaccount; 
+  }
+}
 .tgico-deleteleft {
   &:before {
     content: $tgico-deleteleft; 
@@ -482,11 +482,6 @@
     content: $tgico-microphone; 
   }
 }
-.tgico-microphone2 {
-  &:before {
-    content: $tgico-microphone2; 
-  }
-}
 .tgico-minus {
   &:before {
     content: $tgico-minus; 
@@ -547,16 +542,6 @@
     content: $tgico-nosound; 
   }
 }
-.tgico-notificationsoff {
-  &:before {
-    content: $tgico-notificationsoff; 
-  }
-}
-.tgico-notificationson {
-  &:before {
-    content: $tgico-notificationson; 
-  }
-}
 .tgico-passwordoff {
   &:before {
     content: $tgico-passwordoff; 
@@ -577,11 +562,6 @@
     content: $tgico-phone; 
   }
 }
-.tgico-photo {
-  &:before {
-    content: $tgico-photo; 
-  }
-}
 .tgico-pin {
   &:before {
     content: $tgico-pin; 
@@ -652,11 +632,6 @@
     content: $tgico-reply; 
   }
 }
-.tgico-revote {
-  &:before {
-    content: $tgico-revote; 
-  }
-}
 .tgico-saved {
   &:before {
     content: $tgico-saved; 
@@ -797,11 +772,6 @@
     content: $tgico-username; 
   }
 }
-.tgico-write {
-  &:before {
-    content: $tgico-write; 
-  }
-}
 .tgico-zoomin {
   &:before {
     content: $tgico-zoomin; 

src/scss/partials/_ico.scss

@@ -29,40 +29,40 @@ $tgico-admin: "\e906";
 $tgico-animals: "\e907";
 $tgico-animations: "\e908";
 $tgico-archive: "\e909";
-$tgico-arrow_back: "\e90a";
+$tgico-arrow_down: "\e90a";
-$tgico-arrow_down: "\e90b";
+$tgico-arrow_next: "\e90b";
-$tgico-arrow_next: "\e90c";
+$tgico-attach: "\e90c";
-$tgico-attach: "\e90d";
+$tgico-bold: "\e90d";
-$tgico-bold: "\e90e";
+$tgico-botcom: "\e90e";
-$tgico-botcom: "\e90f";
+$tgico-bots: "\e90f";
-$tgico-bots: "\e910";
+$tgico-bug: "\e910";
-$tgico-bug: "\e911";
+$tgico-calendar: "\e911";
-$tgico-calendar: "\e912";
+$tgico-calendarfilter: "\e912";
-$tgico-calendarfilter: "\e913";
+$tgico-camera: "\e913";
-$tgico-camera: "\e914";
+$tgico-cameraadd: "\e914";
-$tgico-cameraadd: "\e915";
+$tgico-car: "\e915";
-$tgico-car: "\e916";
+$tgico-channel: "\e916";
-$tgico-channel: "\e917";
+$tgico-channelviews: "\e917";
-$tgico-channelviews: "\e918";
+$tgico-chatspinned: "\e918";
-$tgico-chatspinned: "\e919";
+$tgico-chatsplaceholder: "\e919";
-$tgico-chatsplaceholder: "\e91a";
+$tgico-check1: "\e91a";
-$tgico-check1: "\e91b";
+$tgico-checkbox: "\e91b";
-$tgico-checkbox: "\e91c";
+$tgico-checkboxblock: "\e91c";
-$tgico-checkboxblock: "\e91d";
+$tgico-checkboxempty: "\e91d";
-$tgico-checkboxempty: "\e91e";
+$tgico-checkboxon: "\e91e";
-$tgico-checkboxon: "\e91f";
+$tgico-checkretract: "\e91f";
-$tgico-checkretract: "\e920";
+$tgico-checkround: "\e920";
-$tgico-checkround: "\e921";
+$tgico-close: "\e921";
-$tgico-close: "\e922";
+$tgico-clouddownload: "\e922";
-$tgico-clouddownload: "\e923";
+$tgico-colorize: "\e923";
-$tgico-colorize: "\e924";
+$tgico-comments: "\e924";
-$tgico-comments: "\e925";
+$tgico-commentssticker: "\e925";
-$tgico-commentssticker: "\e926";
+$tgico-copy: "\e926";
-$tgico-copy: "\e927";
+$tgico-darkmode: "\e927";
-$tgico-darkmode: "\e928";
+$tgico-data: "\e928";
-$tgico-data: "\e929";
+$tgico-delete: "\e929";
-$tgico-delete: "\e92a";
+$tgico-delete_filled: "\e92a";
-$tgico-delete_filled: "\e92b";
+$tgico-deletedaccount: "\e92b";
 $tgico-deleteleft: "\e92c";
 $tgico-deleteuser: "\e92d";
 $tgico-devices: "\e92e";
@@ -108,69 +108,63 @@ $tgico-menu: "\e955";
 $tgico-message: "\e956";
 $tgico-messageunread: "\e957";
 $tgico-microphone: "\e958";
-$tgico-microphone2: "\e959";
+$tgico-minus: "\e959";
-$tgico-minus: "\e95a";
+$tgico-monospace: "\e95a";
-$tgico-monospace: "\e95b";
+$tgico-more: "\e95b";
-$tgico-more: "\e95c";
+$tgico-mute: "\e95c";
-$tgico-mute: "\e95d";
+$tgico-muted: "\e95d";
-$tgico-muted: "\e95e";
+$tgico-newchannel: "\e95e";
-$tgico-newchannel: "\e95f";
+$tgico-newchat_filled: "\e95f";
-$tgico-newchat_filled: "\e960";
+$tgico-newgroup: "\e960";
-$tgico-newgroup: "\e961";
+$tgico-newprivate: "\e961";
-$tgico-newprivate: "\e962";
+$tgico-next: "\e962";
-$tgico-next: "\e963";
+$tgico-noncontacts: "\e963";
-$tgico-noncontacts: "\e964";
+$tgico-nosound: "\e964";
-$tgico-nosound: "\e965";
+$tgico-passwordoff: "\e965";
-$tgico-notificationsoff: "\e966";
+$tgico-pause: "\e966";
-$tgico-notificationson: "\e967";
+$tgico-permissions: "\e967";
-$tgico-passwordoff: "\e968";
+$tgico-phone: "\e968";
-$tgico-pause: "\e969";
+$tgico-pin: "\e969";
-$tgico-permissions: "\e96a";
+$tgico-pinlist: "\e96a";
-$tgico-phone: "\e96b";
+$tgico-pinned_filled: "\e96b";
-$tgico-photo: "\e96c";
+$tgico-pinnedchat: "\e96c";
-$tgico-pin: "\e96d";
+$tgico-play: "\e96d";
-$tgico-pinlist: "\e96e";
+$tgico-plus: "\e96e";
-$tgico-pinned_filled: "\e96f";
+$tgico-poll: "\e96f";
-$tgico-pinnedchat: "\e970";
+$tgico-previous: "\e970";
-$tgico-play: "\e971";
+$tgico-radiooff: "\e971";
-$tgico-plus: "\e972";
+$tgico-radioon: "\e972";
-$tgico-poll: "\e973";
+$tgico-readchats: "\e973";
-$tgico-previous: "\e974";
+$tgico-recent: "\e974";
-$tgico-radiooff: "\e975";
+$tgico-replace: "\e975";
-$tgico-radioon: "\e976";
+$tgico-reply: "\e976";
-$tgico-readchats: "\e977";
+$tgico-saved: "\e977";
-$tgico-recent: "\e978";
+$tgico-savedmessages: "\e978";
-$tgico-replace: "\e979";
+$tgico-schedule: "\e979";
-$tgico-reply: "\e97a";
+$tgico-scheduled: "\e97a";
-$tgico-revote: "\e97b";
+$tgico-search: "\e97b";
-$tgico-saved: "\e97c";
+$tgico-select: "\e97c";
-$tgico-savedmessages: "\e97d";
+$tgico-send: "\e97d";
-$tgico-schedule: "\e97e";
+$tgico-send2: "\e97e";
-$tgico-scheduled: "\e97f";
+$tgico-sending: "\e97f";
-$tgico-search: "\e980";
+$tgico-sendingerror: "\e980";
-$tgico-select: "\e981";
+$tgico-settings: "\e981";
-$tgico-send: "\e982";
+$tgico-smallscreen: "\e982";
-$tgico-send2: "\e983";
+$tgico-smile: "\e983";
-$tgico-sending: "\e984";
+$tgico-sport: "\e984";
-$tgico-sendingerror: "\e985";
+$tgico-stickers: "\e985";
-$tgico-settings: "\e986";
+$tgico-stop: "\e986";
-$tgico-smallscreen: "\e987";
+$tgico-strikethrough: "\e987";
-$tgico-smile: "\e988";
+$tgico-textedit: "\e988";
-$tgico-sport: "\e989";
+$tgico-tip: "\e989";
-$tgico-stickers: "\e98a";
+$tgico-unarchive: "\e98a";
-$tgico-stop: "\e98b";
+$tgico-underline: "\e98b";
-$tgico-strikethrough: "\e98c";
+$tgico-unlock: "\e98c";
-$tgico-textedit: "\e98d";
+$tgico-unmute: "\e98d";
-$tgico-tip: "\e98e";
+$tgico-unpin: "\e98e";
-$tgico-unarchive: "\e98f";
+$tgico-unread: "\e98f";
-$tgico-underline: "\e990";
+$tgico-up: "\e990";
-$tgico-unlock: "\e991";
+$tgico-user: "\e991";
-$tgico-unmute: "\e992";
+$tgico-username: "\e992";
-$tgico-unpin: "\e993";
+$tgico-zoomin: "\e993";
-$tgico-unread: "\e994";
+$tgico-zoomout: "\e994";
-$tgico-up: "\e995";
-$tgico-user: "\e996";
-$tgico-username: "\e997";
-$tgico-write: "\e998";
-$tgico-zoomin: "\e999";
-$tgico-zoomout: "\e99a";

src/scss/partials/_leftSidebar.scss

@@ -350,8 +350,10 @@
     }
 
     .btn-corner {
-      &.menu-open:before {
+      &:not(.menu-open) .tgico-newchat_filled, 
-        content: $tgico-close;
+      &.menu-open .tgico-close {
+        animation: grow-icon .4s forwards ease-in-out !important;
+        visibility: visible !important;
       }
 
       @include respond-to(handhelds) {
@@ -486,6 +488,12 @@
   }
 }
 
+.language-container {
+  .sidebar-left-section {
+    padding-bottom: .5rem;
+  }
+}
+
 .new-group-container {
   .search-group {
     margin-top: .5rem;
@@ -493,8 +501,16 @@
 }
 
 .edit-folder-container {
-  .folder-category-button:nth-child(n+2) {
+  .chatlist {
-    pointer-events: none;
+    padding: 0;
+  }
+
+  .folder-categories {
+    .folder-category-button {
+      &:nth-child(n+2) {
+        pointer-events: none;
+      }
+    }
   }
 }
 
@@ -574,22 +590,16 @@
   }
 }
 
-.edit-folder-container {
-  .sidebar-left-h2 {
-    padding: 7px 24px 15px 24px;
-
-    @include respond-to(handhelds) {
-      padding: 7px 16px 15px 16px;
-    }
-  }
-}
-
 .chat-folders-container {
   .sidebar-left-section {
     &:not(:last-child) {
       padding-bottom: 0;
     }
 
+    &:last-child {
+      padding-bottom: .5rem;
+    }
+
     /* &-name {
       padding-top: .5rem;
       padding-bottom: .5rem;
@@ -643,28 +653,27 @@
     }
   }
 
-  .sidebar-left-h2 {
+  .input-wrapper {
-    padding: 21px 24px 8px;
+    margin-bottom: .125rem !important;
-
-    @include respond-to(handhelds) {
-      width: 100%;
-      padding: 21px 16px 8px;
-    }
   }
 
-  .input-wrapper {
+  .sidebar-left-section {
-    margin-bottom: 10px !important;
+    padding-bottom: 0rem;
+
+    &:last-child {
+      padding-bottom: .5rem;
+    }
   }
 }
 
 .folder-list {
   li {
-    padding: 9px 11px;
+    padding: 9px 12px;
     height: 50px;
   }
 
   .user-caption {
-    padding: 3px 28px 6px;
+    padding: 3px 28px 6px 27px;
   }  
 
   p span {
@@ -673,32 +682,14 @@
 }
 
 .folder-categories {
-  width: 100%;
-
   .checkbox-field {
     position: absolute;
-    right: 1.625rem !important;
+    right: 1.125rem !important;
-
-    @include respond-to(handhelds) {
-      right: 1rem !important;
-    }
   }
 }
 
 .folder-category-button {
-  display: flex;
-  padding: 0 1.5rem;
-  overflow: hidden;
   height: 50px;
-  border-radius: 0;
-
-  @include respond-to(handhelds) {
-    padding: 0 1.125rem;
-  }
-
-  &:before {
-    color: #797d82;
-  }
 }
 
 .popup-forward, .included-chatlist-container {
@@ -723,16 +714,24 @@
 }
 
 .included-chatlist-container {
-  .sidebar-left-h2 {
+  .sidebar-left-section {
-    padding: 6px 24px 8px 24px;
+    padding-bottom: 0;
 
-    @include respond-to(handhelds) {
+    &:first-child {
-      padding: 6px 16px 8px 16px;
+      padding-top: 0;
+    }
+    
+    &:last-child {
+      padding-bottom: .5rem;
+    }
+
+    .chatlist {
+      padding: 0;
     }
   }
 
   .selector {
-    ul {
+    .chatlist {
       .checkbox {
         margin-top: 10px;
       }
@@ -742,10 +741,6 @@
       }
     }
   }
-
-  .folder-category-button {
-    cursor: pointer;
-  }
 }
 
 .search-group-recent {
@@ -875,7 +870,7 @@
       display: flex;
       align-items: center;
       height: 3.5rem;
-      padding: 0 1.1875rem;
+      padding: 0 1.125rem;
     }
 
     &-disabled {

src/scss/partials/_rightSidebar.scss

@@ -20,7 +20,7 @@
 
   @include respond-to(not-handhelds) {
     width: var(--right-column-width);
-    transition: transform var(--layer-transition);
+    transition: transform var(--transition-standard-out);
     position: absolute;
     right: 0;
     z-index: 3;
@@ -35,6 +35,7 @@
     } */
   
     body.is-right-column-shown:not(.is-left-column-shown) & {
+      transition: transform var(--transition-standard-in);
       transform: translate3d(0, 0, 0);
     }
 
@@ -66,7 +67,7 @@
     flex: 0 0 auto;
 
     .sidebar-close-button.tgico:before {
-      content: $tgico-arrow_back;
+      content: $tgico-left;
 
       @include respond-to(not-handhelds) {
         content: $tgico-close;

src/scss/partials/_selector.scss

@@ -160,7 +160,7 @@
     }
   }
 
-  hr {
+  > hr {
     margin: 0;
     padding: 0;
   }

src/scss/style.scss

@@ -41,8 +41,14 @@ $chat-padding-handhelds: .5rem;
   --z-below: -1;
   --hover-alpha: #{$hover-alpha};
 
+  --transition-standard-easing: cubic-bezier(.4, .0, .2, 1);
+  --transition-standard-in-time: .25s;
+  --transition-standard-out-time: .2s;
+  --transition-standard-in: var(--transition-standard-in-time) var(--transition-standard-easing);
+  --transition-standard-out: var(--transition-standard-out-time) var(--transition-standard-easing);
+  
   --pm-transition: .2s ease-in-out;
-  --layer-transition: .2s ease-in-out;
+  --layer-transition: .2s cubic-bezier(.4, .0, .2, 1);
   --slide-header-transition: .4s ease-in-out;
   --tabs-transition: .25s ease-in-out;
   --btn-menu-transition: .2s cubic-bezier(.4, 0, .2, 1);