learningeconomy · goblincore · Dec 19, 2025 · Dec 19, 2025 · Dec 19, 2025 · Dec 19, 2025
diff --git a/apps/learn-card-app/src/assets/sass/login.scss b/apps/learn-card-app/src/assets/sass/login.scss
@@ -38,19 +38,43 @@
     }
 }
 
+.PhoneInput.login-phone-input.gameflow {
+    .PhoneInputInput {
+        background-color: var(--ion-color-grayscale-100);
+        border: 1px solid var(--ion-color-grayscale-200);
+        color: var(--ion-color-grayscale-900);
+
+        &::placeholder {
+            color: var(--ion-color-grayscale-500);
+        }
+    }
+
+    .PhoneInputCountry {
+        background-color: var(--ion-color-grayscale-100);
+        border: 1px solid var(--ion-color-grayscale-200);
+
+        .PhoneInputCountryIcon {
+            border: solid 1px var(--ion-color-grayscale-400);
+        }
+    }
+}
+
 .react-code-input:not(.small) > input:not([value='']) {
     background-color: white;
     transition: background-color 0.3s ease-in;
 }
 
 .react-code-input.small {
     display: flex !important;
-    justify-content: space-between;
-    padding-left: 2px;
-    padding-right: 2px;
+    width: 100%;
+    justify-content: center;
+    flex-wrap: nowrap;
+    gap: 8px;
 
     & > input {
-        width: 14%;
+        flex: 0 0 auto;
+        width: clamp(34px, 9vw, 46px);
+        min-width: 0;
         border-radius: 12px;
         font-size: 24px;
         height: 60px;
@@ -68,11 +92,56 @@
         }
 
         @media (max-width: 479px) {
-            width: 14%;
+            width: clamp(30px, 10vw, 44px);
         }
 
         @media (max-width: 380px) {
-            width: 12.25%;
+            width: clamp(28px, 10vw, 40px);
+        }
+    }
+}
+
+.react-code-input.gameflow:not(.small) {
+    & > input {
+        background-color: var(--ion-color-grayscale-100);
+        border: 1px solid var(--ion-color-grayscale-200);
+        color: var(--ion-color-grayscale-900);
+
+        &:focus {
+            border: 1px solid var(--ion-color-grayscale-300);
+            background-color: white;
+        }
+    }
+}
+
+.react-code-input.small.gameflow {
+    display: grid !important;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    width: 100%;
+    max-width: 100%;
+    gap: 8px;
+
+    @media (max-width: 420px) {
+        gap: 6px;
+    }
+
+    @media (max-width: 360px) {
+        gap: 5px;
+    }
+
+    & > input {
+        flex: initial;
+        width: 100% !important;
+        min-width: 0;
+        background-color: var(--ion-color-grayscale-100);
+        border: 1px solid var(--ion-color-grayscale-200);
+        color: var(--ion-color-grayscale-900);
+        font-size: 20px;
+        height: 56px;
+
+        &:focus {
+            border: 1px solid var(--ion-color-grayscale-300);
+            background-color: white;
         }
     }
 }

