CryptoAddress: improve icon size

app/soapbox/features/crypto_donate/components/crypto_address.tsx

@@ -42,12 +42,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
 
         <HStack alignItems='center' className='ml-auto'>
           <a className='text-gray-500 ml-1' href='#' onClick={handleModalClick}>
-            <Icon src={require('@tabler/icons/icons/qrcode.svg')} />
+            <Icon src={require('@tabler/icons/icons/qrcode.svg')} size={20} />
           </a>
 
           {explorerUrl && (
             <a className='text-gray-500 ml-1' href={explorerUrl} target='_blank'>
-              <Icon src={require('@tabler/icons/icons/external-link.svg')} />
+              <Icon src={require('@tabler/icons/icons/external-link.svg')} size={20} />
             </a>
           )}
         </HStack>

app/soapbox/features/crypto_donate/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Column } from 'soapbox/components/ui';
+import { Column, Stack } from 'soapbox/components/ui';
 import Accordion from 'soapbox/features/ui/components/accordion';
 import { useAppSelector } from 'soapbox/hooks';
 
@@ -18,23 +18,21 @@ const CryptoDonate: React.FC = (): JSX.Element => {
 
   return (
     <Column label={intl.formatMessage(messages.heading)} withHeader>
-      <div className='crypto-donate'>
+      <Stack space={5}>
-        <div className='explanation-box'>
+        <Accordion
-          <Accordion
+          headline={<FormattedMessage id='crypto_donate.explanation_box.title' defaultMessage='Sending cryptocurrency donations' />}
-            headline={<FormattedMessage id='crypto_donate.explanation_box.title' defaultMessage='Sending cryptocurrency donations' />}
+          expanded={explanationBoxExpanded}
-            expanded={explanationBoxExpanded}
+          onToggle={toggleExplanationBox}
-            onToggle={toggleExplanationBox}
+        >
-          >
+          <FormattedMessage
-            <FormattedMessage
+            id='crypto_donate.explanation_box.message'
-              id='crypto_donate.explanation_box.message'
+            defaultMessage='{siteTitle} accepts cryptocurrency donations. You may send a donation to any of the addresses below. Thank you for your support!'
-              defaultMessage='{siteTitle} accepts cryptocurrency donations. You may send a donation to any of the addresses below. Thank you for your support!'
+            values={{ siteTitle }}
-              values={{ siteTitle }}
+          />
-            />
+        </Accordion>
-          </Accordion>
 
-        </div>
         <SiteWallet />
-      </div>
+      </Stack>
     </Column>
   );
 };

app/soapbox/features/ui/components/accordion.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
+import { Text } from 'soapbox/components/ui';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 
 import type { Menu } from 'soapbox/components/dropdown_menu';
@@ -40,10 +41,10 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
         onClick={handleToggle}
         title={intl.formatMessage(expanded ? messages.collapse : messages.expand)}
       >
-        {headline}
+        <Text weight='bold'>{headline}</Text>
       </button>
       <div className='accordion__content'>
-        {children}
+        <Text>{children}</Text>
       </div>
     </div>
   );

app/styles/components/accordion.scss

@@ -3,7 +3,7 @@
 }
 
 .accordion {
-  @apply text-black dark:text-white bg-gray-100 dark:bg-slate-800;
+  @apply text-black dark:text-white bg-gray-100 dark:bg-slate-900;
   padding: 15px 20px;
   font-size: 14px;
   border-radius: 8px;
@@ -50,6 +50,7 @@
     margin-bottom: 10px !important;
 
     &::after {
+      @apply text-black dark:text-white;
       content: '';
     }
   }