From 7b8fef19912c02232a489cc53f4522a9cbfabff9 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 19 Jan 2016 09:58:37 +0100
Subject: [PATCH] channel twitter: add description text, style description

---
 .../app/views/twitter/account_edit.jst.eco        | 15 ++++++++-------
 app/assets/stylesheets/zammad.scss                | 13 +++++++++++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/app/views/twitter/account_edit.jst.eco b/app/assets/javascripts/app/views/twitter/account_edit.jst.eco
index fb3c63b1b..21cdd0ac9 100644
--- a/app/assets/javascripts/app/views/twitter/account_edit.jst.eco
+++ b/app/assets/javascripts/app/views/twitter/account_edit.jst.eco
@@ -1,7 +1,8 @@
 <div class="alert alert--danger hidden" role="alert"></div>
 <fieldset>
 
-  <%- @T('Search Terms') %>
+  <h3><%- @T('Search Terms') %></h3>
+  <p class="description"><%- @T('Tweets containing search terms are automatically turned into tickets.') %></p>
   <div class="js-searchTerm">
     <div class="js-searchTermItem js-searchTermPlaceholder hidden">
       <input name="" value=""> -> <div class="js-groups"></div>
@@ -16,16 +17,16 @@
     </div>
   </div>
 
-  <hr>
-
   <div class="js-mention">
-    <%- @T('Mentions') %> -> <div class="js-groups"></div>
+    <h3><%- @T('Mentions Group') %></h3>
+    <p class="description"><%- @T('Choose which group %s will get added to.', 'mentions') %></p>
+    <div class="js-groups"></div>
   </div>
 
-  <hr>
-
   <div class="js-directMessage">
-    <%- @T('Direct Messages') %> -> <div class="js-groups"></div>
+    <h3><%- @T('Direct Messages Group') %></h3>
+    <p class="description"><%- @T('Choose which group %s will get added to.', 'direct messages') %></p>
+    <div class="js-groups"></div>
   </div>
 
 </fieldset>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index b7c53cb41..589f5b7c2 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -45,6 +45,14 @@ p {
   &.subtle {
     color: hsl(60,1%,74%);
   }
+
+  &.description {
+    color: hsl(190,2%,74%);
+  }
+}
+
+h3 + .description {
+  margin-top: 0;
 }
 
 strong {
@@ -5418,6 +5426,11 @@ footer {
     h2:first-child {
       margin-top: 0;
     }
+
+    p:first-child,
+    .alert.hidden:first-child + p {
+      margin-top: 0;
+    }
     
     .table > thead > tr > th {
       background: hsl(197,20%,93%);