styles

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/birthday_reminders.js

@@ -11,6 +11,7 @@ import { Link } from 'react-router-dom';
 import { fetchBirthdayReminders } from 'soapbox/actions/accounts';
 import { openModal } from 'soapbox/actions/modals';
 import Icon from 'soapbox/components/icon';
+import { HStack, Text } from 'soapbox/components/ui';
 import { makeGetAccount } from 'soapbox/selectors';
 
 const mapStateToProps = (state, props) => {
@@ -72,7 +73,7 @@ class BirthdayReminders extends ImmutablePureComponent {
     const link = (
       <bdi>
         <Link
-          className='notification__display-name'
+          className='text-gray-800 dark:text-gray-200 font-bold hover:underline'
           title={account.get('acct')}
           to={`/@${account.get('acct')}`}
           dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
@@ -137,14 +138,20 @@ class BirthdayReminders extends ImmutablePureComponent {
     return (
       <HotKeys handlers={this.getHandlers()}>
         <div className='notification notification-birthday focusable' tabIndex='0' title={this.renderMessageForScreenReader()}>
-          <div className='notification__message'>
+          <div className='p-4 focusable'>
-            <div className='notification__icon-wrapper'>
+            <HStack alignItems='center' space={1.5}>
-              <Icon src={require('@tabler/icons/icons/ballon.svg')} />
+              <Icon
-            </div>
+                src={require('@tabler/icons/icons/ballon.svg')}
+                className='text-primary-600'
+              />
 
-            <span>
+              <Text
-              {this.renderMessage()}
+                theme='muted'
-            </span>
+                size='sm'
+              >
+                {this.renderMessage()}
+              </Text>
+            </HStack>
           </div>
         </div>
       </HotKeys>

app/soapbox/components/status.tsx

@@ -379,7 +379,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
       prepend = (
         <div className='pt-4 px-4'>
           <HStack alignItems='center' space={1}>
-            <Icon src={require('@tabler/icons/icons/pinned.svg')} className='text-gray-600' />
+            <Icon src={require('@tabler/icons/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
 
             <Text size='sm' theme='muted' weight='medium'>
               <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />

app/soapbox/components/ui/modal/modal.tsx

@@ -46,7 +46,7 @@ const Modal: React.FC<IModal> = ({
   }, [buttonRef]);
 
   return (
-    <div className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 shadow-xl rounded-2xl pointer-events-auto'>
+    <div className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto'>
       <div className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
           <div className='w-full flex flex-row justify-between items-center'>

app/soapbox/features/ui/components/profile_info_panel.js

@@ -92,7 +92,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
       <HStack alignItems='center' space={0.5}>
         <Icon
           src={require('@tabler/icons/icons/ballon.svg')}
-          className='w-4 h-4 text-gray-800'
+          className='w-4 h-4 text-gray-800 dark:text-gray-200'
         />
 
         <Text size='sm'>
@@ -191,7 +191,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
               <HStack alignItems='center' space={0.5}>
                 <Icon
                   src={require('@tabler/icons/icons/calendar.svg')}
-                  className='w-4 h-4 text-gray-800'
+                  className='w-4 h-4 text-gray-800 dark:text-gray-200'
                 />
 
                 <Text size='sm'>
@@ -208,7 +208,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
               <HStack alignItems='center' space={0.5}>
                 <Icon
                   src={require('@tabler/icons/icons/map-pin.svg')}
-                  className='w-4 h-4 text-gray-800'
+                  className='w-4 h-4 text-gray-800 dark:text-gray-200'
                 />
 
                 <Text size='sm'>
@@ -221,13 +221,13 @@ class ProfileInfoPanel extends ImmutablePureComponent {
               <HStack alignItems='center' space={0.5}>
                 <Icon
                   src={require('@tabler/icons/icons/link.svg')}
-                  className='w-4 h-4 text-gray-800'
+                  className='w-4 h-4 text-gray-800 dark:text-gray-200'
                 />
 
                 <div className='max-w-[300px]'>
                   <Text size='sm' truncate>
                     {isSafeUrl(account.get('website')) ? (
-                      <a className='text-primary-600 hover:underline' href={account.get('website')} target='_blank'>{account.get('website')}</a>
+                      <a className='text-primary-600 dark:text-primary-400 hover:underline' href={account.get('website')} target='_blank'>{account.get('website')}</a>
                     ) : (
                       account.get('website')
                     )}

app/soapbox/features/ui/components/reactions_modal.js

@@ -107,6 +107,7 @@ class ReactionsModal extends React.PureComponent {
         <ScrollableList
           scrollKey='reactions'
           emptyMessage={emptyMessage}
+          className='space-y-3'
         >
           {accounts.map((account) =>
             <AccountContainer key={`${account.id}-${account.reaction}`} id={account.id} withNote={false} reaction={account.reaction} />,