fix: Spacing on login form

fix: signup query params overridden unneccessarily
closes #3516

app/scenes/Login/AuthenticationProvider.tsx

@@ -21,7 +21,7 @@ type State = {
   email: string;
 };
 
-class Provider extends React.Component<Props, State> {
+class AuthenticationProvider extends React.Component<Props, State> {
   state = {
     showEmailSignin: false,
     isSubmitting: false,
@@ -123,7 +123,6 @@ class Provider extends React.Component<Props, State> {
 }
 
 const Wrapper = styled.div`
-  margin-bottom: 1em;
   width: 100%;
 `;
 
@@ -133,4 +132,4 @@ const Form = styled.form`
   justify-content: space-between;
 `;
 
-export default withTranslation()(Provider);
+export default withTranslation()(AuthenticationProvider);

app/scenes/Login/index.tsx

@@ -5,12 +5,13 @@ import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useLocation, Link, Redirect } from "react-router-dom";
 import styled from "styled-components";
-import { setCookie } from "tiny-cookie";
+import { getCookie, setCookie } from "tiny-cookie";
 import { Config } from "~/stores/AuthStore";
 import ButtonLarge from "~/components/ButtonLarge";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
+import LoadingIndicator from "~/components/LoadingIndicator";
 import NoticeAlert from "~/components/NoticeAlert";
 import OutlineLogo from "~/components/OutlineLogo";
 import PageTitle from "~/components/PageTitle";
@@ -22,8 +23,8 @@ import useStores from "~/hooks/useStores";
 import { isCustomDomain } from "~/utils/domains";
 import isHosted from "~/utils/isHosted";
 import { changeLanguage, detectLanguage } from "~/utils/language";
+import AuthenticationProvider from "./AuthenticationProvider";
 import Notices from "./Notices";
-import Provider from "./Provider";
 
 function Header({ config }: { config?: Config | undefined }) {
   const { t } = useTranslation();
@@ -77,11 +78,11 @@ function Login() {
 
   React.useEffect(() => {
     const entries = Object.fromEntries(query.entries());
+    const existing = getCookie("signupQueryParams");
 
-    // We don't want to override this cookie if we're viewing an error notice
-    // sent back from the server via query string (notice=), or if there are no
-    // query params at all.
-    if (Object.keys(entries).length && !query.get("notice")) {
+    // We don't want to set this cookie if we're viewing an error notice via
+    // query string(notice =), if there are no query params, or it's already set
+    if (Object.keys(entries).length && !query.get("notice") && !existing) {
       setCookie("signupQueryParams", JSON.stringify(entries));
     }
   }, [query]);
@@ -114,9 +115,10 @@ function Login() {
     );
   }
 
-  // we're counting on the config request being fast, so display nothing while waiting
+  // we're counting on the config request being fast, so just a simple loading
+  // indicator here that's delayed by 250ms
   if (!config) {
-    return null;
+    return <LoadingIndicator />;
   }
 
   const hasMultipleProviders = config.providers.length > 1;
@@ -152,7 +154,7 @@ function Login() {
   return (
     <Background>
       <Header config={config} />
-      <Centered align="center" justify="center" column auto>
+      <Centered align="center" justify="center" gap={12} column auto>
         <PageTitle title={t("Login")} />
         <Logo>
           {env.TEAM_LOGO && !isHosted ? (
@@ -163,7 +165,7 @@ function Login() {
         </Logo>
         {isCreate ? (
           <>
-            <Heading centered>{t("Create an account")}</Heading>
+            <StyledHeading centered>{t("Create an account")}</StyledHeading>
             <GetStarted>
               {t(
                 "Get started by choosing a sign-in method for your new team below…"
@@ -171,16 +173,16 @@ function Login() {
             </GetStarted>
           </>
         ) : (
-          <Heading centered>
+          <StyledHeading centered>
             {t("Login to {{ authProviderName }}", {
               authProviderName: config.name || "Outline",
             })}
-          </Heading>
+          </StyledHeading>
         )}
         <Notices />
         {defaultProvider && (
           <React.Fragment key={defaultProvider.id}>
-            <Provider
+            <AuthenticationProvider
               isCreate={isCreate}
               onEmailSuccess={handleEmailSuccess}
               {...defaultProvider}
@@ -203,7 +205,7 @@ function Login() {
           }
 
           return (
-            <Provider
+            <AuthenticationProvider
               key={provider.id}
               isCreate={isCreate}
               onEmailSuccess={handleEmailSuccess}
@@ -223,6 +225,10 @@ function Login() {
   );
 }
 
+const StyledHeading = styled(Heading)`
+  margin: 0;
+`;
+
 const CheckEmailIcon = styled(EmailIcon)`
   margin-bottom: -1.5em;
 `;
@@ -235,7 +241,6 @@ const Background = styled(Fade)`
 `;
 
 const Logo = styled.div`
-  margin-bottom: -1.5em;
   height: 38px;
 `;
 

shared/i18n/locales/en_US/translation.json

@@ -507,6 +507,9 @@
   "Blockquote": "Blockquote",
   "Horizontal divider": "Horizontal divider",
   "Inline code": "Inline code",
+  "Sign In": "Sign In",
+  "Continue with Email": "Continue with Email",
+  "Continue with {{ authProviderName }}": "Continue with {{ authProviderName }}",
   "Back to home": "Back to home",
   "Back to website": "Back to website",
   "Login": "Login",
@@ -519,9 +522,6 @@
   "Login to {{ authProviderName }}": "Login to {{ authProviderName }}",
   "You signed in with {{ authProviderName }} last time.": "You signed in with {{ authProviderName }} last time.",
   "Already have an account? Go to <1>login</1>.": "Already have an account? Go to <1>login</1>.",
-  "Sign In": "Sign In",
-  "Continue with Email": "Continue with Email",
-  "Continue with {{ authProviderName }}": "Continue with {{ authProviderName }}",
   "Any collection": "Any collection",
   "Any time": "Any time",
   "Past day": "Past day",