Merge pull request #149 from contember/pr/login-form-style

Fix global layout style & Update login layout

packages/admin/src/components/Login/LoginEntrypoint.tsx

@@ -1,5 +1,7 @@
 import { ContemberClient } from '@contember/react-client'
+import { Button, ErrorList, Icon } from '@contember/ui'
 import { FC, ReactNode, useMemo, useState } from 'react'
+import { Link, RequestProvider, RoutingContext, RoutingContextValue } from '../../routing'
 import {
 	CreateResetPasswordRequestForm,
 	FillResetPasswordTokenForm,
@@ -9,13 +11,11 @@ import {
 	Login,
 	ResetPasswordForm,
 } from '../../tenant'
+import { IdentityProvider, useLogout, useOptionalIdentity } from '../Identity'
+import { MiscPageLayout } from '../MiscPageLayout'
+import { Page, Pages } from '../pageRouting'
 import { Project, ProjectListButtons } from '../Project'
 import { Toaster, ToasterProvider } from '../Toaster'
-import { Link, RequestProvider, RoutingContext, RoutingContextValue } from '../../routing'
-import { Page, Pages } from '../pageRouting'
-import { MiscPageLayout } from '../MiscPageLayout'
-import { IdentityProvider, useLogout, useOptionalIdentity } from '../Identity'
-import { Button, ErrorList, Icon } from '@contember/ui'
 
 
 export interface LoginEntrypointProps {
@@ -66,14 +66,14 @@ export const LoginEntrypoint = (props: LoginEntrypointProps) => {
 							</Page>
 							<Page name={resetRequestPageName}>
 								<MiscPageLayout heading="Password reset" actions={<>
-									<Link to={indexPageName}>Back to login</Link>
+									<Link to={indexPageName}>&larr; Back to login</Link>
 								</>}>
 									<CreateResetPasswordRequestForm redirectOnSuccess={redirectOnSuccessPageName} />
 								</MiscPageLayout>
 							</Page>
 							<Page name={redirectOnSuccessPageName}>
 								<MiscPageLayout heading="Password reset" actions={<>
-									<Link to={indexPageName}>Back to login</Link>
+									<Link to={indexPageName}>&larr; Back to login</Link>
 								</>}>
 									<p>
 										Password reset request has been successfully created. Please check your inbox for the instructions.
@@ -87,7 +87,7 @@ export const LoginEntrypoint = (props: LoginEntrypointProps) => {
 							<Page name={passwordResetPageName}>
 								{({ token }: { token: string }) => (
 									<MiscPageLayout heading="Set a new password" actions={<>
-										<Link to={indexPageName}>Back to login</Link>
+										<Link to={indexPageName}>&larr; Back to login</Link>
 									</>}>
 										<ResetPasswordForm token={token} redirectOnSuccess={indexPageName} />
 									</MiscPageLayout>

packages/admin/src/components/MiscPageLayout.tsx

@@ -1,13 +1,21 @@
-import { Aether, Box, BoxOwnProps } from '@contember/ui'
+import { Aether, Box, BoxOwnProps, Heading, Stack } from '@contember/ui'
 import { memo } from 'react'
 
 export interface MiscPageLayoutProps extends BoxOwnProps {}
 
-export const MiscPageLayout = memo<MiscPageLayoutProps>(props => (
+export const MiscPageLayout = memo<MiscPageLayoutProps>(({ heading, children, ...props }) => (
 	<Aether>
 		<div className="centerCard">
 			<div className="centerCard-in">
-				<Box {...props} />
+				<Box {...props}>
+					<Stack direction="vertical" gap="large">
+						{heading && (typeof heading === 'string'
+							? <Heading size="small" depth={1}>{heading}</Heading>
+							: heading
+						)}
+						{children}
+					</Stack>
+				</Box>
 			</div>
 		</div>
 	</Aether>

packages/admin/src/styles/_globalOverrides.sass

@@ -10,6 +10,7 @@ body
 	margin: 0
 	padding: 0
 	font-smoothing: antialiased
+	min-width: 100vw
 	@media (min-width: $breakpoint-min-medium)
 		width: fit-content
 	-webkit-font-smoothing: antialiased

packages/admin/src/tenant/components/password/CreateResetPasswordRequestForm.tsx

@@ -1,4 +1,4 @@
-import { Button, FieldContainer, TextInput } from '@contember/ui'
+import { Button, FieldContainer, Stack, TextInput } from '@contember/ui'
 import { FC, useCallback } from 'react'
 import { useShowToast } from '../../../components'
 import { RoutingLinkTarget, useRedirect } from '../../../routing'
@@ -44,14 +44,16 @@ export const CreateResetPasswordRequestForm: FC<CreateResetPasswordRequestFormPr
 
 	return (
 		<form onSubmit={onSubmit}>
-			<FieldContainer label="E-mail">
-				<TextInput {...register('email')} required={true} type={'email'} />
-			</FieldContainer>
-			<FieldContainer label={undefined}>
-				<Button intent="primary" type={'submit'} disabled={isSubmitting}>
-					Reset password
-				</Button>
-			</FieldContainer>
+			<Stack direction="vertical" gap="large">
+				<FieldContainer label="E-mail">
+					<TextInput {...register('email')} required={true} type={'email'} />
+				</FieldContainer>
+				<FieldContainer label={undefined}>
+					<Button intent="primary" type={'submit'} disabled={isSubmitting}>
+						Reset password
+					</Button>
+				</FieldContainer>
+			</Stack>
 		</form>
 	)
 }

packages/admin/src/tenant/components/password/FillResetPasswordTokenForm.tsx

@@ -1,4 +1,4 @@
-import { Button, FieldContainer, TextInput } from '@contember/ui'
+import { Button, FieldContainer, Stack, TextInput } from '@contember/ui'
 import { FC, useCallback } from 'react'
 import { RoutingLinkTarget, useRedirect } from '../../../routing'
 import { useForm } from '../../lib'
@@ -24,14 +24,16 @@ export const FillResetPasswordTokenForm: FC<FillResetPasswordTokenFormProps> = (
 
 	return (
 		<form onSubmit={onSubmit}>
-			<FieldContainer label="Token">
-				<TextInput {...register('token')} required={true} />
-			</FieldContainer>
-			<FieldContainer label={undefined}>
-				<Button intent="primary" type={'submit'} disabled={isSubmitting}>
-					Continue
-				</Button>
-			</FieldContainer>
+			<Stack direction="vertical" gap="large">
+				<FieldContainer label="Token">
+					<TextInput {...register('token')} required={true} />
+				</FieldContainer>
+				<FieldContainer label={undefined}>
+					<Button intent="primary" type={'submit'} disabled={isSubmitting}>
+						Continue
+					</Button>
+				</FieldContainer>
+			</Stack>
 		</form>
 	)
 }

packages/admin/src/tenant/components/person/Login.tsx

@@ -1,6 +1,6 @@
 import { getTenantErrorMessage } from '@contember/client'
 import { useSetSessionToken } from '@contember/react-client'
-import { Button, ErrorList, FieldContainer, FieldError, Section, TextInput } from '@contember/ui'
+import { Button, ErrorList, FieldContainer, FieldError, Stack, TextInput } from '@contember/ui'
 import { useCallback, useState } from 'react'
 import { Link, RoutingLinkTarget } from '../../../routing'
 import { useForm, useSignIn } from '../../index'
@@ -46,7 +46,7 @@ export const Login = ({ onLogin, resetLink }: LoginProps) => {
 
 	return (
 		<form onSubmit={onSubmit}>
-			<Section>
+			<Stack direction="vertical" gap="large">
 				<ErrorList errors={errors} />
 				<FieldContainer label="Email">
 					<TextInput
@@ -74,12 +74,14 @@ export const Login = ({ onLogin, resetLink }: LoginProps) => {
 				</FieldContainer>}
 
 				<FieldContainer label={undefined}>
-					<Button type="submit" intent="primary" disabled={isSubmitting}>
-						Submit
-					</Button>
-					{resetLink && <Link to={resetLink} style={{ float: 'right' }}>Forgot your password?</Link>}
+					<Stack direction="horizontal" align="center" justify="space-between">
+						<Button type="submit" scheme="dark" intent="primary" disabled={isSubmitting}>
+							Submit
+						</Button>
+						{resetLink && <Link to={resetLink}>Forgot your password?</Link>}
+					</Stack>
 				</FieldContainer>
-			</Section>
+			</Stack>
 		</form>
 	)
 }

packages/ui/src/components/Box/Box.tsx

@@ -40,7 +40,7 @@ export const Box = memo(
 					<Stack gap={gap ?? 'small'} direction="vertical">
 						{(heading || actions) && (
 							<div className={`${componentClassName}-header`}>
-								<Label>{heading}</Label>
+								{heading && <Label>{heading}</Label>}
 								{actions && (
 									<div className={`${componentClassName}-actions`} contentEditable={false}>
 										{actions}

packages/ui/src/components/Forms/Button/Button.sass

@@ -109,8 +109,8 @@
 
 	&.view-squarish,
 	&.view-circular
-		height: var(--cui-control-height)
-		width: var(--cui-control-height)
+		height: var(--cui-button-height)
+		width: var(--cui-button-height)
 	&.view-generous,
 	&.view-generousBlock
 		--cui-button-padding-horizontal: calc(var(--cui-gap) * 8 - #{$border-width-em})
@@ -124,7 +124,7 @@
 		--cui-button-color: var(--cui-control-color)
 		--cui-button-color--highlighted: var(--cui-control-color--highlighted)
 		--cui-button-color--pressed: var(--cui-control-color--pressed)
-		&:not(.view-large):not(.view-generousBlock)
+		&:not(.view-large):not(.view-generousBlock):not(.view-squarish):not(.view-circular)
 			--cui-button-height: auto
 			--cui-button-padding-horizontal: calc(var(--cui-gap) - #{$border-width-em})
 		position: relative
@@ -170,8 +170,6 @@
 		text-align: end
 
 	&-content
-		align-items: center
-		display: inline-flex
 		font-size: var(--cui-button-font-size)
 		flex: 1
 		line-height: 1em
@@ -180,8 +178,9 @@
 		overflow: hidden
 		text-overflow: ellipsis
 		vertical-align: middle
+
+		// See: https://css-tricks.com/almanac/properties/l/line-clamp/
 		display: -webkit-box
-		/* number of lines to show */
 		-webkit-line-clamp: 2
 		-webkit-box-orient: vertical
 

packages/ui/src/components/Message/Message.sass

@@ -1,19 +1,23 @@
 .#{$cui-conf-globalPrefix}message
-	--cui-color: var(--cui-toned-control-color)
-	--cui-background-color: translarent
+	--message-color: var(--cui-control-color)
+	--message-background-color: transparent
+
+	--message-striking-padding-horizontal: 0
+	--message-striking-padding-vertical: 0
 
-	position: relative
-	font-weight: $fw-light
-	display: inline-flex
 	align-items: center
-	line-height: $cui-base-lineHeight
+	background-color: var(--message-background-color)
 	border-radius: var(--cui-control-border-radius)
-	color: var(--cui-color)
-	background-color: var(--cui-background-color)
+	color: var(--message-color)
+	display: inline-flex
+	font-weight: $fw-light
+	line-height: $cui-base-lineHeight
+	padding: var(--message-striking-padding-vertical) var(--message-striking-padding-horizontal)
+	position: relative
 
 	&.view-striking
-		--cui-color: var(--cui-toned-control-color)
-		--cui-background-color: var(--cui-toned-control-background-color)
+		--message-color: var(--cui-toned-control-color)
+		--message-background-color: var(--cui-toned-control-background-color)
 
 	&.view-lifted
 		box-shadow: 0 em(2px) em(6px) rgba(0, 0, 0, .025), 0 em(4px) em(12px) rgba(0, 0, 0, .05), 0 em(8px) em(24px) rgba(0, 0, 0, .1)
@@ -22,8 +26,12 @@
 		flex-grow: 1
 
 	&-action
-		margin-left: .5em
-		margin-right: -.5em
+		align-items: center
+		align-self: stretch
+		display: flex
+		gap: var(--cui-gap--horizontal)
+		.#{$cui-conf-globalPrefix}button:not(:hover)
+			color: inherit
 
 	&.view-small
 		font-size: var(--cui-message-font-size-small)
@@ -35,21 +43,12 @@
 		display: flex
 
 	&.view-striking
+		--message-striking-padding-horizontal: calc(var(--cui-padding) / 2)
+		--message-striking-padding-vertical: calc(var(--cui-padding) / 2)
 		font-weight: $fw-normal
-		padding-bottom: calc(var(--cui-padding-bottom) / 2)
-		padding-left: calc(var(--cui-padding-left) / 2)
-		padding-right: calc(var(--cui-padding-right) / 2)
-		padding-top: calc(var(--cui-padding-top) / 2)
-	&.view-striking &-action
-		margin-left: .25em
-		margin-right: -.25em
 
 	&.view-generous,
 	&.view-generousBlock
-		padding: .5em 2em
+		--message-striking-padding-horizontal: var(--cui-padding-horizontal)
+		--message-striking-padding-vertical: var(--cui-padding-vertical)
 		text-align: center
-	&.view-generous &,
-	&.view-generousBlock &
-		&-action
-			margin-left: 1em
-			margin-right: -1em