diff --git a/packages/console/app/src/routes/black.css b/packages/console/app/src/routes/black.css
index 37e37ff8a9..0bfe02043d 100644
--- a/packages/console/app/src/routes/black.css
+++ b/packages/console/app/src/routes/black.css
@@ -259,7 +259,7 @@
&[data-collapsed="true"] {
[data-slot="card-trigger"] {
- padding: 16px 24px;
+ padding: 20px 24px;
}
[data-slot="plan-header"] {
@@ -267,20 +267,11 @@
}
[data-slot="amount"] {
- font-size: 18px;
- }
-
- [data-slot="period"],
- [data-slot="multiplier"] {
- font-size: 13px;
+ font-size: 20px;
}
}
&[data-selected="false"][data-collapsed="false"] {
- [data-slot="plan-header"] {
- gap: 12px;
- }
-
[data-slot="amount"] {
font-size: 22px;
}
@@ -309,6 +300,7 @@
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
+ line-height: 24px;
margin: 0;
}
@@ -359,7 +351,7 @@
[data-slot="terms"] li {
color: rgba(255, 255, 255, 0.59);
font-size: 13px;
- line-height: 1.3;
+ line-height: 1.2;
padding-left: 16px;
position: relative;
white-space: nowrap;
@@ -395,15 +387,20 @@
font-weight: 400;
text-decoration: none;
cursor: pointer;
+ transition-property: background-color, border-color;
+ transition-duration: 200ms;
+ transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1);
}
[data-slot="cancel"] {
- background: transparent;
- border: 1px solid rgba(255, 255, 255, 0.17);
+ border: 1px solid var(--border-base, rgba(255, 255, 255, 0.17));
+ background: var(--surface-raised-base, rgba(255, 255, 255, 0.06));
+ background-clip: border-box;
color: rgba(255, 255, 255, 0.92);
&:hover {
- border-color: rgba(255, 255, 255, 0.35);
+ background: var(--surface-raised-base, rgba(255, 255, 255, 0.08));
+ border-color: rgba(255, 255, 255, 0.25);
}
}
diff --git a/packages/console/app/src/routes/black/common.tsx b/packages/console/app/src/routes/black/common.tsx
index 1567ff3ede..8b8df86034 100644
--- a/packages/console/app/src/routes/black/common.tsx
+++ b/packages/console/app/src/routes/black/common.tsx
@@ -15,30 +15,46 @@ export function PlanIcon(props: { plan: string }) {