diff --git a/frontend/src/core/styles/theme.css b/frontend/src/core/styles/theme.css index 8551735ed..c43b330b0 100644 --- a/frontend/src/core/styles/theme.css +++ b/frontend/src/core/styles/theme.css @@ -617,6 +617,41 @@ border-color: var(--landing-drop-inner-paper-border) !important; } +/* Plan section card borders - only override in dark mode */ +[data-mantine-color-scheme="dark"] .plan-card { + --paper-border-color: rgb(158, 158, 158) !important; +} + +[data-mantine-color-scheme="dark"] .plan-card [data-size="sm"] { + color: rgb(221, 221, 221) !important; +} + +/* Current plan badge - use light mode green in dark mode */ +[data-mantine-color-scheme="dark"] .current-plan-badge { + background-color: var(--color-green-300) !important; +} + +/* Plan section button colors */ +.plan-button:not(:disabled):not([data-disabled]) { + background-color: #0A8BFF !important; +} + +[data-mantine-color-scheme="dark"] .plan-button:not(:disabled):not([data-disabled]) { + background-color: #1C598E !important; +} + +/* Lighter grey for disabled plan buttons */ +.plan-button:disabled, +.plan-button[data-disabled] { + background-color: #7e7e7e !important; + color: white; +} + +[data-mantine-color-scheme="dark"] .plan-button:disabled, +[data-mantine-color-scheme="dark"] .plan-button[data-disabled] { + background-color: #6b7280 !important; +} + /* Smooth transitions for theme switching */ * { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; diff --git a/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx index bc2f69c3a..a43ac3078 100644 --- a/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx +++ b/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx @@ -530,7 +530,6 @@ export default function PeopleSection() { ) : ( - + )} @@ -565,7 +564,7 @@ export default function PeopleSection() { withArrow zIndex={Z_INDEX_OVER_CONFIG_MODAL + 10} > - + @@ -573,7 +572,7 @@ export default function PeopleSection() { {/* Actions menu */} - + diff --git a/frontend/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx b/frontend/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx index 7dff90f8e..ab56fdad3 100644 --- a/frontend/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx +++ b/frontend/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx @@ -32,6 +32,7 @@ const PlanCard: React.FC = ({ planGroup, isCurrentTier, isDowngra radius="md" withBorder style={getBaseCardStyle(isCurrentTier)} + className="plan-card" > {isCurrentTier && ( = ({ planGroup, isCurrentTier, isDowngra
-