From 8c09dccfcb205a30d226fe6a2dd01025828d4fa9 Mon Sep 17 00:00:00 2001 From: Kinga Sieminiak Date: Wed, 12 Aug 2020 08:53:49 +0200 Subject: [PATCH] Refactor of sign-in page styles (#1894) * Allow extending and customizing Backstage layout components * Allow customizing layout of SignInPage through the props * Use flex property to stretch card's content * Adapt ContentHeader styles based on props Co-authored-by: Kinga Sieminiak --- packages/app/src/App.tsx | 7 +- .../layout/ContentHeader/ContentHeader.tsx | 70 ++++++++++--------- .../core/src/layout/InfoCard/InfoCard.tsx | 6 +- .../core/src/layout/SignInPage/SignInPage.tsx | 23 +++++- .../src/layout/SignInPage/commonProvider.tsx | 8 ++- .../src/layout/SignInPage/customProvider.tsx | 8 +-- .../src/layout/SignInPage/guestProvider.tsx | 8 ++- .../core/src/layout/SignInPage/styles.tsx | 42 +++++++++++ 8 files changed, 123 insertions(+), 49 deletions(-) create mode 100644 packages/core/src/layout/SignInPage/styles.tsx diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 9a9fdfe5c4..993fd77978 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -33,7 +33,12 @@ const app = createApp({ components: { SignInPage: props => { return ( - + ); }, }, diff --git a/packages/core/src/layout/ContentHeader/ContentHeader.tsx b/packages/core/src/layout/ContentHeader/ContentHeader.tsx index 691c7d11f7..4652e04cdf 100644 --- a/packages/core/src/layout/ContentHeader/ContentHeader.tsx +++ b/packages/core/src/layout/ContentHeader/ContentHeader.tsx @@ -22,38 +22,40 @@ import React, { ComponentType, Fragment, FC } from 'react'; import { Typography, makeStyles } from '@material-ui/core'; import { Helmet } from 'react-helmet'; -const useStyles = makeStyles(theme => ({ - container: { - width: '100%', - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'flex-end', - alignItems: 'center', - marginBottom: theme.spacing(1), - }, - leftItemsBox: { - flex: '1 1 auto', - marginBottom: theme.spacing(1), - minWidth: 0, - overflow: 'visible', - }, - rightItemsBox: { - flex: '0 1 auto', - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - alignItems: 'center', - marginLeft: theme.spacing(1), - marginBottom: theme.spacing(1), - minWidth: 0, - overflow: 'visible', - }, - description: {}, - title: { - display: 'inline-flex', - }, -})); +const useStyles = (props: ContentHeaderProps) => + makeStyles(theme => ({ + container: { + width: '100%', + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'flex-end', + alignItems: 'center', + marginBottom: theme.spacing(1), + textAlign: props.textAlign, + }, + leftItemsBox: { + flex: '1 1 auto', + marginBottom: theme.spacing(1), + minWidth: 0, + overflow: 'visible', + }, + rightItemsBox: { + flex: '0 1 auto', + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + alignItems: 'center', + marginLeft: theme.spacing(1), + marginBottom: theme.spacing(1), + minWidth: 0, + overflow: 'visible', + }, + description: {}, + title: { + display: 'inline-flex', + }, + })); type DefaultTitleProps = { title?: string; @@ -73,6 +75,7 @@ type ContentHeaderProps = { title?: DefaultTitleProps['title']; titleComponent?: ComponentType; description?: string; + textAlign?: 'left' | 'right' | 'center'; }; export const ContentHeader: FC = ({ @@ -80,8 +83,9 @@ export const ContentHeader: FC = ({ title, titleComponent: TitleComponent = undefined, children, + textAlign = 'left', }) => { - const classes = useStyles(); + const classes = useStyles({ textAlign })(); const renderedTitle = TitleComponent ? ( diff --git a/packages/core/src/layout/InfoCard/InfoCard.tsx b/packages/core/src/layout/InfoCard/InfoCard.tsx index 04736b64cd..86e9c79ced 100644 --- a/packages/core/src/layout/InfoCard/InfoCard.tsx +++ b/packages/core/src/layout/InfoCard/InfoCard.tsx @@ -60,6 +60,8 @@ const VARIANT_STYLES = { flexDirection: 'column', }, fullHeight: { + display: 'flex', + flexDirection: 'column', height: '100%', }, height100: { @@ -84,10 +86,10 @@ const VARIANT_STYLES = { }, cardContent: { fullHeight: { - height: 'calc(100% - 50px)', + flex: 1, }, height100: { - height: 'calc(100% - 50px)', + flex: 1, }, contentRow: { display: 'flex', diff --git a/packages/core/src/layout/SignInPage/SignInPage.tsx b/packages/core/src/layout/SignInPage/SignInPage.tsx index 52a27f190e..8a1ff68250 100644 --- a/packages/core/src/layout/SignInPage/SignInPage.tsx +++ b/packages/core/src/layout/SignInPage/SignInPage.tsx @@ -24,13 +24,22 @@ import { SignInPageProps, useApi, configApiRef } from '@backstage/core-api'; import { useSignInProviders, getSignInProviders } from './providers'; import { IdentityProviders } from './types'; import { Progress } from '../../components/Progress'; +import { useStyles } from './styles'; export type Props = SignInPageProps & { providers: IdentityProviders; + title?: string; + align?: 'center' | 'left'; }; -export const SignInPage: FC = ({ onResult, providers = [] }) => { +export const SignInPage: FC = ({ + onResult, + providers = [], + title, + align = 'left', +}) => { const configApi = useApi(configApiRef); + const classes = useStyles(); const signInProviders = getSignInProviders(providers); const [loading, providerElements] = useSignInProviders( @@ -46,8 +55,16 @@ export const SignInPage: FC = ({ onResult, providers = [] }) => {
- - {providerElements} + {title && } + + {providerElements} + ); diff --git a/packages/core/src/layout/SignInPage/commonProvider.tsx b/packages/core/src/layout/SignInPage/commonProvider.tsx index f9611342a2..de9452a850 100644 --- a/packages/core/src/layout/SignInPage/commonProvider.tsx +++ b/packages/core/src/layout/SignInPage/commonProvider.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { Grid, Typography, Button } from '@material-ui/core'; +import { Typography, Button } from '@material-ui/core'; import { InfoCard } from '../InfoCard/InfoCard'; import { ProviderComponent, @@ -24,6 +24,7 @@ import { SignInConfig, } from './types'; import { useApi, errorApiRef } from '@backstage/core-api'; +import { GridItem } from './styles'; const Component: ProviderComponent = ({ config, onResult }) => { const { apiRef, title, message } = config as SignInConfig; @@ -53,8 +54,9 @@ const Component: ProviderComponent = ({ config, onResult }) => { }; return ( - + @@ -64,7 +66,7 @@ const Component: ProviderComponent = ({ config, onResult }) => { > {message} - + ); }; diff --git a/packages/core/src/layout/SignInPage/customProvider.tsx b/packages/core/src/layout/SignInPage/customProvider.tsx index c6cb9b789d..d3a292ce87 100644 --- a/packages/core/src/layout/SignInPage/customProvider.tsx +++ b/packages/core/src/layout/SignInPage/customProvider.tsx @@ -17,7 +17,6 @@ import React from 'react'; import { useForm } from 'react-hook-form'; import { - Grid, Typography, Button, FormControl, @@ -28,6 +27,7 @@ import { import isEmpty from 'lodash/isEmpty'; import { InfoCard } from '../InfoCard/InfoCard'; import { ProviderComponent, ProviderLoader, SignInProvider } from './types'; +import { GridItem } from './styles'; const ID_TOKEN_REGEX = /^[a-z0-9+/]+\.[a-z0-9+/]+\.[a-z0-9+/]+$/i; @@ -64,8 +64,8 @@ const Component: ProviderComponent = ({ onResult }) => { }; return ( - - + + Enter your own User ID and credentials.
@@ -115,7 +115,7 @@ const Component: ProviderComponent = ({ onResult }) => { - + ); }; diff --git a/packages/core/src/layout/SignInPage/guestProvider.tsx b/packages/core/src/layout/SignInPage/guestProvider.tsx index 85784eb205..f4854311ac 100644 --- a/packages/core/src/layout/SignInPage/guestProvider.tsx +++ b/packages/core/src/layout/SignInPage/guestProvider.tsx @@ -15,8 +15,9 @@ */ import React from 'react'; -import { Grid, Typography, Button } from '@material-ui/core'; +import { Typography, Button } from '@material-ui/core'; import { InfoCard } from '../InfoCard/InfoCard'; +import { GridItem } from './styles'; import { ProviderComponent, ProviderLoader, SignInProvider } from './types'; const result = { @@ -28,9 +29,10 @@ const result = { }; const Component: ProviderComponent = ({ onResult }) => ( - + ( meaning some features might be unavailable. - + ); const loader: ProviderLoader = async () => { diff --git a/packages/core/src/layout/SignInPage/styles.tsx b/packages/core/src/layout/SignInPage/styles.tsx new file mode 100644 index 0000000000..0d8bd245c5 --- /dev/null +++ b/packages/core/src/layout/SignInPage/styles.tsx @@ -0,0 +1,42 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { Grid, makeStyles } from '@material-ui/core'; + +export const useStyles = makeStyles({ + container: { + padding: 0, + listStyle: 'none', + }, + item: { + display: 'flex', + flexDirection: 'column', + width: '100%', + maxWidth: '400px', + margin: 0, + padding: 0, + }, +}); + +export const GridItem = ({ children }: { children: JSX.Element }) => { + const classes = useStyles(); + + return ( + + {children} + + ); +};