Fiix colours (#5211)

<img width="638" height="471" alt="image"
src="https://github.com/user-attachments/assets/c2352e25-6ee0-4726-9ce4-059870347ea6"
/>
<img width="638" height="450" alt="image"
src="https://github.com/user-attachments/assets/a17931ca-ffea-4dc3-a17a-629d98003da6"
/>
<img width="985" height="774" alt="image"
src="https://github.com/user-attachments/assets/b16203c6-a136-4fee-ba57-495f7b6e8c75"
/>
<img width="635" height="348" alt="image"
src="https://github.com/user-attachments/assets/4b4ab328-b2e4-442f-84a5-d947e97653ec"
/>
This commit is contained in:
Reece Browne 2025-12-10 11:10:34 +00:00 committed by GitHub
parent 6787169583
commit de438d00e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 43 additions and 5 deletions

View File

@ -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;

View File

@ -530,7 +530,6 @@ export default function PeopleSection() {
<Tooltip label={user.team.name} disabled={user.team.name.length <= 20} zIndex={Z_INDEX_OVER_CONFIG_MODAL}>
<Text
size="sm"
c="dimmed"
maw={150}
style={{
overflow: 'hidden',
@ -542,7 +541,7 @@ export default function PeopleSection() {
</Text>
</Tooltip>
) : (
<Text size="sm" c="dimmed"></Text>
<Text size="sm"></Text>
)}
</Table.Td>
<Table.Td>
@ -565,7 +564,7 @@ export default function PeopleSection() {
withArrow
zIndex={Z_INDEX_OVER_CONFIG_MODAL + 10}
>
<ActionIcon variant="subtle" color="gray" size="sm">
<ActionIcon variant="subtle"size="sm">
<LocalIcon icon="info" width="1rem" height="1rem" />
</ActionIcon>
</Tooltip>
@ -573,7 +572,7 @@ export default function PeopleSection() {
{/* Actions menu */}
<Menu position="bottom-end" withinPortal>
<Menu.Target>
<ActionIcon variant="subtle" color="gray" disabled={!loginEnabled}>
<ActionIcon variant="subtle" disabled={!loginEnabled}>
<LocalIcon icon="more-vert" width="1rem" height="1rem" />
</ActionIcon>
</Menu.Target>

View File

@ -32,6 +32,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
radius="md"
withBorder
style={getBaseCardStyle(isCurrentTier)}
className="plan-card"
>
{isCurrentTier && (
<PricingBadge
@ -67,7 +68,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
<div style={{ flexGrow: 1 }} />
<Button variant="filled" disabled fullWidth>
<Button variant="filled" disabled fullWidth className="plan-button">
{isCurrentTier
? t('plan.current', 'Current Plan')
: t('plan.free.included', 'Included')}
@ -96,6 +97,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
radius="md"
withBorder
style={getBaseCardStyle(isCurrentTier)}
className="plan-card"
>
{isCurrentTier ? (
<PricingBadge
@ -176,6 +178,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
fullWidth
onClick={() => isCurrentTier && onManageClick ? onManageClick() : onUpgradeClick(planGroup)}
disabled={!loginEnabled || isDowngrade || isEnterpriseBlockedForFree}
className="plan-button"
>
{isCurrentTier
? t('plan.manage', 'Manage')

View File

@ -17,6 +17,7 @@ export const PricingBadge: React.FC<PricingBadgeProps> = ({ type, label }) => {
variant="filled"
size={size}
style={{ position: 'absolute', top: '0.5rem', right: '0.5rem' }}
className={type === 'current' ? 'current-plan-badge' : undefined}
>
{label}
</Badge>