diff --git a/apps/learn-card-app/src/components/learncard/AccountSwitcherModal.tsx b/apps/learn-card-app/src/components/learncard/AccountSwitcherModal.tsx
@@ -254,7 +254,7 @@ const AccountSwitcherModal: React.FC<AccountSwitcherModalProps> = ({
                             className="shrink-0 w-full max-w-[400px] py-[10px] px-[15px] text-[20px] bg-grayscale-900 rounded-full font-notoSans text-white shadow-button-bottom disabled:opacity-60"
                             disabled={!familyCredential?.boostId || isSwitching}
                         >
-                            Add Player
+                            Add New Player
                         </button>
                         <button
                             onClick={isFromGame ? handleBackToGame : closeAllModals}

diff --git a/apps/learn-card-app/src/pages/consentFlow/GameFlow/FullScreenGameFlow.tsx b/apps/learn-card-app/src/pages/consentFlow/GameFlow/FullScreenGameFlow.tsx
@@ -147,7 +147,7 @@ const FullScreenGameFlow: React.FC<FullScreenGameFlowProps> = ({ contractDetails
                 isFromGame={isFromGame}
             />
         ),
-        [GameFlowStep.confirmation]: (
+        [GameFlowStep.confirmation]: selectedUser ? (
             <AddGameConfirmationPrompt
                 user={selectedUser}
                 contractDetails={contractDetails}
@@ -158,14 +158,14 @@ const FullScreenGameFlow: React.FC<FullScreenGameFlowProps> = ({ contractDetails
                 handleBackToGame={handleBackToGame}
                 handleSelectADifferentPlayer={() => setStep(GameFlowStep.whosPlaying)}
             />
-        ),
-        [GameFlowStep.success]: (
+        ) : null,
+        [GameFlowStep.success]: selectedUser ? (
             <GameAccessSuccessPrompt
                 user={selectedUser}
                 contractDetails={contractDetails}
                 isFromGame={isFromGame}
             />
-        ),
+        ) : null,
         [GameFlowStep.backToGame]: (
             <ReturnToGamePrompt
                 contractDetails={contractDetails}
@@ -176,13 +176,15 @@ const FullScreenGameFlow: React.FC<FullScreenGameFlowProps> = ({ contractDetails
 
     return (
         <div
-            className="h-full w-full bg-cover bg-emerald-700"
+            className="min-h-screen h-full w-full bg-cover bg-emerald-700"
             style={{
                 backgroundImage: `url(${contractDetails?.image})`,
             }}
         >
-            <div className="h-full w-full bg-black bg-opacity-20 backdrop-blur-[5px] flex items-center justify-center">
-                <div className="p-[30px] max-w-[400px]">{stepToComponent[step]}</div>
+            <div className="min-h-screen w-full h-full bg-black bg-opacity-20 backdrop-blur-[5px] flex flex-col items-center overflow-y-auto py-[20px] md:py-[40px]">
+                <div className="p-[30px] max-w-[400px] w-full md:my-auto">
+                    {stepToComponent[step]}
+                </div>
             </div>
         </div>
     );

diff --git a/apps/learn-card-app/src/pages/consentFlow/GameFlow/GameLogin.tsx b/apps/learn-card-app/src/pages/consentFlow/GameFlow/GameLogin.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 
+import { ArrowLeft, Mail, Phone } from 'lucide-react';
+
 import useFirebase from '../../../hooks/useFirebase';
 import { LoginTypesEnum } from 'learn-card-base';
 
 import EmailForm from '../../../pages/login/forms/EmailForm';
 import PhoneForm from '../../../pages/login/forms/PhoneForm';
-import PhoneIcon from 'learn-card-base/assets/images/Phone.white.svg';
 import AppleIcon from 'learn-card-base/assets/images/apple-logo.svg';
 import GoogleIcon from 'learn-card-base/assets/images/google-G-logo.svg';
-import EmailIcon from 'learn-card-base/assets/images/email-circle-icon.svg';
 import LearnCardAppIcon from '../../../assets/images/lca-icon-v2.png';
 
 type GameLoginProps = {
@@ -19,6 +19,8 @@ export const GameLogin: React.FC<GameLoginProps> = ({ handleBackToGame }) => {
     const [activeLoginType, setActiveLoginType] = useState<LoginTypesEnum>(LoginTypesEnum.email);
     const { appleLogin, googleLogin } = useFirebase();
 
+    const [showSocialLogins, setShowSocialLogins] = useState(true);
+
     // toggle between whether this is "login" or "sign up"
     //   no functional difference, we just change some text
     const [isLogin, setIsLogin] = useState(true);
@@ -42,19 +44,35 @@ export const GameLogin: React.FC<GameLoginProps> = ({ handleBackToGame }) => {
             <EmailForm
                 formTitleOverride="Email"
                 buttonTitleOverride="Continue"
-                formTitleClassNameOverride="font-montserrat text-[14px] font-[500] leading-[24px] text-grayscale-600 uppercase"
-                buttonClassName="font-poppins !text-[16px] leading-[28px] tracking-[0.75px] !mt-0"
+                formTitleClassNameOverride="text-grayscale-800 text-base text-center font-medium"
+                buttonClassName="font-poppins !text-[16px] leading-[28px] tracking-[0.75px] !mt-0 !bg-emerald-700 hover:opacity-90 active:opacity-85 transition-opacity"
+                emailInputClassName="bg-grayscale-100 text-grayscale-900 placeholder:text-grayscale-500 tracking-normal"
+                emailInputVariant="appStore"
+                emailErrorPlacement="below"
+                verificationCodeInputClassName="gameflow"
+                startOverClassNameOverride="text-grayscale-800 underline font-bold"
+                resendCodeButtonClassNameOverride="text-grayscale-600 font-bold mt-4 border-b-grayscale-600 border-solid border-b-[1px]"
                 suppressRedirect
                 customRedirectUrl={window.location.href}
+                resetRedirectPath={null}
+                smallVerificationInput
+                setShowSocialLogins={setShowSocialLogins}
+                showSocialLogins={showSocialLogins}
             />
         );
     } else if (activeLoginType === LoginTypesEnum.phone) {
         LoginTypeForm = (
             <PhoneForm
                 formTitleOverride="Phone"
                 formTitleClassNameOverride="font-montserrat text-[14px] font-[500] leading-[24px] text-grayscale-600 uppercase"
-                buttonClassName="font-poppins !text-[16px] leading-[28px] tracking-[0.75px]"
+                buttonClassName="font-poppins !text-[16px] leading-[28px] tracking-[0.75px] !bg-emerald-700 hover:opacity-90 active:opacity-85 transition-opacity"
                 smallVerificationInput
+                phoneInputClassNameOverride="gameflow"
+                verificationCodeInputClassName="gameflow"
+                startOverClassNameOverride="text-grayscale-800 underline font-bold"
+                resendCodeButtonClassNameOverride="text-grayscale-600 font-bold mt-4 border-b-grayscale-600 border-solid border-b-[1px]"
+                setShowSocialLogins={setShowSocialLogins}
+                showSocialLogins={showSocialLogins}
             />
         );
     }
@@ -75,7 +93,6 @@ export const GameLogin: React.FC<GameLoginProps> = ({ handleBackToGame }) => {
     ];
 
     const isPhone = activeLoginType === LoginTypesEnum.phone;
-    const notActiveLoginTypeIcon = isPhone ? EmailIcon : PhoneIcon;
 
     return (
         <div className="flex flex-col gap-[10px]">
@@ -90,57 +107,52 @@ export const GameLogin: React.FC<GameLoginProps> = ({ handleBackToGame }) => {
                     LEARNCARD
                 </h6>
 
-                <p className="text-grayscale-800 uppercase font-montserrat text-[14px] font-[500] leading-[24px] mr-auto">
-                    {isLogin ? 'Login' : 'Sign Up'}
+                <p className="text-grayscale-500 font-montserrat text-[14px] font-[500] mr-auto">
+                    Login to Learncard
                 </p>
 
                 <div className="w-full max-w-[500px]">
-                    <div className="w-full flex gap-[20px] border-grayscale-500 border-solid border-b-[1px] border-opacity-30 pb-[30px]">
-                        <button
-                            className={`flex items-center justify-center bg-primary-default border-solid border-grayscale-100 rounded-full w-[45px] h-[45px] ${isPhone ? 'border-0' : 'border-[1px] '
-                                }`}
-                            onClick={handleActiveLoginType}
-                        >
-                            <img
-                                src={notActiveLoginTypeIcon}
-                                alt={`${isPhone ? 'email' : 'phone'} icon`}
-                                className={isPhone ? 'w-full h-full' : 'w-[25px] h-[25px]'}
-                            />
-                        </button>
-                        {socialLogins.map(socialLogin => {
-                            const { id, src, onClick, alt } = socialLogin;
-                            return (
-                                <button
-                                    key={id}
-                                    className="flex items-center justify-center border-solid border-[1px] border-grayscale-100 rounded-full w-[45px] h-[45px]"
-                                    onClick={onClick}
-                                >
-                                    <img src={src} alt={alt} className="w-[28px] h-[28px]" />
-                                </button>
-                            );
-                        })}
-                    </div>
+                    {showSocialLogins && (
+                        <div className="w-full flex gap-[20px] border-grayscale-500  border-opacity-30 pb-[30px]">
+                            <button
+                                className="flex items-center justify-center bg-grayscale-900 border-solid border-grayscale-100 rounded-full w-[45px] h-[45px]"
+                                onClick={handleActiveLoginType}
+                                type="button"
+                            >
+                                {isPhone ? (
+                                    <Mail className="w-[22px] h-[22px] text-white" />
+                                ) : (
+                                    <Phone className="w-[22px] h-[22px] text-white" />
+                                )}
+                            </button>
+                            {socialLogins.map(socialLogin => {
+                                const { id, src, onClick, alt } = socialLogin;
+                                return (
+                                    <button
+                                        key={id}
+                                        className="flex items-center justify-center border-solid border-[1px] border-grayscale-100 rounded-full w-[45px] h-[45px]"
+                                        onClick={onClick}
+                                        type="button"
+                                    >
+                                        <img src={src} alt={alt} className="w-[28px] h-[28px]" />
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    )}
 
                     {LoginTypeForm}
                 </div>
 
-                <div className="py-[10px] w-full">
-                    <div className="h-[2px] w-full bg-grayscale-500 opacity-30" />
-                </div>
-
-                <button
-                    onClick={() => setIsLogin(!isLogin)}
-                    className="uppercase w-full font-montserrat text-grayscale-800 font-[500] text-[14px] leading-[24px]"
-                >
-                    {isLogin ? 'Signup' : 'Login'}
-                </button>
+                <div className="py-[10px] w-full"></div>
             </div>
 
             <button
                 type="button"
                 onClick={handleBackToGame}
-                className="w-full py-[10px] px-[20px] text-[20px] bg-white rounded-[30px] text-grayscale-800 shadow-box-bottom"
+                className="w-full py-[12px] px-[20px] text-[16px] bg-white rounded-[30px] text-grayscale-800 shadow-box-bottom flex items-center justify-center gap-[10px]"
             >
+                <ArrowLeft className="w-[18px] h-[18px]" />
                 Back to Game
             </button>
         </div>

diff --git a/apps/learn-card-app/src/pages/launchPad/PostConsentFlowDataFeed.tsx b/apps/learn-card-app/src/pages/launchPad/PostConsentFlowDataFeed.tsx
@@ -57,7 +57,7 @@ const PostConsentFlowDataFeed = () => {
     );
 
     return (
-        <section className="bg-white min-h-screen w-full pt-[15px]">
+        <section className="bg-white h-full min-h-screen w-full pt-[15px]">
             <IonHeader className="ion-no-border">
                 <IonToolbar className="ion-no-border" color="white">
                     <IonGrid>