Skip to content

Improve various UI components #2514

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

Draft
brage-andreas wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Improve various UI components #2514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions apps/web/src/app/arrangementer/components/AttendanceCard/AttendanceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,15 +244,15 @@ export const AttendanceCard = ({
chargeScheduleDate={chargeScheduleDate ?? null}
/>

<div className="flex flex-row flex-wrap gap-4">
<EventRules className="text-slate-800 hover:text-black dark:text-stone-400 dark:hover:text-stone-100 transition-colors" />
<div className="flex flex-row flex-wrap gap-x-4 gap-y-2">
<EventRules className="text-gray-700 hover:text-black dark:text-stone-300 dark:hover:text-stone-100 transition-colors" />

<Link
href="/innstillinger/profil"
className="flex flex-row gap-1 text-sm items-center text-slate-800 hover:text-black dark:text-stone-400 dark:hover:text-stone-100 transition-colors"
className="flex flex-row gap-2 items-center text-gray-700 hover:text-black dark:text-stone-300 dark:hover:text-stone-100 transition-colors"
>
<IconEdit className="size-[1.25em]" />
<Text>Oppdater matallergier</Text>
<Text className="text-sm">Oppdater matpreferanser</Text>
</Link>

{attendance.attendancePrice && <PaymentExplanationDialog />}
Expand Down
51 changes: 22 additions & 29 deletions apps/web/src/app/arrangementer/components/AttendanceCard/EventRules.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
import { PenaltyRules } from "@/utils/penalty-rules"
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
AlertDialog,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogTitle,
AlertDialogTrigger,
Text,
Title,
cn,
} from "@dotkomonline/ui"
import { IconBook2 } from "@tabler/icons-react"
import { IconBook2, IconX } from "@tabler/icons-react"
import { useState } from "react"

