From b6d5dd20fa4283e11d6be196a9e8f939b23a124a Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@getsession.org>
Date: Wed, 4 Sep 2024 17:31:13 +1000
Subject: [PATCH] fix: spacing in modal for emoji clear all

---
 ts/components/dialog/ReactClearAllModal.tsx | 23 +++++++++------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/ts/components/dialog/ReactClearAllModal.tsx b/ts/components/dialog/ReactClearAllModal.tsx
index 03effc100..0b365a410 100644
--- a/ts/components/dialog/ReactClearAllModal.tsx
+++ b/ts/components/dialog/ReactClearAllModal.tsx
@@ -27,18 +27,6 @@ const StyledButtonContainer = styled.div`
 const StyledReactClearAllContainer = styled(Flex)`
   margin: var(--margins-lg);
 
-  p {
-    font-size: 18px;
-    font-weight: 500;
-    padding-bottom: var(--margins-lg);
-    margin: var(--margins-md) auto;
-    border-bottom: 1.5px solid var(--border-color);
-
-    span {
-      margin-left: 4px;
-    }
-  }
-
   .session-button {
     font-size: 16px;
     height: 36px;
@@ -46,6 +34,13 @@ const StyledReactClearAllContainer = styled(Flex)`
   }
 `;
 
+const StyledDescription = styled.div`
+  font-size: var(--font-size-md);
+  font-weight: 400;
+  padding-bottom: var(--margins-lg);
+  margin: var(--margins-md) auto;
+`;
+
 export const ReactClearAllModal = (props: Props) => {
   const { reaction, messageId } = props;
 
@@ -83,7 +78,9 @@ export const ReactClearAllModal = (props: Props) => {
       onClose={handleClose}
     >
       <StyledReactClearAllContainer container={true} flexDirection={'column'} alignItems="center">
-        <p>{window.i18n('emojiReactsClearAll', { emoji: reaction })}</p>
+        <StyledDescription>
+          {window.i18n('emojiReactsClearAll', { emoji: reaction })}
+        </StyledDescription>
         <StyledButtonContainer className="session-modal__button-group">
           <SessionButton
             text={window.i18n('clear')}