This commit is contained in:
natib21
2026-07-14 07:59:17 +00:00
parent bf9520ece4
commit 22cf8eabd1
48 changed files with 105 additions and 105 deletions

View File

@@ -448,14 +448,14 @@ export const FormAddableList = ({
{items.map((unit: string, index: number) => (
<div
key={`${unit}-${index}`}
className="flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 border border-blue-100 rounded-md"
className="flex items-center gap-1 px-2 py-1 bg-primary-50 text-primary-700 border border-primary-100 rounded-md"
>
<span className="text-sm truncate max-w-[200px]">
{unit}
</span>
<X
size={14}
className="cursor-pointer text-blue-700 hover:text-red-600 ml-1"
className="cursor-pointer text-primary-700 hover:text-red-600 ml-1"
onClick={() => handleDelete(index)}
/>
</div>
@@ -503,7 +503,7 @@ export const ClearableSelect = ({
</span>
<X
size={17}
className="cursor-pointer text-blue-700 hover:text-red-600 ml-1"
className="cursor-pointer text-primary-700 hover:text-red-600 ml-1"
onClick={() => field.onChange("")}
/>
</div>
@@ -784,7 +784,7 @@ export const SelectedItemsChips = ({
{items.map((item) => (
<div
key={item.id}
className="flex items-center bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm"
className="flex items-center bg-primary-100 text-primary-800 px-3 py-1 rounded-full text-sm"
>
<span className="truncate max-w-[180px]">
{localizedName(item.name)}

View File

@@ -43,7 +43,7 @@ export const SliderUI: FC<SliderUIProps> = ({
disabled={disabled}
className="relative flex w-full touch-none select-none items-center h-5">
<SliderPrimitive.Track className="relative bg-gray-200 flex-1 h-1 rounded-full">
<SliderPrimitive.Range className="absolute bg-blue-500 h-full rounded-full" />
<SliderPrimitive.Range className="absolute bg-primary-500 h-full rounded-full" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="block w-5 h-5 bg-white border border-gray-300 rounded-full shadow" />
</SliderPrimitive.Root>

View File

@@ -11,9 +11,9 @@ const badgeVariants = cva(
variant: {
//draft and forward
default:
"bg-blue-100 text-blue-800 text-sm font-medium me-2 px-3 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300",
"bg-primary-100 text-primary-800 text-sm font-medium me-2 px-3 py-0.5 rounded-full dark:bg-primary-900 dark:text-primary-300",
secondary:
"bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-indigo-900 dark:text-indigo-300",
"bg-primary-100 text-primary-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-primary-900 dark:text-primary-300",
destructive:
"bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300",
outline:

View File

@@ -37,7 +37,7 @@ const buttonVariants = cva(
actionYellow:
"bg-amber-50/90 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-900/40 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-950/40 hover:text-amber-800 dark:hover:text-amber-200 hover:border-amber-300 dark:hover:border-amber-800/60 focus-visible:ring-amber-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
actionBlue:
"bg-blue-50/90 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900/40 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-950/40 hover:text-blue-800 dark:hover:text-blue-200 hover:border-blue-300 dark:hover:border-blue-800/60 focus-visible:ring-blue-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
"bg-primary-50/90 dark:bg-primary-950/20 border border-primary-200 dark:border-primary-900/40 text-primary-700 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-950/40 hover:text-primary-800 dark:hover:text-primary-200 hover:border-primary-300 dark:hover:border-primary-800/60 focus-visible:ring-primary-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
actionPurple:
"bg-purple-50/90 dark:bg-purple-950/20 border border-purple-200 dark:border-purple-900/40 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-950/40 hover:text-purple-800 dark:hover:text-purple-200 hover:border-purple-300 dark:hover:border-purple-800/60 focus-visible:ring-purple-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
},

View File

@@ -466,7 +466,7 @@ function TreeItem({
{selectedCount !== null && selectedCount > 0 && (
<Badge
variant="secondary"
className="mr-2 bg-blue-100 hover:bg-blue-100 flex-shrink-0">
className="mr-2 bg-primary-100 hover:bg-primary-100 flex-shrink-0">
{selectedCount} selected
</Badge>
)}
@@ -1053,7 +1053,7 @@ export default function TreeView({
onMouseMove={handleMouseMove}>
{isDragging && (
<div
className="absolute inset-0 bg-blue-500/0 pointer-events-none"
className="absolute inset-0 bg-primary-500/0 pointer-events-none"
style={{
top: Math.min(
dragStart || 0,

View File

@@ -321,11 +321,11 @@ const SetPasswordPage = () => {
type="button"
onClick={handleResendCode}
disabled={isResendingCode || !email || !phoneNumber || isSubmitting}
className="text-sm text-indigo-600 hover:text-indigo-800 font-medium flex items-center justify-center space-x-1 mx-auto"
className="text-sm text-primary-600 hover:text-primary-800 font-medium flex items-center justify-center space-x-1 mx-auto"
>
{isResendingCode ? (
<>
<RefreshCw className="animate-spin h-4 w-4 text-indigo-600 mr-2" />
<RefreshCw className="animate-spin h-4 w-4 text-primary-600 mr-2" />
<span>Sending...</span>
</>
) : (

View File

@@ -38,8 +38,8 @@ export function ActivityStats({
label: t("auditLog.stats.totalActivities"),
value: totalActivities.toLocaleString(),
icon: Activity,
color: "text-blue-600 dark:text-blue-400",
bgColor: "bg-blue-50 dark:bg-blue-950",
color: "text-primary-600 dark:text-primary-400",
bgColor: "bg-primary-50 dark:bg-primary-950",
},
{
label: t("auditLog.stats.successRate"),

View File

@@ -50,11 +50,11 @@ export function ExportModal({
const textStrong = 'text-gray-900 dark:text-gray-100'
const textMuted = 'text-gray-600 dark:text-gray-300'
const textSubtle = 'text-gray-500 dark:text-gray-400'
const primaryBorder = 'border-primary dark:border-sky-600'
const primaryBorder = 'border-primary dark:border-primary-600'
const hoverBg = 'hover:bg-accent dark:hover:bg-gray-800'
const hoverText = 'hover:text-accent-foreground dark:hover:text-gray-100'
const primaryBtn =
'bg-primary dark:bg-sky-600 hover:bg-primary/90 dark:hover:bg-sky-500 text-white'
'bg-primary dark:bg-primary-600 hover:bg-primary/90 dark:hover:bg-primary-500 text-white'
const handleExport = () => {
onExport(options)

View File

@@ -152,7 +152,7 @@ export const AuditLogDetailPanel = ({
{change.to !== undefined && (
<p className="text-gray-600 mt-1">
<span className="text-xs font-semibold">To:</span>{" "}
<code className="bg-blue-50 px-2 py-1 rounded text-xs text-blue-900">
<code className="bg-primary-50 px-2 py-1 rounded text-xs text-primary-900">
{JSON.stringify(change.to)}
</code>
</p>

View File

@@ -51,8 +51,8 @@ export const ForgotPassword = () => {
};
return (
<div className="min-h-screen bg-gradient-to-br from-cyan-50 via-white to-primary-50 relative overflow-hidden">
<div className="absolute top-0 right-0 w-96 h-96 bg-cyan-100/30 rounded-full blur-3xl" />
<div className="min-h-screen bg-gradient-to-br from-primary-50 via-white to-primary-50 relative overflow-hidden">
<div className="absolute top-0 right-0 w-96 h-96 bg-primary-100/30 rounded-full blur-3xl" />
<div className="absolute bottom-0 left-0 w-96 h-96 bg-primary-100/30 rounded-full blur-3xl" />
<button
@@ -77,7 +77,7 @@ export const ForgotPassword = () => {
<h1 className="text-2xl font-bold text-white mb-2">
{t("forgotpassword.title")}
</h1>
<p className="text-cyan-50 text-sm">
<p className="text-primary-50 text-sm">
{t("forgotpassword.subtitle")}
</p>
</div>
@@ -111,7 +111,7 @@ export const ForgotPassword = () => {
)}
</div>
<div className="flex items-start gap-3 p-4 bg-cyan-50 border border-cyan-100 rounded-lg">
<div className="flex items-start gap-3 p-4 bg-primary-50 border border-primary-100 rounded-lg">
<Mail className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
<div className="flex-1">
<p className="text-sm text-gray-700 font-medium mb-1">

View File

@@ -239,7 +239,7 @@ export default function AuditLogPageShared({
case "warning":
return "bg-yellow-100 text-yellow-800 dark:bg-yellow-950 dark:text-yellow-300";
case "pending":
return "bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300";
return "bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-300";
default:
return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300";
}

View File

@@ -43,7 +43,7 @@ export const ExternalUsersColumnDefn = (
className={`px-2 py-1 rounded-full text-xs font-medium ${
userType === "external_organization"
? "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300"
: "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
: "bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"
}`}
>
{displayText}
@@ -65,7 +65,7 @@ export const ExternalUsersColumnDefn = (
return "bg-red-100 text-red-600 hover:bg-red-100 dark:bg-red-900/40 dark:text-red-300 dark:hover:bg-red-900/50";
case "pending":
default:
return "bg-blue-100 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-300 dark:hover:bg-blue-900/50";
return "bg-primary-100 text-primary-600 hover:bg-primary-100 dark:bg-primary-900/40 dark:text-primary-300 dark:hover:bg-primary-900/50";
}
};
@@ -117,7 +117,7 @@ export const ExternalUsersColumnDefn = (
</button>
{/* <button
onClick={handleEdit}
className="px-2 py-1 bg-blue-100 rounded hover:bg-blue-200 text-sm font-medium"
className="px-2 py-1 bg-primary-100 rounded hover:bg-primary-200 text-sm font-medium"
>
{t("Edit")}
</button> */}

View File

@@ -186,7 +186,7 @@ const ViewDocument: React.FC<ViewDocumentProps> = ({ userId }) => {
</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
<Building className="w-5 h-5 text-blue-600" />
<Building className="w-5 h-5 text-primary-600" />
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">
{t("viewDocument.organizationName")}
@@ -340,7 +340,7 @@ const ViewDocument: React.FC<ViewDocumentProps> = ({ userId }) => {
<span
className={`inline-block w-2 h-2 rounded-full mt-1.5 mr-2 ${
req.isOptional
? "bg-blue-400"
? "bg-primary-400"
: "bg-primary-400"
}`}
/>

View File

@@ -272,8 +272,8 @@ export function AssignAdminDialog({
className={cn(
"w-full flex items-center justify-between px-3 py-2 rounded-md text-left text-sm transition-colors",
!selectedUnit
? "bg-blue-200 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
: "hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-300"
? "bg-primary-200 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"
: "hover:bg-primary-100 dark:hover:bg-primary-900/30 text-gray-700 dark:text-gray-300"
)}
>
<span>
@@ -292,8 +292,8 @@ export function AssignAdminDialog({
className={cn(
"w-full flex items-center justify-between px-3 py-2 rounded-md text-left text-sm transition-colors",
selectedUnit === unit.id
? "bg-blue-200 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
: "hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-300"
? "bg-primary-200 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"
: "hover:bg-primary-100 dark:hover:bg-primary-900/30 text-gray-700 dark:text-gray-300"
)}
>
<span>{localizedName(unit.name)}</span>

View File

@@ -118,8 +118,8 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({ id }) => {
break;
case "woreda":
Icon = MapPin;
bgColor = "bg-blue-100 dark:bg-blue-800";
textColor = "text-blue-800 dark:text-blue-100";
bgColor = "bg-primary-100 dark:bg-primary-800";
textColor = "text-primary-800 dark:text-primary-100";
break;
case "subcity":
Icon = Home;

View File

@@ -91,7 +91,7 @@ export const OrganizationsColumnDefn: ColumnDef<OrganizationDto>[] = [
<Badge
className={`${
rowData.isGovernmentOrganization
? "bg-blue-600 text-white hover:bg-blue-400"
? "bg-primary-600 text-white hover:bg-primary-400"
: "bg-red-600 text-white hover:bg-red-400"
} rounded-full px-6 py-1 font-medium`}
>

View File

@@ -104,7 +104,7 @@ export const getSitesColumnDefn = ({
{t("sites.actions.view")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => onEdit(site)}>
<Edit className="mr-2 h-4 w-4 text-blue-500" />
<Edit className="mr-2 h-4 w-4 text-primary-500" />
{t("sites.actions.edit")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => onBranding(site)}>

View File

@@ -48,7 +48,7 @@ const TemplateCard = () => {
templateList.find((t) => t.id === selectedTemplateId) ?? null;
return (
<Card className="bg-gradient-to-br from-blue-50 to-indigo-50">
<Card className="bg-gradient-to-br from-primary-50 to-primary-50">
<CardHeader>
<div className="flex items-center justify-between">
<div>

View File

@@ -55,12 +55,12 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
${hasPlaceholders ? `
.placeholder {
${isDarkMode ? `
background-color: #1e3a5f;
border: 1px dashed #60a5fa;
color: #93c5fd;
background-color: #065f46;
border: 1px dashed #34d399;
color: #a7f3d0;
` : `
background-color: #e0f2fe;
border: 1px dashed #38bdf8;
background-color: #ecfdf5;
border: 1px dashed #0EA371;
`}
padding: 2px 4px;
border-radius: 4px;

View File

@@ -1619,11 +1619,11 @@ export const TemplateSampleForm = ({
{selectedExternalCC.map((unitName, idx) => (
<div
key={idx}
className="flex items-center gap-2 px-3 py-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 rounded-full text-sm">
className="flex items-center gap-2 px-3 py-1 bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 rounded-full text-sm">
<span>{unitName}</span>
<button
onClick={() => handleRemoveExternalCC(unitName)}
className="hover:text-blue-900 dark:hover:text-blue-100">
className="hover:text-primary-900 dark:hover:text-primary-100">
<X className="h-4 w-4" />
</button>
</div>
@@ -1692,11 +1692,11 @@ export const TemplateSampleForm = ({
return (
<div
key={recipientId}
className="flex items-center gap-2 px-3 py-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 rounded-full text-sm">
className="flex items-center gap-2 px-3 py-1 bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 rounded-full text-sm">
<span>{name}</span>
<button
onClick={() => handleRemoveRecipient(recipientId)}
className="hover:text-blue-900 dark:hover:text-blue-100">
className="hover:text-primary-900 dark:hover:text-primary-100">
<X className="h-4 w-4" />
</button>
</div>

View File

@@ -79,7 +79,7 @@ export const TemplateSamplePreviewPage = ({
</button>
<button
onClick={handleDownloadPDF}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center gap-2"
className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium flex items-center gap-2"
>
<Download className="h-4 w-4" />
{t("common.download", "Download")}

View File

@@ -40,7 +40,7 @@ export const LETTER_PLACEMENT_CANVAS_ASSET_KEYS: LetterAbsoluteAssetKey[] = [
];
const ASSET_COLORS: Record<LetterAbsoluteAssetKey, string> = {
signatures: "border-blue-500 bg-blue-500/20",
signatures: "border-primary-500 bg-primary-500/20",
seal: "border-emerald-500 bg-emerald-500/20",
stamp: "border-amber-500 bg-amber-500/20",
senderSignature: "border-violet-500 bg-violet-500/20",

View File

@@ -100,7 +100,7 @@ const ReviewAllPendingUsers = () => {
<div className="p-6 w-full">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
<Users className="h-6 w-6 text-blue-600" />
<Users className="h-6 w-6 text-primary-600" />
{t("pendingUsers.title")}
</h1>
</div>
@@ -133,7 +133,7 @@ const ReviewAllPendingUsers = () => {
{/* Header with count */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
<Users className="h-6 w-6 text-blue-600" />
<Users className="h-6 w-6 text-primary-600" />
{t("pendingUsers.title")}
</h1>
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">

View File

@@ -50,7 +50,7 @@ const LetterTemplatesCard = ({ unitId }: Props) => {
null;
return (
<Card className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700">
<Card className="bg-gradient-to-br from-primary-50 to-primary-50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700">
<CardHeader>
<div className="flex items-center justify-between">
<div>

View File

@@ -358,7 +358,7 @@ const LetterTemplatesTable = ({ unitId }: Props) => {
key={template.id}
className={
template.isGlobal
? "bg-blue-50/50 hover:bg-blue-50 dark:bg-blue-950/30 dark:hover:bg-blue-900/40"
? "bg-primary-50/50 hover:bg-primary-50 dark:bg-primary-950/30 dark:hover:bg-primary-900/40"
: ""
}
>
@@ -367,7 +367,7 @@ const LetterTemplatesTable = ({ unitId }: Props) => {
<span className="flex items-center gap-2">
{localizedName(template.name)}
{template.isGlobal && (
<span className="rounded bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-900/50 dark:text-blue-200">
<span className="rounded bg-primary-100 px-2 py-0.5 text-[10px] font-semibold text-primary-700 dark:bg-primary-900/50 dark:text-primary-200">
Global
</span>
)}
@@ -409,7 +409,7 @@ const LetterTemplatesTable = ({ unitId }: Props) => {
"contentManagement.adoptTemplate",
"Adopt Template",
)}
className="h-8 border-blue-200 px-3 text-blue-700 hover:bg-blue-100 hover:text-blue-800 dark:border-blue-700/60 dark:text-blue-300 dark:hover:bg-blue-900/40 dark:hover:text-blue-200"
className="h-8 border-primary-200 px-3 text-primary-700 hover:bg-primary-100 hover:text-primary-800 dark:border-primary-700/60 dark:text-primary-300 dark:hover:bg-primary-900/40 dark:hover:text-primary-200"
>
{t("common.adopt", "Adopt")}
</Button>

View File

@@ -160,7 +160,7 @@ export const PrefixSuffixTable = ({
return (
<button
onClick={() => openCountPopup(item)}
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline cursor-pointer">
className="text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300 underline cursor-pointer">
{count}
</button>
);

View File

@@ -425,7 +425,7 @@ export function TagBasedReferenceNumbers({
<TableCell>
<button
onClick={() => openCountPopup(prefix)}
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline cursor-pointer text-sm"
className="text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300 underline cursor-pointer text-sm"
>
{count}
</button>

View File

@@ -230,7 +230,7 @@ export default function PositionManagement() {
value={selectedUnitId}
onValueChange={(value) => setSelectedUnitId(value)}
>
<SelectTrigger className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm [&>span]:truncate">
<SelectTrigger className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm [&>span]:truncate">
<SelectValue placeholder="Select a Unit" />
</SelectTrigger>
<SelectContent>

View File

@@ -253,10 +253,10 @@ const PositionTypeMigrationModal: React.FC<PositionTypeMigrationModalProps> = ({
{/* Display selected from/to */}
{fromId && toId && (
<p className="mb-4 p-3 bg-blue-50 dark:bg-blue-950/30 rounded border border-blue-200 dark:border-blue-800">
<p className="mb-4 p-3 bg-primary-50 dark:bg-primary-950/30 rounded border border-primary-200 dark:border-primary-800">
<span className="text-sm text-gray-600 dark:text-gray-300">{t("migration.migrationPath")}:</span>
<br />
<strong className="text-blue-700 dark:text-blue-400">{fromName}</strong>
<strong className="text-primary-700 dark:text-primary-400">{fromName}</strong>
<span className="mx-2"></span>
<strong className="text-primary-700 dark:text-primary-400">{toName}</strong>
</p>
@@ -380,7 +380,7 @@ const PositionTypeMigrationModal: React.FC<PositionTypeMigrationModalProps> = ({
<AlertDialog>
<AlertDialogTrigger asChild>
<button
className="w-full mt-3 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full mt-3 bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
disabled={
migratePositionsByPositions.isPending ||
selectedPositions.length === 0 ||
@@ -404,7 +404,7 @@ const PositionTypeMigrationModal: React.FC<PositionTypeMigrationModalProps> = ({
<AlertDialogCancel className="bg-white dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">{t("common.Cancel")}</AlertDialogCancel>
<AlertDialogAction
onClick={handleMigrateSelected}
className="bg-blue-600 hover:bg-blue-700 text-white"
className="bg-primary-600 hover:bg-primary-700 text-white"
>
{t("common.Confirm")}
</AlertDialogAction>

View File

@@ -436,7 +436,7 @@ export const TeamMembers = ({
return (
<div className="flex justify-center py-10">
<div className="flex flex-col items-center">
<div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin mb-2"></div>
<div className="w-8 h-8 border-4 border-t-primary-500 border-primary-200 rounded-full animate-spin mb-2"></div>
<p className="text-sm text-gray-500 dark:text-gray-400">Loading team members...</p>
</div>
</div>
@@ -497,7 +497,7 @@ export const TeamMembers = ({
{selectedEmployee && (
<div className="flex flex-col items-center space-y-4 py-4">
<Avatar className="w-20 h-20 border-2 border-gray-200 dark:border-gray-600">
<AvatarFallback className="text-xl bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300">
<AvatarFallback className="text-xl bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300">
{getInitials(
localizedName(selectedEmployee.user.name),
).toUpperCase()}
@@ -532,7 +532,7 @@ export const TeamMembers = ({
</div>
<div className="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
<div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-400">
<div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400">
<Mail className="w-5 h-5" />
</div>
<div>
@@ -545,7 +545,7 @@ export const TeamMembers = ({
</div>
</div>
<div className="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
<div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-400">
<div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400">
<PhoneCall className="w-5 h-5" />
</div>
<div>
@@ -574,7 +574,7 @@ export const TeamMembers = ({
{selectedEmployee && (
<div className="flex flex-col items-center space-y-4 py-4">
<Avatar className="w-20 h-20 border-2 border-gray-200 dark:border-gray-600">
<AvatarFallback className="text-xl bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300">
<AvatarFallback className="text-xl bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300">
{getInitials(
localizedName(selectedEmployee.user.name),
).toUpperCase()}

View File

@@ -493,7 +493,7 @@ const UserManagementTree = () => {
size="sm"
onClick={() => setShowEmployeeSearch(true)}
disabled={!organizationId}
className="bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100 whitespace-nowrap dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800 dark:hover:bg-blue-900/50"
className="bg-primary-50 text-primary-700 border-primary-200 hover:bg-primary-100 whitespace-nowrap dark:bg-primary-900/30 dark:text-primary-400 dark:border-primary-800 dark:hover:bg-primary-900/50"
>
<UserCircle className="h-4 w-4 mr-2" />
{t("search.searchAllEmployees")}
@@ -526,7 +526,7 @@ const UserManagementTree = () => {
size="sm"
onClick={() => setShowResendModal(true)}
disabled={isSendingInvitations}
className="border border-blue-200 bg-blue-50 text-blue-700 hover:border-blue-300 hover:bg-blue-100 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-200 dark:hover:border-blue-700 dark:hover:bg-blue-900 dark:hover:text-white"
className="border border-primary-200 bg-primary-50 text-primary-700 hover:border-primary-300 hover:bg-primary-100 dark:border-primary-900 dark:bg-primary-950 dark:text-primary-200 dark:hover:border-primary-700 dark:hover:bg-primary-900 dark:hover:text-white"
>
<Mail className="h-4 w-4 mr-2" />
{t("userManagement.resendInvitation", "Resend Invitation")}

View File

@@ -89,7 +89,7 @@ export function ViewUsers({ unitId, onClose }: ViewUsersProps) {
case "admin":
return "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300";
case "manager":
return "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300";
return "bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300";
default:
return "bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300";
}

View File

@@ -149,7 +149,7 @@ export const OrganizationEmployeeSearch: React.FC<
return (
<div className="flex justify-center py-12">
<div className="flex flex-col items-center">
<div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin mb-2"></div>
<div className="w-8 h-8 border-4 border-t-primary-500 border-primary-200 rounded-full animate-spin mb-2"></div>
<p className="text-sm text-gray-500 dark:text-gray-400">
{t("search.searchingEmployees")}
</p>

View File

@@ -66,7 +66,7 @@ export const UnitSelectionModal: React.FC<UnitSelectionModalProps> = ({
{isLoading ? (
<div className="text-center py-12">
<div className="flex flex-col items-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto"></div>
<p className="mt-2 dark:text-gray-400">{t("loadingUnits")}</p>
</div>
</div>
@@ -79,7 +79,7 @@ export const UnitSelectionModal: React.FC<UnitSelectionModalProps> = ({
<button
key={unit.id}
onClick={() => onSelectUnit(unit.id)}
className="w-full text-left p-4 rounded border border-gray-200 hover:bg-gray-100 hover:shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-blue-400"
className="w-full text-left p-4 rounded border border-gray-200 hover:bg-gray-100 hover:shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-primary-500 cursor-pointer dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-primary-400"
>
<div className="font-medium dark:text-gray-200 truncate">
{unit.name?.en || unit.name}

View File

@@ -107,7 +107,7 @@ export const EmployeePositionsDialog: React.FC<
<DialogContent className="sm:max-w-lg dark:bg-gray-800">
<DialogHeader>
<DialogTitle className="flex items-center gap-2 dark:text-white">
<Briefcase className="h-5 w-5 text-blue-600 dark:text-blue-400" />
<Briefcase className="h-5 w-5 text-primary-600 dark:text-primary-400" />
{t("positions.employeePositions")}
</DialogTitle>
</DialogHeader>
@@ -133,7 +133,7 @@ export const EmployeePositionsDialog: React.FC<
key={position.id}
className="flex items-center justify-between p-4 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700/50 hover:border-gray-300 dark:hover:border-gray-500 transition-colors">
<div className="flex items-center gap-3 flex-1">
<div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400">
<div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900/40 text-primary-600 dark:text-primary-400">
<Briefcase className="h-4 w-4" />
</div>
<div className="min-w-0 flex-1">

View File

@@ -182,7 +182,7 @@ export const DepartmentList = ({
key={pos.id}
className={cn(
"flex items-center gap-2 text-sm py-1 pl-8 border-l-2 border-primary-100 dark:border-primary-800 ml-4 text-gray-800 dark:text-gray-200",
expandedState[pos.id] ? "bg-blue-50 dark:bg-blue-900/20" : "hover:bg-blue-50 dark:hover:bg-blue-900/20"
expandedState[pos.id] ? "bg-primary-50 dark:bg-primary-900/20" : "hover:bg-primary-50 dark:hover:bg-primary-900/20"
)}
onClick={() => toggleExpand(pos.id)}
>
@@ -200,7 +200,7 @@ export const DepartmentList = ({
}}
/>
<FolderPlus
className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"
onClick={(e) => {
e.stopPropagation();
onAddPosition?.(pos.id, "sub");

View File

@@ -914,7 +914,7 @@ const Branding = () => {
label={t("branding.socialMedia.facebook")}
placeholder={t("branding.socialMedia.facebookPlaceholder")}
register={register}
icon={<FaFacebook className="h-4 w-4 text-blue-600" />}
icon={<FaFacebook className="h-4 w-4 text-primary-600" />}
/>
<SocialInput
@@ -922,7 +922,7 @@ const Branding = () => {
label={t("branding.socialMedia.twitter")}
placeholder={t("branding.socialMedia.twitterPlaceholder")}
register={register}
icon={<FaTwitter className="h-4 w-4 text-sky-500" />}
icon={<FaTwitter className="h-4 w-4 text-primary-500" />}
/>
<SocialInput
@@ -930,7 +930,7 @@ const Branding = () => {
label={t("branding.socialMedia.linkedin")}
placeholder={t("branding.socialMedia.linkedinPlaceholder")}
register={register}
icon={<FaLinkedin className="h-4 w-4 text-blue-700" />}
icon={<FaLinkedin className="h-4 w-4 text-primary-700" />}
/>
<SocialInput
@@ -954,7 +954,7 @@ const Branding = () => {
label={t("branding.socialMedia.telegram")}
placeholder={t("branding.socialMedia.telegramPlaceholder")}
register={register}
icon={<Send className="h-4 w-4 text-sky-500" />}
icon={<Send className="h-4 w-4 text-primary-500" />}
/>
<SocialInput

View File

@@ -20,7 +20,7 @@ export const ViewGoal = () => {
<div className="md:w-2/3 p-6 md:p-8 flex flex-col justify-center">
<div className="mb-6">
<div className="flex items-center mb-6">
<div className="w-12 h-12 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-600 flex items-center justify-center text-white text-2xl mr-4">
<div className="w-12 h-12 rounded-lg bg-gradient-to-r from-primary-500 to-primary-600 flex items-center justify-center text-white text-2xl mr-4">
<ImageIcon className="w-6 h-6" />
</div>
<div>
@@ -75,7 +75,7 @@ export const ViewGoal = () => {
</div>
{/* Visual Section */}
<div className="md:w-1/3 bg-gradient-to-br from-blue-50 to-indigo-100 p-6 md:p-8 flex flex-col justify-center items-center">
<div className="md:w-1/3 bg-gradient-to-br from-primary-50 to-primary-100 p-6 md:p-8 flex flex-col justify-center items-center">
<div className="text-center">
<div className="w-32 h-32 mx-auto mb-6 bg-white rounded-2xl shadow-lg flex items-center justify-center overflow-hidden">
{item?.presigned ? (

View File

@@ -13,14 +13,14 @@ export const ViewMessage = () => {
const locale = i18n.language;
const localizedName = useLocalizedName();
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 md:p-8">
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center p-4 md:p-8">
<div className="max-w-6xl w-full">
{/* Header */}
<div className="text-center mb-12">
<h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
{t("Leadership Message")}
</h1>
<div className="w-24 h-1 bg-indigo-600 mx-auto"></div>
<div className="w-24 h-1 bg-primary-600 mx-auto"></div>
</div>
{/* Card */}
@@ -54,7 +54,7 @@ export const ViewMessage = () => {
</div>
{/* Checkmark */}
<div className="absolute top-6 right-6 bg-white text-indigo-600 rounded-full p-2 shadow-lg">
<div className="absolute top-6 right-6 bg-white text-primary-600 rounded-full p-2 shadow-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
@@ -76,8 +76,8 @@ export const ViewMessage = () => {
<div className="md:w-3/5 p-6 md:p-8 flex flex-col justify-center">
<div className="mb-6">
<div className="flex items-center mb-6">
<div className="w-10 h-1 bg-indigo-600 mr-3"></div>
<h3 className="text-lg font-semibold text-indigo-600 uppercase tracking-wide">
<div className="w-10 h-1 bg-primary-600 mr-3"></div>
<h3 className="text-lg font-semibold text-primary-600 uppercase tracking-wide">
{t("Message Content")}
</h3>
</div>

View File

@@ -121,7 +121,7 @@ export const AddNews = () => {
{/* Category Selection */}
<div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
<div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
<div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
Category
</h3>
<div className="space-y-2">
@@ -153,7 +153,7 @@ export const AddNews = () => {
{/* Title Section */}
<div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
<div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
<div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
Title
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">

View File

@@ -102,9 +102,9 @@ export const EditNews = () => {
</Label>
{preview && (
<div className="mb-3 flex items-center justify-between bg-blue-50 p-3 rounded-lg">
<div className="mb-3 flex items-center justify-between bg-primary-50 p-3 rounded-lg">
<div className="flex items-center">
<ImageIcon className="h-5 w-5 text-blue-500 mr-2" />
<ImageIcon className="h-5 w-5 text-primary-500 mr-2" />
<span className="text-sm font-medium truncate max-w-[200px]">
{existingName || "Selected Image"}
</span>
@@ -114,7 +114,7 @@ export const EditNews = () => {
variant="ghost"
size="sm"
onClick={onView}
className="text-blue-600 hover:text-blue-800"
className="text-primary-600 hover:text-primary-800"
>
Preview
</Button>
@@ -186,7 +186,7 @@ export const EditNews = () => {
{/* Category Selection */}
<div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
<div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
<div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
Category
</h3>
<div className="space-y-2">
@@ -218,7 +218,7 @@ export const EditNews = () => {
{/* Title Section */}
<div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
<div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
<div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
Title
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">

View File

@@ -35,7 +35,7 @@ export const NewsColumnDefn = ({
? rowData.newsCategory?.newsCategoryTitle?.am
: rowData.newsCategory?.newsCategoryTitle?.en;
return (
<span className="text-sm text-blue-600 bg-blue-50 px-2 py-1 rounded-full">
<span className="text-sm text-primary-600 bg-primary-50 px-2 py-1 rounded-full">
{categoryTitle || "No Category"}
</span>
);

View File

@@ -346,7 +346,7 @@ export const TemplateForm = () => {
{/* Names Section */}
<div className="bg-gray-50 p-5 rounded-lg border border-gray-100 space-y-4">
<h3 className="text-lg font-semibold text-gray-800 flex items-center">
<div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
<div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
{t("template.names", "Names")}
</h3>

View File

@@ -231,7 +231,7 @@ export const TemplateList = () => {
</TableCell>
<TableCell className="text-gray-600">
{template.fileInfo?.originalname ? (
<span className="text-blue-600 hover:text-blue-700 cursor-pointer">
<span className="text-primary-600 hover:text-primary-700 cursor-pointer">
{template.fileInfo.originalname}
</span>
) : (

View File

@@ -97,7 +97,7 @@
// {/* Title Section */}
// <div className="bg-gray-50 p-5 rounded-lg border border-gray-100">
// <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
// <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
// <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
// Color
// </h3>
// <div className="grid grid-cols-1 md:grid-cols-2 gap-6">

View File

@@ -128,7 +128,7 @@ export const EditTheme = () => {
{/* Title Section */}
<div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
<div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
<div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
Color
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">

View File

@@ -11,10 +11,10 @@ export const ViewVision = () => {
const locale = i18n.language;
const localizedName = useLocalizedName();
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 md:p-8">
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center p-4 md:p-8">
<div className="max-w-6xl w-full">
{/* Header */}
<div className="md:w-1/3 bg-gradient-to-br from-blue-50 to-indigo-100 p-6 md:p-8 flex flex-col justify-center items-center">
<div className="md:w-1/3 bg-gradient-to-br from-primary-50 to-primary-100 p-6 md:p-8 flex flex-col justify-center items-center">
<div className="text-center">
<div className="w-32 h-32 mx-auto mb-6 bg-white rounded-2xl shadow-lg flex items-center justify-center">
<span className="text-5xl">{"image from goal"}</span>

View File

@@ -40,7 +40,7 @@ export function FormInputBox({
return (
<div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
<div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
<div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
{label}
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -190,7 +190,7 @@ export const Section = ({
}) => (
<div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
<div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
<div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
{title}
</h3>
{children}
@@ -230,9 +230,9 @@ export const ImageUpload = ({
</Label>
{preview && (
<div className="mb-3 flex items-center justify-between bg-blue-50 dark:bg-blue-900/30 p-3 rounded-lg">
<div className="mb-3 flex items-center justify-between bg-primary-50 dark:bg-primary-900/30 p-3 rounded-lg">
<div className="flex items-center">
<ImageIcon className="h-5 w-5 text-blue-500 dark:text-blue-400 mr-2" />
<ImageIcon className="h-5 w-5 text-primary-500 dark:text-primary-400 mr-2" />
<span className="text-sm font-medium truncate max-w-[200px] dark:text-gray-200">
{existingName || "Selected Image"}
</span>
@@ -242,7 +242,7 @@ export const ImageUpload = ({
variant="ghost"
size="sm"
onClick={onView}
className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
className="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300"
>
Preview
</Button>