feat: yeet mythical bg

apps/extension/src/ui/apps/onboard/OnboardLayout.tsx

@@ -27,7 +27,7 @@ export const OnboardLayout: FC<LayoutProps> = ({
   >
     {!!withBack && (
       <BackButton
-        className="bg-body hover:bg-body absolute left-4 top-4 z-20 bg-opacity-10 transition-colors ease-in hover:bg-opacity-20 sm:left-32 sm:top-32"
+        className="absolute left-4 top-4 z-20 bg-opacity-50 transition-colors ease-in hover:bg-opacity-70 sm:left-32 sm:top-32"
         analytics={analytics}
       />
     )}

apps/extension/src/ui/apps/onboard/components/OnboardBackground.tsx

@@ -1,28 +1,35 @@
-import { CSSProperties, memo, useMemo } from "react"
-import { MYSTICAL_PHYSICS_V3, MysticalBackground, MysticalPhysicsV3 } from "talisman-ui"
+import { CSSProperties, useMemo } from "react"
 
 import { useOnboard } from "../context"
 
-const BG_CONFIG: MysticalPhysicsV3 = {
-  ...MYSTICAL_PHYSICS_V3,
-  artifacts: 4,
-  radiusMax: 1.4,
+const BASE_STYLE: CSSProperties = {
+  backgroundImage:
+    "radial-gradient(75% 75% at 50% 50%, #ffffff22 0%, #ffffff44 100%),radial-gradient(75% 75% at 0% 80%, #01828F 18%, #00E0AC00 100%),radial-gradient(75% 75% at 0% 30%, #FF92D9bb 0%, #00E0AC00 100%),radial-gradient(75% 75% at 10% 2%, #8C3FCB 18%, #00E0AC00 100%),radial-gradient(75% 75% at 60% 20%, #01828Fee 18%, #00E0AC00 100%),radial-gradient(75% 75% at 80% 50%, #8C3FCBFF 18%, #00E0AC00 100%),radial-gradient(75% 75% at 50% 100%, #FF92D9bb 0%, #00E0AC00 100%)",
+  opacity: 0.8,
 }
 
-// Memoize so animations don't reset on every render
-const Background = memo(() => (
-  <MysticalBackground className="fixed left-0 top-0 z-0 h-lvh w-lvw" config={BG_CONFIG} />
-))
-Background.displayName = "Background"
+const getStageOpacity = (stage: number) => {
+  if (stage === 0) return 0.8 // home
+  if (stage === 1) return 0.55 // password
+  if (stage === 2) return 0.3 // privacy
+  return 0 // account creation and success
+}
 
 export const OnboardBackground = () => {
   const { stage } = useOnboard()
-  const style: CSSProperties = useMemo(() => ({ opacity: 1 - stage * 0.2 }), [stage])
+  const style: CSSProperties = useMemo(
+    () => ({
+      ...BASE_STYLE,
+      // must reach opacity 0 at stage 3 (account creation UI is meant for black bg)
+      opacity: Number(BASE_STYLE.opacity ?? 1) * getStageOpacity(stage),
+    }),
+    [stage],
+  )
 
   return (
-    // hide on mobile to prevent glitches
-    <div className="hidden transition-opacity duration-[2.5s] ease-in-out sm:block" style={style}>
-      <Background />
-    </div>
+    <div
+      className="fixed left-0 top-0 z-0 h-lvh w-lvw transition-opacity duration-[1s] ease-linear"
+      style={style}
+    ></div>
   )
 }

apps/extension/src/ui/apps/onboard/routes/Password.tsx

@@ -22,7 +22,7 @@ type FormData = {
   passwordConfirm: string
 }
 
-const INPUT_CONTAINER_PROPS_PASSWORD = { className: "!bg-white/5 h-28" }
+const INPUT_CONTAINER_PROPS_PASSWORD = { className: "h-28 opacity-70" }
 
 const schema = yup
   .object({
@@ -144,7 +144,9 @@ export const PasswordPage = () => {
             <div className="flex flex-col pb-12">
               <div className="mb-4 mt-12 flex h-[1.2em] items-center justify-between text-sm">
                 <div
-                  className={classNames(password ? "text-body-secondary" : "text-body-disabled")}
+                  className={classNames(
+                    password ? "text-body-secondary" : "text-body-secondary/50",
+                  )}
                 >
                   {t("Password strength")}: <PasswordStrength password={password} />
                 </div>
@@ -162,7 +164,6 @@ export const PasswordPage = () => {
                   data-lpignore
                   // eslint-disable-next-line jsx-a11y/no-autofocus
                   autoFocus
-                  className="placeholder:text-body-secondary/30 !bg-transparent !px-0"
                   containerProps={INPUT_CONTAINER_PROPS_PASSWORD}
                 />
               </FormFieldContainer>
@@ -174,7 +175,6 @@ export const PasswordPage = () => {
                   placeholder={t("Confirm password")}
                   spellCheck={false}
                   data-lpignore
-                  className="placeholder:text-body-secondary/30 !bg-transparent !px-0"
                   containerProps={INPUT_CONTAINER_PROPS_PASSWORD}
                 />
               </FormFieldContainer>
@@ -183,9 +183,7 @@ export const PasswordPage = () => {
               fullWidth
               primary
               type="submit"
-              className={classNames(
-                !isValid && "bg-body/5 transform-gpu cursor-not-allowed backdrop-blur-xl",
-              )}
+              className={classNames(!isValid && "opacity-70")}
               disabled={!isValid}
               processing={isSubmitting}
             >