Disable unneeded selection; Dark theme color fixes (#1483)

Ajaxy · Oct 8, 2021 · 1abb31e · 1abb31e
1 parent c2f3c79
commit 1abb31e
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}`);
+    }
   });
 }