fix: onboarding issues (dailydotdev#4259)

sshanzel · web-flow · commit e9d589eb131b · 2025-03-05T18:47:46.000+08:00
diff --git a/packages/shared/src/components/auth/EmailCodeVerification.tsx b/packages/shared/src/components/auth/EmailCodeVerification.tsx
@@ -177,7 +177,7 @@ function EmailCodeVerification({
             </Typography>
           )}
           <span className="text-text-tertiary">
-            Didn&#39;t get verification codes?{' '}
+            Didn&#39;t get a verification code?{' '}
             <button
               type="button"
               disabled={resendTimer > 0}
diff --git a/packages/shared/src/components/auth/OnboardingRegistrationForm.tsx b/packages/shared/src/components/auth/OnboardingRegistrationForm.tsx
@@ -183,6 +183,10 @@ const OnboardingRegistrationForm = ({
           type="email"
           name="email"
           focused={onboardingPapercut}
+          pressed={onboardingPapercut}
+          className={{
+            container: onboardingPapercut && 'bg-overlay-active-salt',
+          }}
         />
 
         {shouldLogin && (
@@ -216,6 +220,7 @@ const OnboardingRegistrationForm = ({
       <OrDivider
         className={{
           container: classNames('mb-8', className?.onboardingDivider),
+          text: onboardingPapercut ? 'text-text-tertiary' : undefined,
         }}
         label="Or sign up with"
         aria-hidden
diff --git a/packages/shared/src/components/fields/BaseFieldContainer.tsx b/packages/shared/src/components/fields/BaseFieldContainer.tsx
@@ -10,6 +10,7 @@ interface FieldStateProps {
   isLocked?: boolean;
   hasInput?: boolean;
   focused?: boolean;
+  pressed?: boolean;
   disabled?: boolean;
   invalid?: boolean;
   hasActionIcon?: boolean;
diff --git a/packages/shared/src/components/fields/TextField.module.css b/packages/shared/src/components/fields/TextField.module.css
@@ -1,3 +1,9 @@
+.input {
+  &:global(.pressed)::placeholder {
+    color: var(--theme-text-primary);
+  }
+}
+
 .field {
   &:hover {
     box-shadow: inset 0.125rem 0 0 0 var(--theme-text-primary);
diff --git a/packages/shared/src/components/fields/TextField.tsx b/packages/shared/src/components/fields/TextField.tsx
@@ -54,6 +54,7 @@ function TextFieldComponent(
     disabled,
     rightIcon,
     required,
+    pressed,
     onBlur: onExternalBlur,
     focused: focusedProp,
     inputRef: inputRefProp,
@@ -180,6 +181,7 @@ function TextFieldComponent(
           readOnly={readOnly}
           size={1}
           className={classNames(
+            styles.input,
             'self-stretch text-ellipsis',
             className?.input,
             getFieldFontColor({
@@ -189,6 +191,7 @@ function TextFieldComponent(
               focused,
               hasActionIcon: !!rightIcon,
             }),
+            { pressed },
           )}
           disabled={disabled}
           required={required}
diff --git a/packages/webapp/pages/onboarding.tsx b/packages/webapp/pages/onboarding.tsx
@@ -428,8 +428,11 @@ export function OnboardPage(): ReactElement {
                   }}
                 />
                 <AuthOptions {...authOptionProps} />
+                {onboardingPapercut && <SignupDisclaimer />}
               </div>
-              <SignupDisclaimer className="mb-0 tablet:mb-10 tablet:hidden" />
+              {!onboardingPapercut && (
+                <SignupDisclaimer className="mb-0 tablet:mb-10 tablet:hidden" />
+              )}
             </>
           )}
           {isAuthenticating && activeScreen === OnboardingStep.Intro ? (
@@ -471,7 +474,7 @@ export function OnboardPage(): ReactElement {
             </div>
           )}
         </div>
-        {showOnboardingPage && <OnboardingFooter />}
+        {showOnboardingPage && !onboardingPapercut && <OnboardingFooter />}
         {layout.hasFooter && <FooterLinks className="mx-auto pb-6" />}
       </div>
     </PaymentContextProvider>
