feat: themed CompositionBox and related components

stylesheets/_modules.scss

@@ -959,7 +959,8 @@
 }
 
 // Module: Caption Editor
-// TODO Theming We don't seem to use this can we delete?
+// TODO Theming We don't seem to use this can we delete?'
+// TODO we will probably remove this and the related component.
 .module-caption-editor {
   background-color: rgba(0, 0, 0, 0.8);
   z-index: 20;

stylesheets/_session_conversation.scss

@@ -243,7 +243,7 @@
   &--timer {
     display: inline-flex;
     align-items: center;
-    font-family: $session-font-default;
+    font-family: var(--font-default);
     font-weight: bold;
     font-size: 14px;
     flex-shrink: 0;

ts/components/conversation/SessionQuotedMessageComposition.tsx

@@ -12,16 +12,17 @@ import { Image } from '../../../ts/components/conversation/Image';
 import useKey from 'react-use/lib/useKey';
 
 const QuotedMessageComposition = styled.div`
+  background-color: var(--background-secondary-color);
   width: 100%;
   padding-inline-end: var(--margins-md);
   padding-inline-start: var(--margins-md);
+  padding-bottom: var(--margins-xs);
 `;
 
 const QuotedMessageCompositionReply = styled.div`
-  background: var(--color-quote-bottom-bar-background);
+  background: var(--message-bubbles-received-background-color);
   border-radius: var(--margins-sm);
   padding: var(--margins-xs);
-  box-shadow: var(--color-session-shadow);
   margin: var(--margins-xs);
 `;
 
@@ -32,11 +33,11 @@ const Subtle = styled.div`
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   display: -webkit-box;
-  color: var(--color-text);
+  color: var(--text-primary-color);
 `;
 
 const ReplyingTo = styled.div`
-  color: var(--color-text);
+  color: var(--text-primary-color);
 `;
 
 export const SessionQuotedMessageComposition = () => {
@@ -76,7 +77,8 @@ export const SessionQuotedMessageComposition = () => {
         container={true}
         justifyContent="space-between"
         flexGrow={1}
-        margin={'var(--margins-xs)'}
+        margin={'0 var(--margins-xs) var(--margins-xs)'}
+        padding={'var(--margins-xs)'}
       >
         <ReplyingTo>{window.i18n('replyingToMessage')}</ReplyingTo>
         <SessionIconButton iconType="exit" iconSize="small" onClick={removeQuotedMessage} />

ts/components/conversation/composition/CompositionBox.tsx

@@ -233,7 +233,7 @@ const StyledSendMessageInput = styled.div`
     min-height: calc(var(--composition-container-height) / 3);
     max-height: 3 * var(--composition-container-height);
     margin-right: var(--margins-md);
-    color: var(--color-text);
+    color: var(--text-color-primary);
 
     background: transparent;
     resize: none;
@@ -254,7 +254,7 @@ const StyledSendMessageInput = styled.div`
     margin-left: 2px;
     line-height: var(--font-size-h2);
     letter-spacing: 0.5px;
-    color: var(--color-transparent-color);
+    color: var(--transparent-color);
   }
 `;
 

ts/components/conversation/composition/UserMentions.tsx

@@ -6,18 +6,20 @@ export const styleForCompositionBoxSuggestions = {
   suggestions: {
     list: {
       fontSize: 14,
-      boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px',
-      backgroundColor: 'var(--color-cell-background)',
+      boxShadow: 'var(--suggestions-shadow)',
+      backgroundColor: 'var(--suggestions-background-color)',
+      color: 'var(--suggestions-text-color)',
     },
     item: {
       height: '100%',
       paddingTop: '5px',
       paddingBottom: '5px',
-      backgroundColor: 'var(--color-cell-background)',
+      backgroundColor: 'var(--suggestions-background-color)',
+      color: 'var(--suggestions-text-color)',
       transition: '0.25s',
 
       '&focused': {
-        backgroundColor: 'var(--color-clickable-hovered)',
+        backgroundColor: 'var(--suggestions-background-hover-color)',
       },
     },
   },

ts/interactions/conversationInteractions.ts

@@ -490,6 +490,7 @@ export async function showLinkSharingConfirmationModalDialog(e: any) {
     const alreadyDisplayedPopup =
       (await Data.getItemById(hasLinkPreviewPopupBeenDisplayed))?.value || false;
     if (!alreadyDisplayedPopup) {
+      // TODO Theming possibly update
       window.inboxStore?.dispatch(
         updateConfirmModal({
           shouldShowConfirm:

ts/themes/SessionTheme.tsx

@@ -665,6 +665,12 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* Used across all themes */
     --shadow-color: var(--black-color);
     --drop-shadow: 0 0 4px 0 var(--shadow-color);
+
+    /* Suggestions i.e. Mentions and Emojis */
+    --suggestions-background-color: var(--background-secondary-color);
+    --suggestions-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
+    --suggestions-text-color: var(--text-primary-color);
+    --suggestions-shadow: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px;
   };
 `;
 

ts/themes/switchTheme.tsx

@@ -383,6 +383,23 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
     '--message-link-preview-background-color',
     `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
   );
+
+  document.documentElement.style.setProperty(
+    '--suggestions-background-color',
+    'var(--background-secondary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-background-hover-color',
+    THEMES.CLASSIC_LIGHT.COLOR4
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-text-color',
+    'var(--text-primary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-shadow',
+    `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`
+  );
 }
 
 function loadClassicDark(primaryColor?: PrimaryColorStateType) {
@@ -755,6 +772,23 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
     '--message-link-preview-background-color',
     `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
   );
+
+  document.documentElement.style.setProperty(
+    '--suggestions-background-color',
+    THEMES.CLASSIC_DARK.COLOR2
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-background-hover-color',
+    THEMES.CLASSIC_DARK.COLOR3
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-text-color',
+    'var(--text-primary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-shadow',
+    `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`
+  );
 }
 
 function loadOceanLight(primaryColor?: PrimaryColorStateType) {
@@ -1133,6 +1167,23 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
     '--message-link-preview-background-color',
     `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
   );
+
+  document.documentElement.style.setProperty(
+    '--suggestions-background-color',
+    'var(--background-secondary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-background-hover-color',
+    THEMES.OCEAN_LIGHT.COLOR4
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-text-color',
+    'var(--text-primary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-shadow',
+    `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`
+  );
 }
 
 function loadOceanDark(primaryColor?: PrimaryColorStateType) {
@@ -1501,6 +1552,23 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
     '--message-link-preview-background-color',
     `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
   );
+
+  document.documentElement.style.setProperty(
+    '--suggestions-background-color',
+    'var(--background-secondary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-background-hover-color',
+    THEMES.OCEAN_DARK.COLOR4
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-text-color',
+    'var(--text-primary-color)'
+  );
+  document.documentElement.style.setProperty(
+    '--suggestions-shadow',
+    `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`
+  );
 }
 
 export async function switchTheme(theme: ThemeStateType) {