Improve dark mode support of Groups + bug fixes

app/soapbox/components/groups/group-avatar.tsx

@@ -23,8 +23,9 @@ const GroupAvatar = (props: IGroupAvatar) => {
       className={
         clsx('relative rounded-full', {
           'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isOwner && withRing,
+          'dark:shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.gray.800)]': isOwner && withRing,
           'shadow-[0_0_0_2px_theme(colors.primary.600)]': isOwner && !withRing,
-          'shadow-[0_0_0_2px_theme(colors.white)]': !isOwner && withRing,
+          'shadow-[0_0_0_2px_theme(colors.white)] dark:shadow-[0_0_0_2px_theme(colors.gray.800)]': !isOwner && withRing,
         })
       }
       src={group.avatar}

app/soapbox/components/ui/button/useButtonStyles.ts

@@ -9,7 +9,7 @@ const themes = {
     'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
   accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
   danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500',
-  transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
+  transparent: 'border-transparent bg-transparent text-primary-600 dark:text-accent-blue dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50',
   outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
   muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
 };

app/soapbox/components/ui/popover/popover.tsx

@@ -13,6 +13,8 @@ import {
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 
+import Portal from '../portal/portal';
+
 interface IPopover {
   children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
   /** The content of the popover */
@@ -83,31 +85,33 @@ const Popover: React.FC<IPopover> = (props) => {
       })}
 
       {(isMounted) && (
-        <div
+        <Portal>
-          ref={refs.setFloating}
+          <div
-          style={{
+            ref={refs.setFloating}
-            position: strategy,
+            style={{
-            top: y ?? 0,
+              position: strategy,
-            left: x ?? 0,
+              top: y ?? 0,
-            ...styles,
+              left: x ?? 0,
-          }}
+              ...styles,
-          className={
+            }}
-            clsx({
+            className={
-              'z-40 rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
+              clsx({
-              'p-6': !isFlush,
+                'z-40 rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
-            })
+                'p-6': !isFlush,
-          }
+              })
-          {...getFloatingProps()}
+            }
-        >
+            {...getFloatingProps()}
-          {content}
+          >
+            {content}
 
-          <FloatingArrow
+            <FloatingArrow
-            ref={arrowRef}
+              ref={arrowRef}
-            context={context}
+              context={context}
-            className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
+              className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
-            tipRadius={3}
+              tipRadius={3}
-          />
+            />
-        </div>
+          </div>
+        </Portal>
       )}
     </>
   );

app/soapbox/features/group/components/group-relationship.tsx

@@ -22,6 +22,7 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
       space={1}
       alignItems='center'
       data-testid='group-relationship'
+      className='text-primary-600 dark:text-accent-blue'
     >
       <Icon
         className='h-4 w-4'

app/soapbox/features/groups/pending-requests.tsx

@@ -18,7 +18,6 @@ export default () => {
 
   const { groups, isLoading } = usePendingGroups();
 
-
   const renderBlankslate = () => (
     <Stack
       space={4}

app/soapbox/features/placeholder/components/placeholder-group-discover.tsx

@@ -13,7 +13,7 @@ const PlaceholderGroupDiscover = () => {
         {/* Group Cover Image */}
         <div className='absolute inset-0 rounded-t-lg bg-gray-300 object-cover dark:bg-gray-800' />
 
-        <Stack justifyContent='end' className='z-10 p-4 text-white' space={3}>
+        <Stack justifyContent='end' className='z-10 p-4 text-gray-900 dark:text-gray-100' space={3}>
           {/* Group Avatar */}
           <div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
 

app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx

@@ -3,8 +3,10 @@ import { FormattedMessage } from 'react-intl';
 
 import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui';
 
+import type { Group } from 'soapbox/schemas';
+
 interface IConfirmationStep {
-  group: any
+  group: Group
 }
 
 const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
@@ -53,24 +55,30 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
 
         <Stack space={5}>
           <InfoListItem number={1}>
-            <FormattedMessage
+            <Text theme='muted'>
-              id='manage_group.confirmation.info_1'
+              <FormattedMessage
-              defaultMessage='As the owner of this group, you can assign staff, delete posts and much more.'
+                id='manage_group.confirmation.info_1'
-            />
+                defaultMessage='As the owner of this group, you can assign staff, delete posts and much more.'
+              />
+            </Text>
           </InfoListItem>
 
           <InfoListItem number={2}>
-            <FormattedMessage
+            <Text theme='muted'>
-              id='manage_group.confirmation.info_2'
+              <FormattedMessage
-              defaultMessage="Post the group's first post and get the conversation started."
+                id='manage_group.confirmation.info_2'
-            />
+                defaultMessage="Post the group's first post and get the conversation started."
+              />
+            </Text>
           </InfoListItem>
 
           <InfoListItem number={3}>
-            <FormattedMessage
+            <Text theme='muted'>
-              id='manage_group.confirmation.info_3'
+              <FormattedMessage
-              defaultMessage='Share your new group with friends, family and followers to grow its membership.'
+                id='manage_group.confirmation.info_3'
-            />
+                defaultMessage='Share your new group with friends, family and followers to grow its membership.'
+              />
+            </Text>
           </InfoListItem>
         </Stack>
       </Stack>
@@ -96,7 +104,7 @@ interface IInfoListNumber {
 
 const InfoListNumber: React.FC<IInfoListNumber> = ({ number }) => {
   return (
-    <div className='flex h-7 w-7 items-center justify-center rounded-full border border-gray-200'>
+    <div className='flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-gray-200 dark:border-gray-800'>
       <Text theme='primary' size='sm' weight='bold'>{number}</Text>
     </div>
   );
@@ -109,9 +117,11 @@ interface IInfoListItem {
 
 const InfoListItem: React.FC<IInfoListItem> = ({ number, children }) => {
   return (
-    <HStack space={3}>
+    <HStack alignItems='top' space={3}>
-      <div><InfoListNumber number={number} /></div>
+      <InfoListNumber number={number} />
-      <div>{children}</div>
+      <div className='mt-0.5'>
+        {children}
+      </div>
     </HStack>
   );
 };