🪟 🎨 Redesign Sign-in/up pages (#14103)

* convert styled components in Auth component to scss * move GitBlock to separate component to the left side * fix color variables * replace styled component FormTitle with scss modules * create new PersonQuoteCover component * update styles for LogIn button * update login title * remove Airbyte logo from auth page * update related components after changes in FormTitle component * increase size of "forgot password" text * add cart.com company logo * add all necessary elements and styles * polished css for PersonQuoteCover component * completed PersonQuoteCover component and moved to separate folder * move FormTitle to separate folder * move GitBlock to separate folder * add tests for PersonQuoteCover component * update Header component: - remove "Back" button - replace styled components with css * leave comment for News component * update GitBlock component: - extend to support props - add tests * update GitBlock css classes order * update SpecialBlock component * update SignupPage with optional props * set full width for Sign Up button * replace News with PersonQuoteCover component * Update airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/index.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> * move testimonials photo and logo to separate folder * update tests * Fixes after comments to PR: - fixed not grayed image in Firefox - update test snapshots * remove alt text on company logo * remove all conditionally rendered text (preparation for LaunchDarkly) * update tests * simplify implementation of title style * Update quote company logo testid * Move emoji from css to en file in signup specialblock component * Update accept email invite heading and button to match styles Add status message to signup page Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> Co-authored-by: Edmundo Ruiz Ghanem <edmundo@airbyte.io>
airbytehq · Jul 12, 2022 · 428e482 · 428e482
1 parent 92b2d9c
commit 428e482
Show file tree

Hide file tree

Showing 37 changed files with 837 additions and 273 deletions.
diff --git a/airbyte-webapp/public/images/testimonials/cartdotcom-logo.svg b/airbyte-webapp/public/images/testimonials/cartdotcom-logo.svg
diff --git a/airbyte-webapp/public/images/testimonials/cartdotcom-person-photo.png b/airbyte-webapp/public/images/testimonials/cartdotcom-person-photo.png
diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
@@ -3,7 +3,7 @@
   "login.DontHaveAccount": "Don’t have an account?",
   "login.login": "Log in",
   "login.signup": "Sign up",
-  "login.loginTitle": "Sign in to Airbyte",
+  "login.loginTitle": "Log in to Airbyte",
   "login.resendEmail": "Didn’t receive the email? Send it again",
   "login.yourEmail": "Your work email*",
   "login.inviteEmail": "For security, re-enter your invite email*",
@@ -19,8 +19,8 @@
   "login.createPassword": "Create a password*",
   "login.resetPassword": "Reset your password",
   "login.resetPassword.emailSent": "A password reset email has been sent to you",
-  "login.activateAccess": "Activate your 14-day free trial",
-  "login.activateAccess.subtitle": "Get our <special>Special launch offer</special> of <sum>$1,000</sum>  worth of <free>free usage</free>. No credit card required.",
+  "login.activateAccess": "Activate your <hl>14-day free trial</hl>",
+  "login.activateAccess.subtitle": "🎉 Special <launch>launch offer</launch> of <sum>$1,000</sum> worth of free usage!",
   "login.fullName": "Full name*",
   "login.fullName.placeholder": "Christopher Smith",
   "login.companyName": "Company name*",
@@ -30,6 +30,9 @@
   "login.inviteTitle": "Invite access",
   "login.inviteLinkExpired": "This invite link expired. A new invite link was sent to your email.",
   "login.inviteLinkInvalid": "This invite link is no longer valid.",
+  "login.quoteText": "Airbyte has cut <b>months of man hours off</b> of our ELT pipeline development and delivered usable data to us in hours instead of weeks. We are excited for the future of Airbyte, enthusiastic about their approach, and optimistic about our future together.",
+  "login.quoteAuthor": "Micah Mangione",
+  "login.quoteAuthorJobTitle": "Director of Technology",
 
   "confirmResetPassword.newPassword": "Enter a new password",
   "confirmResetPassword.success": "Your password has been reset. Please log in with the new password.",
@@ -40,7 +43,7 @@
 
   "login.selfhosting": "Interested in self-hosting?",
   "login.opensource": "Open-source",
-  "login.deployInfrastructure": "Deploy in your own infrastructure. Free forever.",
+  "login.deployInfrastructure": "Deploy the open-source version on your own infrastructure",
 
   "workspaces.title": "Select a workspace",
   "workspaces.subtitle": "Workspaces let you collaborate with team members and share sources across your team under a shared billing account.",

diff --git a/airbyte-webapp/src/packages/cloud/views/AcceptEmailInvite.tsx b/airbyte-webapp/src/packages/cloud/views/AcceptEmailInvite.tsx
@@ -2,19 +2,21 @@ import { Formik } from "formik";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as yup from "yup";
 
-import { H1, LoadingButton } from "components";
 import HeadTitle from "components/HeadTitle";
 
 import { FieldError } from "../lib/errors/FieldError";
 import { useAuthService } from "../services/auth/AuthService";
 import { EmailLinkErrorCodes } from "../services/auth/types";
-import { BottomBlock, BottomBlockStatusMessage, FieldItem, Form } from "./auth/components/FormComponents";
+import { FieldItem, Form } from "./auth/components/FormComponents";
+import { FormTitle } from "./auth/components/FormTitle";
 import {
   EmailField,
   NameField,
   NewsField,
   PasswordField,
   SecurityField,
+  SignupButton,
+  SignupFormStatusMessage,
 } from "./auth/SignupPage/components/SignupForm";
 
 const ValidationSchema = yup.object().shape({
@@ -71,17 +73,8 @@ export const AcceptEmailInvite: React.FC = () => {
             <NewsField />
             <SecurityField />
           </FieldItem>
-          <BottomBlock>
-            <LoadingButton
-              type="submit"
-              isLoading={isSubmitting}
-              disabled={!isValid || !values.security}
-              data-testid="login.signup"
-            >
-              <FormattedMessage id="login.signup" />
-            </LoadingButton>
-            {status && <BottomBlockStatusMessage>{status}</BottomBlockStatusMessage>}
-          </BottomBlock>
+          <SignupButton isLoading={isSubmitting} disabled={!isValid || !values.security} />
+          {status && <SignupFormStatusMessage>{status}</SignupFormStatusMessage>}
         </Form>
       )}
     </Formik>
@@ -90,9 +83,9 @@ export const AcceptEmailInvite: React.FC = () => {
   return (
     <>
       <HeadTitle titles={[{ id: "login.inviteTitle" }]} />
-      <H1 bold>
+      <FormTitle>
         <FormattedMessage id="login.inviteTitle" />
-      </H1>
+      </FormTitle>
       {formElement}
     </>
   );

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/Auth.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/Auth.module.scss
@@ -0,0 +1,21 @@
+@use "../../../../scss/colors";
+
+.container {
+  width: 100%;
+  background: colors.$white;
+  display: grid;
+  height: 100%;
+  grid-template-columns: minmax(max-content, 50%) minmax(500px, 50%);
+}
+
+.leftSide {
+  flex: 1 0 0;
+  padding: 20px 36px 39px 46px;
+  height: 100%;
+}
+
+.rightSide {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx b/airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx
@@ -1,6 +1,5 @@
 import React, { Suspense } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
-import styled from "styled-components";
 
 import { LoadingPage } from "components";
 
@@ -9,43 +8,21 @@ import { CloudRoutes } from "packages/cloud/cloudRoutes";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 import { FirebaseActionRoute } from "packages/cloud/views/FirebaseActionRoute";
 
+import styles from "./Auth.module.scss";
 import FormContent from "./components/FormContent";
-import News from "./components/News";
+import { PersonQuoteCover } from "./components/PersonQuoteCover";
 import { LoginPage } from "./LoginPage";
 import { ResetPasswordPage } from "./ResetPasswordPage";
 import { SignupPage } from "./SignupPage";
 
-const Content = styled.div`
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-  background: ${({ theme }) => theme.whiteColor};
-`;
-
-const Part = styled.div`
-  flex: 1 0 0;
-  padding: 20px 36px 39px 46px;
-  height: 100%;
-`;
-
-const NewsPart = styled(Part)`
-  background: ${({ theme }) => theme.beigeColor};
-  padding: 36px 97px 39px 64px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
 const Auth: React.FC = () => {
   const { pathname, location } = useRouter();
   const { loggedOut } = useAuthService();
   const toLogin = pathname === CloudRoutes.Signup || pathname === CloudRoutes.FirebaseAction;
 
   return (
-    <Content>
-      <Part>
+    <div className={styles.container}>
+      <div className={styles.leftSide}>
         <FormContent toLogin={toLogin}>
           <Suspense fallback={<LoadingPage />}>
             <Routes>
@@ -60,11 +37,11 @@ const Auth: React.FC = () => {
             </Routes>
           </Suspense>
         </FormContent>
-      </Part>
-      <NewsPart>
-        <News />
-      </NewsPart>
-    </Content>
+      </div>
+      <div className={styles.rightSide}>
+        <PersonQuoteCover />
+      </div>
+    </div>
   );
 };
 

diff --git a/...ebapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx b/...ebapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx
@@ -26,7 +26,7 @@ const ResetPasswordConfirmPage: React.FC = () => {
 
   return (
     <div>
-      <FormTitle bold>
+      <FormTitle>
         <FormattedMessage id="login.resetPassword" />
       </FormTitle>
 

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.module.scss
@@ -0,0 +1,11 @@
+.logInBtn {
+  width: 90px;
+  height: 44px;
+  font-weight: 600 !important; // FIXME: solve style order issue
+  font-size: 16px !important; // FIXME: solve style order issue
+  line-height: 19px;
+}
+
+.forgotPassword {
+  font-size: 12px;
+}
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx
@@ -13,6 +13,8 @@ import { useAuthService } from "packages/cloud/services/auth/AuthService";
 import { BottomBlock, FieldItem, Form } from "packages/cloud/views/auth/components/FormComponents";
 import { FormTitle } from "packages/cloud/views/auth/components/FormTitle";
 
+import styles from "./LoginPage.module.scss";
+
 const LoginPageValidationSchema = yup.object().shape({
   email: yup.string().email("form.email.error").required("form.empty.error"),
   password: yup.string().required("form.empty.error"),
@@ -26,7 +28,7 @@ const LoginPage: React.FC = () => {
   return (
     <div>
       <HeadTitle titles={[{ id: "login.login" }]} />
-      <FormTitle bold>
+      <FormTitle>
         <FormattedMessage id="login.loginTitle" />
       </FormTitle>
 
@@ -86,10 +88,15 @@ const LoginPage: React.FC = () => {
             </FieldItem>
             <BottomBlock>
               <>
-                <Link to={CloudRoutes.ResetPassword} $light data-testid="reset-password-link">
+                <Link
+                  to={CloudRoutes.ResetPassword}
+                  className={styles.forgotPassword}
+                  $light
+                  data-testid="reset-password-link"
+                >
                   <FormattedMessage id="login.forgotPassword" />
                 </Link>
-                <LoadingButton type="submit" isLoading={isSubmitting}>
+                <LoadingButton className={styles.logInBtn} type="submit" isLoading={isSubmitting}>
                   <FormattedMessage id="login.login" />
                 </LoadingButton>
               </>

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/ResetPasswordPage/ResetPasswordPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/ResetPasswordPage/ResetPasswordPage.tsx
@@ -25,7 +25,7 @@ const ResetPasswordPage: React.FC = () => {
   return (
     <div>
       <HeadTitle titles={[{ id: "login.resetPassword" }]} />
-      <FormTitle bold>
+      <FormTitle>
         <FormattedMessage id="login.resetPassword" />
       </FormTitle>
 

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.module.scss
@@ -0,0 +1,13 @@
+@use "../../../../../scss/colors";
+
+.title {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 39px;
+  width: 250px;
+  color: colors.$dark-blue-900;
+}
+
+.highlight {
+  color: colors.$blue-400;
+}
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
@@ -1,19 +1,32 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { H1 } from "components";
 import HeadTitle from "components/HeadTitle";
 
 import { SignupForm } from "./components/SignupForm";
 import SpecialBlock from "./components/SpecialBlock";
+import styles from "./SignupPage.module.scss";
 
-const SignupPage: React.FC = () => {
+interface SignupPageProps {
+  highlightStyle?: React.CSSProperties;
+}
+
+const SignupPage: React.FC<SignupPageProps> = ({ highlightStyle }) => {
   return (
     <div>
       <HeadTitle titles={[{ id: "login.signup" }]} />
-      <H1 bold>
-        <FormattedMessage id="login.activateAccess" />
-      </H1>
+      <h1 className={styles.title}>
+        <FormattedMessage
+          id="login.activateAccess"
+          values={{
+            hl: (hl: React.ReactNode) => (
+              <span className={styles.highlight} style={highlightStyle}>
+                {hl}
+              </span>
+            ),
+          }}
+        />
+      </h1>
       <SpecialBlock />
       <SignupForm />
     </div>

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.module.scss
@@ -0,0 +1,15 @@
+@use "../../../../../../scss/colors";
+@use "../../../../../../scss/variables";
+
+.signUpButton {
+  width: 100% !important;
+  font-weight: 600 !important;
+  font-size: 16px !important;
+  line-height: 19px !important;
+  height: 44px !important;
+}
+
+.statusMessage {
+  margin-top: variables.$spacing-md;
+  color: colors.$red;
+}