Chat Report Pane: Adjust checkbox styles (#5588)

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}

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>

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

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>

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>

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}

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

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}

src/components/middle/panes/ChatReportPane.scss

@@ -17,4 +17,8 @@
     flex: 1 1 50%;
     white-space: nowrap;
   }
+
+  &--Checkbox {
+    margin-top: -1rem !important;
+  }
 }

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}

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;