Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Oct 10, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3335f8
style(modals): close button move to bottom of small modals
emilielr Oct 10, 2024
09ee3df
fix(link):cahnge to next link in create user modal
emilielr Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 23 additions & 16 deletions tavla/app/(admin)/boards/components/Column/Delete.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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