Downgrade outdated photos warning

This commit is contained in:
Sam Becker 2025-02-28 21:44:45 -06:00
parent 8e21dddc75
commit aaa4537e70
9 changed files with 46 additions and 26 deletions

View File

@ -79,7 +79,7 @@ export default function AdminOutdatedClient({
>
<div className="space-y-6">
<Note
color="yellow"
color="blue"
icon={<LiaBroomSolid size={18}/>}
>
<div className="space-y-1.5">

View File

@ -52,17 +52,27 @@ export default function AdminPhotosClient({
onLastUpload={onLastUpload}
/>
</div>
{photosCountOutdated > 0 && <PathLoaderButton
path={PATH_ADMIN_OUTDATED}
icon={<LiaBroomSolid size={18} className="translate-y-[-1px]" />}
title={`${photosCountOutdated} Outdated Photos`}
className={clsx(
isUploading && 'hidden md:inline-flex',
)}
hideTextOnMobile={false}
>
{photosCountOutdated}
</PathLoaderButton>}
{photosCountOutdated > 0 &&
<PathLoaderButton
path={PATH_ADMIN_OUTDATED}
icon={<LiaBroomSolid
size={18}
className="translate-y-[-1px]"
/>}
title={`${photosCountOutdated} Outdated Photos`}
className={clsx(
'text-blue-600 dark:text-blue-400',
'border border-blue-200 dark:border-blue-800/60',
'active:bg-blue-50 dark:active:bg-blue-950/50',
'disabled:bg-blue-50 dark:disabled:bg-blue-950/50',
isUploading && 'hidden md:inline-flex',
)}
spinnerColor="text"
spinnerClassName="text-blue-200 dark:text-blue-600/40"
hideTextOnMobile={false}
>
{photosCountOutdated}
</PathLoaderButton>}
</div>
{blobPhotoUrls.length > 0 &&
<div className={clsx(

View File

@ -99,7 +99,7 @@ export default function AdminPhotosTable({
</div>
<div className={clsx(
'flex flex-nowrap',
'gap-2 sm:gap-3 items-center',
'gap-2 items-center',
)}>
{canEdit &&
<EditButton path={pathForAdminPhotoEdit(photo)} />}

View File

@ -46,7 +46,8 @@ const DEBUG_COMMIT_MESSAGE = 'Long commit message for debugging purposes';
const DEBUG_BEHIND_BY = 9;
const DEBUG_PHOTOS_COUNT_OUTDATED = 7;
const WARNING_TEXT_COLOR = 'text-amber-600 dark:text-amber-500';
const TEXT_COLOR_WARNING = 'text-amber-600 dark:text-amber-500';
const TEXT_COLOR_BLUE = 'text-blue-600 dark:text-blue-500';
const readmeAnchor = (anchor: string) =>
<AdminLink href={`${TEMPLATE_REPO_URL_README}#${anchor}`}>
@ -128,7 +129,7 @@ export default function AdminAppInsightsClient({
<ScoreCardRow
icon={<IoSyncCircle
size={18}
className={WARNING_TEXT_COLOR}
className={TEXT_COLOR_WARNING}
/>}
content={<>
Could not analyze source code
@ -239,7 +240,7 @@ export default function AdminAppInsightsClient({
size={17}
className={clsx(
'translate-x-[0.5px]',
WARNING_TEXT_COLOR,
TEXT_COLOR_WARNING,
)}
/>}
content={isExpanded => renderHighlightText(
@ -258,7 +259,7 @@ export default function AdminAppInsightsClient({
size={17}
className={clsx(
'translate-x-[0.5px]',
WARNING_TEXT_COLOR,
TEXT_COLOR_WARNING,
)}
/>}
content={isExpanded => renderHighlightText(
@ -359,7 +360,7 @@ export default function AdminAppInsightsClient({
size={19}
className={clsx(
'translate-y-[-2px]',
WARNING_TEXT_COLOR,
TEXT_COLOR_BLUE,
)}
/>}
content={renderHighlightText(
@ -367,7 +368,7 @@ export default function AdminAppInsightsClient({
photosCountOutdated || DEBUG_PHOTOS_COUNT_OUTDATED,
'outdated photo',
),
'yellow',
'blue',
)}
expandPath={PATH_ADMIN_OUTDATED}
/>}

View File

@ -14,15 +14,16 @@ export const getShouldShowInsightsIndicator = async () => {
const {
forkBehind,
noAiRateLimiting,
noConfiguredDomain,
outdatedPhotos,
} = getSignificantInsights({
codeMeta,
photosCountOutdated,
});
if (noAiRateLimiting || outdatedPhotos) {
if (noAiRateLimiting || noConfiguredDomain) {
return 'yellow';
} else if (forkBehind) {
} else if (forkBehind || outdatedPhotos) {
return 'blue';
}
};

View File

@ -33,8 +33,8 @@ export default function Container({
'border border-gray-200 dark:border-gray-800',
];
case 'blue': return [
'text-blue-900 dark:text-blue-300',
'bg-blue-100/35 dark:bg-blue-950/60',
'text-blue-800 dark:text-blue-400',
'bg-blue-50 dark:bg-blue-950/50',
];
case 'red': return [
'text-red-700 dark:text-red-400',

View File

@ -2,7 +2,7 @@ import { clsx } from 'clsx/lite';
const SIZE_DEFAULT = 12;
export type SpinnerColor = 'text' | 'dim' | 'light-gray';
export type SpinnerColor = 'text' | 'dim' | 'light-gray' | 'semi-transparent';
export default function Spinner({
size = SIZE_DEFAULT,
@ -21,6 +21,8 @@ export default function Spinner({
'text-gray-300 dark:text-gray-600',
color === 'dim' &&
'text-dim',
color === 'semi-transparent' &&
'text-black/20 dark:text-white/20',
className,
)}
style={{

View File

@ -8,6 +8,7 @@ export default function LoaderButton(props: {
isLoading?: boolean
icon?: ReactNode
spinnerColor?: SpinnerColor
spinnerClassName?: string
styleAs?: 'button' | 'link' | 'link-without-hover'
hideTextOnMobile?: boolean
confirmText?: string
@ -20,6 +21,7 @@ export default function LoaderButton(props: {
isLoading,
icon,
spinnerColor,
spinnerClassName,
styleAs = 'button',
hideTextOnMobile = true,
confirmText,
@ -71,7 +73,10 @@ export default function LoaderButton(props: {
? <Spinner
size={14}
color={spinnerColor}
className="translate-y-[0.5px]"
className={clsx(
'translate-y-[1px]',
spinnerClassName,
)}
/>
: icon}
</span>}

View File

@ -10,6 +10,7 @@ export default function PathLoaderButton({
loaderDelay = 100,
shouldScroll = true,
shouldReplace,
isLoading,
children,
...props
}: {
@ -54,7 +55,7 @@ export default function PathLoaderButton({
}
});
}}
isLoading={shouldShowLoader}
isLoading={shouldShowLoader || isLoading}
>
{children}
</LoaderButton>