From 10e398d2222f64e24aa84679801eacb9df84a8e8 Mon Sep 17 00:00:00 2001
From: David Larlet <david@larlet.fr>
Date: Wed, 12 Jun 2024 15:27:39 -0400
Subject: [PATCH] chore: better alerts CSS

---
 umap/static/umap/css/window.css               |  1 -
 .../umap/js/components/alerts/alert.css       | 91 +++++++++++++++++--
 .../umap/js/components/alerts/alert.html      | 14 ++-
 umap/static/umap/vars.css                     |  1 +
 4 files changed, 92 insertions(+), 15 deletions(-)

diff --git a/umap/static/umap/css/window.css b/umap/static/umap/css/window.css
index 11195daa..a4768fbd 100644
--- a/umap/static/umap/css/window.css
+++ b/umap/static/umap/css/window.css
@@ -1,6 +1,5 @@
 .window .buttons {
     padding: 5px 10px;
-    overflow: hidden;
     display: flex;
     flex-direction: row-reverse;
     font-size: 10px;
diff --git a/umap/static/umap/js/components/alerts/alert.css b/umap/static/umap/js/components/alerts/alert.css
index d05da690..c966686e 100644
--- a/umap/static/umap/js/components/alerts/alert.css
+++ b/umap/static/umap/js/components/alerts/alert.css
@@ -19,31 +19,102 @@
     transform: translate(-50%, 0);
     min-width: 80%;
 }
-[role="dialog"][data-level='error'] {
+[role="dialog"][data-level="error"] {
     background-color: #c60f13;
 }
+[role="dialog"] a {
+    text-decoration: underline;
+}
 [role="dialog"] > div {
     margin: 0 auto;
 }
-#link-wrapper form {
-    display: flex;
+[role="group"] {
+    display: inline-flex;
+    position: relative;
+    width: 100%;
+    border-radius: var(--border-radius);
+    vertical-align: middle;
+    margin: 0;
+    padding: 0;
+    border: none;
 }
-#link-wrapper form input[type='button'] {
-    max-width: 100px;
+[role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
+[role="group"] > :not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+[role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
+[role="group"] > :not(:first-child)  {
+  margin-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  width: 33%;
+}
+[role="group"] input[type="submit"] {
+    background: var(--color-darkGray);
+    color: var(--color-light);
+    border: 1px solid var(--color-light);
+    line-height: initial;
+}
+[role="group"] input:not([type="submit"]) {
+    background: var(--color-light);
+    color: var(--color-darkGray);
+    border: 1px solid var(--color-light);
+}
+[role="group"] input[type="button"] {
+    background: var(--color-darkGray);
+    color: var(--color-light);
+    border: none;
+    line-height: initial;
+}
+[role="group"] input[type="button"]:hover {
+    text-decoration: underline;
+    border: none;
+}
+@media only screen and (max-width:770px) {
+    [role="group"] {
+        display: flex;
+        flex-direction: column;
+    }
+    [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
+    [role="group"] > :not(:last-child) {
+      border-radius: var(--border-radius);
+    }
+    [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
+    [role="group"] > :not(:first-child)  {
+      border-radius: var(--border-radius);
+    }
+
+    [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
+    [role="group"] > :not(:first-child)  {
+        width: 100%;
+    }
+}
+#link-wrapper {
+    margin-bottom: 1rem;
 }
 #choice-wrapper form {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
+}
+#choice-wrapper form [type="submit"] {
+    width: initial;
+    background: inherit;
+    color: var(--color-light);
+}
+#choice-wrapper form [type="submit"]:hover {
+    width: initial;
+    background: darkred;
+    color: var(--color-light);
+    border: 1px solid var(--color-light);
 }
 @media only screen and (max-width:770px) {
     #choice-wrapper form {
         flex-direction: column;
+        text-align: center;
     }
 }
-#choice-wrapper form > * {
-    max-width: 300px;
-}
 umap-alert-choice a {
-    color: white;
+    color: var(--color-light);
     text-decoration: underline;
 }
diff --git a/umap/static/umap/js/components/alerts/alert.html b/umap/static/umap/js/components/alerts/alert.html
index 7aeb16c7..cca7fbb7 100644
--- a/umap/static/umap/js/components/alerts/alert.html
+++ b/umap/static/umap/js/components/alerts/alert.html
@@ -22,20 +22,26 @@
 <template id="umap-alert-creation-template">
   <div role="dialog" class="dark window">
     <div>
+      <h3>{% translate "Save the edit link" %}</h3>
       <p role="alert"></p>
       <div id="link-wrapper">
         <form>
-          <input type="url" name="url">
-          <input type="button" value="{% translate "Copy link" %}">
+          <fieldset role="group">
+            <input type="url" name="url">
+            <input type="button" value="{% translate "Copy link" %}">
+          </fieldset>
         </form>
       </div>
       <div id="form-wrapper" hidden>
         <p>{% translate "You can also receive that URL by email:" %}</p>
         <form>
-          <input type="email" name="email" class="umap-alert-input" required>
-          <input type="submit" value="{% translate "Send me the link" %}" class="umap-action">
+          <fieldset role="group">
+            <input type="email" name="email" required>
+            <input type="submit" value="{% translate "Send me the link" %}" class="umap-action">
+          </fieldset>
         </form>
       </div>
+      <p><em>{% translate "Pro-tip: to easily find back your maps," %} <a href="{% url "login" %}" target="_blank">{% translate "create an account" %}</a></em></p>
     </div>
     <ul class="buttons">
       <li>
diff --git a/umap/static/umap/vars.css b/umap/static/umap/vars.css
index eb3fe177..185aa514 100644
--- a/umap/static/umap/vars.css
+++ b/umap/static/umap/vars.css
@@ -30,6 +30,7 @@
     --footer-height: 28px;
     --current-footer-height: 0px;
     --control-size: 36px;
+    --border-radius: 4px;
 }
 .dark {
     --background-color: var(--color-darkGray);