Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00
Code Issues Activity

Fixed dark mode issues in ActivityPub (#22828)

Browse source 
ref AP-1006

- The new profile view had a couple of dark mode related UI issues
This commit is contained in:
Peter Zimon 2025-04-07 15:47:07 +02:00 • committed by GitHub
parent b4202a49e7
commit 572f9903e6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
apps/admin-x-activitypub/src/components/global/BackButton.tsx
View file

@ -1,28 +1,33 @@
import React from 'react';
import {Button, LucideIcon} from '@tryghost/shade';
import {Button, LucideIcon, cn} from '@tryghost/shade';
import {useNavigate, useNavigationStack} from '@tryghost/admin-x-framework';
interface BackButtonProps {
className?: string,
onClick?: () => void;
}
const BackButton: React.FC<BackButtonProps> = ({onClick}) => {
const BackButton: React.FC<BackButtonProps> = ({className, onClick}) => {
const navigate = useNavigate();
const {previousPath} = useNavigationStack();
return (
<Button className='h-9 w-9 rounded-full bg-white/85 px-2 backdrop-blur-md dark:text-white [&_svg]:size-6' variant='ghost' onClick={() => {
if (onClick) {
onClick();
return;
}
<Button
className={cn(className, 'size-9 rounded-full bg-white/85 px-2 backdrop-blur-md dark:bg-black/85 dark:text-white [&_svg]:size-6')}
variant='ghost'
onClick={() => {
if (onClick) {
onClick();
return;
}
if (previousPath) {
navigate(-1);
} else {
navigate('/');
}
}}>
if (previousPath) {
navigate(-1);
} else {
navigate('/');
}
}}
>
<LucideIcon.ArrowLeft size={24} strokeWidth={1.25} />
</Button>
);

4
apps/admin-x-activitypub/src/components/layout/Header/Header.tsx
View file

@ -42,8 +42,8 @@ const Header: React.FC = () => {
return (
<>
{onlyBackButton ?
<div className='sticky left-8 top-8 z-50 inline-block'>
{backActive && <BackButton />}
<div className='sticky left-0 top-8 z-50 inline-block'>
{backActive && <BackButton className='ml-8' />}
</div>
:
<div className='sticky top-0 z-50 bg-white/85 backdrop-blur-md dark:bg-black'>

2
apps/admin-x-activitypub/src/views/Inbox/components/InboxList.tsx
View file

@ -159,7 +159,7 @@ const InboxList:React.FC<InboxListProps> = ({
setIsReaderOpen(open);
}}
>
<DialogContent className='inset-y-3 h-[calc(100vh-24px)] w-screen max-w-[calc(100vw-24px)] !animate-none p-0 focus:outline-none'>
<DialogContent className='inset-y-3 h-[calc(100vh-24px)] w-screen max-w-[calc(100vw-24px)] !animate-none p-0 focus:outline-none dark:bg-gray-950'>
<DialogHeader className='hidden'>
<DialogTitle>Reader</DialogTitle>
<DialogDescription>Ghost reader for long form articles</DialogDescription>

2
apps/admin-x-activitypub/src/views/Profile/components/ActorList.tsx
View file

@ -79,7 +79,7 @@ const ActorList: React.FC<ActorListProps> = ({
<APAvatar author={actor} />
<div>
<div className='text-gray-600'>
<span className='mr-1 font-bold text-black'>{getName(actor)}</span>
<span className='mr-1 font-bold text-black dark:text-white'>{getName(actor)}</span>
<div className='text-sm'>{actor.handle || getUsername(actor)}</div>
</div>
</div>

4
apps/admin-x-activitypub/src/views/Profile/components/ProfilePage.tsx
View file

@ -97,7 +97,7 @@ const ProfilePage:React.FC<ProfilePageProps> = ({
)}
<>
{account?.bannerImageUrl ?
<div className='h-[15vw] w-full overflow-hidden bg-gradient-to-tr from-gray-200 to-gray-100'>
<div className='h-[15vw] min-h-[200px] w-full overflow-hidden bg-gradient-to-tr from-gray-200 to-gray-100'>
<img
alt={account?.name}
className='size-full object-cover'
@ -105,7 +105,7 @@ const ProfilePage:React.FC<ProfilePageProps> = ({
/>
</div>
:
<div className='h-[8vw] w-full overflow-hidden bg-gradient-to-tr from-white to-white'></div>
<div className='h-[8vw] w-full overflow-hidden bg-gradient-to-tr from-white to-white dark:from-black dark:to-black'></div>
}
<div className={`mx-auto max-w-[620px] px-6 ${(!account?.bannerImageUrl && !canGoBack) ? '-mt-8' : '-mt-12'}`}>
<div className='flex items-end justify-between'>