Update flexpane and header styles

scss/modules/flexpane/_base.scss

@@ -10,7 +10,7 @@
   }
 
   .heading {
-    background: $color-base;
+    background: lighten($color-shade-darkest, 10%);
     color: $base-link-color;
 
     a {

scss/modules/flexpane/_channel.scss

@@ -37,6 +37,10 @@
       }
     }
 
+    .section_title {
+      color: $base-font-color;
+    }
+
     .disclosure_triangle {
       color: $base-link-color;
     }

scss/modules/flexpane/_files.scss

@@ -217,8 +217,8 @@ html.no_touch a.filetype_button_web:hover {
   &.active,
   &:active,
   &:hover {
-    background-color: $color-shade-light;
-    border-color: $color-shade-lightest;
+    background-color: $color-shade-dark;
+    border-color: $color-shade-light;
 
     .title a {
       color: $base-link-color;
@@ -351,8 +351,8 @@ html.no_touch a.filetype_button_web:hover {
   .file_list_item {
     &:focus,
     &:hover {
-      background-color: $color-shade-dark;
-      border-color: $color-shade-darkest;
+      background-color: $color-base;
+      border-color: $color-shade-dark;
     }
 
     .star {
@@ -392,5 +392,5 @@ html.no_touch a.filetype_button_web:hover {
 }
 
 .active .tab_container .file_list_item {
-  background-color: $color-shade-dark;
+  background-color: $color-base;
 }

scss/modules/flexpane/_team.scss

@@ -129,13 +129,16 @@
   }
 }
 
-#client-ui #team_list .team_list_item,
-#member_preview_scroller .team_list_item {
-  &.expanded {
-    border-color: $color-shade-dark;
-  }
+#client-ui .searchable_member_list,
+#client-ui #team_list,
+#member_preview_scroller {
+  .team_list_item {
+    &.expanded {
+      border-color: $color-shade-dark;
+    }
 
-  &:hover {
-    border-color: $color-shade-light;
+    &:hover {
+      border-color: $color-shade-light;
+    }
   }
 }

scss/modules/header/_base.scss

@@ -1,227 +1,133 @@
-#client_header .channel_header {
+.channel_header {
   background: $color-base;
 
-  .flex_header {
-    background: $color-base;
+  .blue_on_hover:hover {
+    color: $base-font-color;
   }
+}
 
-  .channel_name_container {
-    color: $base-font-color;
+#client_body:not(.onboarding)::before {
+  background: $color-base;
+  border-bottom: 1px solid $color-shade-dark;
+}
+
+.messages_header {
+  color: $base-font-color;
+}
 
+.channel_title {
+  .channel_name_container {
     .channel_name {
       color: $base-font-color;
 
       &.muted {
         color: $color-highlight;
       }
+    }
 
-      #im_title.away {
-        color: $color-highlight;
-      }
-
-      ul li.mpdm_member.away {
+    .ts_icon_shared_channel,
+    .mpdm_member {
+      &.away {
         color: $color-highlight;
       }
     }
 
-    .mute_container .muted_icon {
+    .muted_icon {
       color: $color-highlight;
 
       &:hover {
         color: $color-red;
       }
     }
   }
+}
 
-  #channel_header_info {
-    background: $color-base;
-    color: $base-font-color;
-
-    .topic_divider {
-      color: $color-shade-dark;
-    }
-  }
-
-  .channel_title_info {
-    background: $color-base;
-    color: $color-highlight;
-
-    .divider_bar {
-      background: $color-shade-dark;
-    }
-
-    .channel_details_toggle {
-      color: $color-highlight;
-    }
-
-    .channel_actions_toggle {
-      color: $color-highlight;
-    }
-  }
-
-  .channel_header_icon {
-    color: $base-font-color;
-
-    &.channel_calls_button {
-      color: $color-highlight;
-    }
-
-    &#channel_actions_toggle {
-      &.active {
-        color: $base-font-color;
-      }
-    }
-
-    &#recent_mentions_toggle {
-      &:hover {
-        color: $color-red;
-      }
-    }
-
-    &#flex_menu_toggle {
-      &.active {
-        color: $base-font-color;
-      }
-
-      .flex_menu_download_circle {
-        background: $color-base;
-
-        canvas {
-          background: $color-base;
-        }
-      }
-    }
-
-    &#details_toggle,
-    &#recent_mentions_toggle,
-    &#stars_toggle {
-      &.active {
-        background: $color-shade-dark;
-
-        &:hover {
-          background: $color-shade-light;
-          color: $base-font-color;
-        }
-      }
-    }
-  }
+#im_title.away {
+  color: $color-highlight;
+}
 
