Theming efforts

scss/_emoji.scss

@@ -37,15 +37,11 @@ button.emoji {
     display: inline-block;
     width: $button-height;
     height: $button-height;
-    @include color-svg('../images/smile.svg', var(--color-grey));
+    @include color-svg('../images/smile.svg', $color-composer-emoji-btn);
   }
 
   &:focus,
   &:hover {
     opacity: 1;
   }
 }
-
-.emoji-mart-category-list > li {
-  min-width: initial;
-}

scss/_global.scss

@@ -13,8 +13,8 @@ body {
   margin: 0;
   font-family: $roboto!important;
   font-size: 14px;
-  color: var(--color-light-90);
-  background-color: var(--bg-color);
+  color: $color-global-text;
+  background-color: $color-global-bg;
 }
 
 .window {
@@ -53,30 +53,13 @@ h1, h2, h3, h4, h5, p, .bp3-button, .bp3-dialog-header, button>span, label {
   display: none;
 }
 
-.title-bar {
-  color: var(--color-light-90);
-
-  height: $header-height;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.logo {
-  margin-left: 16px;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 300;
-  color: var(--color-light-90);
-}
-
 button {
   cursor: pointer;
   font-size: inherit;
 }
 
 a {
-  color: var(--color-blue);
+  color: $color-global-a;
 }
 
 
@@ -100,7 +83,7 @@ a {
       display: inline-block;
       width: $button-height;
       height: $button-height;
-      @include color-svg('../images/paperclip.svg', var(--color-grey));
+      @include color-svg('../images/paperclip.svg', $color-composer-file-btn);
       transform: rotateZ(-45deg);
     }
 
@@ -123,24 +106,6 @@ a {
   }
 }
 
-$avatar-size: 48px;
-
-.avatar {
-  display: inline-block;
-  height: $avatar-size;
-  width: $avatar-size;
-  border-radius: 50%;
-  background-size: cover;
-  vertical-align: middle;
-  text-align: center;
-  line-height: $avatar-size;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  color: var(--color-white);
-  font-size: 18px;
-  background-color: var(--color-grey);
-}
-
 .SelectGroupImage {
   width: 100px;
 }
@@ -171,31 +136,12 @@ $new-contact-left-margin: 16px;
   }
 }
 
-.x {
-  display: inline-block;
-  float: right;
-  cursor: pointer;
-  border-radius: 50%;
-  width: 22px;
-  height: 22px;
-  padding: 3px;
-  background: var(--color-grey);
-
-  &:before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    @include color-svg('../images/x.svg', var(--color-white));
-  }
-}
-
 input[type='text'],
 input[type='search'],
 textarea {
   &:active,
   &:focus {
-    outline: 1px solid var(--color-blue);
+    outline: 1px solid $color-global-textarea-outline;
   }
 }
 
@@ -231,11 +177,11 @@ button:focus {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
+  background: $color-scrollbar-thumb;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
+  background: $color-scrollbar-thumb-hover;
 }
 
 ::-webkit-scrollbar-corner {

scss/_index.scss

@@ -3,63 +3,6 @@
   overflow: auto;
 }
 
-// $search-x-size: 16px;
-// $search-padding-right: 12px;
-// $search-padding-left: 30px;
-
-// input.search {
-//   border: 1px solid $color-black-02;
-//   padding: 0 $search-padding-right 0 $search-padding-left;
-//   margin-left: 8px;
-//   margin-right: 8px;
-//   outline: 0;
-//   height: 32px;
-//   width: calc(100% - 16px);
-//   outline-offset: -2px;
-//   font-size: 14px;
-//   line-height: 18px;
-//   font-weight: normal;
-
-//   position: relative;
-//   border-radius: 4px;
-
-//   &:focus {
-//     outline: solid 1px var(--color-blue);
-//   }
-
-//   &.active {
-//     background-image: url('../images/x.svg');
-//     background-repeat: no-repeat;
-//     background-size: $search-x-size;
-
-//     &.ltr {
-//       background-position: right $search-padding-right center;
-//     }
-
-//     &.rtl {
-//       background-position: left $search-padding-left center;
-//     }
-//   }
-
-//   &::-webkit-search-cancel-button {
-//     -webkit-appearance: none;
-//     display: block;
-//     width: $search-x-size;
-//     height: $search-x-size;
-//   }
-
-//   &::-webkit-search-cancel-button:hover {
-//     cursor: pointer;
-//   }
-// }
-
-.last-timestamp {
-  font-size: smaller;
-  float: right;
-  margin: 0 10px;
-  color: var(--color-grey);
-}
-
 .new-contact {
   display: none;
   cursor: pointer;