Modal: Adjust styles for Radio and Checkbox group list (#5676)

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}

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}

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}

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

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;

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}