ui(tokens): migrate text-kodo-red → text-destructive, text-kodo-lime → text-success (56 files)
Replace remaining legacy semantic color tokens: - text-kodo-red → text-destructive (36 files, 50 instances): errors, deletions, validation, destructive actions - text-kodo-lime → text-success (36 files, 48 instances): success states, confirmations, positive indicators These tokens now adapt to theme changes instead of being hardcoded. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke
parent
58720410b6
commit
6cd4b55971
56 changed files with 103 additions and 103 deletions
|
|
@ -41,7 +41,7 @@ function formatRequest(request: QueuedRequest): string {
|
|||
function getPriorityColor(priority: QueuedRequest['priority']): string {
|
||||
switch (priority) {
|
||||
case 'high':
|
||||
return 'bg-kodo-red/20 text-kodo-red border-kodo-red/30';
|
||||
return 'bg-kodo-red/20 text-destructive border-kodo-red/30';
|
||||
case 'normal':
|
||||
return 'bg-muted/20 text-kodo-steel border-border/30';
|
||||
case 'low':
|
||||
|
|
@ -182,7 +182,7 @@ export function OfflineQueueManager({
|
|||
|
||||
{/* Retry Count */}
|
||||
{request.retryCount > 0 && (
|
||||
<span className="flex items-center gap-1 text-kodo-red">
|
||||
<span className="flex items-center gap-1 text-destructive">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
{request.retryCount} retry
|
||||
{request.retryCount > 1 ? 'ies' : ''}
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ export function RateLimitIndicator() {
|
|||
className={cn(
|
||||
'flex items-center gap-2 px-4 py-1.5 rounded-lg text-xs font-medium transition-all',
|
||||
isCritical
|
||||
? 'bg-kodo-red/10 text-kodo-red border border-kodo-red/30'
|
||||
? 'bg-kodo-red/10 text-destructive border border-kodo-red/30'
|
||||
: 'bg-kodo-gold/10 text-kodo-gold border border-kodo-gold/30',
|
||||
)}
|
||||
role="alert"
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
|
|||
></div>
|
||||
<div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
|
||||
<div className="p-4 border-b border-kodo-red/30 bg-kodo-red/10 flex justify-between items-center">
|
||||
<h3 className="font-bold text-kodo-red flex items-center gap-2">
|
||||
<h3 className="font-bold text-destructive flex items-center gap-2">
|
||||
<ShieldBan className="w-5 h-5 fill-current" /> Suspend User
|
||||
</h3>
|
||||
<button onClick={onClose}>
|
||||
|
|
@ -96,7 +96,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
|
|||
></div>
|
||||
</div>
|
||||
<span
|
||||
className={`text-xs ${isPermanent ? 'text-kodo-red font-bold' : 'text-muted-foreground'}`}
|
||||
className={`text-xs ${isPermanent ? 'text-destructive font-bold' : 'text-muted-foreground'}`}
|
||||
>
|
||||
Perm
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export const TrackList: React.FC = () => {
|
|||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-6 text-center border border-kodo-red/30 bg-kodo-red/10 rounded-xl text-kodo-red">
|
||||
<div className="p-6 text-center border border-kodo-red/30 bg-kodo-red/10 rounded-xl text-destructive">
|
||||
<AlertCircle className="w-6 h-6 mx-auto mb-2" />
|
||||
<p className="text-sm">Unable to load trending audio.</p>
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ export const APIPlaygroundView: React.FC = () => {
|
|||
<h3 className="font-bold text-white">Response</h3>
|
||||
{response && (
|
||||
<div className="flex gap-2">
|
||||
<span className="text-xs font-bold text-kodo-lime bg-kodo-lime/10 px-2 py-1 rounded">
|
||||
<span className="text-xs font-bold text-success bg-kodo-lime/10 px-2 py-1 rounded">
|
||||
200 OK
|
||||
</span>
|
||||
<span className="text-xs font-bold text-muted-foreground bg-white/10 px-2 py-1 rounded">
|
||||
|
|
@ -132,7 +132,7 @@ export const APIPlaygroundView: React.FC = () => {
|
|||
<div className="flex-1 bg-black/30 rounded border border-border/50 p-4 relative group">
|
||||
{response ? (
|
||||
<>
|
||||
<pre className="text-xs text-kodo-lime font-mono whitespace-pre-wrap overflow-auto h-full max-h-layout-drawer">
|
||||
<pre className="text-xs text-success font-mono whitespace-pre-wrap overflow-auto h-full max-h-layout-drawer">
|
||||
{response}
|
||||
</pre>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ export const DeveloperDashboardView: React.FC = () => {
|
|||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-kodo-red hover:bg-kodo-red/10"
|
||||
className="h-8 w-8 text-destructive hover:bg-kodo-red/10"
|
||||
onClick={() => handleRevoke(key.id)}
|
||||
title="Revoke Key"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ export function SwaggerUIDoc({ specUrl, spec, useIframe = false }: SwaggerUIProp
|
|||
const swaggerUiUrl = getSwaggerUIUrl();
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center p-12 min-h-[600px]">
|
||||
<AlertCircle className="w-16 h-16 text-kodo-red mb-4" />
|
||||
<AlertCircle className="w-16 h-16 text-destructive mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
Failed to Load API Documentation
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
|
|||
<div className="relative w-20 h-20 mx-auto">
|
||||
<div className="absolute inset-0 bg-kodo-lime/20 rounded-full animate-ping opacity-50"></div>
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-kodo-lime/20 to-kodo-cyan/20 rounded-full flex items-center justify-center border border-kodo-lime/30 shadow-card-glow-cyan">
|
||||
<Check className="w-10 h-10 text-kodo-lime drop-shadow-lg" />
|
||||
<Check className="w-10 h-10 text-success drop-shadow-lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -47,10 +47,10 @@ export const CourseCard: React.FC<CourseCardProps> = ({
|
|||
<span
|
||||
className={`text-xs px-2 py-0.5 rounded uppercase font-bold ${
|
||||
course.level === 'Advanced'
|
||||
? 'bg-kodo-red/20 text-kodo-red'
|
||||
? 'bg-kodo-red/20 text-destructive'
|
||||
: course.level === 'Intermediate'
|
||||
? 'bg-kodo-gold/20 text-kodo-gold'
|
||||
: 'bg-kodo-lime/20 text-kodo-lime'
|
||||
: 'bg-kodo-lime/20 text-success'
|
||||
}`}
|
||||
>
|
||||
{course.level}
|
||||
|
|
@ -74,7 +74,7 @@ export const CourseCard: React.FC<CourseCardProps> = ({
|
|||
<span>Progress</span>
|
||||
<span
|
||||
className={
|
||||
course.progress === 100 ? 'text-kodo-lime' : 'text-white'
|
||||
course.progress === 100 ? 'text-success' : 'text-white'
|
||||
}
|
||||
>
|
||||
{course.progress}%
|
||||
|
|
@ -85,7 +85,7 @@ export const CourseCard: React.FC<CourseCardProps> = ({
|
|||
color={course.progress === 100 ? 'lime' : 'cyan'}
|
||||
/>
|
||||
{course.progress === 100 && (
|
||||
<div className="flex items-center gap-1 text-xs text-kodo-lime mt-1 font-bold">
|
||||
<div className="flex items-center gap-1 text-xs text-success mt-1 font-bold">
|
||||
<CheckCircle className="w-3 h-3" /> Completed
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -63,11 +63,11 @@ export const QuizModal: React.FC<QuizModalProps> = ({
|
|||
<div className="relative w-full max-w-md bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden p-8 text-center">
|
||||
<div className="mb-6 flex justify-center">
|
||||
{passed ? (
|
||||
<div className="w-20 h-20 bg-kodo-lime/20 rounded-full flex items-center justify-center text-kodo-lime border-2 border-kodo-lime animate-pulse">
|
||||
<div className="w-20 h-20 bg-kodo-lime/20 rounded-full flex items-center justify-center text-success border-2 border-kodo-lime animate-pulse">
|
||||
<CheckCircle className="w-10 h-10" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-20 h-20 bg-kodo-red/20 rounded-full flex items-center justify-center text-kodo-red border-2 border-kodo-red">
|
||||
<div className="w-20 h-20 bg-kodo-red/20 rounded-full flex items-center justify-center text-destructive border-2 border-kodo-red">
|
||||
<AlertCircle className="w-10 h-10" />
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -79,7 +79,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
|
|||
<p className="text-muted-foreground mb-6">
|
||||
You scored{' '}
|
||||
<span
|
||||
className={`font-bold ${passed ? 'text-kodo-lime' : 'text-kodo-red'}`}
|
||||
className={`font-bold ${passed ? 'text-success' : 'text-destructive'}`}
|
||||
>
|
||||
{score}%
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -21,18 +21,18 @@ const ALERT_ICONS = {
|
|||
const ALERT_STYLES = {
|
||||
info: 'bg-muted/10 border-border/30 text-kodo-text-main dark:bg-muted/20 dark:border-border/40 dark:text-kodo-steel',
|
||||
success:
|
||||
'bg-kodo-lime/10 border-kodo-lime/30 text-kodo-text-main dark:bg-kodo-lime/20 dark:border-kodo-lime/40 dark:text-kodo-lime',
|
||||
'bg-kodo-lime/10 border-kodo-lime/30 text-kodo-text-main dark:bg-kodo-lime/20 dark:border-kodo-lime/40 dark:text-success',
|
||||
warning:
|
||||
'bg-kodo-gold/10 border-kodo-gold/30 text-kodo-text-main dark:bg-kodo-gold/20 dark:border-kodo-gold/40 dark:text-kodo-gold',
|
||||
error:
|
||||
'bg-kodo-red/10 border-kodo-red/30 text-kodo-text-main dark:bg-kodo-red/20 dark:border-kodo-red/40 dark:text-kodo-red',
|
||||
'bg-kodo-red/10 border-kodo-red/30 text-kodo-text-main dark:bg-kodo-red/20 dark:border-kodo-red/40 dark:text-destructive',
|
||||
};
|
||||
|
||||
const ICON_STYLES = {
|
||||
info: 'text-kodo-steel dark:text-kodo-steel',
|
||||
success: 'text-kodo-lime dark:text-kodo-lime',
|
||||
success: 'text-success dark:text-success',
|
||||
warning: 'text-kodo-gold dark:text-kodo-gold',
|
||||
error: 'text-kodo-red dark:text-kodo-red',
|
||||
error: 'text-destructive dark:text-destructive',
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -45,11 +45,11 @@ export function PasswordStrengthIndicator({
|
|||
'bg-kodo-lime',
|
||||
];
|
||||
const strengthTextColors = [
|
||||
'text-kodo-red',
|
||||
'text-destructive',
|
||||
'text-kodo-orange',
|
||||
'text-kodo-gold',
|
||||
'text-kodo-steel',
|
||||
'text-kodo-lime',
|
||||
'text-success',
|
||||
];
|
||||
|
||||
if (!password) return null;
|
||||
|
|
@ -91,7 +91,7 @@ export function PasswordStrengthIndicator({
|
|||
<li
|
||||
className={cn(
|
||||
'flex items-center gap-1',
|
||||
strength.checks.length ? 'text-kodo-lime dark:text-kodo-lime' : '',
|
||||
strength.checks.length ? 'text-success dark:text-success' : '',
|
||||
)}
|
||||
>
|
||||
<span>{strength.checks.length ? '✓' : '○'}</span>
|
||||
|
|
@ -100,7 +100,7 @@ export function PasswordStrengthIndicator({
|
|||
<li
|
||||
className={cn(
|
||||
'flex items-center gap-1',
|
||||
strength.checks.upper ? 'text-kodo-lime dark:text-kodo-lime' : '',
|
||||
strength.checks.upper ? 'text-success dark:text-success' : '',
|
||||
)}
|
||||
>
|
||||
<span>{strength.checks.upper ? '✓' : '○'}</span>
|
||||
|
|
@ -109,7 +109,7 @@ export function PasswordStrengthIndicator({
|
|||
<li
|
||||
className={cn(
|
||||
'flex items-center gap-1',
|
||||
strength.checks.lower ? 'text-kodo-lime dark:text-kodo-lime' : '',
|
||||
strength.checks.lower ? 'text-success dark:text-success' : '',
|
||||
)}
|
||||
>
|
||||
<span>{strength.checks.lower ? '✓' : '○'}</span>
|
||||
|
|
@ -118,7 +118,7 @@ export function PasswordStrengthIndicator({
|
|||
<li
|
||||
className={cn(
|
||||
'flex items-center gap-1',
|
||||
strength.checks.number ? 'text-kodo-lime dark:text-kodo-lime' : '',
|
||||
strength.checks.number ? 'text-success dark:text-success' : '',
|
||||
)}
|
||||
>
|
||||
<span>{strength.checks.number ? '✓' : '○'}</span>
|
||||
|
|
@ -127,7 +127,7 @@ export function PasswordStrengthIndicator({
|
|||
<li
|
||||
className={cn(
|
||||
'flex items-center gap-1',
|
||||
strength.checks.special ? 'text-kodo-lime dark:text-kodo-lime' : '',
|
||||
strength.checks.special ? 'text-success dark:text-success' : '',
|
||||
)}
|
||||
>
|
||||
<span>{strength.checks.special ? '✓' : '○'}</span>
|
||||
|
|
|
|||
|
|
@ -140,11 +140,11 @@ export function RegisterForm({
|
|||
<div className="absolute right-3 top-1/2 -translate-y-1/2">
|
||||
{emailValidation.valid ? (
|
||||
<CheckCircle2
|
||||
className="h-5 w-5 text-kodo-lime"
|
||||
className="h-5 w-5 text-success"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
<XCircle className="h-5 w-5 text-kodo-red" aria-hidden="true" />
|
||||
<XCircle className="h-5 w-5 text-destructive" aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -142,11 +142,11 @@ export const LeaderboardView: React.FC = () => {
|
|||
</td>
|
||||
<td className="p-4 text-center">
|
||||
{entry.trend > 0 ? (
|
||||
<span className="text-kodo-lime flex items-center justify-center gap-1">
|
||||
<span className="text-success flex items-center justify-center gap-1">
|
||||
<ChevronUp className="w-4 h-4" /> {entry.trend}
|
||||
</span>
|
||||
) : entry.trend < 0 ? (
|
||||
<span className="text-kodo-red flex items-center justify-center gap-1">
|
||||
<span className="text-destructive flex items-center justify-center gap-1">
|
||||
<ChevronDown className="w-4 h-4" />{' '}
|
||||
{Math.abs(entry.trend)}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ export const ProfileXPView: React.FC<ProfileXPViewProps> = ({ username }) => {
|
|||
Total Lifetime XP
|
||||
</div>
|
||||
<div className="bg-black/30 px-4 py-1 rounded text-xs text-muted-foreground">
|
||||
<span className="text-kodo-lime font-bold">+12%</span> vs Last
|
||||
<span className="text-success font-bold">+12%</span> vs Last
|
||||
Week
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const EquipmentCard: React.FC<EquipmentCardProps> = ({
|
|||
onClick,
|
||||
}) => {
|
||||
const statusColor = {
|
||||
Active: 'text-kodo-lime bg-kodo-lime/10',
|
||||
Active: 'text-success bg-kodo-lime/10',
|
||||
Maintenance: 'text-kodo-orange bg-kodo-orange/10',
|
||||
Sold: 'text-muted-foreground bg-muted/10',
|
||||
Wishlist: 'text-kodo-magenta bg-kodo-magenta/10',
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
|
|||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<Users
|
||||
className={`w-4 h-4 ${isCollaborative ? 'text-kodo-lime' : 'text-muted-foreground'}`}
|
||||
className={`w-4 h-4 ${isCollaborative ? 'text-success' : 'text-muted-foreground'}`}
|
||||
/>
|
||||
<div className="text-sm">
|
||||
<div className="text-white font-bold">Collaborative</div>
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
|
|||
<div className="p-4 border-t border-border bg-kodo-ink flex justify-between items-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-kodo-red hover:bg-kodo-red/10"
|
||||
className="text-destructive hover:bg-kodo-red/10"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
>
|
||||
Delete Playlist
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
|
|||
<span>
|
||||
{playlist.is_public ? 'Public Playlist' : 'Private Playlist'}
|
||||
</span>
|
||||
{/* {playlist.isCollaborative && <span className="bg-kodo-lime/20 text-kodo-lime px-2 py-0.5 rounded">Collaborative</span>} */}
|
||||
{/* {playlist.isCollaborative && <span className="bg-kodo-lime/20 text-success px-2 py-0.5 rounded">Collaborative</span>} */}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-6xl font-display font-bold text-white mb-4 leading-tight">
|
||||
{playlist.title}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export const QueueView: React.FC = () => {
|
|||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-kodo-red hover:bg-kodo-red/10"
|
||||
className="text-destructive hover:bg-kodo-red/10"
|
||||
onClick={clearQueue}
|
||||
icon={<Trash2 className="w-4 h-4" />}
|
||||
>
|
||||
|
|
@ -141,7 +141,7 @@ export const QueueView: React.FC = () => {
|
|||
onClick={toggleAutoplay}
|
||||
>
|
||||
<span
|
||||
className={`text-xs font-bold ${autoplay ? 'text-kodo-lime' : 'text-muted-foreground'}`}
|
||||
className={`text-xs font-bold ${autoplay ? 'text-success' : 'text-muted-foreground'}`}
|
||||
>
|
||||
Autoplay
|
||||
</span>
|
||||
|
|
@ -163,7 +163,7 @@ export const QueueView: React.FC = () => {
|
|||
Queue is empty. Add tracks to keep the vibe going.
|
||||
</p>
|
||||
{autoplay && (
|
||||
<p className="text-xs text-kodo-lime mt-2">
|
||||
<p className="text-xs text-success mt-2">
|
||||
Autoplay is on. We'll pick a song for you.
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -205,7 +205,7 @@ export const QueueView: React.FC = () => {
|
|||
{track.duration}
|
||||
</div>
|
||||
<button
|
||||
className="p-2 text-muted-foreground hover:text-kodo-red opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
className="p-2 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => removeFromQueue(track.id)}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
|
|||
id: Date.now(),
|
||||
user: 'System',
|
||||
text: `You tipped $${amount}: ${message}`,
|
||||
color: 'text-kodo-lime font-bold italic',
|
||||
color: 'text-success font-bold italic',
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
|
@ -125,7 +125,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
|
|||
<span className="text-kodo-steel font-bold">
|
||||
{MOCK_STREAM.streamer}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-kodo-red font-bold animate-pulse">
|
||||
<span className="flex items-center gap-1 text-destructive font-bold animate-pulse">
|
||||
<Radio className="w-3 h-3" /> LIVE
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-white">
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export const LicenceCard: React.FC<LicenceCardProps> = ({
|
|||
<ul className="space-y-2 mb-6 flex-1">
|
||||
{license.features.slice(0, 3).map((feat, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-sm text-kodo-text-main">
|
||||
<Check className="w-4 h-4 text-kodo-lime flex-shrink-0 mt-0.5" />
|
||||
<Check className="w-4 h-4 text-success flex-shrink-0 mt-0.5" />
|
||||
<span className="leading-snug">{feat}</span>
|
||||
</li>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
|
|||
className="flex items-start gap-4 text-sm text-kodo-text-main"
|
||||
>
|
||||
<div className="mt-0.5 bg-kodo-lime/10 p-0.5 rounded-full">
|
||||
<Check className="w-3 h-3 text-kodo-lime" />
|
||||
<Check className="w-3 h-3 text-success" />
|
||||
</div>
|
||||
{feat}
|
||||
</li>
|
||||
|
|
@ -72,13 +72,13 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
|
|||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-4 text-sm text-muted-foreground">
|
||||
<div className="mt-0.5 bg-kodo-red/10 p-0.5 rounded-full">
|
||||
<XCircle className="w-3 h-3 text-kodo-red" />
|
||||
<XCircle className="w-3 h-3 text-destructive" />
|
||||
</div>
|
||||
Do not resell or redistribute as a sample pack.
|
||||
</li>
|
||||
<li className="flex items-start gap-4 text-sm text-muted-foreground">
|
||||
<div className="mt-0.5 bg-kodo-red/10 p-0.5 rounded-full">
|
||||
<XCircle className="w-3 h-3 text-kodo-red" />
|
||||
<XCircle className="w-3 h-3 text-destructive" />
|
||||
</div>
|
||||
Content ID registration is prohibited.
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
|
|||
case 'mention':
|
||||
return <MessageSquare className="w-4 h-4 text-kodo-gold" />;
|
||||
case 'sale':
|
||||
return <DollarSign className="w-4 h-4 text-kodo-lime" />;
|
||||
return <DollarSign className="w-4 h-4 text-success" />;
|
||||
case 'security':
|
||||
return <ShieldAlert className="w-4 h-4 text-kodo-red" />;
|
||||
return <ShieldAlert className="w-4 h-4 text-destructive" />;
|
||||
default:
|
||||
return <Info className="w-4 h-4 text-muted-foreground" />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
|
|||
</span>
|
||||
<button
|
||||
onClick={() => setRecentSearches([])}
|
||||
className="text-xs text-kodo-red hover:underline"
|
||||
className="text-xs text-destructive hover:underline"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
|
|||
<div className="text-3xl font-mono font-bold text-white mb-2">
|
||||
${stats.revenue?.toLocaleString()}
|
||||
</div>
|
||||
<div className="text-xs text-kodo-lime flex items-center gap-1">
|
||||
<div className="text-xs text-success flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3" /> +12.5% this month
|
||||
</div>
|
||||
</Card>
|
||||
|
|
@ -121,7 +121,7 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
|
|||
<div className="text-3xl font-mono font-bold text-white mb-2">
|
||||
{stats.sales}
|
||||
</div>
|
||||
<div className="text-xs text-kodo-lime flex items-center gap-1">
|
||||
<div className="text-xs text-success flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3" /> +5.0% this month
|
||||
</div>
|
||||
</Card>
|
||||
|
|
@ -138,7 +138,7 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
|
|||
? `${(stats.views / 1000).toFixed(1)}K`
|
||||
: stats.views}
|
||||
</div>
|
||||
<div className="text-xs text-kodo-red flex items-center gap-1">
|
||||
<div className="text-xs text-destructive flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3 rotate-180" /> -2.4% this month
|
||||
</div>
|
||||
</Card>
|
||||
|
|
@ -153,7 +153,7 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
|
|||
<div className="text-3xl font-mono font-bold text-white mb-2">
|
||||
{stats.conversion}%
|
||||
</div>
|
||||
<div className="text-xs text-kodo-lime flex items-center gap-1">
|
||||
<div className="text-xs text-success flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3" /> +0.8% this month
|
||||
</div>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -72,20 +72,20 @@ export const ChangeUsernameModal: React.FC<ChangeUsernameModalProps> = ({
|
|||
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
|
||||
)}
|
||||
{!isChecking && isAvailable === true && (
|
||||
<Check className="w-4 h-4 text-kodo-lime" />
|
||||
<Check className="w-4 h-4 text-success" />
|
||||
)}
|
||||
{!isChecking && isAvailable === false && (
|
||||
<X className="w-4 h-4 text-kodo-red" />
|
||||
<X className="w-4 h-4 text-destructive" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Feedback Text */}
|
||||
<div className="mt-2 text-xs h-4">
|
||||
{!isChecking && isAvailable === true && (
|
||||
<span className="text-kodo-lime">Username is available!</span>
|
||||
<span className="text-success">Username is available!</span>
|
||||
)}
|
||||
{!isChecking && isAvailable === false && (
|
||||
<span className="text-kodo-red">That username is taken.</span>
|
||||
<span className="text-destructive">That username is taken.</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export const DeleteAccountConfirmModal: React.FC<
|
|||
></div>
|
||||
<div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
|
||||
<div className="p-4 border-b border-kodo-red/30 bg-kodo-red/10 flex justify-between items-center">
|
||||
<h3 className="font-bold text-kodo-red flex items-center gap-2">
|
||||
<h3 className="font-bold text-destructive flex items-center gap-2">
|
||||
<AlertTriangle className="w-5 h-5 fill-current" /> PERMANENT
|
||||
DELETION
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
|
|||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<h2 className="text-2xl font-bold text-kodo-red">Delete Account</h2>
|
||||
<h2 className="text-2xl font-bold text-destructive">Delete Account</h2>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
|
|
@ -54,7 +54,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
|
|||
<div className="absolute top-0 left-0 w-1 h-full bg-kodo-red"></div>
|
||||
|
||||
<div className="flex gap-4 mb-6">
|
||||
<div className="w-12 h-12 bg-kodo-red/10 rounded-full flex items-center justify-center text-kodo-red flex-shrink-0">
|
||||
<div className="w-12 h-12 bg-kodo-red/10 rounded-full flex items-center justify-center text-destructive flex-shrink-0">
|
||||
<AlertTriangle className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -72,7 +72,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
|
|||
<label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 bg-kodo-graphite border-border text-kodo-red focus:ring-kodo-red rounded"
|
||||
className="mt-1 bg-kodo-graphite border-border text-destructive focus:ring-kodo-red rounded"
|
||||
checked={checks.dataLoss}
|
||||
onChange={(e) =>
|
||||
setChecks({ ...checks, dataLoss: e.target.checked })
|
||||
|
|
@ -92,7 +92,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
|
|||
<label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 bg-kodo-graphite border-border text-kodo-red focus:ring-kodo-red rounded"
|
||||
className="mt-1 bg-kodo-graphite border-border text-destructive focus:ring-kodo-red rounded"
|
||||
checked={checks.irreversible}
|
||||
onChange={(e) =>
|
||||
setChecks({ ...checks, irreversible: e.target.checked })
|
||||
|
|
@ -112,7 +112,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
|
|||
<label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 bg-kodo-graphite border-border text-kodo-red focus:ring-kodo-red rounded"
|
||||
className="mt-1 bg-kodo-graphite border-border text-destructive focus:ring-kodo-red rounded"
|
||||
checked={checks.subscription}
|
||||
onChange={(e) =>
|
||||
setChecks({ ...checks, subscription: e.target.checked })
|
||||
|
|
@ -134,7 +134,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
|
|||
<div>
|
||||
<label className="block text-sm font-bold text-white mb-2">
|
||||
To confirm, type "
|
||||
<span className="font-mono text-kodo-red">DELETE</span>" below
|
||||
<span className="font-mono text-destructive">DELETE</span>" below
|
||||
</label>
|
||||
<Input
|
||||
placeholder="DELETE"
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ export const AppearanceSettingsView: React.FC = () => {
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<Card variant="default">
|
||||
<h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
|
||||
<Palette className="w-5 h-5 text-kodo-lime" /> Accent Color
|
||||
<Palette className="w-5 h-5 text-success" /> Accent Color
|
||||
</h3>
|
||||
<div className="flex gap-4">
|
||||
{accents.map((col) => (
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ export const BackupsView: React.FC = () => {
|
|||
>
|
||||
<div className="flex items-center gap-4 mb-2 md:mb-0 w-full md:w-auto">
|
||||
<div
|
||||
className={`p-2 rounded-full ${backup.status === 'Success' ? 'bg-kodo-lime/10 text-kodo-lime' : 'bg-kodo-red/10 text-kodo-red'}`}
|
||||
className={`p-2 rounded-full ${backup.status === 'Success' ? 'bg-kodo-lime/10 text-success' : 'bg-kodo-red/10 text-destructive'}`}
|
||||
>
|
||||
{backup.status === 'Success' ? (
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export const CloudIntegrationView: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
{isConnected && (
|
||||
<div className="flex items-center gap-2 text-kodo-lime bg-kodo-lime/10 px-4 py-2 rounded-lg border border-kodo-lime/20">
|
||||
<div className="flex items-center gap-2 text-success bg-kodo-lime/10 px-4 py-2 rounded-lg border border-kodo-lime/20">
|
||||
<CheckCircle className="w-5 h-5" /> Connected
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -93,7 +93,7 @@ export const CloudIntegrationView: React.FC = () => {
|
|||
<div className="text-xs text-muted-foreground">Sync Frequency</div>
|
||||
</div>
|
||||
<div className="bg-kodo-ink p-4 rounded-lg border border-border text-center">
|
||||
<Shield className="w-6 h-6 text-kodo-lime mx-auto mb-2" />
|
||||
<Shield className="w-6 h-6 text-success mx-auto mb-2" />
|
||||
<div className="text-sm font-bold text-white">Encrypted</div>
|
||||
<div className="text-xs text-muted-foreground">Status</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -123,12 +123,12 @@ export const IntegrationsView: React.FC = () => {
|
|||
</h3>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
{integration.status === 'active' && (
|
||||
<span className="text-kodo-lime flex items-center gap-1">
|
||||
<span className="text-success flex items-center gap-1">
|
||||
<CheckCircle className="w-3 h-3" /> Active
|
||||
</span>
|
||||
)}
|
||||
{integration.status === 'error' && (
|
||||
<span className="text-kodo-red flex items-center gap-1">
|
||||
<span className="text-destructive flex items-center gap-1">
|
||||
<AlertCircle className="w-3 h-3" /> Error
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -171,7 +171,7 @@ export const IntegrationsView: React.FC = () => {
|
|||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="flex-1 text-kodo-red hover:bg-kodo-red/10 border border-kodo-red/30"
|
||||
className="flex-1 text-destructive hover:bg-kodo-red/10 border border-kodo-red/30"
|
||||
onClick={() => toggleConnection(integration.id)}
|
||||
>
|
||||
Disconnect
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ export const SessionManagement: React.FC = () => {
|
|||
{session.ip_address}
|
||||
</h4>
|
||||
{session.is_current && (
|
||||
<span className="bg-kodo-lime/10 text-kodo-lime text-xs px-2 py-0.5 rounded border border-success/30 font-bold">
|
||||
<span className="bg-kodo-lime/10 text-success text-xs px-2 py-0.5 rounded border border-success/30 font-bold">
|
||||
CURRENT DEVICE
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export function ShareLinkManagerItem({
|
|||
onClick={() => onCopy(share.share_token)}
|
||||
>
|
||||
{isCopied ? (
|
||||
<Check className="h-4 w-4 text-kodo-lime" />
|
||||
<Check className="h-4 w-4 text-success" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
|
|||
<Video className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
className="p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-kodo-lime"
|
||||
className="p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-success"
|
||||
onClick={() => {
|
||||
setPostType('audio');
|
||||
toast.info('Audio upload simulated');
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export const FeedView: React.FC = () => {
|
|||
<Video className="w-4 h-4" /> Video
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-1 text-muted-foreground hover:text-kodo-lime text-xs font-bold cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
|
||||
className="flex items-center gap-1 text-muted-foreground hover:text-success text-xs font-bold cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
>
|
||||
<Mic2 className="w-4 h-4" /> Audio
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
|
|||
<MessageSquare className="w-5 h-5" /> <span>{post.comments}</span>
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-2 hover:text-kodo-lime transition-colors"
|
||||
className="flex items-center gap-2 hover:text-success transition-colors"
|
||||
onClick={() => setShowShareModal(true)}
|
||||
>
|
||||
<Repeat className="w-5 h-5" /> <span>{post.shares}</span>
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
|
|||
onClose();
|
||||
}}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-kodo-lime/10 flex items-center justify-center text-kodo-lime group-hover:bg-kodo-lime/20">
|
||||
<div className="w-10 h-10 rounded-full bg-kodo-lime/10 flex items-center justify-center text-success group-hover:bg-kodo-lime/20">
|
||||
<Repeat className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export const GroupCard: React.FC<GroupCardProps> = ({
|
|||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full border border-border hover:bg-kodo-red/10 hover:text-kodo-red hover:border-kodo-red"
|
||||
className="w-full border border-border hover:bg-kodo-red/10 hover:text-destructive hover:border-kodo-red"
|
||||
onClick={onLeave}
|
||||
>
|
||||
<LogOut className="w-4 h-4 mr-2" /> Leave Group
|
||||
|
|
|
|||
|
|
@ -117,14 +117,14 @@ export const FormField: React.FC<FormFieldProps> = ({
|
|||
<div className={cn('space-y-2', className)}>
|
||||
<label className="text-sm font-medium text-kodo-text-main dark:text-kodo-text-main">
|
||||
{label}
|
||||
{required && <span className="text-kodo-red ml-1">*</span>}
|
||||
{required && <span className="text-destructive ml-1">*</span>}
|
||||
</label>
|
||||
{children}
|
||||
{helpText && !error && (
|
||||
<p className="text-xs text-muted-foreground dark:text-muted-foreground">{helpText}</p>
|
||||
)}
|
||||
{error && (
|
||||
<p className="text-xs text-kodo-red dark:text-kodo-red">{error}</p>
|
||||
<p className="text-xs text-destructive dark:text-destructive">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -110,9 +110,9 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
|
|||
|
||||
const styles = {
|
||||
info: 'bg-muted/10 border-border/30 text-kodo-steel',
|
||||
success: 'bg-kodo-lime/10 border-kodo-lime/30 text-kodo-lime',
|
||||
success: 'bg-kodo-lime/10 border-kodo-lime/30 text-success',
|
||||
warning: 'bg-kodo-gold/10 border-kodo-gold/30 text-kodo-gold',
|
||||
error: 'bg-kodo-red/10 border-kodo-red/30 text-kodo-red',
|
||||
error: 'bg-kodo-red/10 border-kodo-red/30 text-destructive',
|
||||
};
|
||||
|
||||
const icons = {
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
|
|||
const styles: Record<string, string> = {
|
||||
cyan: 'bg-muted/10 text-kodo-steel border-border/30',
|
||||
magenta: 'bg-kodo-magenta/10 text-kodo-magenta border-kodo-magenta/30',
|
||||
lime: 'bg-kodo-lime/10 text-kodo-lime border-kodo-lime/30',
|
||||
lime: 'bg-kodo-lime/10 text-success border-kodo-lime/30',
|
||||
gold: 'bg-kodo-gold/10 text-kodo-gold border-kodo-gold/30',
|
||||
terminal:
|
||||
'bg-kodo-terminal/10 text-kodo-terminal border-kodo-terminal/30 font-mono',
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ export function ConfirmationDialog({
|
|||
{variant === 'destructive' && (
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-kodo-red/10 dark:bg-kodo-red/20">
|
||||
<AlertTriangle className="h-5 w-5 text-kodo-red dark:text-kodo-red" />
|
||||
<AlertTriangle className="h-5 w-5 text-destructive dark:text-destructive" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export function FileUploadFileList({ files, onRemove }: FileUploadFileListProps)
|
|||
</div>
|
||||
)}
|
||||
{file.status === 'success' && (
|
||||
<div className="flex items-center gap-1 text-xs text-kodo-lime">
|
||||
<div className="flex items-center gap-1 text-xs text-success">
|
||||
<CheckCircle className="h-3 w-3" />
|
||||
<span>Uploaded successfully</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const FloatingInput = React.forwardRef<HTMLInputElement, FloatingInputProps>(
|
|||
"absolute text-sm duration-[var(--duration-fast)] transform -translate-y-3 scale-75 top-4 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 pointer-events-none transition-transform",
|
||||
icon ? "left-11 peer-focus:left-11 peer-placeholder-shown:left-11" : "left-4 peer-focus:left-4 peer-placeholder-shown:left-4",
|
||||
error
|
||||
? "text-kodo-red"
|
||||
? "text-destructive"
|
||||
: "text-kodo-text-dim peer-focus:text-kodo-cyan group-hover:text-white/70"
|
||||
)}
|
||||
>
|
||||
|
|
@ -60,7 +60,7 @@ const FloatingInput = React.forwardRef<HTMLInputElement, FloatingInputProps>(
|
|||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<p className="mt-1 text-xs text-kodo-red animate-slideDown">
|
||||
<p className="mt-1 text-xs text-destructive animate-slideDown">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export function LazyErrorFallback({
|
|||
<div className="flex flex-col items-center justify-center min-h-layout-page-sm p-8 text-center animate-in fade-in zoom-in duration-[var(--duration-normal)]">
|
||||
<div className="bg-kodo-ink/50 border border-border/30 rounded-xl p-8 max-w-md w-full shadow-lg backdrop-blur-sm">
|
||||
<div className="w-16 h-16 bg-kodo-red/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<AlertTriangle className="h-8 w-8 text-kodo-red" />
|
||||
<AlertTriangle className="h-8 w-8 text-destructive" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold mb-2">Failed to load {pageName}</h2>
|
||||
<p className="text-muted-foreground mb-6 text-sm">
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|||
)}
|
||||
{...props}
|
||||
/>
|
||||
{error && <p className="mt-1 text-xs text-kodo-red">{error}</p>}
|
||||
{error && <p className="mt-1 text-xs text-destructive">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export const FilePreviewCard: React.FC<FilePreviewCardProps> = ({
|
|||
</div>
|
||||
|
||||
{status === 'completed' ? (
|
||||
<div className="flex items-center gap-2 text-xs text-kodo-lime font-bold">
|
||||
<div className="flex items-center gap-2 text-xs text-success font-bold">
|
||||
<CheckCircle className="w-3 h-3" /> Ready
|
||||
</div>
|
||||
) : status === 'error' ? (
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export function AuthFormField({
|
|||
>
|
||||
{label}
|
||||
{required && (
|
||||
<span className="text-kodo-red ml-1" aria-label="required">
|
||||
<span className="text-destructive ml-1" aria-label="required">
|
||||
*
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -42,7 +42,7 @@ export function AuthFormField({
|
|||
)}
|
||||
{error && (
|
||||
<p
|
||||
className="text-sm text-kodo-red dark:text-kodo-red"
|
||||
className="text-sm text-destructive dark:text-destructive"
|
||||
role="alert"
|
||||
id={`${fieldId}-error`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ export const ChatInput: React.FC = () => {
|
|||
<span className="truncate flex-1">{att.file_name}</span>
|
||||
<button
|
||||
onClick={() => removeAttachment(i)}
|
||||
className="p-1 hover:bg-white/10 rounded-full text-kodo-red opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
className="p-1 hover:bg-white/10 rounded-full text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ export function ConversationItem({
|
|||
{conversation.type !== 'direct' && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => { e.stopPropagation(); setShowDeleteDialog(true); }}
|
||||
className="text-kodo-red focus:bg-kodo-red/10 cursor-pointer"
|
||||
className="text-destructive focus:bg-kodo-red/10 cursor-pointer"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete Channel
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function ServerErrorPage() {
|
|||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
|
||||
<AlertTriangle className="h-8 w-8 text-kodo-red dark:text-kodo-red" />
|
||||
<AlertTriangle className="h-8 w-8 text-destructive dark:text-destructive" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Erreur serveur</CardTitle>
|
||||
<CardDescription>
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ export function PlaybackSummary({ trackId, className }: PlaybackSummaryProps) {
|
|||
<CardTitle className="text-sm font-medium">
|
||||
Temps de lecture moyen
|
||||
</CardTitle>
|
||||
<Clock className="h-4 w-4 text-kodo-lime" />
|
||||
<Clock className="h-4 w-4 text-success" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
|
|
|
|||
|
|
@ -26,15 +26,15 @@ function TrendItem({
|
|||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">{label}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
{isPositive && <TrendingUp className="h-4 w-4 text-kodo-lime" />}
|
||||
{isNegative && <TrendingDown className="h-4 w-4 text-kodo-red" />}
|
||||
{isPositive && <TrendingUp className="h-4 w-4 text-success" />}
|
||||
{isNegative && <TrendingDown className="h-4 w-4 text-destructive" />}
|
||||
{isNeutral && <Minus className="h-4 w-4 text-muted-foreground" />}
|
||||
<span
|
||||
className={`text-sm font-medium ${
|
||||
isPositive
|
||||
? 'text-kodo-lime'
|
||||
? 'text-success'
|
||||
: isNegative
|
||||
? 'text-kodo-red'
|
||||
? 'text-destructive'
|
||||
: 'text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export function ProfileCompletionCard({ completion }: ProfileCompletionCardProps
|
|||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{completion.percentage === 100 ? (
|
||||
<CheckCircle2 className="h-5 w-5 text-kodo-lime" />
|
||||
<CheckCircle2 className="h-5 w-5 text-success" />
|
||||
) : (
|
||||
<AlertCircle className="h-5 w-5 text-kodo-gold" />
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue