mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 00:40:14 +01:00
🎨 style: Theming in SharePointPickerDialog, PrincipalAvatar, and PeoplePickerSearchItem
This commit is contained in:
parent
39346d6b8e
commit
c191af6c9b
3 changed files with 11 additions and 11 deletions
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue