From 48b98f749432cb1e2ccb0b737245e06a5fd2f7c4 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sat, 1 Mar 2025 17:59:46 +0100
Subject: [PATCH] Modal: Adjust styles for Radio and Checkbox group list
 (#5676)

---
 src/components/common/ReportAvatarModal.tsx | 1 +
 src/components/left/ChatFolderModal.tsx     | 1 +
 src/components/left/MuteChatModal.tsx       | 1 +
 src/components/ui/CheckboxGroup.tsx         | 6 +++++-
 src/components/ui/Modal.scss                | 4 ++++
 src/components/ui/RadioGroup.tsx            | 6 +++++-
 6 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/common/ReportAvatarModal.tsx b/src/components/common/ReportAvatarModal.tsx
index 783d7eb4b..634b6e35e 100644
--- a/src/components/common/ReportAvatarModal.tsx
+++ b/src/components/common/ReportAvatarModal.tsx
@@ -77,6 +77,7 @@ const ReportAvatarModal: FC<OwnProps> = ({
       title={title}
     >
       <RadioGroup
+        className="dialog-checkbox-group"
         name="report-message"
         options={REPORT_OPTIONS}
         onChange={handleSelectReason}
diff --git a/src/components/left/ChatFolderModal.tsx b/src/components/left/ChatFolderModal.tsx
index ed87eef68..e152ba895 100644
--- a/src/components/left/ChatFolderModal.tsx
+++ b/src/components/left/ChatFolderModal.tsx
@@ -99,6 +99,7 @@ const ChatFolderModal: FC<OwnProps & StateProps> = ({
     >
       <div className={buildClassName(styles.main, 'custom-scroll')}>
         <CheckboxGroup
+          className="dialog-checkbox-group"
           options={folders}
           selected={selectedFolderIds}
           onChange={setSelectedFolderIds}
diff --git a/src/components/left/MuteChatModal.tsx b/src/components/left/MuteChatModal.tsx
index caba62969..741480027 100644
--- a/src/components/left/MuteChatModal.tsx
+++ b/src/components/left/MuteChatModal.tsx
@@ -75,6 +75,7 @@ const MuteChatModal: FC<OwnProps> = ({
       title={lang('Notifications')}
     >
       <RadioGroup
+        className="dialog-checkbox-group"
         name="muteFor"
         options={muteForOptions}
         selected={muteUntilOption}
diff --git a/src/components/ui/CheckboxGroup.tsx b/src/components/ui/CheckboxGroup.tsx
index 9a9204674..50af9b2d6 100644
--- a/src/components/ui/CheckboxGroup.tsx
+++ b/src/components/ui/CheckboxGroup.tsx
@@ -4,6 +4,8 @@ import React, { memo, useState } from '../../lib/teact/teact';
 
 import type { ApiUser } from '../../api/types';
 
+import buildClassName from '../../util/buildClassName';
+
 import useLastCallback from '../../hooks/useLastCallback';
 
 import Checkbox from './Checkbox';
@@ -26,6 +28,7 @@ type OwnProps = {
   loadingOptions?: string[];
   isRound?: boolean;
   onChange: (value: string[]) => void;
+  className?: string;
 };
 
 const CheckboxGroup: FC<OwnProps> = ({
@@ -37,6 +40,7 @@ const CheckboxGroup: FC<OwnProps> = ({
   loadingOptions,
   isRound,
   onChange,
+  className,
 }) => {
   const [values, setValues] = useState<string[]>(selected || []);
 
@@ -80,7 +84,7 @@ const CheckboxGroup: FC<OwnProps> = ({
   });
 
   return (
-    <div id={id} className="radio-group">
+    <div id={id} className={buildClassName('radio-group', className)}>
       {options.map((option) => {
         return (
           <Checkbox
diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss
index 2f2976662..67871528c 100644
--- a/src/components/ui/Modal.scss
+++ b/src/components/ui/Modal.scss
@@ -203,6 +203,10 @@
     margin: 1rem -1.125rem;
   }
 
+  .dialog-checkbox-group {
+    margin: 0 -1.125rem 1rem;
+  }
+
   .confirm-dialog-button {
     width: auto;
     height: auto;
diff --git a/src/components/ui/RadioGroup.tsx b/src/components/ui/RadioGroup.tsx
index c99d44bd3..9e17641bd 100644
--- a/src/components/ui/RadioGroup.tsx
+++ b/src/components/ui/RadioGroup.tsx
@@ -2,6 +2,8 @@ import type { ChangeEvent } from 'react';
 import type { FC, TeactNode } from '../../lib/teact/teact';
 import React, { memo, useCallback } from '../../lib/teact/teact';
 
+import buildClassName from '../../util/buildClassName';
+
 import useLastCallback from '../../hooks/useLastCallback';
 
 import Radio from './Radio';
@@ -27,6 +29,7 @@ type OwnProps = {
   withIcon?: boolean;
   subLabelClassName?: string;
   subLabel?: TeactNode;
+  className?: string;
 };
 
 const RadioGroup: FC<OwnProps> = ({
@@ -42,6 +45,7 @@ const RadioGroup: FC<OwnProps> = ({
   isLink,
   withIcon,
   subLabel,
+  className,
 }) => {
   const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.currentTarget;
@@ -53,7 +57,7 @@ const RadioGroup: FC<OwnProps> = ({
   });
 
   return (
-    <div id={id} className="radio-group">
+    <div id={id} className={buildClassName('radio-group', className)}>
       {options.map((option) => (
         <Radio
           name={name}