From 8323dfbfe0b0ca64fde6899d9b6d40f09a42cf56 Mon Sep 17 00:00:00 2001
From: Son NK <nguyenkims@hotmail.com>
Date: Sun, 22 Dec 2019 15:41:37 +0000
Subject: [PATCH] better UI for new alias page

---
 .../templates/dashboard/custom_alias.html     | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/app/dashboard/templates/dashboard/custom_alias.html b/app/dashboard/templates/dashboard/custom_alias.html
index dfa57f24..7cf3c95b 100644
--- a/app/dashboard/templates/dashboard/custom_alias.html
+++ b/app/dashboard/templates/dashboard/custom_alias.html
@@ -17,22 +17,22 @@
     <form method="post">
       <input type="hidden" name="form-name" value="non-custom-domain-name">
 
-      <div class="container">
+      <div class="container p-0">
         {% if custom_domains %}
-          <div class="row">
+          <div class="row col">
             <label class="form-label font-weight-bold">With SimpleLogin domain</label>
           </div>
         {% endif %}
 
         <div class="row">
-          <div class="col-sm-6 pr-1 pl-0 mb-1" style="min-width: 5em">
+          <div class="col-sm-6 pr-1 mb-1" style="min-width: 5em">
             <input name="email-prefix" class="form-control"
                    pattern="[0-9|A-Z|a-z|-|_]{1,}"
                    title="Only letter, number, dash (-), underscore (_) can be used in alias prefix."
                    placeholder="email alias"
                    autofocus required>
           </div>
-          <div class="col-sm-6 align-self-center p-0" style="height:1.5rem">
+          <div class="col-sm-6 align-self-center" style="height:1.5rem">
             <input type="hidden" name="email-suffix" value="{{ email_suffix }}">
             <h4>
               .{{ email_suffix }}@{{ EMAIL_DOMAIN }}
@@ -40,13 +40,13 @@
           </div>
         </div>
 
-        <div class="row">
+        <div class="row col">
           <div class="small-text">
             You can use letter, number or dash. Alias cannot be empty.
           </div>
         </div>
 
-        <div class="row">
+        <div class="row col">
           <button class="btn btn-primary mt-1">Create</button>
         </div>
 
@@ -56,29 +56,31 @@
     {% if custom_domains %}
       <hr>
       <p class="font-weight-bold">OR with your custom domains</p>
-      {% for custom_domain in custom_domains %}
-        <form method="post" class="mb-6">
-          <input type="hidden" name="form-name" value="custom-domain-name">
-          <input type="hidden" name="custom-domain-id" value="{{ custom_domain.id }}">
+      <div class="container p-0">
+        {% for custom_domain in custom_domains %}
+          <form method="post" class="mb-6">
+            <input type="hidden" name="form-name" value="custom-domain-name">
+            <input type="hidden" name="custom-domain-id" value="{{ custom_domain.id }}">
 
-          <div class="row mt-4">
-            <div class="col" style="min-width: 10em">
-              <input name="email" class="form-control">
-            </div>
-            <div class="col align-self-center d-flex">
-              <input type="hidden" name="email-suffix" value="{{ email_suffix }}">
-              <span style="font-weight: 600">
-                @{{ custom_domain.domain }}
-              </span>
-              <button class="ml-4 submit btn btn-sm btn-success">Create</button>
-            </div>
-            <div class="col">
+            <div class="row mt-4">
+              <div class="col" style="min-width: 10em">
+                <input name="email" class="form-control">
+                <div>
+                  <span style="font-weight: 600">
+                    @{{ custom_domain.domain }}
+                  </span>
+                </div>
+              </div>
 
+              <div class="col">
+                <button class="submit btn btn-success">Create</button>
+              </div>
             </div>
-          </div>
 
-        </form>
-      {% endfor %}
+
+          </form>
+        {% endfor %}
+      </div>
     {% endif %}
   </div>