Merge pull request #356 from delta10/style/purmerend

refactor: move almost everything out of `globals.css`

src/app/[locale]/components/FormProgress.tsx

@@ -7,6 +7,7 @@ import { usePathname, useRouter } from '@/routing/navigation'
 import { FormStep } from '@/types/form'
 import { getCurrentStep, getPreviousStepPath } from '@/lib/utils/stepper'
 import { IconChevronLeft } from '@tabler/icons-react'
+import { ProgressBar } from './ProgressBar'
 
 interface FormProgressProps {
   children?: React.ReactElement
@@ -47,14 +48,7 @@ const FormProgress = ({ children }: FormProgressProps) => {
 
         <div className="flex flex-col gap-3 pb-2">
           {children}
-          <div className="overflow-hidden w-full disabled-fill-1">
-            <div
-              style={{
-                width: `${percentage}%`,
-              }}
-              className="h-2 primary-fill-1"
-            />
-          </div>
+          <ProgressBar value={step / 4} />
         </div>
       </div>
     )

src/app/[locale]/components/ProgressBar.css

@@ -0,0 +1,31 @@
+.signalen-progress-bar {
+  box-sizing: border-box;
+  display: inline-flex;
+  background-color: var(
+    --signalen-progress-bar-background-color,
+    var(--basis-color-disabled-fill-1)
+  );
+  block-size: var(--signalen-progress-bar-block-size, 0.5rem);
+  border-radius: var(--signalen-progress-bar-border-radius);
+  overflow: hidden;
+}
+
+.signalen-progress-bar__complete {
+  display: block;
+  background-color: var(
+    --signalen-progress-bar-complete-background-color,
+    var(--basis-color-primary-fill-1)
+  );
+}
+
+@media screen and (forced-colors: active) {
+  .signalen-progress-bar {
+    border-width: 1px;
+    border-style: solid;
+    border-color: CanvasText;
+    background-color: Canvas;
+  }
+  .signalen-progress-bar__complete {
+    background-color: CanvasText;
+  }
+}

src/app/[locale]/components/ProgressBar.tsx

@@ -0,0 +1,16 @@
+import './ProgressBar.css'
+
+export interface ProgressBarProps {
+  value: number
+}
+
+export const ProgressBar = ({ value }: ProgressBarProps) => (
+  <data value={value} className="signalen-progress-bar">
+    <span
+      className="signalen-progress-bar__complete"
+      style={{
+        inlineSize: `${Math.min(value * 100, 100)}%`,
+      }}
+    />
+  </data>
+)

src/app/[locale]/incident/add/components/MapDialog.css

@@ -0,0 +1,64 @@
+/* map */
+.map-location-group {
+  position: absolute;
+  left: 1em;
+  top: 1em;
+  display: flex;
+  gap: 8px;
+}
+
+.map-location-alert {
+  padding: 12px 16px !important;
+}
+
+.map-button {
+  padding-bottom: 16px !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.map-close-button {
+  position: absolute;
+  right: 1em;
+  top: 1em;
+  gap: 0 !important;
+}
+
+.map-zoom-button-group {
+  position: absolute;
+  right: 1em;
+  bottom: 1em;
+  gap: 0.5rem !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.map-alert-dialog__content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.focused-map-marker {
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  background-color: red;
+}
+
+.signalen-modal-dialog {
+  background-color: var(--signalen-modal-dialog-background-color, Canvas);
+  color: var(--signalen-modal-dialog-color, CanvasText);
+  z-index: var(--signalen-modal-z-index, 1);
+}
+
+.signalen-modal-dialog--cover-viewport {
+  position: fixed;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  overflow-block: auto;
+}

src/app/[locale]/incident/add/components/MapDialog.tsx

@@ -11,14 +11,15 @@ import React, {
   useState,
 } from 'react'
 import { debounce, uniqBy } from 'lodash'
-import Map, {
+import {
   MapLayerMouseEvent,
   MapRef,
   Marker,
   MarkerEvent,
   useMap,
   ViewState,
 } from 'react-map-gl/maplibre'
+import { Map } from '@/components/ui/Map'
 import { useTranslations } from 'next-intl'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
 import { useFormStore } from '@/store/form_store'
@@ -63,6 +64,7 @@ import {
 import MapExplainerAccordion from './questions/MapExplainerAccordion'
 import { useWindowSize } from 'usehooks-ts'
 import { string } from 'zod'
+import './MapDialog.css'
 
 type MapDialogProps = {
   trigger: React.ReactElement

src/app/[locale]/incident/components/Spinner.css

@@ -0,0 +1,4 @@
+/* spinner */
+.signalen-loading-icon {
+  --utrecht-icon-size: var(--basis-size-icon-4xl, 4em);
+}

src/app/[locale]/incident/components/Spinner.tsx

@@ -0,0 +1,9 @@
+import { IconLoader2 } from '@tabler/icons-react'
+import { Icon } from '@/components'
+import './Spinner.css'
+
+export const Spinner = () => (
+  <Icon className="signalen-loading-icon">
+    <IconLoader2 className="animate-spin" />
+  </Icon>
+)

src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx

@@ -23,6 +23,12 @@ import {
   coords2degreeMinuteSecondsFlat,
   isCoordinatesTuple,
 } from '@/lib/utils/format-coordinates'
+import {
+  SummaryGrid,
+  SummaryGridHeading,
+  SummaryGridLink,
+  SummaryGridMain,
+} from './SummaryGrid'
 
 const IncidentSummaryForm = () => {
   const t = useTranslations('describe_summary')
@@ -134,13 +140,13 @@ const IncidentSummaryForm = () => {
 
       <Divider />
 
-      <div className="summary-grid">
-        <div className="summary-grid__heading">
+      <SummaryGrid>
+        <SummaryGridHeading>
           <Heading level={2}>
             {t('step_marker', { step: 1 })} {tStepReport('heading')}
           </Heading>
-        </div>
-        <div className="summary-grid__main">
+        </SummaryGridHeading>
+        <SummaryGridMain>
           <IncidentSummaryFormItem
             title={tStepReport('form.describe_textarea_heading')}
             value={formState.description}
@@ -151,24 +157,24 @@ const IncidentSummaryForm = () => {
               attachments={files}
             />
           )}
-        </div>
-        <div className="summary-grid__link">
+        </SummaryGridMain>
+        <SummaryGridLink>
           <NextLinkWrapper href={stepToPath[FormStep.STEP_1_DESCRIPTION]}>
             {t('edit_step_report')}
           </NextLinkWrapper>
-        </div>
-      </div>
+        </SummaryGridLink>
+      </SummaryGrid>
 
       <Divider />
 
-      <div className="summary-grid">
-        <div className="sumary-grid__heading">
+      <SummaryGrid>
+        <SummaryGridHeading>
           <Heading level={2}>
             {t('step_marker', { step: 2 })} {tStepAdd('heading')}
           </Heading>
-        </div>
+        </SummaryGridHeading>
 
-        <div className="summary-grid__main flex flex-col gap-4">
+        <SummaryGridMain className="flex flex-col gap-4">
           <IncidentSummaryFormItem
             title={tStepAdd('form.add_map_heading')}
             value={formState.address?.weergave_naam}
@@ -262,24 +268,24 @@ const IncidentSummaryForm = () => {
               />
             )
           })}
-        </div>
+        </SummaryGridMain>
 
-        <div className="summary-grid__link">
+        <SummaryGridLink>
           <NextLinkWrapper href={stepToPath[FormStep.STEP_2_ADD]}>
             {t('edit_step_add')}
           </NextLinkWrapper>
-        </div>
-      </div>
+        </SummaryGridLink>
+      </SummaryGrid>
 
       <Divider />
 
-      <div className="summary-grid">
-        <div className="summary-grid__heading">
+      <SummaryGrid>
+        <SummaryGridHeading>
           <Heading level={2}>
             {t('step_marker', { step: 3 })} {tStepContact('heading')}
           </Heading>
-        </div>
-        <div className="summary-grid__main flex flex-col gap-4">
+        </SummaryGridHeading>
+        <SummaryGridMain className="flex flex-col gap-4">
           {!formState.phone &&
           !formState.email &&
           !formState.sharing_allowed ? (
@@ -309,14 +315,14 @@ const IncidentSummaryForm = () => {
               )}
             </>
           )}
-        </div>
+        </SummaryGridMain>
 
-        <div className="summary-grid__link">
+        <SummaryGridLink>
           <NextLinkWrapper href={stepToPath[FormStep.STEP_3_CONTACT]}>
             {t('edit_step_contact')}
           </NextLinkWrapper>
-        </div>
-      </div>
+        </SummaryGridLink>
+      </SummaryGrid>
 
       <SubmitAlert error={error} loading={loading} />
 

src/app/[locale]/incident/summary/components/SummaryGrid.css

@@ -0,0 +1,31 @@
+/* summary page grid */
+.summary-grid {
+  display: grid;
+  grid-template-areas:
+    'summary-heading summary-link'
+    'summary-body summary-body';
+  grid-template-columns: 1fr auto;
+  gap: 1rem;
+}
+
+/* 640px is the "SM" breakpoint in tailwind */
+@media only screen and (max-width: 640px) {
+  .summary-grid {
+    grid-template-areas:
+      'summary-heading summary-heading'
+      'summary-body summary-body'
+      'summary-link summary-link';
+  }
+}
+
+.summary-grid__heading {
+  grid-area: summary-heading;
+}
+
+.summary-grid__main {
+  grid-area: summary-body;
+}
+
+.summary-grid__link {
+  grid-area: summary-link;
+}

src/app/[locale]/incident/summary/components/SummaryGrid.tsx

@@ -0,0 +1,31 @@
+import { HTMLAttributes, PropsWithChildren } from 'react'
+import { clsx } from 'clsx'
+import './SummaryGrid.css'
+
+export const SummaryGrid = ({
+  children,
+  className,
+}: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) => (
+  <div className={clsx('summary-grid', className)}>{children}</div>
+)
+
+export const SummaryGridMain = ({
+  children,
+  className,
+}: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) => (
+  <div className={clsx('summary-grid__main', className)}>{children}</div>
+)
+
+export const SummaryGridLink = ({
+  children,
+  className,
+}: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) => (
+  <div className={clsx('summary-grid__link', className)}>{children}</div>
+)
+
+export const SummaryGridHeading = ({
+  children,
+  className,
+}: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) => (
+  <div className={clsx('summary-grid__heading', className)}>{children}</div>
+)