fix: emoji panel light mode support (#2292)

* fix: emoji panel light mode support

* fix: link darkMode prop to redux state

* fix: use getTheme selector directly

stylesheets/_session_conversation.scss

@@ -2,14 +2,17 @@
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0.25;
   }
 }
+
 @keyframes fromShadow {
   from {
     opacity: 0.25;
   }
+
   to {
     opacity: 1;
   }
@@ -19,9 +22,11 @@
   0% {
     box-shadow: 0px 0px 0px 0px $session-color-danger-alt;
   }
+
   50% {
     box-shadow: 0px 0px 12px 0px rgba($session-color-danger-alt, 1);
   }
+
   100% {
     box-shadow: 0px 0px 0px 0px rgba($session-color-danger-alt, 1);
   }
@@ -73,6 +78,7 @@
       display: flex;
     }
   }
+
   .message-selection-overlay div[role='button'] {
     display: inline-block;
   }
@@ -248,8 +254,8 @@
   & > section.emoji-mart {
     font-family: $session-font-default;
     font-size: $session-font-sm;
-    background-color: $session-shade-4;
+    background-color: var(--color-cell-background);
-    border: 1px solid $session-shade-6-alt;
+    border: 1px solid var(--color-session-border);
     border-radius: 8px;
     padding-bottom: $session-margin-sm;
 
@@ -259,7 +265,7 @@
       span {
         font-family: $session-font-default;
         padding-top: $session-margin-sm;
-        background-color: $session-shade-4;
+        background-color: var(--color-cell-background);
       }
     }
 
@@ -286,11 +292,11 @@
       left: calc(100% - 79px);
       width: 22px;
       height: 22px;
-      background-color: $session-shade-4;
+      background-color: var(--color-cell-background);
       transform: rotate(45deg);
       border-radius: 3px;
       transform: scaleY(1.4) rotate(45deg);
-      border: 0.7px solid $session-shade-6-alt;
+      border: 0.7px solid var(--color-session-border);
       clip-path: polygon(100% 100%, 7.2px 100%, 100% 7.2px);
     }
   }
@@ -327,9 +333,11 @@
       0% {
         transform: scale(1);
       }
+
       80% {
         transform: scale(1.3);
       }
+
       100% {
         transform: scale(1);
       }
@@ -405,10 +413,12 @@
       &.primary {
         cursor: default;
         user-select: none;
+
         &:hover {
           filter: brightness(100%);
           border: 2px solid #161819;
         }
+
         background-color: $session-shade-1-alt;
         border: 2px solid #161819;
       }

ts/components/conversation/SessionEmojiPanel.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { Picker } from 'emoji-mart';
 import { Constants } from '../../session';
+import { useSelector } from 'react-redux';
+import { getTheme } from '../../state/selectors/theme';
 
 type Props = {
   onEmojiClicked: (emoji: any) => void;
@@ -10,6 +12,7 @@ type Props = {
 
 export const SessionEmojiPanel = (props: Props) => {
   const { onEmojiClicked, show } = props;
+  const darkMode = useSelector(getTheme) === 'dark';
 
   return (
     <div className={classNames('session-emoji-panel', show && 'show')}>
@@ -17,7 +20,7 @@ export const SessionEmojiPanel = (props: Props) => {
         backgroundImageFn={() => './images/emoji/emoji-sheet-twitter-32.png'}
         set={'twitter'}
         sheetSize={32}
-        darkMode={true}
+        darkMode={darkMode}
         color={Constants.UI.COLORS.GREEN}
         showPreview={true}
         title={''}