diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx index 7321734cf..158b68ffd 100644 --- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx +++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; -import { Avatar, Divider, Stack, Text } from 'soapbox/components/ui'; +import { Avatar, Divider, HStack, Stack, Text } from 'soapbox/components/ui'; interface IConfirmationStep { group: any @@ -31,13 +31,62 @@ const ConfirmationStep: React.FC = ({ group }) => { -
+ -
+ + + + + + + + + + + + + + + ); }; +interface IInfoListNumber { + number: number +} + +const InfoListNumber: React.FC = ({ number }) => { + return ( +
+ {number} +
+ ); +}; + +interface IInfoListItem { + number: number + children: React.ReactNode +} + +const InfoListItem: React.FC = ({ number, children }) => { + return ( + +
+
{children}
+
+ ); +}; + export default ConfirmationStep;