Merge branch 'dev' into issue-1985-notifications-reader

Author: maxceem

src/components/Feed/NewPostMobile.scss

@@ -22,7 +22,7 @@
   display: flex;
   justify-content: flex-end;
   > svg {
-      fill: #FAFAFB;
+      fill: $tc-gray-neutral-light;
   }
 }
 

src/components/Home/Home.scss

@@ -110,7 +110,7 @@
 
       p {
         @include roboto;
-        font-size: $tc-body-large;
+        font-size: $tc-body-lg;
         color: $tc-gray-70;
         letter-spacing: 0;
         line-height: $base-unit * 6;

src/components/LinksMenu/LinksMenu.scss

@@ -58,7 +58,7 @@
         margin-left: auto;
         button {
           padding: 0;
-          background: rgba(0, 0, 0, 0);
+          background: transparent;
         }
       }
       a {

src/components/Modal/Modal.scss

@@ -15,7 +15,6 @@
       height: 15px;
       top: $base-unit*3;
       right: $base-unit*3;
-      background-size: $tc-heading-extra-small;
     }
 
     .modal-title {

src/components/PanelProject/PanelProject.scss

@@ -7,7 +7,7 @@
 
     .project-heading {
       @include roboto-medium;
-      font-size: $tc-heading;
+      font-size: $tc-heading-sm;
       color: $tc-black;
       line-height: $base-unit*6;
       .text-muted {

src/components/Select/Select.scss

@@ -54,15 +54,15 @@
   }
 
   .Select-item-icon {
-    color:rgb(153, 153, 153);
-    border-right-color: rgb(220, 220, 224);
+    color:$tc-gray-40;
+    border-right-color: $tc-gray-10;
     padding: 0 5px 1px;
 
     &:active,
     &:focus,
     &:hover {
         background-color: transparent;
-        color: rgb(208, 2, 27);
+        color: $tc-red-110;
     }
   }
 

src/components/TeamManagement/TeamManagement.scss

@@ -1,12 +1,6 @@
 @import "~tc-ui/src/styles/tc-includes";
-// @import "../../styles/variables";
-// TODO where do we add these
 
 :global {
-  $tc-heading-extra-small: 14px;
-  $tc-body-small: 14px;
-  $tc-body-extra-small: 12px;
-
   @mixin icon($url) {
     background: url("../../assets/images/#{$url}") no-repeat;
   }
@@ -191,7 +185,6 @@
         position: absolute;
         top: $base-unit*3;
         right: $base-unit*3;
-        background-size: $tc-heading-extra-small;
         overflow: hidden;
       }
 
@@ -331,7 +324,7 @@
           margin: $base-unit*2 auto;
           @include roboto;
           color: $tc-gray-70;
-          font-size: $tc-body-small;
+          font-size: 14px;
           font-style: italic;
           border: 1px solid $tc-red-30;
           background: $tc-red-10;
@@ -376,7 +369,7 @@
           padding: 5px 0;
           text-align: center;
           @include roboto-medium;
-          font-size: $tc-body-extra-small;
+          font-size: $tc-label-sm;
           line-height: 18px;
           box-shadow: none;
           background-color: $tc-white;

src/components/TopBar/ProjectsToolBar.scss

@@ -2,11 +2,6 @@
 @import '~tc-ui/src/styles/tc-includes';
 
 :global {
-  // TODO: move to includes
-  $tc-rgba-10: rgba($tc-gray-80, 0.38);
-  $tc-rgba-20: rgba($tc-black, 0.17);
-  $tc-body-large: 20px;
-
   .ProjectsToolBar {
     margin: 0 auto;
     width: 100%;
@@ -242,7 +237,7 @@
 
         &.active {
           background: $tc-gray-80;
-          box-shadow: inset 0px 1px 3px 0px $tc-rgba-10;
+          box-shadow: inset 0px 1px 3px 0px $tc-gray-80;
 
           svg.icon-search-filter g {
             fill: $tc-white;
@@ -297,7 +292,7 @@
       }
 
       h2 {
-        font-size: $tc-body-large;
+        font-size: $tc-body-lg;
         color: $tc-black;
         white-space: nowrap;
 

src/projects/components/projectsCard/ProjectCardHeader.scss

@@ -23,7 +23,7 @@
 
           .project-name {
              @include roboto-medium;
-            font-size: $tc-heading-sm;
+            font-size: $tc-heading-xs;
             line-height: $base-unit * 4;
             color: $tc-black;
             word-break: break-all;

src/projects/create/components/ProjectSubmitted.scss

@@ -9,7 +9,7 @@
       width: 90%;
 
       .title {
-        color: #1E1E1F;
+        color: $tc-gray-100;
         font-size: 32px;
         font-weight: 300;
         line-height: 35px;
@@ -21,7 +21,7 @@
       }
 
       .sub-title {
-        color: #85807C;
+        color: $tc-gray-50;
         font-size: 12px;
         font-weight: 400;
         line-height: 20px;
@@ -30,7 +30,7 @@
       }
 
       .content {
-        color: #151516;
+        color: $tc-gray-100;
         font-size: 15px;
         font-weight: 400;
         margin-top: 50px;
@@ -43,7 +43,7 @@
       }
 
       .project-link-container {
-        background-color: #F1F0F0;
+        background-color: $tc-gray-neutral-light;
         border-radius: 6px;
         height: 60px;
         width: 100%;