From bf1b057e8b5aeef48535ba2d83e33d0c11131e5b Mon Sep 17 00:00:00 2001
From: morethanwords <thanwords24@gmail.com>
Date: Mon, 19 Apr 2021 19:30:51 +0400
Subject: [PATCH] Theme changes

---
 src/components/chat/chat.ts              |  6 ++++
 src/index.hbs                            |  2 ++
 src/lib/appManagers/appDialogsManager.ts | 24 ++++++++++++--
 src/lib/appManagers/appImManager.ts      | 29 +++++++++--------
 src/lib/appManagers/appStateManager.ts   |  9 +++---
 src/scss/partials/_chat.scss             |  4 +--
 src/scss/partials/_chatlist.scss         | 40 ++++++++++++++++++++++--
 src/scss/style.scss                      | 11 ++++++-
 8 files changed, 99 insertions(+), 26 deletions(-)

diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts
index 2c45d164..77a97961 100644
--- a/src/components/chat/chat.ts
+++ b/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;
diff --git a/src/index.hbs b/src/index.hbs
index 52140c85..2e33005f 100644
--- a/src/index.hbs
+++ b/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"/>
diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts
index e4a6ab0c..432125f6 100644
--- a/src/lib/appManagers/appDialogsManager.ts
+++ b/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;
diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts
index 403b61e2..ff9a7175 100644
--- a/src/lib/appManagers/appImManager.ts
+++ b/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) {
diff --git a/src/lib/appManagers/appStateManager.ts b/src/lib/appManagers/appStateManager.ts
index 2063d846..34c118d7 100644
--- a/src/lib/appManagers/appStateManager.ts
+++ b/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;
 
diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss
index 974a8c70..f3917a06 100644
--- a/src/scss/partials/_chat.scss
+++ b/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};
 	}
 	
diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss
index 5af1421d..1ae4d331 100644
--- a/src/scss/partials/_chatlist.scss
+++ b/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;
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 34fa3fb5..e1e58ba3 100644
--- a/src/scss/style.scss
+++ b/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;
+}