mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-12-18 20:04:17 +01:00
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:
parent
6787169583
commit
de438d00e1
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user