Merge pull request laCour#243 from zengshengliu/autocomplete

More Style Updates for Latest Slack Version
Zoooook · Sep 7, 2019 · d148ecf · d148ecf
2 parents a2463f1 + 76777e7
commit d148ecf
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 32 deletions.
diff --git a/scss/modules/emojis/_reactions.scss b/scss/modules/emojis/_reactions.scss
@@ -33,9 +33,3 @@
     color: rgba($base-font-color, 0.25);
   }
 }
-
-a.c-member_slug--mention,
-a.c-member_slug--mention:hover {
-  background-color: $color-yellow;
-  color: $color-shade-dark;
-}
diff --git a/scss/modules/flexpane/_download.scss b/scss/modules/flexpane/_download.scss
@@ -5,7 +5,7 @@
   &__container &__name_row {
     color: $base-font-color;
   }
-  
+
 
   &__actions {
     background: $color-base;
@@ -41,6 +41,10 @@
   }
 
   &__body {
+    &--empty {
+      background-color: $color-base;
+    }
+
     .p-thread_drag_overlay {
       background-color: $color-shade-dark;
 
@@ -51,3 +55,12 @@
     }
   }
 }
+
+.c-icon_button--light,
+.c-icon_button--light.c-button-unstyled {
+  color: $base-link-color;
+
+  &:hover {
+    color: $base-link-color-active;
+  }
+}
diff --git a/scss/modules/flexpane/_mentions.scss b/scss/modules/flexpane/_mentions.scss
@@ -35,3 +35,16 @@ a.c-member_slug,
     color: $base-font-color;
   }
 }
+
+a.c-member_slug--mention,
+a.c-member_slug--mention:hover,
+.c-mrkdwn__broadcast--mention,
+.c-mrkdwn__broadcast--mention:hover,
+.c-mrkdwn__mention,
+.c-mrkdwn__mention:hover,
+.c-mrkdwn__subteam--mention,
+.c-mrkdwn__subteam--mention:hover {
+  background-color: $base-font-color;
+  border: 1px solid $color-shade-light;
+  color: $color-shade-darker;
+}
diff --git a/scss/modules/header/_base.scss b/scss/modules/header/_base.scss
@@ -163,13 +163,23 @@
               color: $base-font-color;
             }
           }
+
+          &__edit {
+            color: $base-link-color;
+          }
         }
       }
 
       &__name {
         &--dim {
           color: $color-shade-lightest;
         }
+
+        &__status {
+          &--im {
+            color: $base-link-color;
+          }
+        }
       }
     }
   }
@@ -204,6 +214,14 @@
     }
   }
 
+  &__team_menu {
+    &__blurb {
+      &__sub {
+        color: $base-link-color;
+      }
+    }
+  }
+
   &__team_header {
     background: $color-shade-dark;
   }

