style(modals): move close button to bottom of small modals (#1675)

* style(modals): close button move to bottom of small modals * fix(link):cahnge to next link in create user modal
entur · Oct 10, 2024 · d21cba7 · d21cba7
1 parent aa48f92
commit d21cba7
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 120 deletions.
diff --git a/tavla/app/(admin)/boards/components/Column/Delete.tsx b/tavla/app/(admin)/boards/components/Column/Delete.tsx
@@ -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'
@@ -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">
@@ -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>
         </>

diff --git a/tavla/app/(admin)/components/Delete/index.tsx b/tavla/app/(admin)/components/Delete/index.tsx
@@ -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'
@@ -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>
@@ -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>
         </>

diff --git a/tavla/app/(admin)/components/Login/Create.tsx b/tavla/app/(admin)/components/Login/Create.tsx
@@ -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) => {
@@ -47,6 +50,8 @@ function Create() {
         }
     }
     const [state, action] = useFormState(submit, undefined)
+    const pathname = usePathname()
+
     return (
         <div className="flex flex-col items-center">
             <Image
@@ -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>
     )

diff --git a/tavla/app/(admin)/components/Login/Email.tsx b/tavla/app/(admin)/components/Login/Email.tsx
@@ -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 {
@@ -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 (
@@ -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">
@@ -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>
     )

diff --git a/tavla/app/(admin)/components/Login/index.tsx b/tavla/app/(admin)/components/Login/index.tsx
@@ -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'
@@ -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>
         </>

diff --git a/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
@@ -2,6 +2,7 @@
 import { useToast } from '@entur/alert'
 import {
     Button,
+    ButtonGroup,
     IconButton,
     NegativeButton,
     SecondarySquareButton,
@@ -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>