Improve dark mode support of Groups + bug fixes

develop^2
Chewbacca 2023-03-30 15:19:14 -04:00
rodzic 4b3b601659
commit 681eacf827
7 zmienionych plików z 60 dodań i 45 usunięć

Wyświetl plik

@ -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}

Wyświetl plik

@ -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',
};

Wyświetl plik

@ -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
ref={refs.setFloating}
style={{
position: strategy,
top: y ?? 0,
left: x ?? 0,
...styles,
}}
className={
clsx({
'z-40 rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
'p-6': !isFlush,
})
}
{...getFloatingProps()}
>
{content}
<Portal>
<div
ref={refs.setFloating}
style={{
position: strategy,
top: y ?? 0,
left: x ?? 0,
...styles,
}}
className={
clsx({
'z-40 rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
'p-6': !isFlush,
})
}
{...getFloatingProps()}
>
{content}
<FloatingArrow
ref={arrowRef}
context={context}
className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
tipRadius={3}
/>
</div>
<FloatingArrow
ref={arrowRef}
context={context}
className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
tipRadius={3}
/>
</div>
</Portal>
)}
</>
);

Wyświetl plik

@ -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'

Wyświetl plik

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

Wyświetl plik

@ -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' />

Wyświetl plik

@ -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
id='manage_group.confirmation.info_1'
defaultMessage='As the owner of this group, you can assign staff, delete posts and much more.'
/>
<Text theme='muted'>
<FormattedMessage
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
id='manage_group.confirmation.info_2'
defaultMessage="Post the group's first post and get the conversation started."
/>
<Text theme='muted'>
<FormattedMessage
id='manage_group.confirmation.info_2'
defaultMessage="Post the group's first post and get the conversation started."
/>
</Text>
</InfoListItem>
<InfoListItem number={3}>
<FormattedMessage
id='manage_group.confirmation.info_3'
defaultMessage='Share your new group with friends, family and followers to grow its membership.'
/>
<Text theme='muted'>
<FormattedMessage
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}>
<div><InfoListNumber number={number} /></div>
<div>{children}</div>
<HStack alignItems='top' space={3}>
<InfoListNumber number={number} />
<div className='mt-0.5'>
{children}
</div>
</HStack>
);
};