feat(console): Style improvements for /black, View Transition fixes (#8739)

Co-authored-by: Github Action <[email protected]>

packages/console/app/src/component/light-rays.tsx

@@ -34,14 +34,14 @@ export const defaultConfig: LightRaysConfig = {
   raysOrigin: "top-center",
   raysColor: "#ffffff",
   raysSpeed: 1.0,
-  lightSpread: 1.15,
-  rayLength: 4.0,
+  lightSpread: 1.2,
+  rayLength: 4.5,
   sourceWidth: 0.1,
   pulsating: true,
   pulsatingMin: 0.9,
-  pulsatingMax: 1.0,
-  fadeDistance: 1.15,
-  saturation: 0.325,
+  pulsatingMax: 1.05,
+  fadeDistance: 1.25,
+  saturation: 0.35,
   followMouse: false,
   mouseInfluence: 0.05,
   noiseAmount: 0.5,

packages/console/app/src/routes/black.css

@@ -89,44 +89,42 @@
   animation: reveal-terms 300ms cubic-bezier(0.25, 0, 0.5, 1) 50ms forwards;
 }
 
-::view-transition-old(action-20),
-::view-transition-old(action-100),
-::view-transition-old(action-200) {
-  animation: fade-out 100ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+::view-transition-old(actions-20),
+::view-transition-old(actions-100),
+::view-transition-old(actions-200) {
+  animation: fade-out 80ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
-::view-transition-new(action-20),
-::view-transition-new(action-100),
-::view-transition-new(action-200) {
-  animation: fade-in-up 200ms cubic-bezier(0.16, 1, 0.3, 1) 250ms forwards;
+::view-transition-new(actions-20),
+::view-transition-new(actions-100),
+::view-transition-new(actions-200) {
+  animation: fade-in-up 200ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
   opacity: 0;
 }
 
-::view-transition-group(plan-card-20),
-::view-transition-group(plan-card-100),
-::view-transition-group(plan-card-200) {
-  animation-duration: 200ms;
+::view-transition-group(card-20),
+::view-transition-group(card-100),
+::view-transition-group(card-200) {
+  animation-duration: 250ms;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-::view-transition-image-pair(plan-card-20),
-::view-transition-image-pair(plan-card-100),
-::view-transition-image-pair(plan-card-200) {
+::view-transition-image-pair(card-20),
+::view-transition-image-pair(card-100),
+::view-transition-image-pair(card-200) {
   isolation: isolate;
+  overflow: hidden;
 }
 
-::view-transition-old(plan-card-20),
-::view-transition-old(plan-card-100),
-::view-transition-old(plan-card-200) {
-  animation: fade-out 120ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+::view-transition-old(card-20),
+::view-transition-old(card-100),
+::view-transition-old(card-200) {
   mix-blend-mode: normal;
 }
 
-::view-transition-new(plan-card-20),
-::view-transition-new(plan-card-100),
-::view-transition-new(plan-card-200) {
-  animation: fade-in 150ms cubic-bezier(0.4, 0, 0.2, 1) 50ms forwards;
-  opacity: 0;
+::view-transition-new(card-20),
+::view-transition-new(card-100),
+::view-transition-new(card-200) {
   mix-blend-mode: normal;
 }
 
@@ -362,8 +360,7 @@
         gap: 12px;
         padding: 24px;
         border: 1px solid rgba(255, 255, 255, 0.17);
-        background-color: rgba(0, 0, 0, 0.75);
-        backdrop-filter: blur(4px);
+        background: black;
         background-clip: padding-box;
         border-radius: 4px;
         text-decoration: none;
@@ -421,7 +418,6 @@
         margin: 0 auto;
         position: relative;
         background-color: rgba(0, 0, 0, 0.75);
-        backdrop-filter: blur(4px);
         z-index: 1;
 
         @media (max-width: 480px) {

packages/console/app/src/routes/black/index.tsx

@@ -98,76 +98,6 @@ export default function Black() {
               </div>
             )}
           </Match>
-          <Match when={selectedPlan()}>
-            {(plan) => (
-              <div data-slot="selected-plan">
-                <div data-slot="selected-card">
-                  <div data-slot="icon" style={{ "view-transition-name": `icon-${plan().id}` }}>
-                    <PlanIcon plan={plan().id} />
-                  </div>
-                  <p data-slot="price" style={{ "view-transition-name": `price-${plan().id}` }}>
-                    <span data-slot="amount">${plan().id}</span>{" "}
-                    <span data-slot="period">per person billed monthly</span>
-                    <Show when={plan().multiplier}>
-                      <span data-slot="multiplier">{plan().multiplier}</span>
-                    </Show>
-                  </p>
-                  <ul data-slot="terms" style={{ "view-transition-name": `terms-${plan().id}` }}>
-                    <li>Your subscription will not start immediately</li>
-                    <li>You will be added to the waitlist and activated soon</li>
-                    <li>Your card will be only charged when your subscription is activated</li>
-                    <li>Usage limits apply, heavily automated use may reach limits sooner</li>
-                    <li>Subscriptions for individuals, contact Enterprise for teams</li>
-                    <li>Limits may be adjusted and plans may be discontinued in the future</li>
-                    <li>Cancel your subscription at anytime</li>
-                  </ul>
-                  <div data-slot="actions" style={{ "view-transition-name": `actions-${plan().id}` }}>
-                    <button type="button" onClick={() => cancel()} data-slot="cancel">
-                      Cancel
-                    </button>
-                    <a href={`/black/subscribe/${plan().id}`} data-slot="continue">
-                      Continue
-                    </a>
-                  </div>
-                </div>
-              </div>
-            )}
-          </Match>
-          <Match when={selectedPlan()}>
-            {(plan) => (
-              <div data-slot="selected-plan" style={{ "view-transition-name": "selected-plan" }}>
-                <div data-slot="selected-card">
-                  <div data-slot="icon">
-                    <PlanIcon plan={plan().id} />
-                  </div>
-                  <p data-slot="price">
-                    <span data-slot="amount">${plan().id}</span>{" "}
-                    <span data-slot="period">per person billed monthly</span>
-                    <Show when={plan().multiplier}>
-                      <span data-slot="multiplier">{plan().multiplier}</span>
-                    </Show>
-                  </p>
-                  <ul data-slot="terms" style={{ "view-transition-name": `terms-${plan().id}` }}>
-                    <li>Your subscription will not start immediately</li>
-                    <li>You will be added to the waitlist and activated soon</li>
-                    <li>Your card will be only charged when your subscription is activated</li>
-                    <li>Usage limits apply, heavily automated use may reach limits sooner</li>
-                    <li>Subscriptions for individuals, contact Enterprise for teams</li>
-                    <li>Limits may be adjusted and plans may be discontinued in the future</li>
-                    <li>Cancel your subscription at anytime</li>
-                  </ul>
-                  <div data-slot="actions" style={{ "view-transition-name": `actions-${plan().id}` }}>
-                    <button type="button" onClick={() => cancel()} data-slot="cancel">
-                      Cancel
-                    </button>
-                    <a href={`/black/subscribe/${plan().id}`} data-slot="continue">
-                      Continue
-                    </a>
-                  </div>
-                </div>
-              </div>
-            )}
-          </Match>
         </Switch>
         <p data-slot="fine-print" style={{ "view-transition-name": "fine-print" }}>
           Prices shown don't include applicable tax · <A href="/legal/terms-of-service">Terms of Service</A>