From 8fae1f979b4d87d2e891b16481a572adcf1377c3 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 5 Oct 2022 19:45:06 +1100
Subject: [PATCH] feat: themed confirm and react modals

---
 .../message-content/MessageReactions.tsx        |  2 +-
 ts/components/dialog/ReactClearAllModal.tsx     | 15 ++++-----------
 ts/components/dialog/ReactListModal.tsx         | 17 ++++++++---------
 ts/components/dialog/SessionConfirm.tsx         |  1 +
 ts/themes/SessionTheme.tsx                      |  3 ---
 5 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/ts/components/conversation/message/message-content/MessageReactions.tsx b/ts/components/conversation/message/message-content/MessageReactions.tsx
index d41810713..5e711ddb6 100644
--- a/ts/components/conversation/message/message-content/MessageReactions.tsx
+++ b/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} />
         ) : (
diff --git a/ts/components/dialog/ReactClearAllModal.tsx b/ts/components/dialog/ReactClearAllModal.tsx
index 1d0dd99c7..94a6d8bd3 100644
--- a/ts/components/dialog/ReactClearAllModal.tsx
+++ b/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
diff --git a/ts/components/dialog/ReactListModal.tsx b/ts/components/dialog/ReactListModal.tsx
index 3c694c4a9..496ac6e8f 100644
--- a/ts/components/dialog/ReactListModal.tsx
+++ b/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({
diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx
index b774395f6..f1228ba9a 100644
--- a/ts/components/dialog/SessionConfirm.tsx
+++ b/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,
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index 71d277b78..18ddb5d22 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/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);