mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
fix ui
This commit is contained in:
@@ -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)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@@ -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"),
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
|
||||
@@ -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> */}
|
||||
|
||||
@@ -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"
|
||||
}`}
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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`}
|
||||
>
|
||||
|
||||
@@ -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)}>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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")}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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()}
|
||||
|
||||
@@ -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")}
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
) : (
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user