From 1ad635c90333a15e58891234fef703559d74fade Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 13 Feb 2025 14:28:22 +0100
Subject: [PATCH] Chat Report Pane: Adjust checkbox styles (#5588)

---
 src/components/left/settings/SettingsPasswordForm.tsx  |  2 +-
 .../passcode/SettingsPasscodeCongratulations.tsx       |  2 +-
 .../left/settings/passcode/SettingsPasscodeEnabled.tsx |  2 +-
 .../left/settings/passcode/SettingsPasscodeStart.tsx   |  2 +-
 .../settings/twoFa/SettingsTwoFaCongratulations.tsx    |  2 +-
 .../left/settings/twoFa/SettingsTwoFaEmailCode.tsx     |  2 +-
 .../left/settings/twoFa/SettingsTwoFaEnabled.tsx       |  2 +-
 .../left/settings/twoFa/SettingsTwoFaSkippableForm.tsx |  2 +-
 src/components/middle/panes/ChatReportPane.scss        |  4 ++++
 src/components/middle/panes/ChatReportPane.tsx         | 10 ++++++++--
 src/components/ui/Modal.scss                           |  2 +-
 11 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/left/settings/SettingsPasswordForm.tsx b/src/components/left/settings/SettingsPasswordForm.tsx
index ffd4f6e15..018c24cec 100644
--- a/src/components/left/settings/SettingsPasswordForm.tsx
+++ b/src/components/left/settings/SettingsPasswordForm.tsx
@@ -67,7 +67,7 @@ const SettingsPasswordForm: FC<OwnProps> = ({
         <PasswordMonkey isBig isPasswordVisible={shouldShowPassword} />
       </div>
 
-      <div className="settings-item pt-0">
+      <div className="settings-item pt-2">
         <PasswordForm
           error={validationError || error}
           hint={hint}
diff --git a/src/components/left/settings/passcode/SettingsPasscodeCongratulations.tsx b/src/components/left/settings/passcode/SettingsPasscodeCongratulations.tsx
index f6e3fcd18..5b1b11f74 100644
--- a/src/components/left/settings/passcode/SettingsPasscodeCongratulations.tsx
+++ b/src/components/left/settings/passcode/SettingsPasscodeCongratulations.tsx
@@ -43,7 +43,7 @@ const SettingsPasscodeCongratulations: FC<OwnProps> = ({
         </p>
       </div>
 
-      <div className="settings-item pt-0">
+      <div className="settings-item pt-2">
         <Button onClick={fullReset}>{lang('Back')}</Button>
       </div>
     </div>
diff --git a/src/components/left/settings/passcode/SettingsPasscodeEnabled.tsx b/src/components/left/settings/passcode/SettingsPasscodeEnabled.tsx
index 448cf7105..4bdcf855e 100644
--- a/src/components/left/settings/passcode/SettingsPasscodeEnabled.tsx
+++ b/src/components/left/settings/passcode/SettingsPasscodeEnabled.tsx
@@ -41,7 +41,7 @@ const SettingsPasscodeEnabled: FC<OwnProps> = ({
         </p>
       </div>
 
-      <div className="settings-item pt-0">
+      <div className="settings-item pt-2">
         <ListItem
           icon="edit"
           // eslint-disable-next-line react/jsx-no-bind
diff --git a/src/components/left/settings/passcode/SettingsPasscodeStart.tsx b/src/components/left/settings/passcode/SettingsPasscodeStart.tsx
index 46fe6b950..306be28c1 100644
--- a/src/components/left/settings/passcode/SettingsPasscodeStart.tsx
+++ b/src/components/left/settings/passcode/SettingsPasscodeStart.tsx
@@ -44,7 +44,7 @@ const SettingsPasscodeStart: FC<OwnProps> = ({
         </p>
       </div>
 
-      <div className="settings-item pt-0">
+      <div className="settings-item pt-2">
         <Button onClick={onStart}>{lang('EnablePasscode')}</Button>
       </div>
     </div>
diff --git a/src/components/left/settings/twoFa/SettingsTwoFaCongratulations.tsx b/src/components/left/settings/twoFa/SettingsTwoFaCongratulations.tsx
index 5e659c23f..148772a8b 100644
--- a/src/components/left/settings/twoFa/SettingsTwoFaCongratulations.tsx
+++ b/src/components/left/settings/twoFa/SettingsTwoFaCongratulations.tsx
@@ -46,7 +46,7 @@ const SettingsTwoFaCongratulations: FC<OwnProps> = ({
         </p>
       </div>
 
-      <div className="settings-item pt-0">
+      <div className="settings-item pt-2">
         <Button onClick={handleClick}>{lang('TwoStepVerificationPasswordReturnSettings')}</Button>
       </div>
     </div>
diff --git a/src/components/left/settings/twoFa/SettingsTwoFaEmailCode.tsx b/src/components/left/settings/twoFa/SettingsTwoFaEmailCode.tsx
index 594c8cedd..4b7f6afe9 100644
--- a/src/components/left/settings/twoFa/SettingsTwoFaEmailCode.tsx
+++ b/src/components/left/settings/twoFa/SettingsTwoFaEmailCode.tsx
@@ -91,7 +91,7 @@ const SettingsTwoFaEmailCode: FC<OwnProps & StateProps> = ({
         </p>
       </div>
 
-      <div className="settings-item pt-0">
+      <div className="settings-item pt-2">
         <InputText
           value={value}
           ref={inputRef}
diff --git a/src/components/left/settings/twoFa/SettingsTwoFaEnabled.tsx b/src/components/left/settings/twoFa/SettingsTwoFaEnabled.tsx
index 11b36b616..e4c5dff5f 100644
--- a/src/components/left/settings/twoFa/SettingsTwoFaEnabled.tsx
+++ b/src/components/left/settings/twoFa/SettingsTwoFaEnabled.tsx
@@ -45,7 +45,7 @@ const SettingsTwoFaEnabled: FC<OwnProps> = ({
         </p>
       </div>
 
-      <div className="settings-item pt-0">
+      <div className="settings-item pt-2">
         <ListItem
           icon="edit"
           // eslint-disable-next-line react/jsx-no-bind
diff --git a/src/components/left/settings/twoFa/SettingsTwoFaSkippableForm.tsx b/src/components/left/settings/twoFa/SettingsTwoFaSkippableForm.tsx
index 27c276a07..faa993b32 100644
--- a/src/components/left/settings/twoFa/SettingsTwoFaSkippableForm.tsx
+++ b/src/components/left/settings/twoFa/SettingsTwoFaSkippableForm.tsx
@@ -110,7 +110,7 @@ const SettingsTwoFaSkippableForm: FC<OwnProps & StateProps> = ({
         </p>
       </div>
 
-      <div className="settings-item pt-0">
+      <div className="settings-item pt-2">
         <form action="" onSubmit={handleSubmit}>
           <InputText
             ref={inputRef}
diff --git a/src/components/middle/panes/ChatReportPane.scss b/src/components/middle/panes/ChatReportPane.scss
index 671ead4cd..fc9da0425 100644
--- a/src/components/middle/panes/ChatReportPane.scss
+++ b/src/components/middle/panes/ChatReportPane.scss
@@ -17,4 +17,8 @@
     flex: 1 1 50%;
     white-space: nowrap;
   }
+
+  &--Checkbox {
+    margin-top: -1rem !important;
+  }
 }
diff --git a/src/components/middle/panes/ChatReportPane.tsx b/src/components/middle/panes/ChatReportPane.tsx
index fa89cde50..fcff6b5b5 100644
--- a/src/components/middle/panes/ChatReportPane.tsx
+++ b/src/components/middle/panes/ChatReportPane.tsx
@@ -1,5 +1,5 @@
 import type { FC } from '../../../lib/teact/teact';
-import React, { memo, useState } from '../../../lib/teact/teact';
+import React, { memo, useEffect, useState } from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
 import type { ApiPeer } from '../../../api/types';
@@ -114,6 +114,12 @@ const ChatReportPane: FC<OwnProps & StateProps> = ({
 
   const isRendering = Boolean(hasAnyButton && peer);
 
+  useEffect(() => {
+    if (!isRendering) {
+      closeBlockUserModal();
+    }
+  }, [isRendering]);
+
   const { ref, shouldRender } = useHeaderPane({
     isOpen: isRendering,
     onStateChange: onPaneStateChange,
@@ -193,7 +199,7 @@ const ChatReportPane: FC<OwnProps & StateProps> = ({
         )}
         {user && canReportSpam && (
           <Checkbox
-            className="dialog-checkbox"
+            className="ChatReportPane--Checkbox dialog-checkbox"
             label={lang('ReportChat')}
             checked={shouldReportSpam}
             onCheck={setShouldReportSpam}
diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss
index 5e4a7d75b..2f2976662 100644
--- a/src/components/ui/Modal.scss
+++ b/src/components/ui/Modal.scss
@@ -103,7 +103,7 @@
 
   .modal-header,
   %modal-header {
-    padding: 1.3125rem 1.3125rem 0;
+    padding: 1.3125rem 1.375rem 0;
     display: flex;
     align-items: center;
     flex-shrink: 0;