From d21cba7907de2f76b58c1146e4af4f6261e5b630 Mon Sep 17 00:00:00 2001
From: emilielr <43408175+emilielr@users.noreply.github.com>
Date: Thu, 10 Oct 2024 13:26:02 +0200
Subject: [PATCH] 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
---
 .../boards/components/Column/Delete.tsx       | 39 ++++++-----
 tavla/app/(admin)/components/Delete/index.tsx | 68 ++++++++++---------
 tavla/app/(admin)/components/Login/Create.tsx | 30 +++++++-
 tavla/app/(admin)/components/Login/Email.tsx  | 35 ++++++++--
 tavla/app/(admin)/components/Login/index.tsx  | 23 ++-----
 .../edit/[id]/components/TileCard/index.tsx   | 31 +++++----
 .../components/CreateOrganization/index.tsx   | 42 +++++++-----
 .../MemberAdministration/RemoveUserButton.tsx | 46 +++++++------
 8 files changed, 194 insertions(+), 120 deletions(-)

diff --git a/tavla/app/(admin)/boards/components/Column/Delete.tsx b/tavla/app/(admin)/boards/components/Column/Delete.tsx
index 58cf392ca..7282ec8e7 100644
--- 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
index fd1a8dd4f..06b53729a 100644
--- 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
index cd498d0e3..ae91ec212 100644
--- 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
index 3abce0433..a958d19f1 100644
--- 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
index 0c9c332c1..3e9b65b23 100644
--- 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
index 8ef5b7a3a..1c5e2649d 100644
--- 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>
diff --git a/tavla/app/(admin)/organizations/components/CreateOrganization/index.tsx b/tavla/app/(admin)/organizations/components/CreateOrganization/index.tsx
index ff700fe5a..f56deb6fc 100644
--- a/tavla/app/(admin)/organizations/components/CreateOrganization/index.tsx
+++ b/tavla/app/(admin)/organizations/components/CreateOrganization/index.tsx
@@ -1,6 +1,6 @@
 'use client'
-import { PrimaryButton, SecondarySquareButton } from '@entur/button'
-import { AddIcon, CloseIcon } from '@entur/icons'
+import { Button, ButtonGroup, PrimaryButton } from '@entur/button'
+import { AddIcon } from '@entur/icons'
 import { Modal } from '@entur/modal'
 import { Heading3, Paragraph, SubParagraph } from '@entur/typography'
 import { TextField } from '@entur/form'
@@ -29,13 +29,6 @@ function CreateOrganization() {
                 size="small"
                 closeLabel="Avbryt oppretting"
             >
-                <SecondarySquareButton
-                    aria-label="Avbryt oppretting"
-                    className="ml-auto"
-                    onClick={close}
-                >
-                    <CloseIcon />
-                </SecondarySquareButton>
                 <Image src={birds} alt="" className="h-1/2 w-1/2" />
                 <Heading3>Opprett organisasjon</Heading3>
                 <Paragraph className="mt-8 text-center">
@@ -63,14 +56,29 @@ function CreateOrganization() {
                         {...getFormFeedbackForField('name', state)}
                     />
                     <FormError {...getFormFeedbackForField('general', state)} />
-                    <SubmitButton
-                        variant="primary"
-                        className="mt-8"
-                        width="fluid"
-                        aria-label="Opprett organisasjon"
-                    >
-                        Opprett
-                    </SubmitButton>
+                    <ButtonGroup className="flex flex-row gap-4 mt-8">
+                        <div className="w-1/2">
+                            <SubmitButton
+                                variant="primary"
+                                width="fluid"
+                                aria-label="Opprett organisasjon"
+                            >
+                                Opprett
+                            </SubmitButton>
+                        </div>
+
+                        <div className="w-1/2">
+                            <Button
+                                type="button"
+                                width="fluid"
+                                variant="secondary"
+                                aria-label="Avbryt oppretting"
+                                onClick={close}
+                            >
+                                Avbryt
+                            </Button>
+                        </div>
+                    </ButtonGroup>
                 </form>
             </Modal>
         </>
diff --git a/tavla/app/(admin)/organizations/components/MemberAdministration/RemoveUserButton.tsx b/tavla/app/(admin)/organizations/components/MemberAdministration/RemoveUserButton.tsx
index 5bf93defd..477103fe2 100644
--- a/tavla/app/(admin)/organizations/components/MemberAdministration/RemoveUserButton.tsx
+++ b/tavla/app/(admin)/organizations/components/MemberAdministration/RemoveUserButton.tsx
@@ -1,6 +1,6 @@
 'use client'
-import { 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 { Tooltip } from '@entur/tooltip'
 import { Heading3, Paragraph } from '@entur/typography'
@@ -32,7 +32,7 @@ function RemoveUserButton({
             <Tooltip content="Slett bruker" placement="bottom">
                 <IconButton
                     type="submit"
-                    aria-label="Fjern bruker"
+                    aria-label="Slett bruker"
                     onClick={open}
                 >
                     <DeleteIcon />
@@ -43,38 +43,44 @@ function RemoveUserButton({
                 size="small"
                 onDismiss={close}
                 closeLabel="Avbryt sletting"
-                className="flex flex-col justify-start items-center text-center"
+                className="flex flex-col 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 medlem</Heading3>
-                <Paragraph className="mt-8">
+                <Paragraph>
                     Er du sikker på at du vil slette medlem med e-postadresse{' '}
                     {user?.email} fra organisasjonen?
                 </Paragraph>
                 <form
                     action={formAction}
                     onSubmit={close}
-                    className="flex flex-col w-full gap-4"
                     aria-live="polite"
                     aria-relevant="all"
                 >
                     <HiddenInput id="uid" value={user?.uid} />
                     <HiddenInput id="oid" value={oid} />
                     <FormError {...getFormFeedbackForField('general', state)} />
-                    <SubmitButton
-                        variant="primary"
-                        width="fluid"
-                        aria-label="Slett bruker"
-                    >
-                        Ja, slett
-                    </SubmitButton>
+                    <ButtonGroup className="flex flex-row">
+                        <SubmitButton
+                            variant="primary"
+                            width="fluid"
+                            aria-label="Slett bruker"
+                            className="w-1/2"
+                        >
+                            Ja, slett!
+                        </SubmitButton>
+
+                        <Button
+                            type="button"
+                            width="fluid"
+                            variant="secondary"
+                            aria-label="Avbryt"
+                            onClick={close}
+                            className="w-1/2"
+                        >
+                            Avbryt
+                        </Button>
+                    </ButtonGroup>
                 </form>
             </Modal>
         </>