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 <kinga.sieminiak@zalando.de>

packages/app/src/App.tsx

@@ -33,7 +33,12 @@ const app = createApp({
   components: {
     SignInPage: props => {
       return (
-        <SignInPage {...props} providers={['guest', 'custom', ...providers]} />
+        <SignInPage
+          {...props}
+          providers={['guest', 'custom', ...providers]}
+          title="Select a sign-in method"
+          align="center"
+        />
       );
     },
   },

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<ContentHeaderProps> = ({
@@ -80,8 +83,9 @@ export const ContentHeader: FC<ContentHeaderProps> = ({
   title,
   titleComponent: TitleComponent = undefined,
   children,
+  textAlign = 'left',
 }) => {
-  const classes = useStyles();
+  const classes = useStyles({ textAlign })();
 
   const renderedTitle = TitleComponent ? (
     <TitleComponent />

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',

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<Props> = ({ onResult, providers = [] }) => {
+export const SignInPage: FC<Props> = ({
+  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<Props> = ({ onResult, providers = [] }) => {
     <Page>
       <Header title={configApi.getString('app.title')} />
       <Content>
-        <ContentHeader title="Select a sign-in method" />
-        <Grid container>{providerElements}</Grid>
+        {title && <ContentHeader title={title} textAlign={align} />}
+        <Grid
+          container
+          justify={align === 'center' ? align : 'flex-start'}
+          spacing={2}
+          component="ul"
+          classes={classes}
+        >
+          {providerElements}
+        </Grid>
       </Content>
     </Page>
   );

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 (
-    <Grid item>
+    <GridItem>
       <InfoCard
+        variant="fullHeight"
         title={title}
         actions={
           <Button color="primary" variant="outlined" onClick={handleLogin}>
@@ -64,7 +66,7 @@ const Component: ProviderComponent = ({ config, onResult }) => {
       >
         <Typography variant="body1">{message}</Typography>
       </InfoCard>
-    </Grid>
+    </GridItem>
   );
 };
 

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 (
-    <Grid item>
-      <InfoCard title="Custom User">
+    <GridItem>
+      <InfoCard title="Custom User" variant="fullHeight">
         <Typography variant="body1">
           Enter your own User ID and credentials.
           <br />
@@ -115,7 +115,7 @@ const Component: ProviderComponent = ({ onResult }) => {
           </Button>
         </form>
       </InfoCard>
-    </Grid>
+    </GridItem>
   );
 };
 

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 }) => (
-  <Grid item>
+  <GridItem>
     <InfoCard
       title="Guest"
+      variant="fullHeight"
       actions={
         <Button
           color="primary"
@@ -49,7 +51,7 @@ const Component: ProviderComponent = ({ onResult }) => (
         meaning some features might be unavailable.
       </Typography>
     </InfoCard>
-  </Grid>
+  </GridItem>
 );
 
 const loader: ProviderLoader = async () => {

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 (
+    <Grid component="li" item classes={classes}>
+      {children}
+    </Grid>
+  );
+};