Update colors and spacing

After UX feedback

3 files changed, 120 insertions, 149 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;
+  }
+}