interface EventRulesProps {
Expand All @@ -25,32 +21,29 @@ export const EventRules = ({ className }: EventRulesProps) => {
return (
<AlertDialog open={open} onOpenChange={setOpen}>
<AlertDialogTrigger>
<div className={cn("text-sm flex flex-row gap-1 items-center cursor-pointer", className)}>
<div className={cn("flex flex-row gap-2 items-center cursor-pointer", className)}>
<IconBook2 className="size-[1.25em]" />
<Text>Arrangementregler</Text>
<Text className="text-sm">Arrangementregler</Text>
</div>
</AlertDialogTrigger>
<AlertDialogContent
className="relative flex flex-col overflow-hidden max-h-[90vh]"
onOutsideClick={() => setOpen(false)}
>
<AlertDialogTitle className="text-2xl font-bold mb-1">Arrangementregler</AlertDialogTitle>
<AlertDialogDescription>
Ved påmelding av dette arrangementet godtar du å følge Onlines arrangementregler beskrevet under.
</AlertDialogDescription>
<section className="overflow-hidden">
<Accordion type="single" collapsible>
<AccordionItem value="eventRules">
<AccordionTrigger>Prikkeregler</AccordionTrigger>
<AccordionContent className="grow overflow-y-auto p-4 max-h-[300px]">
<PenaltyRules />
</AccordionContent>
</AccordionItem>
</Accordion>
</section>
<AlertDialogCancel variant={"solid"} color="brand" className="w-fit mx-auto">
Jeg er inneforstått med reglene
</AlertDialogCancel>
<AlertDialogContent onOutsideClick={() => setOpen(false)}>
<div className="flex flex-row gap-4 justify-between">
<AlertDialogTitle asChild>
<Title element="h1" size="lg">
Arrangementregler
</Title>
</AlertDialogTitle>

<AlertDialogCancel>
<IconX className="size-[1.25em]" />
</AlertDialogCancel>
</div>

<div className="flex flex-col gap-8 rounded-lg min-h-[25dvh] max-h-[75dvh] overflow-y-auto pr-4 -mr-4">
<Text>Ved påmelding av dette arrangementet godtar du å følge Onlines arrangementregler beskrevet under.</Text>

<PenaltyRules small />
</div>
</AlertDialogContent>
</AlertDialog>
)
Expand Down
76 changes: 38 additions & 38 deletions apps/web/src/app/arrangementer/components/AttendanceCard/PaymentExplanationDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,55 +2,55 @@ import {
AlertDialog,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
Text,
Title,
} from "@dotkomonline/ui"
import { IconInfoCircle, IconX } from "@tabler/icons-react"
import { IconQuestionMark, IconX } from "@tabler/icons-react"
import { useState } from "react"

export const PaymentExplanationDialog = () => {
const [open, setOpen] = useState(false)

return (
<AlertDialog>
<AlertDialog open={open} onOpenChange={setOpen}>
<AlertDialogTrigger>
<div className="text-sm flex flex-row gap-1 items-center cursor-pointer text-slate-800 hover:text-black dark:text-stone-400 dark:hover:text-stone-100 transition-colors">
<IconInfoCircle className="size-[1.25em]" />
<Text>Hvordan fungerer betaling?</Text>
<div className="flex flex-row gap-2 items-center text-slate-700 hover:text-black dark:text-stone-300 dark:hover:text-stone-100 transition-colors">
<IconQuestionMark className="size-[1.25em]" />
<Text className="text-sm">Hvordan virker betaling?</Text>
</div>
</AlertDialogTrigger>

<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className="flex flex-row gap-2 items-center justify-between font-medium">
<span className="text-xl flex flex-row gap-2 items-center">
<IconInfoCircle className="size-[1.25em] text-blue-500 dark:text-stone-300" />
<Text>Betalingsinformasjon</Text>
</span>
<AlertDialogCancel>
<IconX className="size-[1.25em]" />
</AlertDialogCancel>
<AlertDialogContent onOutsideClick={() => setOpen(false)}>
<div className="flex flex-row gap-4 justify-between">
<AlertDialogTitle className="flex flex-row gap-2 items-center justify-between font-medium" asChild>
<Title element="h1" size="lg">
Betalingsinformasjon
</Title>
</AlertDialogTitle>
<AlertDialogDescription className="flex flex-col gap-2">
<Text element="span" className="text-left">
Når du melder deg på et arrangement med betaling, aktiveres betalingsknappen. Den viser så en nedtelling
som indikerer hvor lenge du har på deg til å reservere en betaling.
</Text>
<Text element="span" className="border-l-2 border-brand pl-3 my-1 text-left">
<strong>Reservert betaling: </strong>
Beløpet holdes av på kontoen din og trekkes senest på den femte dagen, eller før dersom avmeldingsfristen
inntrer tidligere.
</Text>
<Text element="span" className="text-left">
Dersom ingen betaling er reservert innen nedtellingen er ferdig, vil du automatisk bli avmeldt
arrangementet.
</Text>
<Text element="span" className="text-left">
Du kan selv melde deg av når som helst før avmeldingsfristen. Da blir betalingsreservasjonen automatisk
kansellert i banken din.
</Text>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogCancel>
<IconX className="size-[1.25em]" />
</AlertDialogCancel>
</div>

<div className="flex flex-col gap-4">
<Text className="text-sm">
Når du melder deg på et arrangement med betaling, aktiveres betalingsknappen. Den viser så en nedtelling som
indikerer hvor lenge du har på deg til å reservere en betaling.
</Text>
<Text className="text-sm">
Dersom ingen betaling er reservert innen nedtellingen er ferdig, vil du automatisk bli avmeldt
arrangementet. Etter avmeldingsfristen blir du i stedet suspendert inntil du har betalt.
</Text>
<Text className="text-sm">
Beløpet holdes av på kontoen din og trekkes senest på den femte dagen, eller før dersom avmeldingsfristen
inntrer tidligere. Etter avmeldingsfristen blir du i stedet trukket med en gang.
</Text>
<Text className="text-sm">
Du kan selv melde deg av når som helst før avmeldingsfristen. Da blir betalingsreservasjonen automatisk
kansellert i banken din.
</Text>
</div>
</AlertDialogContent>
</AlertDialog>
)
Expand Down
9 changes: 3 additions & 6 deletions apps/web/src/app/arrangementer/components/AttendanceCard/ViewAttendeesButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,17 +84,14 @@ export const ViewAttendeesButton = ({
return (
<AlertDialog open={attendeeListOpen} onOpenChange={setAttendeeListOpen}>
<AlertDialogTrigger asChild>{button}</AlertDialogTrigger>
<AlertDialogContent
className="flex flex-col gap-4 w-full p-0 bg-white dark:bg-stone-800 drop-shadow-lg sm:max-w-2xl rounded-lg"
onOutsideClick={() => setAttendeeListOpen(false)}
>
<AlertDialogContent className="p-0" onOutsideClick={() => setAttendeeListOpen(false)}>
<div className="flex items-center justify-between px-4 pt-4 rounded-t-lg">
<AlertDialogTitle asChild>
<Title element="h1" size="lg">
Påmeldingsliste
</Title>
</AlertDialogTitle>
<AlertDialogCancel className="p-2">
<AlertDialogCancel>
<IconX className="size-[1.25em]" />
</AlertDialogCancel>
</div>
Expand Down Expand Up @@ -130,7 +127,7 @@ interface AttendeeListProps {

const AttendeeList = ({ attendees, user, maxNumberOfAttendees }: AttendeeListProps) => {
if (!attendees.length) {
return <Text className="text-gray-900 text-sm mx-2">Ingen påmeldte</Text>
return <Text className="text-gray-500 dark:text-stone-500 text-sm mx-2">Ingen påmeldte</Text>
}

return attendees.map((attendee, index) => {
Expand Down
Loading
Loading