Skip to content

Commit

Permalink
style(modals): move close button to bottom of small modals (#1675)
Browse files Browse the repository at this point in the history 
* style(modals): close button move to bottom of small modals

* fix(link):cahnge to next link in create user modal
  • Loading branch information
@emilielr
emilielr authored Oct 10, 2024
1 parent aa48f92 commit d21cba7
Show file tree
Hide file tree
Showing 8 changed files with 194 additions and 120 deletions.
39 changes: 23 additions & 16 deletions tavla/app/(admin)/boards/components/Column/Delete.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'
import { Button, IconButton, SecondarySquareButton } from '@entur/button'
import { CloseIcon, DeleteIcon } from '@entur/icons'
import { Button, ButtonGroup, IconButton } from '@entur/button'
import { DeleteIcon } from '@entur/icons'
import { TBoard } from 'types/settings'
import { Tooltip } from '@entur/tooltip'
import { useModalWithValue } from '../../hooks/useModalWithValue'
Expand Down Expand Up @@ -46,13 +46,6 @@ function Delete({
closeLabel="Avbryt sletting"
className="flex flex-col justify-start items-center text-center"
>
<SecondarySquareButton
aria-label="Avbryt sletting"
className="ml-auto"
onClick={close}
>
<CloseIcon />
</SecondarySquareButton>
<Image src={sheep} alt="" className="h-1/2 w-1/2" />
<Heading3 margin="bottom">Slett tavle</Heading3>
<Paragraph className="mb-8">
Expand All @@ -66,13 +59,27 @@ function Delete({
<form action={submit} onSubmit={close} className="w-full">
<HiddenInput id="bid" value={board.id} />
<FormError {...getFormFeedbackForField('general', state)} />
<SubmitButton
variant="primary"
aria-label="Slett tavle"
className="w-full"
>
Ja, slett!
</SubmitButton>
<ButtonGroup className="flex flex-row">
<SubmitButton
variant="primary"
width="fluid"
aria-label="Slett tavle"
className="w-1/2"
>
Ja, slett!
</SubmitButton>

<Button
type="button"
variant="secondary"
aria-label="Avbryt sletting"
onClick={close}
className="w-1/2"
width="fluid"
>
Avbryt
</Button>
</ButtonGroup>
</form>
</Modal>
</>
Expand Down
68 changes: 35 additions & 33 deletions tavla/app/(admin)/components/Delete/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'
import { Button, IconButton, SecondarySquareButton } from '@entur/button'
import { CloseIcon, DeleteIcon } from '@entur/icons'
import { Button, ButtonGroup, IconButton } from '@entur/button'
import { DeleteIcon } from '@entur/icons'
import { Modal } from '@entur/modal'
import { Heading3, Paragraph, SubParagraph } from '@entur/typography'
import { TOrganization } from 'types/settings'
Expand Down Expand Up @@ -77,16 +77,6 @@ function Delete({
closeLabel="Avbryt sletting"
className="flex flex-col text-center"
>
<SecondarySquareButton
aria-label="Avbryt sletting"
className="ml-auto"
onClick={() => {
close()
setNameError(undefined)
}}
>
<CloseIcon />
</SecondarySquareButton>
<Image src={ducks} alt="" className="h-1/2 w-1/2 mx-auto" />
<Heading3 margin="bottom">Slett organisasjon</Heading3>
<Paragraph>
Expand All @@ -99,27 +89,39 @@ function Delete({
<form action={submit} aria-live="polite" aria-relevant="all">
<HiddenInput id="oname" value={organization.name} />
<HiddenInput id="oid" value={organization.id} />
<div>
<TextField
name="name"
label="Organisasjonsnavn"
type="text"
required
aria-required
{...getFormFeedbackForField('name', nameError)}
/>
<FormError
{...getFormFeedbackForField('general', state)}
/>
</div>
<SubmitButton
variant="primary"
width="fluid"
aria-label="Slett organisasjon"
className="mt-8"
>
Ja, slett organisasjon
</SubmitButton>

<TextField
name="name"
label="Organisasjonsnavn"
type="text"
required
aria-required
{...getFormFeedbackForField('name', nameError)}
/>
<FormError {...getFormFeedbackForField('general', state)} />
<ButtonGroup className="flex flex-row mt-8">
<SubmitButton
variant="primary"
aria-label="Slett organisasjonen"
className="w-1/2"
width="fluid"
>
Ja, slett!
</SubmitButton>
<Button
type="button"
variant="secondary"
aria-label="Avbryt sletting"
onClick={() => {
close()
setNameError(undefined)
}}
width="fluid"
className="w-1/2"
>
Avbryt
</Button>
</ButtonGroup>
</form>
</Modal>
</>
Expand Down
30 changes: 29 additions & 1 deletion tavla/app/(admin)/components/Login/Create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import { FirebaseError } from 'firebase/app'
import { useFormState } from 'react-dom'
import { FormError } from '../FormError'
import { SubmitButton } from 'components/Form/SubmitButton'
import { usePathname } from 'next/navigation'
import { Button, ButtonGroup } from '@entur/button'
import Link from 'next/link'

function Create() {
const submit = async (p: TFormFeedback | undefined, data: FormData) => {
Expand Down Expand Up @@ -47,6 +50,8 @@ function Create() {
}
}
const [state, action] = useFormState(submit, undefined)
const pathname = usePathname()

return (
<div className="flex flex-col items-center">
<Image
Expand Down Expand Up @@ -84,7 +89,30 @@ function Create() {
</div>
<FormError {...getFormFeedbackForField('user', state)} />
<FormError {...getFormFeedbackForField('general', state)} />
<SubmitButton variant="primary">Opprett ny bruker</SubmitButton>
<ButtonGroup className="flex flex-row gap-4">
<div className="w-1/2">
<SubmitButton
variant="primary"
width="fluid"
aria-label="Opprett bruker"
>
Opprett bruker
</SubmitButton>
</div>

<div className="w-1/2">
<Button
type="button"
as={Link}
href={pathname ?? '/'}
width="fluid"
variant="secondary"
aria-label="Avbryt"
>
Avbryt
</Button>
</div>
</ButtonGroup>
</form>
</div>
)
Expand Down
35 changes: 31 additions & 4 deletions tavla/app/(admin)/components/Login/Email.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ import {
} from 'firebase/auth'
import { getClientApp } from 'utils/firebase'
import { login } from './actions'
import { Heading3, Link } from '@entur/typography'
import { Heading3, Link as EnturLink } from '@entur/typography'
import { TextField } from '@entur/form'
import { Button, ButtonGroup } from '@entur/button'
import Image from 'next/image'
import musk from 'assets/illustrations/Musk.png'
import {
Expand All @@ -22,6 +23,8 @@ import { FirebaseError } from 'firebase/app'
import { FormError } from '../FormError'
import { TLoginPage } from './types'
import { SubmitButton } from 'components/Form/SubmitButton'
import { usePathname } from 'next/navigation'
import Link from 'next/link'

function Email() {
const submit = async (
Expand Down Expand Up @@ -55,6 +58,7 @@ function Email() {

const [state, action] = useFormState(submit, undefined)
const getPathWithParams = useSearchParamsSetter<TLoginPage>('login')
const pathname = usePathname()

return (
<div className="flex flex-col items-center">
Expand Down Expand Up @@ -85,11 +89,34 @@ function Email() {
<FormError {...getFormFeedbackForField('user', state)} />
<FormError {...getFormFeedbackForField('general', state)} />
<p>
<Link href={getPathWithParams('reset')}>
<EnturLink href={getPathWithParams('reset')}>
Glemt passord?
</Link>
</EnturLink>
</p>
<SubmitButton variant="primary">Logg inn</SubmitButton>
<ButtonGroup className="flex flex-row gap-4">
<div className="w-1/2">
<SubmitButton
variant="primary"
width="fluid"
aria-label="Logg inn"
>
Logg inn
</SubmitButton>
</div>

<div className="w-1/2">
<Button
type="button"
as={Link}
href={pathname ?? '/'}
width="fluid"
variant="secondary"
aria-label="Avbryt"
>
Avbryt
</Button>
</div>
</ButtonGroup>
</form>
</div>
)
Expand Down
23 changes: 6 additions & 17 deletions tavla/app/(admin)/components/Login/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from 'next/link'
import { Modal } from '@entur/modal'
import { usePathname, useRouter } from 'next/navigation'
import { IconButton, SecondarySquareButton } from '@entur/button'
import { BackArrowIcon, CloseIcon, LogOutIcon, UserIcon } from '@entur/icons'
import { BackArrowIcon, LogOutIcon, UserIcon } from '@entur/icons'
import { logout } from './actions'
import { Email } from './Email'
import { Start } from './Start'
Expand Down Expand Up @@ -54,25 +54,14 @@ function Login({ loggedIn }: { loggedIn: boolean }) {
className="w-11/12 lg:w-full"
onDismiss={() => router.push(pathname ?? '/')}
>
<div className="flex flex-row justify-between">
{hasPage && (
<SecondarySquareButton
onClick={() => router.back()}
aria-label="Tilbake til logg inn"
>
<BackArrowIcon />
</SecondarySquareButton>
)}

{hasPage && (
<SecondarySquareButton
as={Link}
href={pathname ?? '/'}
className="ml-auto"
aria-label="Lukk vindu"
onClick={() => router.back()}
aria-label="Tilbake til logg inn"
>
<CloseIcon />
<BackArrowIcon />
</SecondarySquareButton>
</div>
)}
<Page page={pageParam as TLoginPage} />
</Modal>
</>
Expand Down
31 changes: 19 additions & 12 deletions tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { useToast } from '@entur/alert'
import {
Button,
ButtonGroup,
IconButton,
NegativeButton,
SecondarySquareButton,
Expand Down Expand Up @@ -463,30 +464,36 @@ function TileCard({
closeLabel="Avbryt endring"
>
<div className="flex flex-col items-center">
<Image alt="" src={Goat} width={250} />
<Image
alt=""
src={Goat}
className="h-1/2 w-1/2"
/>
<Heading3 margin="bottom">
Lagre endringer
</Heading3>
<Paragraph>
Du har endringer som ikke er lagret
Du har endringer som ikke er lagret.
</Paragraph>
<div className="flex flex-row gap-4">
<Button
variant="secondary"
width="fluid"
onClick={reset}
>
Avbryt endring
</Button>

<ButtonGroup className="flex flex-row">
<SubmitButton
variant="primary"
width="fluid"
type="submit"
form={tile.uuid}
aria-label="Lagre endringer"
>
Lagre
</SubmitButton>
</div>
<Button
type="button"
variant="secondary"
aria-label="Avbryt sletting"
onClick={reset}
>
Avbryt
</Button>
</ButtonGroup>
</div>
</Modal>
</form>
Expand Down
Loading

0 comments on commit d21cba7

Please sign in to comment.