Added marker add modal

src/assets/scss/_buttons.scss

@@ -0,0 +1,47 @@
+.btn {
+    padding: .3rem .7rem;
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .9em;
+    font-weight: 500;
+    border: 1px solid transparent;
+    border-radius: .2rem;
+    cursor: pointer;
+    transition-property: color, background-color, border-color;
+    transition-duration: .2s;
+    transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+    &-secondary {
+        &:not(:disabled) {
+            background-color: var(--slate-200);
+
+            &:hover,
+            &:focus-visible {
+                color: var(--white);
+                background-color: var(--blue-500);
+            }
+        }
+    }
+
+    &-danger {
+        &:not(:disabled) {
+            background-color: var(--slate-200);
+
+            &:hover,
+            &:focus-visible {
+                color: var(--white);
+                background-color: var(--red-500);
+            }
+        }
+    }
+
+    &-icon {
+        width: 1.75rem;
+        padding: 0;
+        display: grid;
+        place-items: center;
+        aspect-ratio: 1;
+        border-radius: 50%;
+    }
+}

src/assets/scss/_forms.scss

@@ -0,0 +1,29 @@
+.form-group {
+    label {
+        display: block;
+        margin-bottom: .35rem;
+        font-size: .9em;
+        font-weight: 500;
+    }
+
+    .form-input {
+        input[type=text],
+        input[type=tel],
+        input[type=email],
+        textarea {
+            display: block;
+            width: 100%;
+            padding: .4rem .5rem;
+            border: 1px solid var(--slate-300);
+            font-size: .8em;
+            border-radius: .2rem;
+            transition-property: box-shadow;
+            transition-duration: .2s;
+            transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+            &:focus-visible {
+                box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--slate-300) 20%, transparent);
+            }
+        }
+    }
+}

src/assets/scss/_leaflet.scss

@@ -13,6 +13,8 @@
                 border-radius: .25rem;
 
                 .leaflet-popup-content {
+                    margin: .65rem 1.3rem .65rem .9rem;
+
                     .title {
                         display: block;
                         font-weight: 600;
@@ -38,6 +40,11 @@
                     }
                 }
             }
+
+            .leaflet-popup-tip {
+                width: .8rem;
+                height: .8rem;
+            }
         }
         .leaflet-tooltip-pane {
             .leaflet-tooltip {

src/assets/scss/theme.scss

@@ -3,6 +3,9 @@
 @use 'reset';
 @use 'leaflet';
 
+@use 'forms';
+@use 'buttons';
+
 :root {
     --white: #fff;
     --black: #111;
@@ -44,4 +47,4 @@ a[href^='http']::after {
     width: 1em;
     height: 1em;
     margin-left: .25em;
-}
+}