yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweak layout of login screen to account for new custom logos

Browse Source
This commit is contained in:
Tom Moor
2022-10-23 11:36:54 -04:00
parent 60f6a1f1c6
commit e714e934cb
3 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/scenes/Document/Shared.tsx
View File

@@ -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;
`;

39
app/scenes/Login/index.tsx
View File

@@ -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">
<BackIcon color="currentColor" /> {t("Back to website")}
<Back href={isSubdomain ? env.URL : "https://www.getoutline.com"}>
<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>
<GetStarted>
<StyledHeading as="h2" centered>
{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;

2
shared/i18n/locales/en_US/translation.json
View File

@@ -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.",