diff --git a/scss/modules/inputs/_base.scss b/scss/modules/inputs/_base.scss
@@ -339,6 +339,10 @@ textarea {
 
 .c-filter_input {
   background: $color-shade-light;
+
+  &__input[type=text][placeholder] {
+    color: $base-font-color;
+  }
 }
 
 .p-share_dialog_message_input {
@@ -351,22 +355,6 @@ textarea {
   }
 }
 
-.c-texty_autocomplete {
-  background: $color-base;
-  box-shadow: 0 0 0 1px $color-shade-lightest, 0 4px 12px 0 $color-shade-lightest;
-
-  &__result {
-    &--selected {
-      background: $color-shade-mid;
-    }
-
-    &_highlight,
-    &_highlight--selected {
-      background: $color-shade-dark;
-    }
-  }
-}
-
 .p-workspace {
   &__input {
     .p-message_input_field {

diff --git a/scss/modules/menu/_autocomplete.scss b/scss/modules/menu/_autocomplete.scss
@@ -213,3 +213,44 @@
     color: $base-font-color;
   }
 }
+
+.c-texty_autocomplete {
+  &__body {
+    background-color: $color-base;
+  }
+}
+
+.c-texty_autocomplete--commands {
+  background: $color-base;
+  box-shadow: 0 0 0 1px $color-shade-light, 0 4px 12px 0 $color-shade-light;
+
+  .c-texty_autocomplete {
+    &__group {
+      background-color: $color-shade-dark;
+      color: $base-font-color;
+    }
+
+    &__result {
+      background-color: $color-base;
+
+      &:not(.c-texty_autocomplete__result--selected) {
+        .c-texty_autocomplete__result_description {
+          color: $base-link-color;
+        }
+      }
+
+      &--selected {
+        background: $color-shade-mid;
+      }
+
+      &_highlight,
+      &_highlight--selected {
+        background: $color-shade-dark;
+      }
+
+      &_title {
+        color: $base-font-color;
+      }
+    }
+  }
+}
diff --git a/scss/modules/menu/_base.scss b/scss/modules/menu/_base.scss
@@ -169,8 +169,9 @@
 
 
 .c-menu_item {
-  &__label {
-    color: $white;
+  &__description,
+  &__link_icon {
+    color: $base-link-color;
   }
 
   &__header {
@@ -181,6 +182,10 @@
     color: $color-shade-lightest;
   }
 
+  &__label {
+    color: $white;
+  }
+
   &__shortcut {
     color: $base-font-color;
   }

diff --git a/scss/modules/messaging/_attachments.scss b/scss/modules/messaging/_attachments.scss
@@ -21,7 +21,7 @@
     color: $color-shade-light;
   }
 
-  &__author
+  &__author,
   &__author--distinct {
     color: $base-link-color;
   }
@@ -32,6 +32,14 @@
 
   &__author_name {
     color: $base-link-color;
+
+    &.c-link--button {
+      color: $base-link-color;
+
+      &:hover {
+        color: $base-link-color-active;
+      }
+    }
   }
 
   &__title_link span {
@@ -140,6 +148,16 @@
   &__file__meta {
     color: $base-font-color;
   }
+
+  &__message {
+    background-color: $color-shade-darkest;
+  }
+}
+
+.p-pinned_items {
+  &__remove_item {
+    color: $base-link-color;
+  }
 }
 
 .attachment_group {

diff --git a/scss/modules/messaging/_base.scss b/scss/modules/messaging/_base.scss
@@ -6,13 +6,7 @@
   box-shadow: inset 1px 0 0 0 $color-base;
 }
 
-.c-mrkdwn__broadcast--mention,
-.c-mrkdwn__broadcast--mention:hover,
 .c-mrkdwn__highlight,
-.c-mrkdwn__mention,
-.c-mrkdwn__mention:hover,
-.c-mrkdwn__subteam--mention,
-.c-mrkdwn__subteam--mention:hover,
 .mention_yellow_bg {
   background-color: $color-yellow;
   color: $color-shade-dark;

diff --git a/scss/modules/messaging/_threads.scss b/scss/modules/messaging/_threads.scss
@@ -248,3 +248,11 @@ ts-thread .reply_input_container .reply_limited {
   background-color: $color-shade-dark;
   border-bottom-color: $color-shade-dark;
 }
+
+.c-link--button {
+  color: $base-link-color;
+
+  &:hover {
+    color: $base-link-color-active;
+  }
+}
diff --git a/scss/modules/modals/_apps.scss b/scss/modules/modals/_apps.scss
@@ -64,6 +64,12 @@
 }
 
 .p-app {
+  &_dialog {
+    &__title_text {
+      color: $base-font-color;
+    }
+  }
+
   &_space {
     background-color: $color-shade-dark;
 
@@ -112,3 +118,7 @@
     }
   }
 }
+
+textarea.c-input_textarea {
+  background-color: $color-base;
+}
diff --git a/scss/modules/modals/_base.scss b/scss/modules/modals/_base.scss
@@ -94,6 +94,18 @@
     background: $color-base;
     color: $base-font-color;
   }
+
+  &__close {
+    color: $base-link-color;
+
+    &:hover {
+      color: $base-link-color-active;
+    }
+  }
+
+  &__header {
+    background: $color-base;
+  }
 }
 
 .p-dm_browser_modal {
@@ -111,3 +123,48 @@
     }
   }
 }
+
+.p-prefs_modal {
+  &__notification_example.p-prefs_modal__notification_example {
+    &--none,
+    &--linux,
+    &--mac,
+    &--windows {
+      background-color: $color-base;
+      color: $base-font-color;
+    }
+  }
+
+  &__radiogroup {
+    .p-prefs_modal__radio_decorator {
+      background-color: $color-shade-dark;
+    }
+  }
+}
+
+.c-select {
+  &_button {
+    background-color: $color-shade-dark;
+
+    &:active {
+      background-color: $color-shade-mid;
+    }
+  }
+
+  &_options_list {
+    &__option {
+      color: $base-link-color;
+    }
+
+    &__wrapper {
+      background-color: $color-shade-dark;
+    }
+  }
+}
+
+.c-button {
+  &--outline {
+    background-color: $color-shade-dark;
+    color: $base-link-color;
+  }
+}
diff --git a/scss/modules/pages/_apps.scss b/scss/modules/pages/_apps.scss
@@ -446,3 +446,7 @@ table.gray_header_border tr:first-child th:not(:only-of-type) {
     background-color: $color-green;
   }
 }
+
+.sk_primary_foreground {
+  color: $base-font-color;
+}