Updated styles for status dialog, autocomplete highlights, channel de…

…tails panel, and more (#201) * File flexpane missing style added * Added missing message actions menu color style * Download flexpane styles added * Set status dialog style added * DM autocomplete selection style changed #195 * Channel edit topic text color change #194 * Channel details panel styling fix #192 * Browse apps module filter input background style fix * File upload popup input text color fix * DM message menu input font color fix * Team tab flexpane member name color fix * Notification menu header color fix * Custom notification datepicker missing style added * Removed c-file__actions background color * Fix awkward white background on file messages * File attachment with thumbnails actions background fix
laCour · Jan 11, 2019 · 5b0510b · 5b0510b
1 parent 6130d5c
commit 5b0510b
Show file tree

Hide file tree

Showing 14 changed files with 205 additions and 12 deletions.
diff --git a/scss/layout/_dialog.scss b/scss/layout/_dialog.scss
@@ -0,0 +1,27 @@
+.c-dialog {
+  &__content {
+    border-radius: 0.6rem;
+  }
+
+  &__header,
+  &__body,
+  &__footer {
+    background: $color-shade-dark;
+  }
+
+  &__title {
+    color: $base-font-color;
+  }
+
+  .p-custom_status_input {
+    &__duration_picker_select {
+      padding-left: 11px;
+
+      .c-input_select {      
+        &__selected_value--placeholder {
+          color: $base-font-color;
+        }
+      }
+    }
+  }
+}
diff --git a/scss/layout/_sidebar.scss b/scss/layout/_sidebar.scss
@@ -207,3 +207,37 @@
 #quick_switcher_label {
   color: $color-highlight;
 }
+
+.p-channel_insights {
+  &__channel {
+    .channel_link {
+      color: $base-link-color;
+    }
+  }
+
+  &__date_heading {
+    &::before {
+      background-color: $color-shade-dark;
+    }
+
+    span {
+      background-color: $color-base;
+      color: $color-highlight;
+    }
+  }
+
+  &__message--truncate {
+    &::before {
+      background: linear-gradient(180deg,transparent,$color-shade-dark 90%);
+    }
+  }
+
+  &__message {
+    ts-message {
+      &.standalone:not(.for_mention_display):not(.for_search_display):not(.for_top_results_search_display):not(.for_star_display) {
+        background-color: $color-base;
+        border-color: $color-shade-dark;
+      }
+    }
+  }
+}
diff --git a/scss/modules/flexpane/_download.scss b/scss/modules/flexpane/_download.scss
@@ -0,0 +1,26 @@
+.p-download_item {
+  padding: 12px 12px 4px 16px;
+  margin: 0;
+
+  &__container &__name_row {
+    color: $base-font-color;
+  }
+
+
+  &__actions {
+    background: $color-base;
+  }
+
+  &__link--open,
+  &__link--retry,
+  &__link--show {
+    color: $base-font-color;
+  }
+}
+
+.p-downloads_list {
+  &__shift_hint {
+    background: linear-gradient(180deg,hsla(0,0%,100%,0),$color-shade-dark 25%,$color-shade-dark);
+    color: $base-font-color;
+  }
+}
diff --git a/scss/modules/flexpane/_files.scss b/scss/modules/flexpane/_files.scss
@@ -387,10 +387,7 @@ html.no_touch a.filetype_button_web:hover {
 }
 
 .c-file {
-  &__actions {
-    background: $color-shade-light;
-  }
-
+
   &__action_button,
   &__action_button:link,
   &__action_button:focus,
@@ -400,6 +397,7 @@ html.no_touch a.filetype_button_web:hover {
     color: $white;
   }
 
+
   &__meta {
     color: $base-font-color;
   }
@@ -421,18 +419,34 @@ html.no_touch a.filetype_button_web:hover {
 }
 
 .c-pillow_file {
-  &_container {
-    background: $color-shade-light;
-    border-color: $color-shade-dark;
-    color: $base-font-color;
-  }
-
   &__description,
   &__title {
     color: $base-font-color;
   }
 }
 
+.p-file_list {
+  background: $color-shade-dark;
+  &__filters {
+    @extend .p-file_list;
+    border-color: $color-shade-dark;
+  }
+
+  &__file.c-pillow_file  {
+    &_container,
+    &_container--full_width {
+      background: $color-shade-dark;
+      border-color: $color-shade-dark;
+      color: $base-font-color;
+    }
+
+    &_container--full_width:hover {
+      background: $color-shade-light;
+      border-color: $color-shade-light;
+    }
+  }
+}
+
 .p-downloads_list__shift_hint {
   background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), $color-base 25%, $color-base);
   color: $base-font-color;

