From 512ade83b49854f48d09a07dab391b005b7e04a6 Mon Sep 17 00:00:00 2001
From: Son Nguyen Kim <nguyenkims@users.noreply.github.com>
Date: Fri, 17 Sep 2021 11:38:07 +0200
Subject: [PATCH] improve wording & styling on custom domain info page

---
 .../dashboard/domain_detail/base.html         |  2 +-
 .../dashboard/domain_detail/info.html         | 54 +++++++++----------
 static/style.css                              |  6 ++-
 3 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/app/dashboard/templates/dashboard/domain_detail/base.html b/app/dashboard/templates/dashboard/domain_detail/base.html
index a2cd6cc7..4e9112bd 100644
--- a/app/dashboard/templates/dashboard/domain_detail/base.html
+++ b/app/dashboard/templates/dashboard/domain_detail/base.html
@@ -26,7 +26,7 @@
     <div class="col-lg-9">
       <div class="card">
         <div class="card-body">
-          <div class="text-wrap p-lg-6">
+          <div class="text-wrap p-lg-6 domain_detail_content">
             {% block domain_detail_content %}
             {% endblock %}
           </div>
diff --git a/app/dashboard/templates/dashboard/domain_detail/info.html b/app/dashboard/templates/dashboard/domain_detail/info.html
index cc3b7a57..ba70d6db 100644
--- a/app/dashboard/templates/dashboard/domain_detail/info.html
+++ b/app/dashboard/templates/dashboard/domain_detail/info.html
@@ -7,24 +7,23 @@
 {% endblock %}
 
 {% block domain_detail_content %}
-  <h1 class="h3"> {{ custom_domain.domain }}  </h1>
+  <h1 class="h2 mb-1"> {{ custom_domain.domain }}  </h1>
 
-  <div class="small-text">Created {{ custom_domain.created_at | dt }}</div>
-
-  {{ nb_alias }} aliases
+  <div class="small-text">Created {{ custom_domain.created_at | dt }}. {{ nb_alias }} aliases</div>
 
   <hr>
-  <div>Catch All</div>
-  <div class="small-text">
-    This feature allows you to create aliases <b>on the fly</b>.
+  <h3 class="mb-1">Catch All</h3>
+  <div class="">
+    Create aliases <b>on the fly</b>.
+
     Simply use <em>anything@{{ custom_domain.domain }}</em>
-    next time you need an email address. <br>
-    The alias will be created the first time it receives an email
-    and automatically belong to <b>{{ custom_domain.domain }}</b> mailboxes (
+    next time you need an alias: it'll be <b>automatically</b>
+    created the first time it receives an email. <br>
+    The new alias will belong to
     {% for mailbox in custom_domain.mailboxes %}
       <b>{{ mailbox.email }}</b>
       {% if not loop.last %},{% endif %}
-    {% endfor %})
+    {% endfor %}
   </div>
 
   <div>
@@ -47,33 +46,32 @@
   </div>
 
   <hr>
-  <div>Default Alias Name</div>
-  <div class="small-text">
-    This name will be used as the default alias name when you send
-    or reply from an alias, unless overwritten by the alias specific name.
+  <h3 class="mb-1">Default Display Name</h3>
+  <div class="">
+    Default display name for aliases created with <b>{{ custom_domain.domain }}</b>
+     unless overwritten by the alias display name.
   </div>
 
   <div>
-    <form method="post">
+    <form method="post" class="form-inline">
       <input type="hidden" name="form-name" value="set-name">
       <div class="form-group">
-        <input class="form-control"
+        <input class="form-control mr-2"
                value="{{ custom_domain.name or "" }}"
                name="alias-name"
-               placeholder="Alias name">
+               placeholder="Alias Display Name">
       </div>
-      <button class="btn btn-primary" name="action" value="save">Save</button>
+      <button class="btn btn-outline-primary" name="action" value="save">Save</button>
       {% if custom_domain.name %}
-        <button class="btn btn-danger float-right" name="action" value="remove">Remove</button>
+        <button class="btn btn-outline-danger float-right ml-2" name="action" value="remove">Remove</button>
       {% endif %}
     </form>
   </div>
 
   <hr>
-  <div>Random Prefix Generation</div>
-  <div class="small-text">
-    A random prefix can be generated for this domain for usage in the New Alias
-    feature.
+  <h3 class="mb-1">Random Prefix Generation</h3>
+  <div class="">
+    Add a random prefix for this domain when creating a new alias.
   </div>
 
   <div>
@@ -96,14 +94,14 @@
   </div>
 
   <hr>
-  <h3 class="mb-0">Delete Domain</h3>
-  <div class="small-text mb-3">Please note that this operation is irreversible.
-    All aliases associated with this domain will be also deleted.
+  <h3 class="mb-1">Delete Domain</h3>
+  <div class="mb-3">This operation is <b>irreversible</b>.
+    All aliases associated with this domain will be deleted.
   </div>
 
   <form method="post">
     <input type="hidden" name="form-name" value="delete">
-    <span class="delete-custom-domain btn btn-outline-danger">Delete domain</span>
+    <span class="delete-custom-domain btn btn-danger">Delete domain</span>
   </form>
 
 {% endblock %}
diff --git a/static/style.css b/static/style.css
index d8f0c233..18ba81da 100644
--- a/static/style.css
+++ b/static/style.css
@@ -165,4 +165,8 @@ textarea.parsley-error {
 .parsley-errors-list.filled {
     opacity: 1;
 }
-/* END Parsley CSS */
\ No newline at end of file
+/* END Parsley CSS */
+
+.domain_detail_content {
+    font-size: 15px;
+}
\ No newline at end of file