styling css gloablization
This commit is contained in:
@@ -147,10 +147,11 @@ function PageProgressCard({ widget, submoduleColor = 'blue' }: { widget: PagePro
|
||||
{/* Hint with icon */}
|
||||
{widget.hint && (
|
||||
<div className="flex items-start gap-2 pt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
|
||||
<LightBulbIcon className="w-5 h-5 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-warning)' }} />
|
||||
<span className="text-sm font-medium" style={{ color: 'var(--color-primary)' }}>{widget.hint}</span>
|
||||
<LightBulbIcon className="w-5 h-5 flex-shrink-0 mt-0.5 text-warning-500" />
|
||||
<span className="text-sm font-medium text-brand-500">{widget.hint}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -178,23 +179,21 @@ function ModuleStatsCard({ widget }: { widget: ModuleStatsWidget }) {
|
||||
{row.fromHref ? (
|
||||
<Link
|
||||
to={row.fromHref}
|
||||
className="text-sm font-medium hover:underline"
|
||||
style={{ color: 'var(--color-primary)' }}
|
||||
className="text-sm font-medium hover:underline text-brand-500"
|
||||
>
|
||||
{row.fromLabel}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-sm font-medium text-[color:var(--color-text)] dark:text-gray-300">{row.fromLabel}</span>
|
||||
)}
|
||||
<span className="text-lg font-bold tabular-nums" style={{ color: 'var(--color-primary)' }}>
|
||||
<span className="text-lg font-bold tabular-nums text-brand-500">
|
||||
{row.fromValue}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Arrow icon */}
|
||||
<ChevronRightIcon
|
||||
className="w-6 h-6 flex-shrink-0 mx-2"
|
||||
style={{ color: 'var(--color-primary)' }}
|
||||
className="w-6 h-6 flex-shrink-0 mx-2 text-brand-500"
|
||||
/>
|
||||
|
||||
{/* To side */}
|
||||
@@ -202,8 +201,7 @@ function ModuleStatsCard({ widget }: { widget: ModuleStatsWidget }) {
|
||||
{row.toHref ? (
|
||||
<Link
|
||||
to={row.toHref}
|
||||
className="text-sm font-medium hover:underline"
|
||||
style={{ color: 'var(--color-primary)' }}
|
||||
className="text-sm font-medium hover:underline text-brand-500"
|
||||
>
|
||||
{row.toLabel}
|
||||
</Link>
|
||||
@@ -236,8 +234,7 @@ function ModuleStatsCard({ widget }: { widget: ModuleStatsWidget }) {
|
||||
<Link
|
||||
key={idx}
|
||||
to={link.href}
|
||||
className="text-sm font-medium hover:underline flex items-center gap-1"
|
||||
style={{ color: 'var(--color-primary)' }}
|
||||
className="text-sm font-medium hover:underline flex items-center gap-1 text-brand-500"
|
||||
>
|
||||
<ChevronRightIcon className="w-4 h-4" />
|
||||
<span>{link.label}</span>
|
||||
@@ -300,7 +297,7 @@ function CompletionCard({ widget }: { widget: CompletionWidget }) {
|
||||
<div className="grid grid-cols-2 gap-6 mb-4">
|
||||
{/* Planner Column */}
|
||||
<div>
|
||||
<div className="text-xs font-bold uppercase tracking-wide mb-2" style={{ color: 'var(--color-primary)' }}>
|
||||
<div className="text-xs font-bold uppercase tracking-wide mb-2 text-brand-500">
|
||||
Planner
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
@@ -312,7 +309,7 @@ function CompletionCard({ widget }: { widget: CompletionWidget }) {
|
||||
|
||||
{/* Writer Column */}
|
||||
<div>
|
||||
<div className="text-xs font-bold uppercase tracking-wide mb-2" style={{ color: 'var(--color-success)' }}>
|
||||
<div className="text-xs font-bold uppercase tracking-wide mb-2 text-success-500">
|
||||
Writer
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
@@ -347,8 +344,7 @@ function CompletionCard({ widget }: { widget: CompletionWidget }) {
|
||||
<div className="pt-3 mt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
|
||||
<Link
|
||||
to={widget.analyticsHref}
|
||||
className="text-sm font-medium hover:underline flex items-center gap-1"
|
||||
style={{ color: 'var(--color-primary)' }}
|
||||
className="text-sm font-medium hover:underline flex items-center gap-1 text-brand-500"
|
||||
>
|
||||
View Full Analytics
|
||||
<ChevronRightIcon className="w-4 h-4" />
|
||||
|
||||
@@ -44,7 +44,7 @@ const RadioSm: React.FC<RadioProps> = ({
|
||||
{/* Inner Dot */}
|
||||
<span
|
||||
className={`h-1.5 w-1.5 rounded-full ${
|
||||
checked ? "bg-white" : "bg-white dark:bg-[#1e2636]"
|
||||
checked ? "bg-white" : "bg-white dark:bg-gray-800"
|
||||
}`}
|
||||
></span>
|
||||
</span>
|
||||
|
||||
@@ -317,10 +317,10 @@ export default function WordPressIntegrationForm({
|
||||
</button>
|
||||
<div className="invisible absolute bottom-full left-1/2 z-50 mb-2.5 -translate-x-1/2 opacity-0 transition-opacity duration-300 group-hover:visible group-hover:opacity-100">
|
||||
<div className="relative">
|
||||
<div className="rounded-lg bg-white px-3 py-2 text-xs font-medium whitespace-nowrap text-gray-700 shadow-xs dark:bg-[#1E2634] dark:text-white">
|
||||
<div className="rounded-lg bg-white px-3 py-2 text-xs font-medium whitespace-nowrap text-gray-700 shadow-xs dark:bg-gray-800 dark:text-white">
|
||||
Regenerate
|
||||
</div>
|
||||
<div className="absolute -bottom-1 left-1/2 h-3 w-4 -translate-x-1/2 rotate-45 bg-white dark:bg-[#1E2634]"></div>
|
||||
<div className="absolute -bottom-1 left-1/2 h-3 w-4 -translate-x-1/2 rotate-45 bg-white dark:bg-gray-800"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,7 +42,7 @@ const toneMap: Record<
|
||||
brand: {
|
||||
primary: "bg-brand-500 text-white hover:bg-brand-600",
|
||||
secondary:
|
||||
"bg-[#64748b] text-white hover:bg-[#475569] dark:bg-[#64748b] dark:hover:bg-[#475569]",
|
||||
"bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-500 dark:hover:bg-gray-600",
|
||||
outline:
|
||||
"text-brand-600 ring-1 ring-brand-200 hover:bg-brand-25 dark:ring-brand-500/40 dark:text-brand-300 dark:hover:bg-brand-500/[0.08]",
|
||||
ghost:
|
||||
@@ -52,7 +52,7 @@ const toneMap: Record<
|
||||
success: {
|
||||
primary: "bg-success-500 text-white hover:bg-success-600",
|
||||
secondary:
|
||||
"bg-[#64748b] text-white hover:bg-[#475569] dark:bg-[#64748b] dark:hover:bg-[#475569]",
|
||||
"bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-500 dark:hover:bg-gray-600",
|
||||
outline:
|
||||
"text-success-600 ring-1 ring-success-200 hover:bg-success-25 dark:ring-success-500/40 dark:text-success-300",
|
||||
ghost:
|
||||
@@ -62,7 +62,7 @@ const toneMap: Record<
|
||||
warning: {
|
||||
primary: "bg-warning-500 text-white hover:bg-warning-600",
|
||||
secondary:
|
||||
"bg-[#64748b] text-white hover:bg-[#475569] dark:bg-[#64748b] dark:hover:bg-[#475569]",
|
||||
"bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-500 dark:hover:bg-gray-600",
|
||||
outline:
|
||||
"text-warning-600 ring-1 ring-warning-200 hover:bg-warning-25 dark:ring-warning-500/40 dark:text-warning-300",
|
||||
ghost:
|
||||
@@ -72,7 +72,7 @@ const toneMap: Record<
|
||||
danger: {
|
||||
primary: "bg-error-500 text-white hover:bg-error-600",
|
||||
secondary:
|
||||
"bg-[#64748b] text-white hover:bg-[#475569] dark:bg-[#64748b] dark:hover:bg-[#475569]",
|
||||
"bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-500 dark:hover:bg-gray-600",
|
||||
outline:
|
||||
"text-error-600 ring-1 ring-error-200 hover:bg-error-25 dark:ring-error-500/40 dark:text-error-300",
|
||||
ghost:
|
||||
@@ -83,7 +83,7 @@ const toneMap: Record<
|
||||
primary:
|
||||
"bg-gray-900 text-white hover:bg-gray-800 dark:bg-white/10 dark:hover:bg-white/20",
|
||||
secondary:
|
||||
"bg-[#64748b] text-white hover:bg-[#475569] dark:bg-[#64748b] dark:hover:bg-[#475569]",
|
||||
"bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-500 dark:hover:bg-gray-600",
|
||||
outline:
|
||||
"text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50 dark:text-gray-200 dark:ring-white/[0.08] dark:hover:bg-white/[0.04]",
|
||||
ghost:
|
||||
|
||||
@@ -188,7 +188,7 @@ export const ListRadioItem: React.FC<ListRadioItemProps> = ({
|
||||
onChange={(e) => onChange?.(e.target.value)}
|
||||
/>
|
||||
<span className={`mr-2 flex h-4 w-4 items-center justify-center rounded-full border ${checked ? "border-brand-500 bg-brand-500" : "bg-transparent border-gray-300 dark:border-gray-700"}`}>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-white dark:bg-[#1e2636]"></span>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-white dark:bg-gray-800"></span>
|
||||
</span>
|
||||
</span>
|
||||
{label}
|
||||
|
||||
Reference in New Issue
Block a user