mirror of https://github.com/buster-so/buster.git
update color for warning card
This commit is contained in:
parent
dbf1a6ef2f
commit
77012027ba
|
@ -25,14 +25,14 @@ export const NewChatWarning = React.memo(
|
|||
const progressPercentage = (progress / 2) * 100;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex flex-col rounded border border-gray-200 bg-white p-6 shadow-sm">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<Text className="text-xl font-medium text-gray-800">Setup Checklist</Text>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-sm font-medium text-gray-500">{progress}/2 completed</div>
|
||||
<div className="h-2 w-20 rounded-full bg-gray-100">
|
||||
<div
|
||||
className="h-full rounded-full bg-purple-500 transition-all duration-500 ease-in-out"
|
||||
className="h-full rounded-full bg-gray-600 transition-all duration-500 ease-in-out"
|
||||
style={{ width: `${progressPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
@ -65,7 +65,7 @@ export const NewChatWarning = React.memo(
|
|||
|
||||
<div
|
||||
className={cn(
|
||||
'mt-5 flex items-center rounded-lg border p-4',
|
||||
'mt-5 flex items-center rounded border p-4',
|
||||
allCompleted ? 'border-gray-200 bg-gray-50' : 'border-gray-200 bg-gray-50'
|
||||
)}
|
||||
>
|
||||
|
@ -114,14 +114,14 @@ const SetupItem = ({ number, status, title, description, link, linkText }: Setup
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group relative flex items-start space-x-4 rounded-lg border p-4 transition-all duration-200 hover:shadow-sm',
|
||||
status ? 'border-purple-700/30 bg-purple-50' : 'border-gray-200'
|
||||
'group relative flex items-start space-x-4 rounded border p-4 transition-all duration-200 hover:shadow-sm',
|
||||
status ? 'border-gray-400/30 bg-gray-50' : 'border-gray-200'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'text-md flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full font-medium',
|
||||
status ? 'bg-purple-200/60 text-purple-700' : 'bg-gray-100 text-gray-500'
|
||||
status ? 'bg-gray-200 text-gray-700' : 'bg-gray-100 text-gray-500'
|
||||
)}
|
||||
>
|
||||
{status ? <CircleCheck title="Complete" /> : number}
|
||||
|
@ -131,7 +131,7 @@ const SetupItem = ({ number, status, title, description, link, linkText }: Setup
|
|||
<div className="flex items-center justify-between">
|
||||
<Text className="font-medium text-gray-800">{title}</Text>
|
||||
{status && (
|
||||
<span className="rounded-full bg-purple-200/60 px-2 py-1 text-xs font-medium text-purple-700">
|
||||
<span className="rounded-full bg-gray-200 px-2 py-1 text-xs font-medium text-gray-700">
|
||||
Complete
|
||||
</span>
|
||||
)}
|
||||
|
@ -170,8 +170,8 @@ const ContactAdminCard = ({ userRole }: ContactAdminCardProps) => {
|
|||
<div className="flex flex-col rounded border border-gray-200 bg-white p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<Text className="text-xl font-medium text-gray-800">Contact Admin Required</Text>
|
||||
<div className="rounded-full bg-blue-100 px-3 py-1">
|
||||
<Text className="text-sm font-medium text-blue-700">{roleLabel}</Text>
|
||||
<div className="rounded bg-gray-100 px-3 py-1 border">
|
||||
<Text className="text-sm font-medium text-gray-700">{roleLabel}</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -180,20 +180,20 @@ const ContactAdminCard = ({ userRole }: ContactAdminCardProps) => {
|
|||
</Paragraph>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
|
||||
<div className="rounded border border-gray-200 bg-gray-50 p-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-200">
|
||||
<Text className="text-sm font-medium text-blue-700">
|
||||
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-200">
|
||||
<Text className="text-sm font-medium text-gray-700">
|
||||
<AlertWarning />
|
||||
</Text>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<Text className="font-medium text-blue-800">Permission Required</Text>
|
||||
<Paragraph className="mt-1 text-sm text-blue-700">
|
||||
<Text className="font-medium text-gray-800">Permission Required</Text>
|
||||
<Paragraph className="mt-1 text-sm text-gray-700">
|
||||
Your current role is <span className="font-semibold">{roleLabel}</span>. To start
|
||||
asking questions, an admin needs to:
|
||||
</Paragraph>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-4 text-sm text-blue-700">
|
||||
<ul className="mt-2 list-disc space-y-1 pl-4 text-sm text-gray-700">
|
||||
<li>Connect data sources to your organization</li>
|
||||
<li>Create datasets from those data sources</li>
|
||||
<li>Grant you access to the relevant datasets</li>
|
||||
|
|
Loading…
Reference in New Issue