From 78ac35cc6f285acfa28081996d06357dd51ca5d8 Mon Sep 17 00:00:00 2001
From: Santiago Lamora <slamora@users.noreply.github.com>
Date: Tue, 3 Dec 2019 13:34:39 +0100
Subject: [PATCH] Code styles of services table (mail addresses).

---
 musician/models.py                       |  4 +-
 musician/static/musician/css/default.css | 49 ++++++++++++++++++++++++
 musician/templates/musician/mail.html    | 16 ++++----
 3 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/musician/models.py b/musician/models.py
index 28eb035..06eb35c 100644
--- a/musician/models.py
+++ b/musician/models.py
@@ -1,4 +1,5 @@
 from django.utils.html import format_html
+from django.utils.translation import gettext_lazy as _
 
 
 class OrchestraModel:
@@ -107,7 +108,8 @@ class DatabaseService(OrchestraModel):
 
 class MailService(OrchestraModel):
     api_name = 'address'
-    verbose_name = 'Mail'
+    verbose_name = _('Mail addresses')
+    description = _('Litle description of what to be expected in this section to aid the user. Even a link to more help if there is one available.')
     fields = ('mail_address', 'aliases', 'type', 'type_detail')
 
     FORWARD = 'forward'
diff --git a/musician/static/musician/css/default.css b/musician/static/musician/css/default.css
index f8ff59c..381f62e 100644
--- a/musician/static/musician/css/default.css
+++ b/musician/static/musician/css/default.css
@@ -76,3 +76,52 @@ a:hover {
 #login-footer a {
     color: #FEFBF2;
 }
+
+#content {
+    background: #ECECEB;
+    color: #343434;
+}
+
+/** services **/
+h1.service-name {
+    
+    font: Bold 26px/34px Roboto;
+    margin-top: 3rem;
+}
+
+.service-description {
+    
+    font: 16px/21px Roboto;
+}
+.service-list {
+    margin-top: 2rem;
+}
+/** TODO update theme instead of overriding **/
+.service-list thead.thead-dark th {
+    background: rgba(80, 70, 110, 0.25);
+    color: #50466E;
+    border-color: transparent;
+}
+/** /TODO **/
+
+.service-list thead.thead-dark th:first-of-type {
+    border-top-left-radius: .25rem;
+}
+
+.service-list thead.thead-dark th:last-of-type {
+    border-top-right-radius: .25rem;
+}
+
+.service-list tbody {
+    background: white;
+    color: #343434;
+}
+
+.service-list tfoot {
+    background: white;
+    color: #343434;
+}
+
+.service-list tfoot tr td {
+    padding-top: 3rem;
+}
diff --git a/musician/templates/musician/mail.html b/musician/templates/musician/mail.html
index 116fae4..b4eeea6 100644
--- a/musician/templates/musician/mail.html
+++ b/musician/templates/musician/mail.html
@@ -3,15 +3,15 @@
 
 {% block content %}
 
-<h1>{{ service.verbose_name }}</h1>
-<p>{{ service.description }}</p>
-<table class="table table-hover">
+<h1 class="service-name">{{ service.verbose_name }}</h1>
+<p class="service-description">{{ service.description }}</p>
+<table class="table service-list">
     <thead class="thead-dark">
         <tr>
-            <th scope="col">Mail address</th>
-            <th scope="col"></th>
-            <th scope="col">Type</th>
-            <th scope="col">Type details</th>
+            <th scope="col">{% trans "Mail address" %}</th>
+            <th scope="col">{% trans "Aliases" %}</th>
+            <th scope="col">{% trans "Type" %}</th>
+            <th scope="col">{% trans "Type details" %}</th>
         </tr>
     </thead>
     <tbody>
@@ -19,7 +19,7 @@
         <tr>
             <td>{{ obj.mail_address }}</td>
             <td>{{ obj.aliases|join:" , " }}</td>
-            <td>{{ obj.type }}</td>
+            <td>{{ obj.type|capfirst }}</td>
             <td>{{ obj.type_detail }}</td>
         </tr>
         {% endfor %}