CryptoDonate tailwind refactors

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { openModal } from 'soapbox/actions/modals';
-import Icon from 'soapbox/components/icon';
+import { Text, Icon, Stack, HStack } from 'soapbox/components/ui';
 import { CopyableInput } from 'soapbox/features/forms';
 
 import { getExplorerUrl } from '../utils/block_explorer';
@@ -30,28 +30,37 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
   const explorerUrl = getExplorerUrl(ticker, address);
 
   return (
-    <div className='crypto-address'>
+    <Stack>
-      <div className='crypto-address__head'>
+      <HStack alignItems='center' className='mb-1'>
         <CryptoIcon
-          className='crypto-address__icon'
+          className='flex items-start justify-center w-6 mr-2.5'
           ticker={ticker}
           title={title}
         />
-        <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
+
-        <div className='crypto-address__actions'>
+        <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
-          <a href='#' onClick={handleModalClick}>
+
+        <HStack alignItems='center' className='ml-auto'>
+          <a className='text-gray-500 ml-1' href='#' onClick={handleModalClick}>
             <Icon src={require('@tabler/icons/icons/qrcode.svg')} />
           </a>
-          {explorerUrl && <a href={explorerUrl} target='_blank'>
+
+          {explorerUrl && (
+            <a className='text-gray-500 ml-1' href={explorerUrl} target='_blank'>
               <Icon src={require('@tabler/icons/icons/external-link.svg')} />
-          </a>}
+            </a>
-        </div>
+          )}
-      </div>
+        </HStack>
-      {note && <div className='crypto-address__note'>{note}</div>}
+      </HStack>
+
+      {note && (
+        <Text>{note}</Text>
+      )}
+
       <div className='crypto-address__address simple_form'>
         <CopyableInput value={address} />
       </div>
-    </div>
+    </Stack>
   );
 };
 

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

@@ -34,13 +34,17 @@ const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Ele
 
       <SiteWallet limit={limit} />
 
-      {hasMore && <Link className='wtf-panel__expand-btn' to='/donate/crypto'>
+      {hasMore && (
+        <Link className='wtf-panel__expand-btn' to='/donate/crypto'>
+          <Text>
             <FormattedMessage
               id='crypto_donate_panel.actions.more'
               defaultMessage='Click to see {count} more {count, plural, one {wallet} other {wallets}}'
               values={{ count: more }}
             />
-      </Link>}
+          </Text>
+        </Link>
+      )}
     </Widget>
   );
 };

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

@@ -1,6 +1,7 @@
 import { trimStart } from 'lodash';
 import React from 'react';
 
+import { Stack } from 'soapbox/components/ui';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
 import CryptoAddress from './crypto_address';
@@ -28,7 +29,7 @@ const SiteWallet: React.FC<ISiteWallet> = ({ limit }): JSX.Element => {
   const coinList = typeof limit === 'number' ? addresses.take(limit) : addresses;
 
   return (
-    <div>
+    <Stack space={4}>
       {coinList.map(coin => (
         <CryptoAddress
           key={coin.get('ticker')}
@@ -37,7 +38,7 @@ const SiteWallet: React.FC<ISiteWallet> = ({ limit }): JSX.Element => {
           note={coin.get('note')}
         />
       ))}
-    </div>
+    </Stack>
   );
 };
 

app/soapbox/features/forms/index.js

@@ -303,7 +303,7 @@ export class CopyableInput extends ImmutablePureComponent {
     return (
       <div className='copyable-input'>
         <input ref={this.setInputRef} type='text' value={value} readOnly />
-        <button onClick={this.handleCopyClick}>
+        <button className='p-2 text-white bg-primary-600' onClick={this.handleCopyClick}>
           <FormattedMessage id='forms.copy' defaultMessage='Copy' />
         </button>
       </div>