From faff69a39e498b348476bf6afdeb1bcc5c9dc6a7 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 3 May 2023 20:21:32 +0400
Subject: [PATCH] Seen By Modal: UI improvements (#3150)

---
 src/components/common/SeenByModal.module.scss | 3 +++
 src/components/common/SeenByModal.tsx         | 5 ++++-
 src/components/middle/ReactorListModal.scss   | 3 +++
 3 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 src/components/common/SeenByModal.module.scss

diff --git a/src/components/common/SeenByModal.module.scss b/src/components/common/SeenByModal.module.scss
new file mode 100644
index 000000000..9039551ae
--- /dev/null
+++ b/src/components/common/SeenByModal.module.scss
@@ -0,0 +1,3 @@
+.modal :global(.modal-content) {
+  padding: 0.5rem !important;
+}
diff --git a/src/components/common/SeenByModal.tsx b/src/components/common/SeenByModal.tsx
index e3d1340b1..eead0e436 100644
--- a/src/components/common/SeenByModal.tsx
+++ b/src/components/common/SeenByModal.tsx
@@ -3,6 +3,7 @@ import { getActions, withGlobal } from '../../global';
 
 import { selectChatMessage, selectTabState } from '../../global/selectors';
 import { formatDateAtTime } from '../../util/dateFormat';
+import buildClassName from '../../util/buildClassName';
 import useLang from '../../hooks/useLang';
 import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
 
@@ -11,6 +12,8 @@ import Button from '../ui/Button';
 import PrivateChatInfo from './PrivateChatInfo';
 import ListItem from '../ui/ListItem';
 
+import styles from './SeenByModal.module.scss';
+
 export type OwnProps = {
   isOpen: boolean;
 };
@@ -60,7 +63,7 @@ function SeenByModal({
     <Modal
       isOpen={isOpen}
       onClose={closeSeenByModal}
-      className="narrow"
+      className={buildClassName(styles.modal, 'narrow')}
       title={`Seen by ${memberIds?.length} users`}
     >
       <div dir={lang.isRtl ? 'rtl' : undefined}>
diff --git a/src/components/middle/ReactorListModal.scss b/src/components/middle/ReactorListModal.scss
index dd88af977..2f3a5a7a5 100644
--- a/src/components/middle/ReactorListModal.scss
+++ b/src/components/middle/ReactorListModal.scss
@@ -8,6 +8,7 @@
     height: min(92vh, 32rem);
     display: flex;
     flex-direction: column;
+    padding: 0.5rem 0 !important;
   }
 
   .reactor-list-wrapper {
@@ -17,6 +18,7 @@
 
   .confirm-dialog-button {
     align-self: flex-end;
+    margin: 0 0.5rem;
   }
 
   .Reactions {
@@ -37,6 +39,7 @@
     max-height: 100%;
     overflow: auto;
     overflow-x: hidden;
+    padding: 0 0.5rem;
   }
 
   .reactors-list-item {