refactor: update styling and color classes across components
- Changed error message styling in ICalImportModal to use new color classes. - Updated task completion styling in TaskListView to use new success color classes. - Modified selected styling in ContactListItem tests to reflect new background class. - Adjusted duplicate warning styling in ContactImportDialog to use new warning color classes. - Refactored background and border colors in CalendarInvitationBanner for various statuses. - Updated email list item and viewer components to use new warning and success color classes. - Refined styling for unread indicators in email components. - Enhanced error fallback styling in error components to use new warning color classes. - Updated filter rule modal button hover styles to use new destructive color classes. - Added experimental feature descriptions in Plugins and Themes settings. - Refined vacation settings validation warning styling to use new warning color classes. - Updated toast component styles to use new color classes for different states. - Introduced a new built-in theme 'Qui' with specific color variables. - Adjusted email security status colors to use new warning color classes.
This commit is contained in:
Linus Rath
@@ -182,7 +182,7 @@ export function CalendarDayView({
|
||||
className={cn(
|
||||
"flex-shrink-0 w-3.5 h-3.5 rounded-full border flex items-center justify-center",
|
||||
isCompleted
|
||||
? "bg-green-500 border-green-500 text-white"
|
||||
? "bg-success border-success text-success-foreground"
|
||||
: "border-muted-foreground/40 hover:border-primary"
|
||||
)}
|
||||
>
|
||||
@@ -288,8 +288,8 @@ export function CalendarDayView({
|
||||
style={{ top: (nowMinutes / 60) * HOUR_HEIGHT }}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-red-500 -ml-1" />
|
||||
<div className="flex-1 h-px bg-red-500" />
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-destructive -ml-1" />
|
||||
<div className="flex-1 h-px bg-destructive" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -252,7 +252,7 @@ export function CalendarWeekView({
|
||||
>
|
||||
<span className={cn(
|
||||
"w-2.5 h-2.5 rounded-full border flex-shrink-0 flex items-center justify-center",
|
||||
isCompleted ? "bg-green-500 border-green-500" : "border-current"
|
||||
isCompleted ? "bg-success border-success" : "border-current"
|
||||
)}>
|
||||
{isCompleted && <Check className="h-2 w-2 text-white" />}
|
||||
</span>
|
||||
@@ -402,8 +402,8 @@ export function CalendarWeekView({
|
||||
style={{ top: (nowMinutes / 60) * HOUR_HEIGHT }}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="w-2 h-2 rounded-full bg-red-500 -ml-1" />
|
||||
<div className="flex-1 h-px bg-red-500" />
|
||||
<div className="w-2 h-2 rounded-full bg-destructive -ml-1" />
|
||||
<div className="flex-1 h-px bg-destructive" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -297,7 +297,7 @@ export function EventDetailPopover({
|
||||
<p className="text-xs text-muted-foreground mt-0.5 pl-[18px]">
|
||||
{calendar.name}
|
||||
{event.status === "tentative" && (
|
||||
<span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
|
||||
<span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-warning/15 text-warning">
|
||||
{t("detail.tentative")}
|
||||
</span>
|
||||
)}
|
||||
@@ -507,8 +507,8 @@ export function EventDetailPopover({
|
||||
onClick={() => onRsvp("accepted")}
|
||||
className={
|
||||
userCurrentStatus === "accepted"
|
||||
? "bg-green-600 hover:bg-green-700 text-white dark:bg-green-500 dark:hover:bg-green-600"
|
||||
: "text-green-600 dark:text-green-400 border-green-300 dark:border-green-700 hover:bg-green-50 dark:hover:bg-green-950"
|
||||
? "bg-success hover:bg-success/80 text-success-foreground"
|
||||
: "text-success border-success/30 hover:bg-success/10"
|
||||
}
|
||||
>
|
||||
{userCurrentStatus === "accepted" && <Check className="w-3.5 h-3.5 mr-1" />}
|
||||
@@ -520,8 +520,8 @@ export function EventDetailPopover({
|
||||
onClick={() => onRsvp("tentative")}
|
||||
className={
|
||||
userCurrentStatus === "tentative"
|
||||
? "bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-500 dark:hover:bg-amber-600"
|
||||
: "border border-amber-500 text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950"
|
||||
? "bg-warning hover:bg-warning/80 text-warning-foreground"
|
||||
: "border border-warning/30 text-warning hover:bg-warning/10"
|
||||
}
|
||||
>
|
||||
{userCurrentStatus === "tentative" && <Check className="w-3.5 h-3.5 mr-1" />}
|
||||
@@ -533,8 +533,8 @@ export function EventDetailPopover({
|
||||
onClick={() => onRsvp("declined")}
|
||||
className={
|
||||
userCurrentStatus === "declined"
|
||||
? "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600"
|
||||
: "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950"
|
||||
? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
|
||||
: "text-destructive hover:bg-destructive/10"
|
||||
}
|
||||
>
|
||||
{userCurrentStatus === "declined" && <Check className="w-3.5 h-3.5 mr-1" />}
|
||||
@@ -548,7 +548,7 @@ export function EventDetailPopover({
|
||||
<div className="px-4 py-2.5 border-t border-border flex items-center gap-1.5">
|
||||
{showDeleteConfirm ? (
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<span className="text-sm text-red-600 dark:text-red-400 flex-1">
|
||||
<span className="text-sm text-destructive flex-1">
|
||||
{t("form.delete_confirm")}
|
||||
</span>
|
||||
<Button
|
||||
@@ -611,9 +611,9 @@ function ParticipantStatusBadge({
|
||||
t: ReturnType<typeof useTranslations>;
|
||||
}) {
|
||||
const colors: Record<string, string> = {
|
||||
accepted: "text-green-600 dark:text-green-400",
|
||||
declined: "text-red-600 dark:text-red-400",
|
||||
tentative: "text-amber-600 dark:text-amber-400",
|
||||
accepted: "text-success",
|
||||
declined: "text-destructive",
|
||||
tentative: "text-warning",
|
||||
"needs-action": "text-muted-foreground",
|
||||
};
|
||||
const labels: Record<string, string> = {
|
||||
|
||||
@@ -530,8 +530,8 @@ export function EventModal({
|
||||
variant={userCurrentStatus === "accepted" ? "default" : "outline"}
|
||||
onClick={() => handleRsvp("accepted")}
|
||||
className={userCurrentStatus === "accepted"
|
||||
? "bg-green-600 hover:bg-green-700 text-white dark:bg-green-500 dark:hover:bg-green-600"
|
||||
: "text-green-600 dark:text-green-400 border-green-300 dark:border-green-700 hover:bg-green-50 dark:hover:bg-green-950"}
|
||||
? "bg-success hover:bg-success/80 text-success-foreground"
|
||||
: "text-success border-success/30 hover:bg-success/10"}
|
||||
>
|
||||
{userCurrentStatus === "accepted" && <Check className="w-4 h-4 mr-1" />}
|
||||
{t("participants.accepted")}
|
||||
@@ -541,8 +541,8 @@ export function EventModal({
|
||||
variant={userCurrentStatus === "tentative" ? "default" : "outline"}
|
||||
onClick={() => handleRsvp("tentative")}
|
||||
className={userCurrentStatus === "tentative"
|
||||
? "bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-500 dark:hover:bg-amber-600"
|
||||
: "border border-amber-500 text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950"}
|
||||
? "bg-warning hover:bg-warning/80 text-warning-foreground"
|
||||
: "border border-warning/30 text-warning hover:bg-warning/10"}
|
||||
>
|
||||
{userCurrentStatus === "tentative" && <Check className="w-4 h-4 mr-1" />}
|
||||
{t("participants.tentative")}
|
||||
@@ -552,8 +552,8 @@ export function EventModal({
|
||||
variant={userCurrentStatus === "declined" ? "default" : "ghost"}
|
||||
onClick={() => handleRsvp("declined")}
|
||||
className={userCurrentStatus === "declined"
|
||||
? "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600"
|
||||
: "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950"}
|
||||
? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
|
||||
: "text-destructive hover:bg-destructive/10"}
|
||||
>
|
||||
{userCurrentStatus === "declined" && <Check className="w-4 h-4 mr-1" />}
|
||||
{t("participants.declined")}
|
||||
@@ -701,8 +701,8 @@ export function EventModal({
|
||||
{onDelete && (
|
||||
showDeleteConfirm ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-red-600 dark:text-red-400">{t("form.delete_confirm")}</span>
|
||||
<Button variant="outline" size="sm" onClick={() => { onDelete(event.id, hasParticipants || undefined); onClose(); }} className="text-red-600 dark:text-red-400 border-red-300 dark:border-red-700">
|
||||
<span className="text-sm text-destructive">{t("form.delete_confirm")}</span>
|
||||
<Button variant="outline" size="sm" onClick={() => { onDelete(event.id, hasParticipants || undefined); onClose(); }} className="text-destructive border-destructive/30">
|
||||
{t("events.delete")}
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(false)}>
|
||||
@@ -710,7 +710,7 @@ export function EventModal({
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(true)} className="text-red-600 dark:text-red-400">
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(true)} className="text-destructive">
|
||||
<Trash2 className="w-4 h-4 mr-1" />
|
||||
{t("events.delete")}
|
||||
</Button>
|
||||
@@ -997,9 +997,9 @@ function StatusBadge({ status, isOrganizer, t }: {
|
||||
return <span className="text-xs text-primary">{t("participants.organizer")}</span>;
|
||||
}
|
||||
const colors: Record<string, string> = {
|
||||
accepted: "text-green-600 dark:text-green-400",
|
||||
declined: "text-red-600 dark:text-red-400",
|
||||
tentative: "text-amber-600 dark:text-amber-400",
|
||||
accepted: "text-success",
|
||||
declined: "text-destructive",
|
||||
tentative: "text-warning",
|
||||
"needs-action": "text-muted-foreground",
|
||||
};
|
||||
const labels: Record<string, string> = {
|
||||
|
||||
@@ -349,7 +349,7 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30 rounded-md px-3 py-2">
|
||||
<div className="text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -204,7 +204,7 @@ export function TaskListView({
|
||||
className={cn(
|
||||
"mt-0.5 flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",
|
||||
isCompleted
|
||||
? "bg-green-500 border-green-500 text-white"
|
||||
? "bg-success border-success text-success-foreground"
|
||||
: "border-muted-foreground/40 hover:border-primary"
|
||||
)}
|
||||
aria-label={isCompleted ? t("tasks.mark_incomplete") : t("tasks.mark_complete")}
|
||||
|
||||
Reference in New Issue
Block a user