sforkowany z mirror/soapbox
Improve dark mode support of Groups + bug fixes
rodzic
4b3b601659
commit
681eacf827
|
@ -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}
|
||||
|
|
|
@ -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',
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -18,7 +18,6 @@ export default () => {
|
|||
|
||||
const { groups, isLoading } = usePendingGroups();
|
||||
|
||||
|
||||
const renderBlankslate = () => (
|
||||
<Stack
|
||||
space={4}
|
||||
|
|
|
@ -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' />
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
Ładowanie…
Reference in New Issue