feat: themed confirm and react modals

ts/components/conversation/message/message-content/MessageReactions.tsx

@@ -207,7 +207,7 @@ export const MessageReactions = (props: Props): ReactElement => {
       y={popupY}
     >
       {sortedReacts &&
-        sortedReacts !== [] &&
+        sortedReacts?.length !== 0 &&
         (!hasReactLimit || sortedReacts.length <= reactLimit ? (
           <Reactions {...reactionsProps} />
         ) : (

ts/components/dialog/ReactClearAllModal.tsx

@@ -1,11 +1,10 @@
 import React, { ReactElement, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { useMessageReactsPropsById } from '../../hooks/useParamSelector';
 import { clearSogsReactionByServerId } from '../../session/apis/open_group_api/sogsv3/sogsV3ClearReaction';
 import { getConversationController } from '../../session/conversations';
 import { updateReactClearAllModal } from '../../state/ducks/modalDialog';
-import { getTheme } from '../../state/selectors/theme';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionSpinner } from '../basic/SessionSpinner';
@@ -25,7 +24,7 @@ const StyledButtonContainer = styled.div`
   }
 `;
 
-const StyledReactClearAllContainer = styled(Flex)<{ darkMode: boolean }>`
+const StyledReactClearAllContainer = styled(Flex)`
   margin: var(--margins-lg);
 
   p {
@@ -33,7 +32,7 @@ const StyledReactClearAllContainer = styled(Flex)<{ darkMode: boolean }>`
     font-weight: 500;
     padding-bottom: var(--margins-lg);
     margin: var(--margins-md) auto;
-    border-bottom: 1.5px solid ${props => (props.darkMode ? '#2D2D2D' : '#EEEEEE')};
+    border-bottom: 1.5px solid var(--border-color);
 
     span {
       margin-left: 4px;
@@ -54,7 +53,6 @@ export const ReactClearAllModal = (props: Props): ReactElement => {
   const [clearingInProgress, setClearingInProgress] = useState(false);
 
   const dispatch = useDispatch();
-  const darkMode = useSelector(getTheme).includes('dark');
   const msgProps = useMessageReactsPropsById(messageId);
 
   if (!msgProps) {
@@ -87,12 +85,7 @@ export const ReactClearAllModal = (props: Props): ReactElement => {
       showHeader={false}
       onClose={handleClose}
     >
-      <StyledReactClearAllContainer
-        container={true}
-        flexDirection={'column'}
-        alignItems="center"
-        darkMode={darkMode}
-      >
+      <StyledReactClearAllContainer container={true} flexDirection={'column'} alignItems="center">
         <p>{window.i18n('clearAllReactions', [reaction])}</p>
         <StyledButtonContainer className="session-modal__button-group">
           <SessionButton

ts/components/dialog/ReactListModal.tsx

@@ -28,8 +28,8 @@ const StyledReactListContainer = styled(Flex)`
 `;
 
 const StyledReactionsContainer = styled.div`
-  background-color: var(--color-cell-background);
-  border-bottom: 1px solid var(--color-session-border);
+  background-color: var(--modal-background-content-color);
+  border-bottom: 1px solid var(--border-color);
   width: 100%;
   overflow-x: auto;
   padding: 12px 8px 0;
@@ -50,12 +50,12 @@ const StyledReactionBar = styled(Flex)`
   margin: 12px 0 20px 4px;
 
   p {
-    color: var(--color-text-subtle);
+    color: var(--text-secondary-color);
     margin: 0;
 
     span:nth-child(1) {
       margin: 0 8px;
-      color: var(--color-text);
+      color: var(--text-primary-color);
       white-space: nowrap;
     }
 
@@ -78,7 +78,7 @@ const StyledReactionSender = styled(Flex)`
   }
 
   .module-conversation__user__profile-name {
-    color: var(--color-text);
+    color: var(--text-primary-color);
     font-weight: normal;
   }
 `;
@@ -161,12 +161,12 @@ const ReactionSenders = (props: ReactionSendersProps) => {
 };
 
 const StyledCountText = styled.p`
-  color: var(--color-text-subtle);
+  color: var(--text-secondary-color);
   text-align: center;
   margin: 16px auto 0;
 
   span {
-    color: var(--color-text);
+    color: var(--text-primary);
   }
 `;
 
@@ -245,7 +245,7 @@ export const ReactListModal = (props: Props): ReactElement => {
     if (
       reactions &&
       reactions.length > 0 &&
-      (msgProps?.sortedReacts === [] || msgProps?.sortedReacts === undefined)
+      (msgProps?.sortedReacts?.length === 0 || msgProps?.sortedReacts === undefined)
     ) {
       setReactions([]);
     }
@@ -300,7 +300,6 @@ export const ReactListModal = (props: Props): ReactElement => {
   };
 
   const handleClearReactions = (event: any) => {
-    event.preventDefault();
     handleClose();
     dispatch(
       updateReactClearAllModal({

ts/components/dialog/SessionConfirm.tsx

@@ -157,6 +157,7 @@ export const showLinkVisitWarningDialog = (urlToOpen: string, dispatch: Dispatch
       title: window.i18n('linkVisitWarningTitle'),
       message: window.i18n('linkVisitWarningMessage', [urlToOpen]),
       okText: window.i18n('open'),
+      okTheme: SessionButtonColor.Primary,
       cancelText: window.i18n('editMenuCopy'),
       showExitIcon: true,
       onClickOk,

ts/themes/SessionTheme.tsx

@@ -488,9 +488,6 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* Borders */
     --border-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
 
-    /* Modals */
-    /* TODO Theming Clarify what those transparent colors mean */
-
     /* Text Box */
     /* Also used for inputs specifically password box input */
     --text-box-background-color: var(--background-primary-color);