🎨 style: Theming in SharePointPickerDialog, PrincipalAvatar, and PeoplePickerSearchItem

This commit is contained in:
Danny Avila 2025-08-04 18:31:28 -04:00
parent 39346d6b8e
commit c191af6c9b
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
3 changed files with 11 additions and 11 deletions

View file

@ -66,7 +66,7 @@ export default function SharePointPickerDialog({
<OGDialogPortal> <OGDialogPortal>
<OGDialogOverlay className="bg-black/50" /> <OGDialogOverlay className="bg-black/50" />
<OGDialogContent <OGDialogContent
className="bg-#F5F5F5 sharepoint-picker-bg fixed left-1/2 top-1/2 z-50 h-[680px] max-h-[90vh] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 rounded-lg border p-2 shadow-lg focus:outline-none" className="sharepoint-picker-bg fixed left-1/2 top-1/2 z-50 h-[680px] max-h-[90vh] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-surface-primary p-2 shadow-lg focus:outline-none"
showCloseButton={true} showCloseButton={true}
> >
<OGDialogTitle className="sr-only"> <OGDialogTitle className="sr-only">
@ -77,26 +77,26 @@ export default function SharePointPickerDialog({
{isDownloading && ( {isDownloading && (
<div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-black/30 backdrop-blur-sm"> <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-black/30 backdrop-blur-sm">
<div className="mx-4 w-full max-w-sm rounded-lg bg-white p-6 shadow-lg"> <div className="mx-4 w-full max-w-sm rounded-lg bg-surface-primary p-6 shadow-lg">
<div className="text-center"> <div className="text-center">
<div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div> <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
<h3 className="mb-2 text-lg font-semibold text-gray-900"> <h3 className="mb-2 text-lg font-semibold text-text-primary">
{localize('com_files_downloading')} {localize('com_files_downloading')}
</h3> </h3>
{downloadProgress && ( {downloadProgress && (
<div className="space-y-2"> <div className="space-y-2">
<p className="text-sm text-gray-600"> <p className="text-sm text-text-secondary">
{localize('com_files_download_progress', { {localize('com_files_download_progress', {
0: downloadProgress.completed, 0: downloadProgress.completed,
1: downloadProgress.total, 1: downloadProgress.total,
})} })}
</p> </p>
{downloadProgress.currentFile && ( {downloadProgress.currentFile && (
<p className="truncate text-xs text-gray-500"> <p className="truncate text-xs text-text-tertiary">
{downloadProgress.currentFile} {downloadProgress.currentFile}
</p> </p>
)} )}
<div className="h-2 w-full rounded-full bg-gray-200"> <div className="h-2 w-full rounded-full bg-surface-tertiary">
<div <div
className="h-2 rounded-full bg-blue-600 transition-all duration-300" className="h-2 rounded-full bg-blue-600 transition-all duration-300"
style={{ style={{
@ -104,7 +104,7 @@ export default function SharePointPickerDialog({
}} }}
></div> ></div>
</div> </div>
<p className="text-xs text-gray-500"> <p className="text-xs text-text-tertiary">
{localize('com_files_download_percent_complete', { {localize('com_files_download_percent_complete', {
0: Math.round( 0: Math.round(
(downloadProgress.completed / downloadProgress.total) * 100, (downloadProgress.completed / downloadProgress.total) * 100,
@ -121,7 +121,7 @@ export default function SharePointPickerDialog({
</div> </div>
)} )}
{!downloadProgress && ( {!downloadProgress && (
<p className="text-sm text-gray-600"> <p className="text-sm text-text-secondary">
{localize('com_files_preparing_download')} {localize('com_files_preparing_download')}
</p> </p>
)} )}

View file

@ -40,7 +40,7 @@ const PeoplePickerSearchItem = forwardRef<HTMLDivElement, PeoplePickerSearchItem
}; };
default: default:
return { return {
className: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300', className: 'bg-surface-tertiary text-text-secondary',
label: type, label: type,
}; };
} }

View file

@ -57,8 +57,8 @@ export default function PrincipalAvatar({
default: default:
return { return {
Icon: User, Icon: User,
containerClass: 'bg-gray-100 dark:bg-gray-900', containerClass: 'bg-surface-tertiary',
iconClass: 'text-gray-600 dark:text-gray-400', iconClass: 'text-text-secondary',
}; };
} }
}; };