channel twitter: add description text, style description

zammad · Jan 19, 2016 · 7b8fef1 · 7b8fef1
1 parent 3c4241b
commit 7b8fef1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 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
@@ -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>
diff --git 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%);