Tweak layout of login screen to account for new custom logos

app/scenes/Document/Shared.tsx

@@ -125,14 +125,14 @@ function SharedDocumentScene(props: Props) {
         <Login>
           {(config) =>
             config?.name && isCloudHosted ? (
-              <GetStarted>
+              <Content>
                 {t(
                   "{{ teamName }} is using Outline to share documents, please login to continue.",
                   {
                     teamName: config.name,
                   }
                 )}
-              </GetStarted>
+              </Content>
             ) : null
           }
         </Login>
@@ -175,7 +175,8 @@ function SharedDocumentScene(props: Props) {
   );
 }
 
-const GetStarted = styled(Text)`
+const Content = styled(Text)`
+  color: ${(props) => props.theme.textSecondary};
   text-align: center;
   margin-top: -8px;
 `;

app/scenes/Login/index.tsx

@@ -35,17 +35,9 @@ function Header({ config }: { config?: Config | undefined }) {
     return null;
   }
 
-  if (isSubdomain) {
-    return (
-      <Back href={env.URL}>
-        <BackIcon color="currentColor" /> {t("Back to home")}
-      </Back>
-    );
-  }
-
   return (
-    <Back href="https://www.getoutline.com">
+    <Back href={isSubdomain ? env.URL : "https://www.getoutline.com"}>
-      <BackIcon color="currentColor" /> {t("Back to website")}
+      <BackIcon color="currentColor" /> {t("Back to home")}
     </Back>
   );
 }
@@ -172,26 +164,30 @@ function Login({ children }: Props) {
     <Background>
       <Header config={config} />
       <Centered align="center" justify="center" gap={12} column auto>
-        <PageTitle title={t("Login")} />
+        <PageTitle
+          title={config.name ? `${config.name} – ${t("Login")}` : t("Login")}
+        />
         <Logo>
           {config.logo ? (
-            <TeamLogo src={config.logo} />
+            <TeamLogo width={48} height={48} src={config.logo} />
           ) : (
-            <OutlineLogo size={38} fill="currentColor" />
+            <OutlineLogo size={42} fill="currentColor" />
           )}
         </Logo>
         {isCreate ? (
           <>
-            <StyledHeading centered>{t("Create an account")}</StyledHeading>
+            <StyledHeading as="h2" centered>
-            <GetStarted>
+              {t("Create a workspace")}
+            </StyledHeading>
+            <Content>
               {t(
                 "Get started by choosing a sign-in method for your new workspace below…"
               )}
-            </GetStarted>
+            </Content>
           </>
         ) : (
           <>
-            <StyledHeading centered>
+            <StyledHeading as="h2" centered>
               {t("Login to {{ authProviderName }}", {
                 authProviderName: config.name || "Outline",
               })}
@@ -261,17 +257,20 @@ const Background = styled(Fade)`
 `;
 
 const Logo = styled.div`
-  height: 38px;
+  margin-bottom: -4px;
 `;
 
-const GetStarted = styled(Text)`
+const Content = styled(Text)`
+  color: ${(props) => props.theme.textSecondary};
   text-align: center;
-  margin-top: -12px;
+  margin-top: -8px;
 `;
 
 const Note = styled(Text)`
+  color: ${(props) => props.theme.textTertiary};
   text-align: center;
   font-size: 14px;
+  margin-top: 8px;
 
   em {
     font-style: normal;

shared/i18n/locales/en_US/translation.json

@@ -551,14 +551,12 @@
   "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",
   "Failed to load configuration.": "Failed to load configuration.",
   "Check the network requests and server logs for full details of the error.": "Check the network requests and server logs for full details of the error.",
   "Check your email": "Check your email",
   "A magic sign-in link has been sent to the email <em>{{ emailLinkSentTo }}</em> if an account exists.": "A magic sign-in link has been sent to the email <em>{{ emailLinkSentTo }}</em> if an account exists.",
   "Back to login": "Back to login",
-  "Create an account": "Create an account",
   "Get started by choosing a sign-in method for your new workspace below…": "Get started by choosing a sign-in method for your new workspace below…",
   "Login to {{ authProviderName }}": "Login to {{ authProviderName }}",
   "You signed in with {{ authProviderName }} last time.": "You signed in with {{ authProviderName }} last time.",