Fix firefox message input height

New favicons
New manifest

public/assets/img/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/assets/img/mstile-70x70.png?v=jw3mK7G9Ry"/>
+            <square150x150logo src="/assets/img/mstile-150x150.png?v=jw3mK7G9Ry"/>
+            <square310x310logo src="/assets/img/mstile-310x310.png?v=jw3mK7G9Ry"/>
+            <wide310x150logo src="/assets/img/mstile-310x150.png?v=jw3mK7G9Ry"/>
+            <TileColor>#2d89ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/assets/img/logo.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
-	<path fill="#50A2E9" 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 fill="#3390ec" 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"/>
 </svg>

public/assets/img/logo_padded.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 160 160" style="enable-background:new 0 0 160 160;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#50A2E9;}
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#3390ec;}
 </style>
 <path class="st0" d="M80,13c37,0,67,30,67,67s-30,67-67,67s-67-30-67-67S43,13,80,13z M108.7,51.9h-0.1c-2.5,0-6.4,1.4-24.3,8.8
 	L81.2,62C74,65,61,70.6,42,78.9c-3.3,1.3-5,2.6-5.2,3.8c-0.3,2.3,2.9,3.1,7,4.4l1.2,0.4c3.5,1.1,7.8,2.3,10.1,2.3

public/assets/img/msg-tail-left-blur.svg

@@ -1 +0,0 @@
-<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><path d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#FFF" xlink:href="#b"/></g></svg>

public/assets/img/msg-tail-left.svg

@@ -1 +0,0 @@
-<svg width="11" height="20" viewBox="0 0 11 20" xmlns="http://www.w3.org/2000/svg"><g transform="translate(9 -14)" fill="none" 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="#FFF"/></g></svg>

public/assets/img/msg-tail-right-blur.svg

@@ -1 +0,0 @@
-<svg width='9' height='20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><filter x='-50%' y='-14.7%' width='200%' height='141.2%' filterUnits='objectBoundingBox' id='a'><feOffset dy='1' in='SourceAlpha' result='shadowOffsetOuter1'/><feGaussianBlur stdDeviation='1' in='shadowOffsetOuter1' result='shadowBlurOuter1'/><feColorMatrix values='0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0' in='shadowBlurOuter1'/></filter><path d='M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z' id='b'/></defs><g fill='none' fill-rule='evenodd'><use fill='#000' filter='url(#a)' xlink:href='#b'/><use fill='#EEFFDE' xlink:href='#b'/></g></svg>

public/assets/img/msg-tail-right.svg

@@ -1 +0,0 @@
-<svg width="11" height="20" viewBox="0 0 11 20" xmlns="http://www.w3.org/2000/svg"><g transform="translate(9 -14)" fill="none" 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="rotate(180 -3.5 24.5)" id="corner-fill" fill="#EEFFDE"/></g></svg>

public/assets/img/site.webmanifest

