Merge pull request #287 from delta10/refactor/reduce-tailwind

refactor: reduce tailwind class names
delta10 · Dec 17, 2024 · 108a30d · 108a30d
2 parents a2d2572 + 4f95a2f
commit 108a30d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/src/app/[locale]/components/LanguageSwitch.tsx b/src/app/[locale]/components/LanguageSwitch.tsx
@@ -19,7 +19,7 @@ const LanguageSwitch = () => {
 
   return (
     <div className="pr-4">
-      <ButtonGroup className="flex flex-col md:flex-row !gap-0 md:!gap-4">
+      <ButtonGroup>
         {config &&
           config.base.supportedLanguages.map(({ label, lang, name }) => (
             <LinkButton

diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx
@@ -386,7 +386,7 @@ const MapDialog = ({
       <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay />
-        <Dialog.Content className="fixed inset-0 z-[1000] grid md:grid-cols-3 purmerend-theme background-white overflow-scroll">
+        <Dialog.Content className="grid md:grid-cols-3 overflow-scroll signalen-modal-dialog signalen-modal-dialog--cover-viewport">
           <VisuallyHidden.Root>
             <Dialog.Title>
               {field?.meta.language.title

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -80,6 +80,29 @@
   text-decoration: underline;
 }
 
+/* modal dialog */
+:root {
+  --signalen-modal-dialog-background-color: var(
+    --utrecht-body-background-color
+  );
+  --signalen-modal-dialog-color: var(--utrecht-body-color);
+}
+
+.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;
+}
+
 /* map */
 .map-location-group {
   position: absolute;