diff --git a/scss/modules/flexpane/_team.scss b/scss/modules/flexpane/_team.scss
@@ -77,6 +77,12 @@
 
 #team_tab #member_preview_scroller {
   background-color: $color-base;
+
+  .member_details {
+    .member_name {
+      color: $base-font-color;
+    }
+  }
 }
 
 #member_preview_scroller,

diff --git a/scss/modules/inputs/_base.scss b/scss/modules/inputs/_base.scss
@@ -334,3 +334,11 @@ textarea {
     border-color: $color-shade-light;
   }
 }
+
+.c-filter_input {
+  background: $color-shade-light;
+}
+
+.p-share_dialog_message_input {
+  color: $base-font-color;
+}
diff --git a/scss/modules/inputs/_datepicker.scss b/scss/modules/inputs/_datepicker.scss
@@ -0,0 +1,42 @@
+.c-date_picker {
+  &__dropdown {
+    background-color: $color-shade-dark;
+  }
+}
+
+.c-calendar_view_header {
+  &__stepper_btn:disabled,
+  &__title_btn:disabled {
+    color: $color-highlight;
+  }
+
+  &__stepper_btn,
+  &__title_btn {
+    color: $base-font-color;
+  }
+
+  &__stepper_btn:hover,
+  &__title_btn:hover {
+    background-color: $color-shade-light;
+  }
+}
+
+.c-date_picker_calendar {
+  &__date--disabled,
+  &__date--disabled:hover {
+    background-color: $color-shade-dark;
+  }
+}
+
+.c-mini_calendar {
+  &__month_button:disabled,
+  &__month_button:disabled:hover {
+    background-color: $color-shade-dark;
+  }
+}
+
+.c-calendar_month {
+  &__day_of_week_heading {
+    color: $base-font-color;
+  }
+}
diff --git a/scss/modules/inputs/_label.scss b/scss/modules/inputs/_label.scss
@@ -0,0 +1,5 @@
+.c-label {
+  &__text {
+    color: $base-font-color;
+  }
+}
diff --git a/scss/modules/inputs/_messaging.scss b/scss/modules/inputs/_messaging.scss
@@ -168,7 +168,7 @@
 
 .inline_message_input_container .ql-container {
   border-color: $color-shade-light;
-
+  color: $base-font-color;
   &.focus,
   &:active,
   &:hover {

diff --git a/scss/modules/menu/_base.scss b/scss/modules/menu/_base.scss
@@ -162,3 +162,18 @@
     }
   }
 }
+
+.c-menu {
+  background-color: $color-shade-dark;
+}
+
+
+.c-menu_item {
+  &__label {
+    color: $white;
+  }
+
+  &__header {
+    color: $color-highlight;
+  }
+}
diff --git a/scss/modules/messaging/_attachments.scss b/scss/modules/messaging/_attachments.scss
@@ -446,6 +446,14 @@
   }
 }
 
+.c-file_container--has_thumb {
+  .c-file {
+    &__actions::before {
+      background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), $color-shade-darkest 20px);
+    }
+  }
+}
+
 .message--focus .file_container .preview_show.preview_show_less .preview_show_btn {
   background: $color-shade-light;
   color: $base-font-color;

diff --git a/scss/modules/modals/_direct-messages.scss b/scss/modules/modals/_direct-messages.scss
@@ -21,7 +21,7 @@
   }
 
   #im_list_container:not(.keyboard_active).not_scrolling .im_browser_row:not(.disabled_dm):hover,
-  #im_browser .im_browser_row.highlighted {
+  .im_browser_row.highlighted {
     background: $color-shade-darkest !important;
     border: 1px solid $color-shade-light !important;
   }

diff --git a/scss/modules/tooltips/_member.scss b/scss/modules/tooltips/_member.scss
@@ -45,6 +45,10 @@
   p {
     color: $color-highlight;
   }
+
+  #menu_member_dm_input p {
+    color: $base-font-color;
+  }
 }
 
 .member_meta {

diff --git a/scss/styles.scss b/scss/styles.scss
@@ -5,13 +5,16 @@
 @import "layout/alerts";
 @import "layout/scrollbar";
 @import "layout/sidebar";
+@import "layout/dialog";
 
 @import "modules/loader";
 
 @import "modules/inputs/base";
 @import "modules/inputs/filter-select";
 @import "modules/inputs/messaging";
 @import "modules/inputs/toggle";
+@import "modules/inputs/label";
+@import "modules/inputs/datepicker";
 
 @import "modules/menu/base";
 @import "modules/menu/autocomplete";
@@ -38,6 +41,7 @@
 
 @import "modules/flexpane/base";
 @import "modules/flexpane/channel";
+@import "modules/flexpane/download";
 @import "modules/flexpane/files";
 @import "modules/flexpane/groups";
 @import "modules/flexpane/mentions";