ui: Style frontpage application info like regular content

- Remove custom styling and use the normal content-container styling.

- Remove margins on card-list to make it align better with content containers.
  This can be seen when view application information in home page and in help
  page.

- Add bottom margin to content container.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>

plinth/templates/index.html

@@ -26,47 +26,43 @@
 
 {% block container %}
 
-  <div class="container">
+  {% if messages or details or not shortcuts %}
-    <div class="row">
+    <div class="container content-container">
-      <div class="col-md-8 col-md-offset-2">
 
-        {% include 'messages.html' %}
+      {% include 'messages.html' %}
 
-        {% if not shortcuts %}
+      {% if not shortcuts %}
-          <h4>
+        <h4>
-            {% url 'apps' as apps_url %}
+          {% url 'apps' as apps_url %}
-            {% blocktrans trimmed %}
+          {% blocktrans trimmed %}
-              Enable some <a href="{{ apps_url }}">applications</a> to add
+            Enable some <a href="{{ apps_url }}">applications</a> to add
-              shortcuts to this page.
+            shortcuts to this page.
-            {% endblocktrans %}
+          {% endblocktrans %}
-          </h4>
+        </h4>
+      {% endif %}
+
+      {% if details %}
+        {% block pagetitle %}
+          <h2>{{ details_label }}</h2>
+        {% endblock %}
+
+        {% block description %}
+          {% for paragraph in details %}
+            <p>{{ paragraph|safe }}</p>
+          {% endfor %}
+        {% endblock %}
+
+        {% include "clients.html" with clients=clients enabled=service.is_enabled %}
+
+        {% if user.is_authenticated and user_is_admin and configure_url %}
+          <input type="submit" class="btn btn-primary"
+                 href="{{ configure_url }}"
+                 value="{% trans "Configure &raquo;" %}"/>
         {% endif %}
+      {% endif %}
 
-        {% if details %}
-          <div class="panel panel-primary">
-            <div class="panel-heading">
-              <h3 class="panel-title">{{ details_label }}</h3>
-            </div>
-
-            {% for paragraph in details %}
-              <div class="panel-body">
-                {{ paragraph|safe }}
-              </div>
-            {% endfor %}
-            <br>
-
-            {% if user.is_authenticated and user_is_admin and configure_url %}
-              <a class="btn btn-primary btn-sm"
-                 style="margin-left : 10px; margin-bottom : 5px"
-                 href="{{ configure_url }}">
-                {% trans "Configure &raquo;" %}</a>
-            {% endif %}
-          </div>
-        {% endif %}
-
-      </div>
     </div>
-  </div>
+  {% endif %}
 
   {% if shortcuts %}
     <div class="container-fluid card-container">

static/themes/default/css/plinth.css

@@ -182,6 +182,7 @@ html {
     background-color: white;
     border: 1px solid #ddd;
     border-radius: 4px;
+    margin-bottom: 20px;
 }
 
 footer {
@@ -278,7 +279,7 @@ footer license-info p {
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
-  padding: 0 10px;
+  padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: left;