Update colors and spacing

After UX feedback

5 files changed, 174 insertions, 361 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 1076a506..f39f8138 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -178,6 +178,14 @@ $topic-runner-header-color: rgb(203, 88, 15);
 $subtopic-color: rgba(0, 0, 0, .6);
 $subtopic-border-color: rgb(79, 172, 225);
 
+// Help & feedback section colors
+$help-indigo-50: #f1f1ff;
+$help-indigo-500: #6666c4;
+$help-blue-500: #1068bf;
+$help-gray-100: #dbdbdb;
+$help-gray-200: #bfbfbf;
+$help-gray-900: #303030;
+
 // Other colors
 $hr-border-color: $border-color;
 $pre-background-color: rgba(238, 238, 238, .35);
diff --git a/content/assets/stylesheets/comments.scss b/content/assets/stylesheets/comments.scss
deleted file mode 100644
index e544f8cb..00000000
--- a/content/assets/stylesheets/comments.scss
+++ /dev/null
@@ -1,149 +0,0 @@
----
-version: 4
----
-
-@import "variables";
-
-.comments {
-  margin: 15px -10px 0;
-  padding: 10px 10px 0;
-  border-top-style: solid;
-  border-top-color: $border-color;
-  border-top-width: 3px;
-  border-bottom-style: solid;
-  border-bottom-color: $border-color;
-  border-bottom-width: 3px;
-  background-color: $feedback-bg;
-
-  @media all and (min-width: $mobile-width) {
-    margin-left: -40px;
-    margin-right: -40px;
-    padding-left: 40px;
-    padding-right: 40px;
-  }
-}
-
-.comments-filter {
-  a {
-    color: $color-tanuki-dark;
-    border-color: $color-tanuki-light;
-
-    i {
-      color: $color-tanuki-dark;
-      padding-right: 5px;
-      display: inline-block;
-    }
-
-    &:hover {
-      color: $color-tanuki-light;
-      border-color: $color-tanuki-dark;
-    }
-
-    &.comments-holder {
-      display: inline-block;
-      width: 100%;
-      background-color: $buttons-bg;
-
-      &:hover {
-        background-color: $color-white;
-      }
-    }
-  }
-
-  h2 {
-    border-bottom: 0;
-  }
-
-  i {
-    color: $color-tanuki-dark;
-
-    &.black-icon {
-      color: $color-gray;
-      padding-left: 5px;
-    }
-  }
-}
-
-.disqus-comments-gitlab {
-  a {
-    margin-bottom: 13px;
-  }
-
-  iframe {
-    padding-left: 15px;
-    padding-right: 15px;
-    background-color: $color-white;
-    border-radius: 5px;
-    box-shadow: 2px 2px 7px $search-border;
-    margin-top: 25px;
-  }
-}
-
-.comments-holder {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  color: $color-tanuki-dark;
-  box-shadow: 1px 2px 3px transparent;
-  font-size: 13px;
-
-  &:hover {
-    color: $color-tanuki-dark;
-    background-color: $color-white;
-    box-shadow: 1px 2px 3px $color-gray-extra-light;
-  }
-
-  @media all and (max-width: $medium-width) {
-    font-size: 12px;
-  }
-}
-
-.tab-content {
-  .row {
-    margin-bottom: 20px;
-    padding-bottom: 20px;
-    border-bottom: solid 1px $border-color;
-
-    &:last-child {
-      border-bottom: 0;
-      margin-bottom: 0;
-      padding-bottom: 7px;
-    }
-  }
-}
-
-.tab-pane {
-  padding-bottom: 15px;
-
-  &:last-child {
-    padding-bottom: 0;
-  }
-}
-
-// Fixes padding in this row when the Disqus row isn't shown
-// scss-lint:disable IdSelector
-#doc-issue-row {
-  padding-bottom: 20px;
-}
-// scss-lint:enable IdSelector
-
-// scss-lint:disable ImportantRule
-.nav-tabs {
-  > li {
-    > a {
-      color: $body-color;
-      border: solid 1px $tabs-border;
-      background-color: $inactive-tabs;
-
-      &:hover {
-        color: $body-color;
-        border: solid 1px $border-color;
-        background-color: $color-white;
-      }
-    }
-
-    &.active > a {
-      background-color: $feedback-bg !important;
-    }
-  }
-}
-// scss-lint:enable ImportantRule
diff --git a/content/assets/stylesheets/help.scss b/content/assets/stylesheets/help.scss
new file mode 100644
index 00000000..6eee1ea4
--- /dev/null
+++ b/content/assets/stylesheets/help.scss
@@ -0,0 +1,112 @@
+---
+version: 1
+---
+
+@import "variables";
+
+.help-and-feedback-section {
+  background-color: $help-indigo-50;
+  border-radius: 4px;
+  padding: 1rem;
+  margin-top: 2rem;
+  color: $help-gray-900;
+  font-size: 14px;
+  line-height: 20px;
+
+  .right-col {
+    @media all and (min-width: 768px) {
+      border-left: 1px solid $help-gray-100;
+    }
+  }
+
+  .help-subsection {
+    @media all and (max-width: 767px) {
+      margin-top: 1rem;
+    }
+  }
+
+  // scss-lint:disable QualifyingElement
+  h4,
+  h5 {
+    border-bottom: 0;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  h4[id]::before {
+    display: none;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+  // scss-lint:enable QualifyingElement
+
+  .help-icon,
+  .toggle-icon {
+    fill: $help-indigo-500;
+    vertical-align: text-top;
+  }
+
+  // scss-lint:disable ImportantRule
+  .help-icon {
+    margin-left: 0 !important;
+  }
+  // scss-lint:enable ImportantRule
+
+  .toggle-icon {
+    float: right;
+    transition: .35s ease-in-out;
+  }
+
+  .help-and-feedback-toggle {
+    color: $gds-gray-950;
+
+    &:hover {
+      color: $gds-gray-950;
+      text-decoration: none;
+    }
+
+    &.collapsed .toggle-icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  .help-and-feedback-title {
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .help-and-feedback-heading {
+    color: $gds-gray-950;
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: .25rem;
+  }
+
+  .help-and-feedback-link {
+    text-decoration: underline;
+  }
+
+  .support-btn {
+    background-color: $gds-white;
+    border-color: $help-gray-200;
+    color: $help-gray-900;
+    font-size: 14px;
+
+    &:hover {
+      color: $help-gray-900;
+    }
+  }
+}
+
+.disqus-comments-gitlab {
+  iframe {
+    padding-left: 15px;
+    padding-right: 15px;
+    background-color: $color-white;
+    border-radius: 5px;
+    box-shadow: 2px 2px 7px $search-border;
+    margin-top: 25px;
+  }
+}
diff --git a/layouts/feedback.html b/layouts/feedback.html
index d3fead45..b2990855 100644
--- a/layouts/feedback.html
+++ b/layouts/feedback.html
@@ -1,222 +1,65 @@
 <% if @item[:feedback].nil? %>
-  <div class="comments">
-    <div class="comments-filter">
-      <h2 id="help-and-feedback">
-        <i class="fa fa-star-half-o" aria-hidden="true"></i>
-        Help and feedback
-        <a class="anchor" href="#help-and-feedback"></a>
-      </h2>
-      <div>
-        <!-- Nav tabs -->
-        <ul class="nav nav-tabs" role="tablist">
-          <li role="presentation"><a class="active" href="#docs-feedback" aria-controls="docs-feedback" role="tab" data-toggle="tab">
-            <i class="fa fa-file-text-o" aria-hidden="true"></i>
-             <strong>DOCS</strong> FEEDBACK</a>
-          </li>
-          <li role="presentation"><a href="#product-feedback" aria-controls="product-feedback" role="tab" data-toggle="tab">
-            <i class="fa fa-gitlab" aria-hidden="true"></i>
-            <strong>PRODUCT</strong> FEEDBACK</a>
-          </li>
-          <li role="presentation"><a href="#get-help" aria-controls="get-help" role="tab" data-toggle="tab">
-            <i class="fa fa-question-circle" aria-hidden="true"></i>
-            GET <strong>HELP</strong></a>
-          </li>
-          <li role="presentation"><a href="#get-more-features" aria-controls="get-more-features" role="tab" data-toggle="tab">
-            <i class="fa fa-line-chart" aria-hidden="true"></i>
-            GET MORE <strong>FEATURES</strong></a>
-          </li>
-        </ul>
-
-        <!-- Tab panes -->
-        <div class="tab-content">
-          <div role="tabpanel" class="tab-pane" id="product-feedback"><!-- product-feedback tab -->
-            <div class="row" id="issue-row"><!-- issue-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>If there's something <strong>you don't like</strong> about <strong>this feature</strong>
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <a role="button" class="comments-holder btn btn-default" href="https://gitlab.com/gitlab-org/gitlab/issues/new?issue[title]=Docs%20-%20product%20feedback:%20Write%20your%20title&issue[description]=Describe%20what%20you%20would%20like%20to%20see%20improved.%0A%0A%3C!--%20Don%27t%20edit%20below%20this%20line%20--%3E%0A%0A%2Flabel%20~%22docs%5C-comments%22%20" target="_blank">
-                  <i class="fa fa-info-circle" aria-hidden="true"></i>
-                  CREATE AN ISSUE
-                </a>
-              </div>
-            </div> <!-- issue-row -->
-            <div class="row" id="feature-proposal-row"><!-- feature-proposal-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>To propose <strong>functionality that GitLab does not yet offer</strong>
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <a role="button" class="comments-holder btn btn-default" href="https://gitlab.com/gitlab-org/gitlab/issues/new?issuable_template=Feature%20proposal&issue[title]=Docs%20feedback%20-%20feature%20proposal:%20Write%20your%20title" target="_blank">
-                  <i class="fa fa-plus-circle" aria-hidden="true"></i>
-                  SUBMIT FEATURE PROPOSAL
-                </a>
-              </div>
-            </div><!-- feature-proposal-row -->
-            <div class="row" id="feature-proposal-row"><!-- beta-testing-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>To further <strong>help GitLab in shaping new features</strong>
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <a role="button" class="comments-holder btn btn-default" href="https://about.gitlab.com/community/gitlab-first-look/" target="_blank">
-                  <i class="fa fa-check-circle" aria-hidden="true"></i>
-                  JOIN BETA TESTING
-                </a>
-              </div>
-            </div><!-- beta-testing-row -->
-          </div><!-- product-feedback tab -->
-
-          <div role="tabpanel" class="tab-pane" id="get-help"><!-- get-help tab -->
-            <div class="row" id="search-row"><!-- search-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>If you <strong>didn't find</strong> what you were looking for
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <a role="button" class="comments-holder btn btn-default" href="/search/" target="_blank">
-                  <i class="fa fa-search" aria-hidden="true"></i>
-                  SEARCH THE DOCS
-                </a>
-              </div>
-            </div><!-- search-row -->
-
-            <div class="row" id="forum-row"><!-- forum-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>If you want help with something very <strong>specific to your use case</strong>,
-                  and can use some community support
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <p>
-                  <a role="button" class="comments-holder btn btn-default" href="https://forum.gitlab.com/" target="_blank">
-                    <i class="fa fa-users" aria-hidden="true"></i>
-                    POST ON GITLAB FORUM
-                  </a>
-                </p>
-              </div>
-            </div><!-- forum-row -->
-
-            <div class="row" id="support-row"><!-- support-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>If you <strong>have problems</strong> setting up or using this feature (depending on your GitLab subscription)
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <p>
-                  <a role="button" class="comments-holder btn btn-default" href="https://about.gitlab.com/support/" target="_blank">
-                    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
-                    REQUEST SUPPORT
-                  </a>
-                </p>
-              </div>
-            </div><!-- support-row -->
-          </div><!-- get-help tab -->
-
-          <div role="tabpanel" class="tab-pane" id="get-more-features"><!-- get-more-features tab -->
-            <div class="row" id="sales-row"><!-- gitlab-pricing-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>To view <strong>all GitLab tiers</strong> and features or to upgrade
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <a role="button" class="comments-holder btn btn-default" href="https://about.gitlab.com/pricing/" target="_blank">
-                  <i class="fa fa-credit-card-alt" aria-hidden="true"></i>
-                  VIEW PRICING PAGE
-                </a>
-              </div>
-            </div><!-- gitlab-pricing-row -->
+  <div class="help-and-feedback-section">
+    <a data-toggle="collapse" href="#help-feedback-content" class="help-and-feedback-toggle"  aria-expanded="false" aria-controls="help-feedback-content">
+      <h4 class="help-and-feedback-title" id="help-and-feedback">
+        <%= icon('question', nil, 'help-icon') %>
+        Help & feedback
+        <%= icon('chevron-lg-up', nil, 'toggle-icon') %>
+      </h4>
+    </a>
+    <div class="collapse show" id="help-feedback-content">
+      <div class="row mt-3">
+        <div class="col-md-8">
+          <div>
+            <h5 class="help-and-feedback-heading">Docs</h5>
+            <a class="help-and-feedback-link" href="<%= edit_on_gitlab(@item) %>" target="_blank">Edit this page</a> to fix an error or add an improvement in a merge request<br>
+            <a class="help-and-feedback-link" href="https://gitlab.com/gitlab-org/gitlab/issues/new?issue[title]=Docs%20feedback:%20Write%20your%20title&issue[description]=Link%20the%20doc%20and%20describe%20what%20is%20wrong%20with%20it.%0A%0A%3C!--%20Don%27t%20edit%20below%20this%20line%20--%3E%0A%0A%2Flabel%20~Documentation%20~%22docs%5C-comments%22%20" target="_blank">Create an issue</a> to suggest an improvement to this doc<br>
+ 	           <%# Show comments only in production and on master branch (hide archives) %>
+	           <% if @item[:comments].nil? && ENV['NANOC_ENV'] == 'production' && ENV['CI_COMMIT_REF_NAME'] == 'master' %>
+	             <% unless @item.identifier.to_s.split('/')[1] == 'ce' %>
+            <a class="help-and-feedback-link" href="#" onclick="loadDisqus();return false;">Show and post comments</a> to review and give feedback on this doc
+              <% end %>
+            <% end %>
+            <br>
+          </div>
 
-            <div class="row" id="sales-row"><!-- gitlab-gold-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>If you want to try all features available in <strong>GitLab.com</strong>
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <a role="button" class="comments-holder btn btn-default" href="https://customers.gitlab.com/trials/new?gl_com=true" target="_blank">
-                  <i class="fa fa-cloud" aria-hidden="true"></i>
-                  GITLAB GOLD FREE-TRIAL
-                </a>
-              </div>
-            </div><!-- gitlab-gold-row -->
+          <div class="mt-3">
+            <h5 class="help-and-feedback-heading">Product</h5>
+            <a class="help-and-feedback-link" href="https://gitlab.com/gitlab-org/gitlab/issues/new?issue[title]=Docs%20-%20product%20feedback:%20Write%20your%20title&issue[description]=Describe%20what%20you%20would%20like%20to%20see%20improved.%0A%0A%3C!--%20Don%27t%20edit%20below%20this%20line%20--%3E%0A%0A%2Flabel%20~%22docs%5C-comments%22%20" target="_blank">Create an issue</a> if there's something you don't like about this feature<br>
+            <a class="help-and-feedback-link" href="https://gitlab.com/gitlab-org/gitlab/issues/new?issuable_template=Feature%20proposal&issue[title]=Docs%20feedback%20-%20feature%20proposal:%20Write%20your%20title" target="_blank">Propose functionality</a> by submitting a feature request<br>
+            <a class="help-and-feedback-link" href="https://about.gitlab.com/community/gitlab-first-look/" target="_blank">Join beta testing</a> to help shape new features
+          </div>
 
-            <div class="row" id="sales-row"><!-- gitlab-ultimate-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>If you want to try all features available in <strong>GitLab self-managed</strong>
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <a role="button" class="comments-holder btn btn-default" href="https://about.gitlab.com/free-trial/" target="_blank">
-                  <i class="fa fa-server" aria-hidden="true"></i>
-                  GITLAB ULTIMATE FREE-TRIAL
-                </a>
-              </div>
-            </div><!-- gitlab-ultimate-row -->
-          </div><!-- get-more-features tab -->
+          <div class="mt-3">
+            <h5 class="help-and-feedback-heading">Feature availability and product trials</h5>
+            <a class="help-and-feedback-link" href="https://about.gitlab.com/pricing/" target="_blank">View pricing</a> to see all GitLab tiers and features, or to upgrade<br>
+            <a class="help-and-feedback-link" href="https://customers.gitlab.com/trials/new?gl_com=true" target="_blank">GitLab Gold Free-trial</a> to try all features in GitLab.com<br>
+            <a class="help-and-feedback-link" href="https://about.gitlab.com/free-trial/" target="_blank">GitLab Ultimate Free-trial</a> to try all features in GitLab self-managed<br>
+          </div>
+        </div>
 
-          <div role="tabpanel" class="tab-pane active" id="docs-feedback"><!-- docs-feedback tab -->
-            <div class="row" id="edit-page-row"><!-- edit-page-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>If you <strong>spot an error or a need for improvement</strong> and would like to <strong>fix it yourself</strong> in a merge request
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <p>
-                  <a role="button" class="comments-holder btn btn-default" href="<%= edit_on_gitlab(@item) %>" target="_blank">
-                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
-                    EDIT THIS PAGE
-                  </a>
-                </p>
-              </div>
-            </div><!-- edit-page-row -->
+        <div class="col-md-4 right-col">
+          <div class="help-subsection">
+            <h5 class="help-and-feedback-heading">Get Help</h5>
+            <p>
+              If you didn't find what you were looking for, <a class="help-and-feedback-link" href="/search/" target="_blank">search the docs.</a><br>
+            </p>
+            <p class="mt-3">
+              If you want help with something specific, and could use community support, <a class="help-and-feedback-link" href="https://forum.gitlab.com/" target="_blank">post on the GitLab forum.</a><br>
+            </p>
+            <p class="mt-3">
+              For problems setting up or using this feature (depending on your GitLab subscription).<br>
+            </p>
 
-            <div class="row" id="doc-issue-row"><!-- doc-issue-row -->
-              <div class="col-md-8 col-sm-12">
-                <p>If you would like to <strong>suggest an improvement to this doc</strong>
-                  <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                </p>
-              </div>
-              <div class="col-md-4 col-sm-12">
-                <a role="button" class="comments-holder btn btn-default" href="https://gitlab.com/gitlab-org/gitlab/issues/new?issue[title]=Docs%20feedback:%20Write%20your%20title&issue[description]=Link%20the%20doc%20and%20describe%20what%20is%20wrong%20with%20it.%0A%0A%3C!--%20Don%27t%20edit%20below%20this%20line%20--%3E%0A%0A%2Flabel%20~Documentation%20~%22docs%5C-comments%22%20" target="_blank">
-                  <i class="fa fa-info-circle" aria-hidden="true"></i>
-                  CREATE AN ISSUE
-                </a>
-              </div>
-            </div><!-- doc-issue-row -->
-            <%# Show comments only in production and on master branch (hide archives) %>
-            <% if @item[:comments].nil? && ENV['NANOC_ENV'] == 'production' && ENV['CI_COMMIT_REF_NAME'] == 'master' %>
-              <% unless @item.identifier.to_s.split('/')[1] == 'ce' %>
-                <div class="row" id="disqus-row"><!-- disqus-row-->
-                  <div class="col-md-8 col-sm-12">
-                    <p>If you want to give <strong>quick and simple feedback</strong> on this doc
-                      <i class="fa fa-arrow-right black-icon" aria-hidden="true"></i>
-                    </p>
-                  </div>
-                  <div id="disqus_thread" class="disqus-comments-gitlab col-md-4 col-sm-12">
-                    <a href="#" role="button" class="comments-holder btn btn-default" onclick="loadDisqus();return false;">
-                      <i class="fa fa-comments-o" aria-hidden="true"></i>
-                      SHOW AND POST COMMENTS
-                    </a>
-                  </div>
-                </div><!-- disqus-row-->
-              <% end %>
-            <% end %>
-          </div><!-- docs-feedback tab -->
+            <a href="https://about.gitlab.com/support/" target="_blank" class="btn support-btn mt-2" role="button">Request support</a>
+          </div>
         </div>
       </div>
     </div>
   </div>
+
+  <div id="disqus_thread" class="disqus-comments-gitlab"></div>
+
   <script>
     var disqus_config = function () {
       this.page.url = '<%= @config[:base_url] %><%= @item.identifier.without_ext + '.html' %>';
@@ -235,7 +78,6 @@
         var disqusThread = document.getElementById('disqus_thread');
         var d = document, s = d.createElement('script');
         disqusThread.innerHTML = '';
-        disqusThread.className = 'col-12'; // ensure the thread stretches the entire row
         s.src = 'https://gitlab-docs.disqus.com/embed.js';
         s.setAttribute('data-timestamp', +new Date());
         (d.head || d.body).appendChild(s);
diff --git a/layouts/head.html b/layouts/head.html
index 1dfa9980..4f7a0204 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -25,7 +25,7 @@
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/highlight.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/footer.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/toc.*'].path %>">
-<link rel="stylesheet" href="<%= @items['/assets/stylesheets/comments.*'].path %>">
+<link rel="stylesheet" href="<%= @items['/assets/stylesheets/help.*'].path %>">
 <!-- new fontawesome version 4 - via CDN -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <!-- end of fontawesome -->