Merge branch 'arbitrary-value-classname' into 'main'
Arbitrary value classname See merge request soapbox-pub/soapbox!3182
This commit is contained in:
commit
200724e46c
|
@ -74,8 +74,8 @@ const AvatarSelectionModal: React.FC<IAvatarSelectionModal> = ({ onClose, onNext
|
||||||
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
||||||
|
|
||||||
<div className='relative w-full'>
|
<div className='relative w-full'>
|
||||||
<IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
<IconButton src={closeIcon} onClick={onClose} className='absolute right-[2%] top-[-6%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
||||||
<Stack space={2} justifyContent='center' alignItems='center' className='border-grey-200 dark:border-grey-800 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10'>
|
<Stack space={2} justifyContent='center' alignItems='center' className='-mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
||||||
<Text size='2xl' align='center' weight='bold'>
|
<Text size='2xl' align='center' weight='bold'>
|
||||||
<FormattedMessage id='onboarding.avatar.title' defaultMessage={'Choose a profile picture'} />
|
<FormattedMessage id='onboarding.avatar.title' defaultMessage={'Choose a profile picture'} />
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -55,8 +55,8 @@ const BioStep: React.FC<IBioStep> = ({ onClose, onNext }) => {
|
||||||
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
||||||
|
|
||||||
<div className='relative w-full'>
|
<div className='relative w-full'>
|
||||||
<IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
<IconButton src={closeIcon} onClick={onClose} className='absolute right-[2%] top-[-6%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
||||||
<Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
<Stack space={2} justifyContent='center' alignItems='center' className='-mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
||||||
<Text size='2xl' align='center' weight='bold'>
|
<Text size='2xl' align='center' weight='bold'>
|
||||||
<FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
|
<FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -17,7 +17,7 @@ const CompletedModal: React.FC<ICompletedModal> = ({ onClose, onComplete }) => {
|
||||||
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
||||||
|
|
||||||
<div className='relative w-full'>
|
<div className='relative w-full'>
|
||||||
<IconButton src={closeIcon} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' onClick={onClose} />
|
<IconButton src={closeIcon} className='absolute right-[2%] top-[-6%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' onClick={onClose} />
|
||||||
<Stack space={2} justifyContent='center' alignItems='center' className=''>
|
<Stack space={2} justifyContent='center' alignItems='center' className=''>
|
||||||
<Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
|
<Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
|
||||||
<Text size='2xl' align='center' weight='bold'>
|
<Text size='2xl' align='center' weight='bold'>
|
||||||
|
|
|
@ -79,8 +79,8 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
|
||||||
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
||||||
|
|
||||||
<div className='relative w-full'>
|
<div className='relative w-full'>
|
||||||
<IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
<IconButton src={closeIcon} onClick={onClose} className='absolute right-[2%] top-[-6%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
||||||
<Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
<Stack space={2} justifyContent='center' alignItems='center' className='-mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
||||||
<Text size='2xl' align='center' weight='bold'>
|
<Text size='2xl' align='center' weight='bold'>
|
||||||
<FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
|
<FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -66,8 +66,8 @@ const DisplayNameStep: React.FC<IDisplayNameStep> = ({ onClose, onNext }) => {
|
||||||
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
||||||
|
|
||||||
<div className='relative w-full'>
|
<div className='relative w-full'>
|
||||||
<IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
<IconButton src={closeIcon} onClick={onClose} className='absolute right-[2%] top-[-6%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
||||||
<Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
<Stack space={2} justifyContent='center' alignItems='center' className='-mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
||||||
<Text size='2xl' align='center' weight='bold'>
|
<Text size='2xl' align='center' weight='bold'>
|
||||||
<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
|
<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -77,8 +77,8 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
|
||||||
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
<Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
|
||||||
|
|
||||||
<div className='relative w-full'>
|
<div className='relative w-full'>
|
||||||
<IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
<IconButton src={closeIcon} onClick={onClose} className='absolute right-[2%] top-[-6%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
||||||
<Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
<Stack space={2} justifyContent='center' alignItems='center' className='-mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
||||||
<Text size='2xl' align='center' weight='bold'>
|
<Text size='2xl' align='center' weight='bold'>
|
||||||
<FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
|
<FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -57,7 +57,7 @@ const ZapInvoiceModal: React.FC<IZapInvoice> = ({ account, invoice, splitData, o
|
||||||
<h3 className='text-xl font-bold'>
|
<h3 className='text-xl font-bold'>
|
||||||
{renderTitle()}
|
{renderTitle()}
|
||||||
</h3>
|
</h3>
|
||||||
<IconButton src={closeIcon} onClick={onClickClose} className='absolute -top-[8%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
<IconButton src={closeIcon} onClick={onClickClose} className='absolute right-[2%] top-[-8%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
|
||||||
<QRCodeCanvas value={invoice} />
|
<QRCodeCanvas value={invoice} />
|
||||||
<div className='w-full'>
|
<div className='w-full'>
|
||||||
<CopyableInput value={invoice} />
|
<CopyableInput value={invoice} />
|
||||||
|
|
Loading…
Reference in New Issue