chore: better alerts CSS

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;

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;
 }

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>
+          <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>
+          <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>

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);