Theme changes

src/components/chat/chat.ts

@@ -86,6 +86,12 @@ export default class Chat extends EventListenerBase<{
     const item = document.createElement('div');
     item.classList.add('chat-background-item');
 
+    const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme);
+    if(theme.background.type === 'color') {
+      item.style.backgroundColor = theme.background.color;
+      item.style.backgroundImage = 'none';
+    }
+
     return new Promise<void>((resolve) => {
       const cb = () => {
         const prev = this.backgroundEl.children[this.backgroundEl.childElementCount - 1] as HTMLElement;

src/index.hbs

@@ -74,6 +74,8 @@
         <path id="logo" fill-rule="evenodd" d="M80,0 C124.18278,0 160,35.81722 160,80 C160,124.18278 124.18278,160 80,160 C35.81722,160 0,124.18278 0,80 C0,35.81722 35.81722,0 80,0 Z M114.262551,46.4516129 L114.123923,46.4516129 C111.089589,46.5056249 106.482806,48.0771432 85.1289541,56.93769 L81.4133571,58.4849956 C72.8664779,62.0684477 57.2607933,68.7965125 34.5963033,78.66919 C30.6591745,80.2345564 28.5967328,81.765936 28.4089783,83.2633288 C28.0626453,86.0254269 31.8703852,86.959903 36.7890378,88.5302703 L38.2642674,89.0045258 C42.3926354,90.314406 47.5534685,91.7248852 50.3250916,91.7847532 C52.9151948,91.8407003 55.7944784,90.8162976 58.9629426,88.7115451 L70.5121776,80.9327422 C85.6657026,70.7535853 93.6285785,65.5352892 94.4008055,65.277854 L94.6777873,65.216416 C95.1594319,65.1213105 95.7366278,65.0717596 96.1481181,65.4374337 C96.6344248,65.8695939 96.5866185,66.6880224 96.5351057,66.9075859 C96.127514,68.6448691 75.2839361,87.6143392 73.6629144,89.2417998 L73.312196,89.6016896 C68.7645143,94.2254793 63.9030972,97.1721503 71.5637945,102.355193 L73.3593638,103.544598 C79.0660342,107.334968 82.9483395,110.083813 88.8107882,113.958377 L90.3875424,114.996094 C95.0654739,118.061953 98.7330313,121.697601 103.562866,121.253237 C105.740839,121.052855 107.989107,119.042224 109.175465,113.09692 L109.246762,112.727987 C112.002037,98.0012935 117.417883,66.09303 118.669527,52.9443975 C118.779187,51.7924073 118.641237,50.318088 118.530455,49.6708963 L118.474159,49.3781963 C118.341081,48.7651315 118.067967,48.0040758 117.346762,47.4189793 C116.412565,46.6610871 115.002114,46.4638844 114.262551,46.4516129 Z"/>
         <path id="poll-line" d="M4.47,5.33v13.6c0,4.97,4.03,9,9,9h458.16"/>
         <path id="check" fill="none" d="M 4.7071 12.2929 l 5 5 c 0.3905 0.3905 1.0237 0.3905 1.4142 0 l 11 -11" />
+        <path id="verified-background" d="M12.3 2.9c.1.1.2.1.3.2.7.6 1.3 1.1 2 1.7.3.2.6.4.9.4.9.1 1.7.2 2.6.2.5 0 .6.1.7.7.1.9.1 1.8.2 2.6 0 .4.2.7.4 1 .6.7 1.1 1.3 1.7 2 .3.4.3.5 0 .8-.5.6-1.1 1.3-1.6 1.9-.3.3-.5.7-.5 1.2-.1.8-.2 1.7-.2 2.5 0 .4-.2.5-.6.6-.8 0-1.6.1-2.5.2-.5 0-1 .2-1.4.5-.6.5-1.3 1.1-1.9 1.6-.3.3-.5.3-.8 0-.7-.6-1.4-1.2-2-1.8-.3-.2-.6-.4-.9-.4-.9-.1-1.8-.2-2.7-.2-.4 0-.5-.2-.6-.5 0-.9-.1-1.7-.2-2.6 0-.4-.2-.8-.4-1.1-.6-.6-1.1-1.3-1.6-2-.4-.4-.3-.5 0-1 .6-.6 1.1-1.3 1.7-1.9.3-.3.4-.6.4-1 0-.8.1-1.6.2-2.5 0-.5.1-.6.6-.6.9-.1 1.7-.1 2.6-.2.4 0 .7-.2 1-.4.7-.6 1.4-1.2 2.1-1.7.1-.2.3-.3.5-.2z" />
+        <path id="verified-check" d="M16.4 10.1l-.2.2-5.4 5.4c-.1.1-.2.2-.4 0l-2.6-2.6c-.2-.2-.1-.3 0-.4.2-.2.5-.6.7-.6.3 0 .5.4.7.6l1.1 1.1c.2.2.3.2.5 0l4.3-4.3c.2-.2.4-.3.6 0 .1.2.3.3.4.5.2 0 .3.1.3.1z" />
         <symbol id="message-tail-filled" viewBox="0 0 11 20">
           <g transform="translate(9 -14)" fill="inherit" fill-rule="evenodd">
             <path d="M-6 16h6v17c-.193-2.84-.876-5.767-2.05-8.782-.904-2.325-2.446-4.485-4.625-6.48A1 1 0 01-6 16z" transform="matrix(1 0 0 -1 0 49)" id="corner-fill" fill="inherit"/>

src/lib/appManagers/appDialogsManager.ts

@@ -1291,9 +1291,7 @@ export class AppDialogsManager {
 
       if(peer?.pFlags?.verified) {
         titleSpanContainer.classList.add('is-verified');
-        const i = document.createElement('i');
-        i.classList.add('verified-icon');
-        titleSpanContainer.append(i);
+        titleSpanContainer.append(generateVerifiedIcon());
       }
     //}
     
@@ -1414,6 +1412,26 @@ export class AppDialogsManager {
   }
 }
 
+export function generateVerifiedIcon() {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttributeNS(null, 'viewBox', '0 0 24 24');
+  svg.setAttributeNS(null, 'width', '24');
+  svg.setAttributeNS(null, 'height', '24');
+  svg.classList.add('verified-icon');
+
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttributeNS(null, 'href', '#verified-background');
+  use.classList.add('verified-background');
+
+  const use2 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use2.setAttributeNS(null, 'href', '#verified-check');
+  use2.classList.add('verified-check');
+
+  svg.append(use, use2);
+
+  return svg;
+}
+
 const appDialogsManager = new AppDialogsManager();
 MOUNT_CLASS_TO.appDialogsManager = appDialogsManager;
 export default appDialogsManager;

src/lib/appManagers/appImManager.ts

@@ -222,20 +222,23 @@ export class AppImManager {
 
   public setCurrentBackground(broadcastEvent = false) {
     const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme);
-    const defaultTheme = AppStateManager.STATE_INIT.settings.themes.find(t => t.name === theme.name);
-
-    const isDefaultBackground = theme.background.blur === defaultTheme.background.blur && 
-      theme.background.slug === defaultTheme.background.slug;
-    if(!isDefaultBackground) {
-      return this.getBackground(theme.background.slug).then((url) => {
-        return this.setBackground(url, broadcastEvent);
-      }, () => { // * if NO_ENTRY_FOUND
-        theme.background = copy(defaultTheme.background); // * reset background
-        return this.setBackground('', true);
-      });
-    } else {
-      return this.setBackground('', broadcastEvent);
+
+    if(theme.background.slug) {
+      const defaultTheme = AppStateManager.STATE_INIT.settings.themes.find(t => t.name === theme.name);
+      const isDefaultBackground = theme.background.blur === defaultTheme.background.blur && 
+        theme.background.slug === defaultTheme.background.slug;
+
+      if(!isDefaultBackground) {
+        return this.getBackground(theme.background.slug).then((url) => {
+          return this.setBackground(url, broadcastEvent);
+        }, () => { // * if NO_ENTRY_FOUND
+          theme.background = copy(defaultTheme.background); // * reset background
+          return this.setBackground('', true);
+        });
+      }
     }
+    
+    return this.setBackground('', broadcastEvent);
   }
 
   private getBackground(slug: string) {

src/lib/appManagers/appStateManager.ts

@@ -137,6 +137,7 @@ export const STATE_INIT: State = {
       background: {
         type: 'color',
         blur: false,
+        color: '#0f0f0f',
         highlightningColor: 'hsla(0, 0%, 3.82353%, 0.4)'
       }
     }],
@@ -213,12 +214,10 @@ export class AppStateManager extends EventListenerBase<{
           state.chats = chats;
         }
 
-        validateInitObject(STATE_INIT, state);
-
         if(!state.settings.hasOwnProperty('themes') && state.settings.background) {
-          const theme = state.settings.themes.find(t => t.name === STATE_INIT.settings.theme);
+          const theme = STATE_INIT.settings.themes.find(t => t.name === STATE_INIT.settings.theme);
           if(theme) {
-            theme.background = state.settings.background;
+            theme.background = copy(state.settings.background);
           }
         }
 
@@ -226,6 +225,8 @@ export class AppStateManager extends EventListenerBase<{
           state.settings.theme = state.settings.nightTheme ? 'night' : 'day';
         }
 
+        validateInitObject(STATE_INIT, state);
+
         this.state = state;
         this.state.version = STATE_VERSION;
 

src/scss/partials/_chat.scss

@@ -780,7 +780,7 @@ $chat-helper-size: 39px;
 	}
 
 	@include respond-to(handhelds) {
-		--padding-vertical: .5px;
+		--padding-vertical: 1px;
 		--padding-horizontal: #{$chat-padding-handhelds};
 	}
 
@@ -789,7 +789,7 @@ $chat-helper-size: 39px;
 	}
 	
 	@include respond-to(esg-bottom) {
-		--padding-vertical: .5px;
+		--padding-vertical: 1px;
 		--padding-horizontal: #{$chat-padding-handhelds};
 	}
 	

src/scss/partials/_chatlist.scss

@@ -197,7 +197,39 @@ ul.chatlist {
 
     @include respond-to(not-handhelds) {
       &.active {
-        background: var(--light-secondary-text-color);
+        //background: var(--light-secondary-text-color);
+        background: var(--primary-color) !important;
+
+        .user-caption,
+        .tgico-chatspinned:before,
+        //.user-title:after,
+        .user-title,
+        b,
+        .message-status {
+          color: #fff;
+        }
+
+        .user-title:after {
+          color: rgba(255, 255, 255, .7);
+        }
+
+        .verified-background {
+          fill: #fff !important;
+        }
+
+        .verified-check {
+          fill: var(--primary-color) !important;
+        }
+
+        .dialog-avatar.is-online:after {
+          background-color: #fff;
+          border-color: var(--primary-color);
+        }
+
+        .badge.unread {
+          background-color: #fff !important;
+          color: var(--primary-color);
+        }
       }
     }
   }
@@ -219,6 +251,10 @@ ul.chatlist {
         &:not(:empty), &.tgico-pinnedchat {
           margin-left: .5rem;
         }
+
+        &.unread {
+          transition: none;
+        }
       }
     }
   }
@@ -259,8 +295,6 @@ ul.chatlist {
 
     .verified-icon {
       flex: 0 0 auto;
-      content: " ";
-      background: url(assets/img/icon-verified.svg);
       width: 20px;
       height: 20px;
       margin-left: .125rem;

src/scss/style.scss

@@ -199,7 +199,8 @@ html.night {
   --message-checkbox-border-color: #fff;
   --message-secondary-color: var(--secondary-color);
 
-  @include splitColor(message-out-background-color, #ae582d, true, true);
+  //@include splitColor(message-out-background-color, #ae582d, true, true);
+  @include splitColor(message-out-background-color, #878afd, true, true);
   --message-out-link-color: #fff;
   --message-out-primary-color: #fff;
   --message-out-audio-play-button-color: var(--message-out-background-color);
@@ -1162,3 +1163,11 @@ middle-ellipsis-element {
   top: 0;
   z-index: -1;
 }
+
+.verified-check {
+  fill: #fff;
+}
+
+.verified-background {
+  fill: #33a8e5;
+}