@@ -0,0 +1,56 @@
+{
+    "name": "Telegram WebK",
+    "short_name": "Telegram WebK",
+    "start_url": "/",
+    "description": "Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.",
+    "icons": [
+        {
+            "src": "/assets/img/android-chrome-36x36.png?v=jw3mK7G9Ry",
+            "sizes": "36x36",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/android-chrome-48x48.png?v=jw3mK7G9Ry",
+            "sizes": "48x48",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/android-chrome-72x72.png?v=jw3mK7G9Ry",
+            "sizes": "72x72",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/android-chrome-96x96.png?v=jw3mK7G9Ry",
+            "sizes": "96x96",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/android-chrome-144x144.png?v=jw3mK7G9Ry",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/android-chrome-192x192.png?v=jw3mK7G9Ry",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/android-chrome-256x256.png?v=jw3mK7G9Ry",
+            "sizes": "256x256",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/android-chrome-384x384.png?v=jw3mK7G9Ry",
+            "sizes": "384x384",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/android-chrome-512x512.png?v=jw3mK7G9Ry",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

public/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

public/site.webmanifest

@@ -1,19 +0,0 @@
-{
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "assets/img/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "assets/img/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
-}

server.js

@@ -1,14 +1,17 @@
 const compression = require('compression');
 const express = require('express');
 const https = require('https');
+const http = require('http');
 const fs = require('fs');
 
 const app = express();
 
 const thirdTour = process.argv[2] == 3;
+const forcePort = process.argv[3];
+const useHttp = process.argv[4] === 'http';
 
 const publicFolderName = thirdTour ? 'public3' : 'public';
-const port = thirdTour ? 8443 : 8443;
+const port = forcePort ? +forcePort : (thirdTour ? 8443 : 8443);
 
 app.use(compression());
 app.use(express.static(publicFolderName));
@@ -17,7 +20,9 @@ app.get('/', (req, res) => {
   res.sendFile(__dirname + `/${publicFolderName}/index.html`);
 });
 
-https.createServer({
+const server = useHttp ? http : https;
+
+server.createServer({
   key: fs.readFileSync(__dirname + '/certs/server-key.pem'),
   cert: fs.readFileSync(__dirname + '/certs/server-cert.pem')
 }, app).listen(port, () => {

src/components/appSearchSuper..ts

@@ -914,9 +914,14 @@ export default class AppSearchSuper {
           return;
         }
 
-        console.log('anymore', chatFull);
+        //console.log('anymore', chatFull);
         this.loaded[mediaTab.inputFilter] = true;
-        return renderParticipants((chatFull.participants as ChatParticipants.chatParticipants).participants);
+        const participants = chatFull.participants;
+        if(participants._ === 'chatParticipantsForbidden') {
+          return;
+        }
+        
+        return renderParticipants(participants.participants);
       });
     }
 

src/components/inputField.ts

@@ -153,6 +153,10 @@ class InputField {
 
     if(placeholder) {
       _i18n(input, placeholder, undefined, 'placeholder');
+
+      if(this.inputFake) {
+        _i18n(this.inputFake, placeholder, undefined, 'placeholder');
+      }
     }
 
     if(label) {

src/components/passwordInputField.ts

@@ -22,6 +22,11 @@ export default class PasswordInputField extends InputField {
     input.type = 'password';
     input.setAttribute('required', '');
     input.autocomplete = 'off';
+    input.readOnly = true;
+
+    input.addEventListener('focus', () => {
+      input.removeAttribute('readonly');
+    }, {once: true});
 
     const toggleVisible = this.toggleVisible = document.createElement('span');
     toggleVisible.classList.add('toggle-visible', 'tgico');

src/components/popups/datePicker.ts

@@ -248,8 +248,7 @@ export default class PopupDatePicker extends PopupElement {
 
       const timeOptions: Intl.DateTimeFormatOptions = {
         minute: '2-digit',
-        hour: '2-digit',
-        hour12: false
+        hour: '2-digit'
       };
       
       const sendDate = new Date(this.selectedDate.getTime());

src/components/sidebarLeft/tabs/background.ts

@@ -18,7 +18,6 @@ import appImManager from "../../../lib/appManagers/appImManager";
 import appStateManager from "../../../lib/appManagers/appStateManager";
 import apiManager from "../../../lib/mtproto/mtprotoworker";
 import rootScope from "../../../lib/rootScope";
-import Button from "../../button";
 import CheckboxField from "../../checkboxField";
 import ProgressivePreloader from "../../preloader";
 import { SliderSuperTab } from "../../slider";
@@ -92,7 +91,7 @@ export default class AppBackgroundTab extends SliderSuperTab {
             rootScope.settings.background.slug = slug;
             rootScope.settings.background.type = 'image';
             rootScope.settings.background.highlightningColor = hsla;
-            document.documentElement.style.setProperty('--message-highlightning-color', rootScope.settings.background.highlightningColor);
+            appImManager.applyBackgroundColor();
             appStateManager.pushToState('settings', rootScope.settings);
 
             saveToCache(slug, url);

src/helpers/color.ts

@@ -36,6 +36,65 @@ export function rgbToHsl(r: number, g: number, b: number) {
   });
 }
 
+// * https://stackoverflow.com/a/9493060/6758968
+/**
+ * Converts an HSL color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes h, s, and l are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   {number}  h       The hue
+ * @param   {number}  s       The saturation
+ * @param   {number}  l       The lightness
+ * @return  {Array}           The RGB representation
+ */
+export function hslToRgba(h: number, s: number, l: number, a: number) {
+  let r: number, g: number, b: number;
+
+  if(s === 0) {
+    r = g = b = l; // achromatic
+  } else {
+    const hue2rgb = function hue2rgb(p: number, q: number, t: number) {
+      if(t < 0) t += 1;
+      if(t > 1) t -= 1;
+      if(t < 1/6) return p + (q - p) * 6 * t;
+      if(t < 1/2) return q;
+      if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+      return p;
+    }
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1/3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1/3);
+  }
+
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), Math.round(a * 255)];
+}
+
+export function hslaStringToRgba(hsla: string) {
+  const splitted = hsla.slice(5, -1).split(', ');
+  const alpha = +splitted.pop();
+  const arr = splitted.map((val) => {
+    if(val.endsWith('%')) {
+      return +val.slice(0, -1) / 100;
+    }
+    
+    return +val / 360;
+  });
+
+  return hslToRgba(arr[0], arr[1], arr[2], alpha);
+}
+
+export function hslaStringToRgbaString(hsla: string) {
+  return '#' + hslaStringToRgba(hsla).map(v => ('0' + v.toString(16)).slice(-2)).join('');
+}
+
+export function hslaStringToRgbString(hsla: string) {
+  return hslaStringToRgbaString(hsla).slice(0, -2);
+}
+
 // * https://github.com/TelegramMessenger/Telegram-iOS/blob/3d062fff78cc6b287c74e6171f855a3500c0156d/submodules/TelegramPresentationData/Sources/PresentationData.swift#L453
 export function highlightningColor(pixel: Uint8ClampedArray) {
   let {h, s, l} = rgbToHsl(pixel[0], pixel[1], pixel[2]);
@@ -46,4 +105,4 @@ export function highlightningColor(pixel: Uint8ClampedArray) {
   
   const hsla = `hsla(${h * 360}, ${s * 100}%, ${l * 100}%, .4)`;
   return hsla;
-};
+}

src/helpers/date.ts

@@ -48,7 +48,6 @@ export function formatDateAccordingToTodayNew(time: Date) {
   const options: Intl.DateTimeFormatOptions = {};
   if((now - timestamp) < ONE_DAY && today.getDate() === time.getDate()) { // if the same day
     options.hour = options.minute = '2-digit';
-    options.hour12 = false;
   } else if(today.getFullYear() !== time.getFullYear()) { // different year
     options.year = options.day = 'numeric';
     options.month = '2-digit';

src/index.hbs

@@ -4,16 +4,22 @@
 <head>
   <meta charset="utf-8">
   <title>Telegram Web</title>
-  <meta name="description" content="">
+  <meta name="description" content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-  <link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
-  <!--<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">-->
-  <link rel="manifest" href="site.webmanifest">
-  <link rel="mask-icon" href="assets/img/safari-pinned-tab.svg" color="#64a3f0">
-  <meta name="msapplication-TileColor" content="#da532c">
-  <meta name="theme-color" content="#fafafa">
+  <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon.png?v=jw3mK7G9Ry">
+  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png?v=jw3mK7G9Ry">
+  <!--<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/android-chrome-192x192.png?v=jw3mK7G9Ry">
+  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png?v=jw3mK7G9Ry">-->
+  <link rel="manifest" href="/assets/img/site.webmanifest?v=jw3mK7G9Ry">
+  <link rel="mask-icon" href="/assets/img/safari-pinned-tab.svg?v=jw3mK7G9Ry" color="#3390ec">
+  <link rel="shortcut icon" href="/assets/img/favicon.ico?v=jw3mK7G9Ry">
+  <meta name="apple-mobile-web-app-title" content="Telegram WebK">
+  <meta name="application-name" content="Telegram WebK">
+  <meta name="msapplication-TileColor" content="#2d89ef">
+  <meta name="msapplication-TileImage" content="/assets/img/mstile-144x144.png?v=jw3mK7G9Ry">
+  <meta name="msapplication-config" content="/assets/img/browserconfig.xml?v=jw3mK7G9Ry">
+  <meta name="theme-color" content="#ffffff">
   {{# each htmlWebpackPlugin.files.css }}
     <link rel="stylesheet" href="{{ this }}">
   {{/ each }}
@@ -64,7 +70,7 @@
     <svg style="position: absolute; top: -10000px; left: -10000px;">
       <defs id="svg-defs">
         <path id="message-tail" d="M1.00002881,1.03679295e-14 L7,0 L7,17 C6.8069969,14.1607017 6.12380234,11.2332513 4.95041634,8.21764872 C4.04604748,5.89342034 2.50413132,3.73337411 0.324667862,1.73751004 L0.324652538,1.73752677 C-0.0826597201,1.36452676 -0.110475289,0.731958677 0.262524727,0.324646419 C0.451952959,0.117792698 0.719544377,1.0985861e-14 1.00002881,1.04360964e-14 Z"></path>
-        <path id="logo" fill="#50A2E9" 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="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" />
         <symbol id="message-tail-filled" viewBox="0 0 11 20">

src/lib/appManagers/appImManager.ts

@@ -45,7 +45,7 @@ import appNotificationsManager from './appNotificationsManager';
 import AppPrivateSearchTab from '../../components/sidebarRight/tabs/search';
 import { i18n } from '../langPack';
 import { SendMessageAction } from '../../layer';
-import { highlightningColor } from '../../helpers/color';
+import { highlightningColor, hslaStringToRgbString } from '../../helpers/color';
 import { getObjectKeysAndSort } from '../../helpers/object';
 import { getFilesFromEvent } from '../../helpers/files';
 
@@ -79,6 +79,7 @@ export class AppImManager {
   private chatsSelectTabDebounced: () => void;
   
   public markupTooltip: MarkupTooltip;
+  private themeColorElem: Element;
 
   get myId() {
     return rootScope.myId;
@@ -278,18 +279,38 @@ export class AppImManager {
     return sessionStorage.getFromCache('chatPositions')[key];
   }
 
-  private setSettings = () => {
-    document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
-
+  public applyBackgroundColor() {
+    let hsla: string;
     if(rootScope.settings.nightTheme) {
-      document.documentElement.style.setProperty('--message-highlightning-color', highlightningColor(new Uint8ClampedArray([15, 15, 15, 1])));
+      hsla = highlightningColor(new Uint8ClampedArray([15, 15, 15, 1]));
+      document.documentElement.style.setProperty('--message-highlightning-color', hsla);
     } else {
       if(rootScope.settings.background.highlightningColor) {
-        document.documentElement.style.setProperty('--message-highlightning-color', rootScope.settings.background.highlightningColor);
+        hsla = rootScope.settings.background.highlightningColor;
+        document.documentElement.style.setProperty('--message-highlightning-color', hsla);
       } else {
         document.documentElement.style.removeProperty('--message-highlightning-color');
       }
     }
+
+    let themeColor = '#ffffff';
+    if(hsla) {
+      themeColor = hslaStringToRgbString(hsla);
+    }
+
+    if(this.themeColorElem === undefined) {
+      this.themeColorElem = document.head.querySelector('[name="theme-color"]') as Element || null;
+    }
+
+    if(this.themeColorElem) {
+      this.themeColorElem.setAttribute('content', themeColor);
+    }
+  }
+
+  private setSettings = () => {
+    document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
+
+    this.applyBackgroundColor();
     
     document.documentElement.classList.toggle('night', rootScope.settings.nightTheme);
     

src/lib/appManagers/appStateManager.ts

@@ -118,7 +118,8 @@ export const STATE_INIT: State = {
     background: {
       type: 'image',
       blur: false,
-      slug: 'ByxGo2lrMFAIAAAAmkJxZabh8eM', // * new blurred camomile
+      slug: 'ByxGo2lrMFAIAAAAmkJxZabh8eM', // * new blurred camomile,
+      highlightningColor: 'hsla(85.5319, 36.9171%, 40.402%, 0.4)'
     },
     notifications: {
       sound: false

src/scss/partials/_chat.scss

@@ -594,7 +594,7 @@ $chat-helper-size: 39px;
 			@include respond-to(medium-screens) {
 				@include animation-level(2) {
 					// !WARNING, МАГИЧЕСКОЕ ЧИСЛО
-					margin: -16.5rem 0 -20rem 0;
+					margin: -18.5rem 0 -22rem 0;
 					transform: scale(1);
 					transform-origin: left center;
 					transition: transform var(--transition-standard-out), opacity var(--transition-standard-out) !important;

src/scss/partials/_rightSidebar.scss

@@ -9,7 +9,7 @@
   overflow: unset;
 
   @include respond-to(only-small-screens) {
-    box-shadow: 0 0.25rem 0.5rem 0.1rem hsla(0, 0%, 44.7%, .25);
+    box-shadow: 0 0.25rem 0.5rem 0.1rem rgba(0, 0, 0, .2);
   }
 
   @include respond-to(handhelds) {

src/scss/partials/pages/_pages.scss

@@ -153,6 +153,7 @@
 .sign-logo {
   max-width: 100%;
   max-height: 100%;
+  fill: var(--primary-color);
 }
 
 .page-sign, .page-signQR {