From 000615ced442d01dc09ee0516560ee3eb7581e91 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 24 Apr 2022 18:54:46 -0500
Subject: [PATCH] CryptoAddress: improve icon size

---
 .../components/crypto_address.tsx             |  4 +--
 app/soapbox/features/crypto_donate/index.tsx  | 30 +++++++++----------
 .../features/ui/components/accordion.tsx      |  5 ++--
 app/styles/components/accordion.scss          |  3 +-
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.tsx b/app/soapbox/features/crypto_donate/components/crypto_address.tsx
index 716e4eee5..3fb28f6e4 100644
--- a/app/soapbox/features/crypto_donate/components/crypto_address.tsx
+++ b/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>
diff --git a/app/soapbox/features/crypto_donate/index.tsx b/app/soapbox/features/crypto_donate/index.tsx
index 86de895c9..e1e38d7fc 100644
--- a/app/soapbox/features/crypto_donate/index.tsx
+++ b/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'>
-        <div className='explanation-box'>
-          <Accordion
-            headline={<FormattedMessage id='crypto_donate.explanation_box.title' defaultMessage='Sending cryptocurrency donations' />}
-            expanded={explanationBoxExpanded}
-            onToggle={toggleExplanationBox}
-          >
-            <FormattedMessage
-              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!'
-              values={{ siteTitle }}
-            />
-          </Accordion>
+      <Stack space={5}>
+        <Accordion
+          headline={<FormattedMessage id='crypto_donate.explanation_box.title' defaultMessage='Sending cryptocurrency donations' />}
+          expanded={explanationBoxExpanded}
+          onToggle={toggleExplanationBox}
+        >
+          <FormattedMessage
+            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!'
+            values={{ siteTitle }}
+          />
+        </Accordion>
 
-        </div>
         <SiteWallet />
-      </div>
+      </Stack>
     </Column>
   );
 };
diff --git a/app/soapbox/features/ui/components/accordion.tsx b/app/soapbox/features/ui/components/accordion.tsx
index b3f04262b..8fe4415a8 100644
--- a/app/soapbox/features/ui/components/accordion.tsx
+++ b/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>
   );
diff --git a/app/styles/components/accordion.scss b/app/styles/components/accordion.scss
index e52cb10ee..00a14196e 100644
--- a/app/styles/components/accordion.scss
+++ b/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: '';
     }
   }