From 1abb31e3ee4ce47d79f681f6c34f682087384f74 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 8 Oct 2021 16:17:31 +0300
Subject: [PATCH] Disable unneeded selection; Dark theme color fixes (#1483)

---
 src/components/common/Avatar.scss                   | 1 +
 src/components/middle/MessageList.scss              | 1 +
 src/components/middle/message/CommentButton.scss    | 1 +
 src/components/middle/message/MessageMeta.scss      | 1 +
 src/components/middle/message/_message-content.scss | 1 +
 src/styles/_variables.scss                          | 2 --
 src/util/switchTheme.ts                             | 8 ++++++++
 7 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Avatar.scss b/src/components/common/Avatar.scss
index 22299d823..aa1f64782 100644
--- a/src/components/common/Avatar.scss
+++ b/src/components/common/Avatar.scss
@@ -11,6 +11,7 @@
   font-weight: bold;
   display: flex;
   white-space: nowrap;
+  user-select: none;
 
   img:not(.emoji) {
     border-radius: 50%;
diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss
index 4ad87fb22..c8dd00876 100644
--- a/src/components/middle/MessageList.scss
+++ b/src/components/middle/MessageList.scss
@@ -194,6 +194,7 @@
   .ActionMessage,
   .empty {
     text-align: center;
+    user-select: none;
 
     > span {
       display: inline-block;
diff --git a/src/components/middle/message/CommentButton.scss b/src/components/middle/message/CommentButton.scss
index 06932586c..2595cf753 100644
--- a/src/components/middle/message/CommentButton.scss
+++ b/src/components/middle/message/CommentButton.scss
@@ -18,6 +18,7 @@
   white-space: nowrap;
   cursor: pointer;
   transition: background-color .15s, color .15s;
+  user-select: none;
 
   body.animation-level-0 & {
     transition: none !important;
diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss
index b1b75292f..225af03ef 100644
--- a/src/components/middle/message/MessageMeta.scss
+++ b/src/components/middle/message/MessageMeta.scss
@@ -11,6 +11,7 @@
   color: white;
   cursor: pointer;
   max-width: 100%;
+  user-select: none;
 
   .message-time,
   .message-signature,
diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss
index 49ea26c56..96d9e358e 100644
--- a/src/components/middle/message/_message-content.scss
+++ b/src/components/middle/message/_message-content.scss
@@ -501,6 +501,7 @@
     padding: 0 .375rem;
     border-radius: .75rem;
     line-height: 1.125rem;
+    user-select: none;
   }
 
   .message-media-duration .icon-muted-chat {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index c51cd6ffe..cc74d9c01 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -63,7 +63,6 @@ $color-user-8: #faa774;
   --color-background-secondary-accent: #E4E4E5;
   --color-background-own: #{$color-light-green};
   --color-background-own-selected: #{darken($color-light-green, 10%)};
-  --color-background-own-rgb: #{toRGB($color-light-green)};
   --color-text: #{$color-black};
   --color-text-lighter: #{$color-dark-gray};
   --color-text-secondary: #{$color-text-secondary};
@@ -86,7 +85,6 @@ $color-user-8: #faa774;
   --color-composer-button: #{$color-text-secondary}CC;
 
   --color-primary: #{$color-primary};
-  --color-primary-rgb: #{toRGB($color-primary)};
   --color-primary-shade: #{mix($color-primary, $color-black, 92%)};
   --color-primary-shade-darker: #{mix($color-primary, $color-black, 84%)};
   --color-primary-shade-rgb: #{toRGB(mix($color-primary, $color-black, 92%))};
diff --git a/src/util/switchTheme.ts b/src/util/switchTheme.ts
index 8c9111558..6936f79f7 100644
--- a/src/util/switchTheme.ts
+++ b/src/util/switchTheme.ts
@@ -16,6 +16,10 @@ let isInitialized = false;
 const HEX_COLOR_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i;
 const DURATION_MS = 200;
 const ENABLE_ANIMATION_DELAY_MS = 500;
+const RGB_VARIABLES = new Set([
+  '--color-primary-shade',
+  '--color-text-secondary',
+]);
 
 const lerp = (start: number, end: number, interpolationRatio: number) => {
   return (1 - interpolationRatio) * start + interpolationRatio * end;
@@ -89,5 +93,9 @@ function applyColorAnimationStep(startIndex: number, endIndex: number, interpola
     document.documentElement.style.setProperty(property, a !== undefined
       ? `rgba(${r},${g},${b},${a / 255})`
       : `rgb(${r},${g},${b})`);
+
+    if (RGB_VARIABLES.has(property)) {
+      document.documentElement.style.setProperty(`${property}-rgb`, `${r},${g},${b}`);
+    }
   });
 }