diff --git a/.changeset/weak-starfishes-fail.md b/.changeset/weak-starfishes-fail.md new file mode 100644 index 0000000000000000000000000000000000000000..38e510229f6eba43b3e7c1cd9485a1b59ef8dd1b --- /dev/null +++ b/.changeset/weak-starfishes-fail.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Fixes the missing spacing on don`t ask again checkbox inside modals diff --git a/apps/meteor/client/components/GenericModal/withDoNotAskAgain.tsx b/apps/meteor/client/components/GenericModal/withDoNotAskAgain.tsx index 9d3d754d17d4f73631d2f007c8678aba340b358b..8d3644e0dc9309e372b52f7faaaa72ba6730dbc3 100644 --- a/apps/meteor/client/components/GenericModal/withDoNotAskAgain.tsx +++ b/apps/meteor/client/components/GenericModal/withDoNotAskAgain.tsx @@ -1,4 +1,5 @@ -import { Box, CheckBox } from '@rocket.chat/fuselage'; +import { Box, Label, CheckBox } from '@rocket.chat/fuselage'; +import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import { useUserPreference, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts'; import type { FC, ReactElement, ComponentType } from 'react'; import React, { useState } from 'react'; @@ -23,6 +24,7 @@ function withDoNotAskAgain<T extends RequiredModalProps>( ): FC<DoNotAskAgainProps & Omit<T, keyof RequiredModalProps>> { const WrappedComponent: FC<DoNotAskAgainProps & Omit<T, keyof RequiredModalProps>> = function ({ onConfirm, dontAskAgain, ...props }) { const t = useTranslation(); + const dontAskAgainId = useUniqueId(); const dontAskAgainList = useUserPreference<DontAskAgainList>('dontAskAgainList'); const { action, label } = dontAskAgain; @@ -49,8 +51,10 @@ function withDoNotAskAgain<T extends RequiredModalProps>( {...props} dontAskAgain={ <Box display='flex' flexDirection='row'> - <CheckBox checked={state} onChange={onChange} mie={4} name='dont_ask_again' /> - <label htmlFor='dont_ask_again'>{t('Dont_ask_me_again')}</label> + <CheckBox id={dontAskAgainId} checked={state} onChange={onChange} name='dont_ask_again' /> + <Label color='annotation' fontScale='p2' mis={8} htmlFor={dontAskAgainId}> + {t('Dont_ask_me_again')} + </Label> </Box> } onConfirm={handleConfirm}