-  .blue_hover:hover {
-    color: $base-font-color;
+.channel_header_info {
+  .star,
+  button {
+    color: $base-link-color;
   }
 }
 
-#client_body:not(.onboarding)::before {
+.channel_title_info {
   background: $color-base;
-  border-bottom: 1px solid $color-base;
-}
-
-#help_icon {
-  border: 1px solid $color-shade-mid;
   color: $color-highlight;
 
-  &:hover {
-    background: $color-shade-mid;
-    border: 1px solid $color-shade-dark;
-    color: $base-font-color;
+  .divider_bar {
+    background: $color-shade-dark;
   }
 
-  &.unread #help_icon_circle_count {
-    background-color: $color-red;
-    color: $white;
+  .channel_details_toggle {
+    color: $color-highlight;
   }
-}
 
-#flex_menu_toggle {
-  &.unread #help_icon_circle_count {
-    background-color: $color-red;
-    color: $white;
+  .channel_actions_toggle {
+    color: $color-highlight;
   }
 }
 
-#flex_menu_toggle.open #help_icon_circle_count,
-#help_icon.open #help_icon_circle_count {
-  background-color: $color-shade-darkest;
+.channel_header_icon {
   color: $base-font-color;
 }
 
-#channel_members_toggle {
-  background: $color-base;
+.channel_calls_button .call_icon.call_window_offline {
   color: $color-highlight;
-
-  .channel_members_toggle_icon {
-    color: $color-highlight;
-  }
-
-  &:hover .channel_members_toggle_icon {
-    color: $base-font-color;
-  }
 }
 
-#active_channel_name {
-  color: $color-highlight;
-
-  .name {
+.channel_actions_toggle,
+.details_toggle {
+  &.active:focus {
     color: $base-font-color;
-
-    &.muted {
-      color: $color-highlight;
-    }
-  }
-
-  .prefix {
-    color: $color-highlight;
   }
+}
 
-  &.active .prefix,
-  &:hover .prefix {
+#flex_menu_toggle {
+  &.active,
+  &.active:focus {
     color: $base-font-color;
   }
 
-  #channel_actions {
-    color: $color-highlight;
-  }
-
-  .topic {
-    color: $color-highlight;
-  }
-
-  .call_icon {
-    color: $color-highlight;
+  .flex_menu_download_circle {
+    background: $color-base;
 
-    &.away {
-      color: rgba($color-highlight, 0.25);
+    canvas {
+      background: $color-base;
     }
+  }
 
-    &.call_window_offline {
-      color: rgba($color-highlight, 0.25);
-    }
+  &.unread #help_icon_circle_count {
+    background-color: $color-red;
+    color: $white;
   }
 
-  .ts_icon_microphone:hover,
-  .ts_icon_video_camera:hover {
+  &.open #help_icon_circle_count {
+    background-color: $color-shade-darkest;
     color: $base-font-color;
   }
+}
+
+#details_toggle,
+#recent_mentions_toggle,
+#stars_toggle {
+  &.active {
+    background: $color-shade-dark;
 
-  &:hover {
-    .name.muted,
-    i .fa {
+    &:hover {
+      background: $color-shade-light;
       color: $base-font-color;
     }
   }
 }
 
-#group_actions,
-#im_actions {
-  color: $color-highlight;
+#recent_mentions_toggle:hover {
+  color: $color-red;
 }
 
 #rxn_toast_div {
   background: $color-shade-darkest;
   border: 1px solid $color-shade-light;
 }
-
-#whats_new_burst {
-  background: $color-red;
-  border-color: $color-shade-light;
-}