2 files changed, 82 insertions, 0 deletions
diff --git a/frontend/styles/ui/layout.sass b/frontend/styles/ui/layout.sass
new file mode 100644
index 0000000..93f5a69
--- /dev/null
+++ b/frontend/styles/ui/layout.sass
@@ -0,0 +1,25 @@
+@use '../colors'
+
+.g-Columns
+    display: flex
+    gap: 1rem
+
+    & > *
+        flex-basis: 50%
+        flex-grow: 1
+
+.g-Loading
+    display: flex
+    align-items: center
+    justify-content: center
+    height: 100%
+
+    & > svg
+        width: 20px
+
+.g-Error
+    display: flex
+    align-items: center
+    justify-content: center
+    height: 100%
+    color: colors.$red
diff --git a/frontend/styles/ui/modal.sass b/frontend/styles/ui/modal.sass
new file mode 100644
index 0000000..81e91d6
--- /dev/null
+++ b/frontend/styles/ui/modal.sass
@@ -0,0 +1,57 @@
+@use '../colors'
+
+$transition-duration: 0.15s
+
+.g-Modal
+    width: 100vw
+    height: 100vh
+    position: fixed
+    top: 0
+    left: 0
+    display: flex
+    justify-content: center
+    align-items: center
+    z-index: 1000 // To be over leaflet
+    color: black
+    background-color: rgba(0, 0, 0, 0.5)
+
+    &--Danger
+        .g-Modal__Content
+            border-left: 5px solid colors.$red
+
+    &__Content
+        position: relative
+        background-color: white
+        width: 50%
+        min-width: 400px;
+        max-width: 600px;
+        border-radius: 0.2rem
+        line-height: normal
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8)
+
+    &__Header
+        display: flex
+        justify-content: space-between
+        align-items: center
+        padding: 1rem 2rem
+        border-bottom: 1px solid #EEE
+        font-weight: bold
+
+    &__Body
+        padding: 2rem
+        max-height: 50vh
+        overflow-y: scroll
+
+    &__Close
+        cursor: pointer
+        font-weight: bold
+        border-radius: 50%
+        border: 1px solid #EEE
+        background-color: transparent
+        width: 3rem
+        height: 3rem
+        font-size: 1.7rem
+        flex-shrink: 0
+
+    &__Close:hover, &__Close:focus
+        background-color: #EEE