Expand/collapse button -> Change to make it look like a toggle

Changed the expand/collapse button to look different when is
opened/closed

app/assets/javascripts/behaviors/toggler_behavior.js

@@ -22,6 +22,7 @@ $(() => {
   }
 
   $('body').on('click', '.js-toggle-button', function toggleButton(e) {
+    e.target.classList.toggle('open');
     toggleContainer($(this).closest('.js-toggle-container'));
 
     const targetTag = e.currentTarget.tagName.toLowerCase();

app/assets/stylesheets/pages/commits.scss

@@ -135,7 +135,7 @@
 
 .text-expander {
   display: inline-block;
-  background: $gray-light;
+  background: $white-light;
   color: $gl-text-color-secondary;
   padding: 0 5px;
   cursor: pointer;
@@ -146,6 +146,11 @@
   line-height: $gl-font-size;
   outline: none;
 
+  &.open {
+    background: $gray-light;
+    box-shadow: inset 0 0 2px rgba($black, 0.2);
+  }
+
   &:hover {
     background-color: darken($gray-light, 10%);
     text-decoration: none;

changelogs/unreleased/28575-expand-collapse-look.yml

+---
+title: Expand/collapse button -> Change to make it look like a toggle
+merge_request: 10720
+author: Jacopo Beschi @jacopo-beschi