post sign-up: Various fixes (#31845)

* Fix 'Not right now' button in dark mode

* Fix responsive modes, paddings, change text

* Prefill username field

* Fix React hook dependency array

* Use --white instead of white

* Prettify

* Reset min-height when form is submitted

client/web/src/auth/PostSignUpPage.module.scss

@@ -13,6 +13,12 @@
 .logo {
     height: 1.75rem;
     width: 1.75rem;
+    margin-left: 1rem;
+    margin-top: 1rem;
+
+    @media (--md-breakpoint-down) {
+        margin-left: 0;
+    }
 }
 
 .logo-link {
@@ -32,8 +38,30 @@
 
 .container {
     width: 37.25rem;
+    max-width: calc(100vw - 2rem);
 }
 
 .progress {
     width: 50.25rem;
+    max-width: 100%;
+
+    @media (--md-breakpoint-down) {
+        ol {
+            flex-direction: column;
+        }
+    }
+}
+
+.wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: row;
+    overflow: auto;
+
+    @media (--md-breakpoint-down) {
+        flex-direction: column;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
 }

client/web/src/auth/PostSignUpPage.tsx

@@ -126,9 +126,8 @@ export const PostSignUpPage: FunctionComponent<PostSignUpPage> = ({
     const onError = useCallback((error: ErrorLike) => setError(error), [])
 
     return (
-        <>
-            <BrandLogo className={classNames('ml-3 mt-3', styles.logo)} isLightTheme={true} variant="symbol" />
-
+        <div className={styles.wrapper}>
+            <BrandLogo className={styles.logo} isLightTheme={true} variant="symbol" />
             <div className={classNames(signInSignUpCommonStyles.signinSignupPage, styles.postSignupPage)}>
                 <PageTitle title="Welcome" />
                 <HeroPage
@@ -146,7 +145,7 @@ export const PostSignUpPage: FunctionComponent<PostSignUpPage> = ({
                                 <h2>Get started with Sourcegraph</h2>
                                 <p className="text-muted pb-3">Follow these steps to set up your account</p>
                             </div>
-                            <div className="mt-2 pb-3 d-flex flex-column align-items-center">
+                            <div className="mt-2 pb-3 d-flex flex-column align-items-center w-100">
                                 <Steps initialStep={debug ? parseInt(debug, 10) : 1} totalSteps={4}>
                                     <StepList numeric={true} className={styles.progress}>
                                         <Step borderColor="purple">Connect with code hosts</Step>
@@ -198,7 +197,11 @@ export const PostSignUpPage: FunctionComponent<PostSignUpPage> = ({
                                             </div>
                                         </StepPanel>
                                         <StepPanel>
-                                            <TeamsBeta onFinish={finishWelcomeFlow} onError={onError} />
+                                            <TeamsBeta
+                                                onFinish={finishWelcomeFlow}
+                                                onError={onError}
+                                                username={user.username}
+                                            />
                                         </StepPanel>
                                         <StepPanel>
                                             <InviteCollaborators
@@ -220,6 +223,6 @@ export const PostSignUpPage: FunctionComponent<PostSignUpPage> = ({
                     }
                 />
             </div>
-        </>
+        </div>
     )
 }

client/web/src/auth/welcome/Footer.tsx

@@ -30,7 +30,7 @@ export const Footer: React.FunctionComponent<Props> = ({ onFinish, isSkippable }
             <div>
                 {currentStep.isFirstStep && (
                     <Button
-                        className="font-weight-normal text-secondary"
+                        className="font-weight-normal"
                         onClick={event => {
                             event.currentTarget.blur()
                             setStep(currentIndex + 1)

client/web/src/auth/welcome/InviteCollaborators/InviteCollaborators.tsx

@@ -159,7 +159,7 @@ export const InviteCollaborators: React.FunctionComponent<InviteCollaborators> =
 
     return (
         <div>
-            <div className="m5-5 d-flex">
+            <div className="d-flex flex-column flex-xl-row w-100">
                 <InvitePane
                     user={user}
                     className={className}

client/web/src/auth/welcome/InviteCollaborators/InvitePane.tsx

@@ -109,7 +109,7 @@ export const InvitePane: React.FunctionComponent<Props> = ({
             <div className={styles.titleDescription}>
                 <h3>Introduce friends and colleagues to Sourcegraph</h3>
                 <p className="text-muted mb-4">
-                    We’ve selected a few collaborators you might want to invite to Sourcegraph. These users won’t be
+                    We’ll look for a few collaborators you might want to invite to Sourcegraph. These users won’t be
                     able to see your code unless they have access to it on the code host and also add that code to
                     Sourcegraph.
                 </p>

client/web/src/auth/welcome/TeamsBeta.module.scss

@@ -1,5 +1,6 @@
 .container {
     width: 45.5rem;
+    max-width: calc(100vw - 2rem);
 }
 
 .content {
@@ -9,7 +10,7 @@
     padding: 1rem;
     position: static;
     min-height: 14rem;
-    background: var(--color-bg-1);
+    background-color: var(--color-bg-1);
     border: 1px solid var(--border-color);
     border-radius: 3px;
     opacity: 1;
@@ -18,6 +19,13 @@
 
 .content-transitioning {
     min-height: 56rem;
+    // Hard-code white here as the iframe of HubSpot is not easily configurable and ignores our
+    // dark-mode setting.
+    background-color: var(--white);
+}
+
+.content-submitted {
+    min-height: 14rem;
 }
 
 .content-inner {

client/web/src/auth/welcome/TeamsBeta.tsx

@@ -15,13 +15,15 @@ const PORTAL_ID = '2762526'
 const FORM_ID = 'b65cc7a2-75ad-4114-be4c-cd9637e7c068'
 
 interface TeamsBeta {
+    username: string
     onFinish: FinishWelcomeFlow
     onError: (error: Error) => void
 }
 
-export const TeamsBeta: React.FunctionComponent<TeamsBeta> = ({ onFinish, onError }) => {
+export const TeamsBeta: React.FunctionComponent<TeamsBeta> = ({ onFinish, onError, username }) => {
     const contentReference = useRef<HTMLDivElement | null>(null)
     const [isExpanded, setIsExpanded] = useState<boolean>(false)
+    const [isSubmitted, setIsSubmitted] = useState<boolean>(false)
     const [isTransitioning, setIsTransitioning] = useState<boolean>(false)
 
     const { setComplete, currentIndex } = useSteps()
@@ -31,6 +33,7 @@ export const TeamsBeta: React.FunctionComponent<TeamsBeta> = ({ onFinish, onErro
     }, [])
 
     const logFormSubmission = useCallback(() => {
+        setIsSubmitted(true)
         eventLogger.log('PostSignUpOrgTabBetaFormSubmit')
         setComplete(currentIndex, true)
     }, [currentIndex, setComplete])
@@ -43,9 +46,11 @@ export const TeamsBeta: React.FunctionComponent<TeamsBeta> = ({ onFinish, onErro
             },
             onFormSubmitted: logFormSubmission,
             onError,
-            initialFormValues: {},
+            initialFormValues: {
+                cftb_sourcegraph_username: username,
+            },
         }),
-        [logFormSubmission, onError]
+        [logFormSubmission, onError, username]
     )
     const form = useHubSpotForm(config)
 
@@ -72,7 +77,11 @@ export const TeamsBeta: React.FunctionComponent<TeamsBeta> = ({ onFinish, onErro
                 </p>
             </div>
             <div
-                className={classNames({ [styles.content]: true, [styles.contentTransitioning]: isTransitioning })}
+                className={classNames({
+                    [styles.content]: true,
+                    [styles.contentTransitioning]: isTransitioning,
+                    [styles.contentSubmitted]: isSubmitted,
+                })}
                 onTransitionEnd={onTransitionEnd}
                 ref={contentReference}
             >