reafctors: converted sass colors in _mentions.scss

updated session green to use css variable everywhere adn removed unused classes

stylesheets/_mentions.scss

@@ -26,5 +26,5 @@
 }
 
 .module-conversation-list-item--mentioned-us {
-  border-left: 4px solid $session-color-green !important;
+  border-left: 4px solid var(--color-session-green-color) !important;
 }

stylesheets/_quote.scss

@@ -278,7 +278,7 @@
   }
 }
 
-$session-highlight-message-shadow: 0px 0px 10px 1px $session-color-green;
+$session-highlight-message-shadow: 0px 0px 10px 1px var(--color-session-green-color);
 
 @keyframes remove-box-shadow {
   0% {

stylesheets/_session.scss

@@ -527,7 +527,7 @@ label {
   }
 
   &__text-highlight {
-    @include text-highlight($session-color-green);
+    @include text-highlight(var(--color-session-green-color));
 
     color: black;
 
@@ -561,13 +561,6 @@ label {
   }
 }
 
-.session-toggle {
-  &.active {
-    background-color: $session-color-green;
-    border-color: $session-color-green;
-  }
-}
-
 .react-contexify {
   // be sure it is more than the one set for the More Informations screen of messages
   z-index: 30;
@@ -749,7 +742,7 @@ label {
     width: 13px;
     height: 13px;
     border-radius: 50%;
-    background: $session-color-green;
+    background: var(--color-session-green-color);
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
   }
   div:nth-child(1) {

stylesheets/_session_constants.scss

@@ -93,9 +93,6 @@ $session-font-mono: 'SpaceMono';
 // ////////////////// Colors ////////////////////
 // //////////////////////////////////////////////
 
-// Brand
-$session-color-green: #00f782;
-
 // Shades
 $session-shade-1: #0c0c0c;
 $session-shade-1-alt: #0f1011;

stylesheets/_session_conversation.scss

@@ -302,27 +302,6 @@
   }
 }
 
-.session-progress {
-  position: relative;
-  z-index: 100;
-
-  &__progress {
-    will-change: transform;
-
-    width: 100%;
-    position: absolute;
-    left: 0px;
-    font-size: 0px;
-    height: 1px;
-
-    background-color: $session-color-green;
-
-    &.fade {
-      opacity: 0;
-    }
-  }
-}
-
 .send-message-button {
   animation: fadein var(--default-duration);
 
@@ -550,7 +529,7 @@ $rhap_font-family: inherit !default;
   height: 15px;
   top: -5px;
   margin-left: -10px;
-  background: $session-color-green;
+  background: var(--color-session-green-color);
   box-shadow: none;
   box-shadow: rgba($rhap_theme-color, 0.5) 0 0 5px;
 }

stylesheets/_session_slider.scss

@@ -57,7 +57,7 @@
   touch-action: pan-x;
 }
 .rc-slider-handle:focus {
-  border-color: $session-color-green;
+  border-color: var(--color-session-green-color);
   box-shadow: 0 0 0 5px rgba($session-color-white, 0.2);
   outline: none;
 }
@@ -66,10 +66,10 @@
   box-shadow: unset;
 }
 .rc-slider-handle:hover {
-  border-color: $session-color-green;
+  border-color: var(--color-session-green-color);
 }
 .rc-slider-handle:active {
-  border-color: $session-color-green;
+  border-color: var(--color-session-green-color);
   box-shadow: 0 0 5px rgba($session-color-white, 0.2);
   cursor: -webkit-grabbing;
   cursor: grabbing;

ts/themes/SessionTheme.tsx

@@ -21,6 +21,9 @@ const blackColor = '#000000';
 // Blues
 const lightBlueColor = '#a2d2f4';
 
+// Greens
+const sessionGreenColor = accentDarkTheme;
+
 // Grays
 const grayColor = '#616161';
 const lightGrayColor = '#8b8e91';
@@ -98,6 +101,7 @@ export const switchHtmlToDarkTheme = () => {
     '--color-light-black-color',
     `rgba(${blackColor}, 0.2)`
   );
+  document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor);
 
   document.documentElement.style.setProperty('--color-gray-color', grayColor);
   document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor);
@@ -256,6 +260,7 @@ export const switchHtmlToLightTheme = () => {
     '--color-light-black-color',
     `rgba(${blackColor}, 0.2)`
   );
+  document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor);
   document.documentElement.style.setProperty('--color-gray-color', grayColor);
   document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor);
   document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor);