🎨 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>
<OGDialogOverlay className="bg-black/50" />
<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}
>
<OGDialogTitle className="sr-only">
@ -77,26 +77,26 @@ export default function SharePointPickerDialog({
{isDownloading && (
<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="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')}
</h3>
{downloadProgress && (
<div className="space-y-2">
<p className="text-sm text-gray-600">
<p className="text-sm text-text-secondary">
{localize('com_files_download_progress', {
0: downloadProgress.completed,
1: downloadProgress.total,
})}
</p>
{downloadProgress.currentFile && (
<p className="truncate text-xs text-gray-500">
<p className="truncate text-xs text-text-tertiary">
{downloadProgress.currentFile}
</p>
)}
<div className="h-2 w-full rounded-full bg-gray-200">
<div className="h-2 w-full rounded-full bg-surface-tertiary">
<div
className="h-2 rounded-full bg-blue-600 transition-all duration-300"
style={{
@ -104,7 +104,7 @@ export default function SharePointPickerDialog({
}}
></div>
</div>
<p className="text-xs text-gray-500">
<p className="text-xs text-text-tertiary">
{localize('com_files_download_percent_complete', {
0: Math.round(
(downloadProgress.completed / downloadProgress.total) * 100,
@ -121,7 +121,7 @@ export default function SharePointPickerDialog({
</div>
)}
{!downloadProgress && (
<p className="text-sm text-gray-600">
<p className="text-sm text-text-secondary">
{localize('com_files_preparing_download')}
</p>
)}

View file

@ -40,7 +40,7 @@ const PeoplePickerSearchItem = forwardRef<HTMLDivElement, PeoplePickerSearchItem
};
default:
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,
};
}

View file

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