TW-1548 Refactoring according to comments

src/app/atoms/PageModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactNode, memo } from 'react';
+import React, { PropsWithChildren, memo } from 'react';
 
 import clsx from 'clsx';
 import Modal from 'react-modal';
@@ -15,7 +15,7 @@ import { IconBase } from '../IconBase';
 import ModStyles from './styles.module.css';
 
 interface Props extends TestIDProps {
-  title: ReactNode;
+  title: string;
   opened: boolean;
   shouldShowBackButton?: boolean;
   onRequestClose: EmptyFn;

src/app/templates/AdvancedFeatures/partners-promotion-settings.tsx

@@ -54,7 +54,7 @@ export const PartnersPromotionSettings = memo(() => {
 
   return (
     <EnablingSetting
-      title={<T id="partnersPromoSettings" />}
+      titleI18nKey="partnersPromoSettings"
       description={<T id="partnersPromoDescription" />}
       enabled={shouldShowPartnersPromo}
       onChange={togglePartnersPromotion}

src/app/templates/AdvancedFeatures/referral-links-settings.tsx

@@ -74,7 +74,7 @@ export const ReferralLinksSettings = memo(() => {
 
   return (
     <EnablingSetting
-      title={<T id="referralLinks" />}
+      titleI18nKey="referralLinks"
       description={<T id="referralLinksDescription" />}
       enabled={referralLinksEnabled}
       onChange={toggleReferralLinks}

src/app/templates/DialogBody.tsx

@@ -1,14 +1,14 @@
-import React, { ReactNode, memo } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import { ActionModalBodyContainer } from 'app/atoms/action-modal';
 
 interface DialogBodyProps {
   description?: ReactNode | ReactNode[];
 }
 
-export const DialogBody = memo<PropsWithChildren<DialogBodyProps>>(({ children, description }) => (
+export const DialogBody: FC<PropsWithChildren<DialogBodyProps>> = ({ children, description }) => (
   <ActionModalBodyContainer>
     {description && <p className="w-full text-center text-font-description text-grey-1 pt-1.5 pb-1">{description}</p>}
     {children}
   </ActionModalBodyContainer>
-));
+);

src/app/templates/SettingsGeneral/components/notifications-settings.tsx

@@ -20,7 +20,7 @@ export const NotificationsSettings = memo(() => {
 
   return (
     <EnablingSetting
-      title={<T id="notifications" />}
+      titleI18nKey="notifications"
       description={<T id="notificationsSettingsDescription" />}
       enabled={isNewsEnabled}
       onChange={handleNewsNotificationsChange}

src/app/templates/SettingsGeneral/components/popup-settings.tsx

@@ -21,7 +21,7 @@ export const PopupSettings = memo(() => {
 
   return (
     <EnablingSetting
-      title={<T id="popupSettings" />}
+      titleI18nKey="popupSettings"
       description={<T id="popupSettingsDescription" />}
       enabled={popupEnabled}
       onChange={handlePopupModeChange}

src/app/templates/enabling-setting.tsx

@@ -3,26 +3,29 @@ import React, { ReactNode, memo } from 'react';
 import { ToggleSwitch } from 'app/atoms';
 import { SettingsCell } from 'app/atoms/SettingsCell';
 import { SettingsCellGroup } from 'app/atoms/SettingsCellGroup';
+import { T, TID } from 'lib/i18n';
 
 interface EnablingSettingProps {
-  title: ReactNode;
+  titleI18nKey: TID;
   enabled: boolean;
   description: ReactNode;
   onChange: (newValue: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
   testID: string;
 }
 
-export const EnablingSetting = memo(({ title, enabled, description, onChange, testID }: EnablingSettingProps) => (
-  <SettingsCellGroup>
-    <SettingsCell Component="div" isLast={false} cellName={title}>
-      <ToggleSwitch checked={enabled} onChange={onChange} testID={testID} />
-    </SettingsCell>
-    <SettingsCell
-      Component="div"
-      cellName={description}
-      cellNameClassName="text-grey-1 text-font-description font-normal"
-    >
-      {null}
-    </SettingsCell>
-  </SettingsCellGroup>
-));
+export const EnablingSetting = memo(
+  ({ titleI18nKey, enabled, description, onChange, testID }: EnablingSettingProps) => (
+    <SettingsCellGroup>
+      <SettingsCell Component="div" isLast={false} cellName={<T id={titleI18nKey} />}>
+        <ToggleSwitch checked={enabled} onChange={onChange} testID={testID} />
+      </SettingsCell>
+      <SettingsCell
+        Component="div"
+        cellName={description}
+        cellNameClassName="text-grey-1 text-font-description font-normal"
+      >
+        {null}
+      </SettingsCell>
+    </SettingsCellGroup>
+  )
+);