Fixes background color and adds a transition to filters (plus math calculation fix) so it is not as jarring as it used to be.

Author: Victor George

src/components/App/App.scss

@@ -2,7 +2,7 @@
 
 body {
   min-width: 320px;
-  background-color: $tc-gray-neutral-light;
+  background-color: $tc-gray-neutral-dark;
 }
 
 .ReactModal__Body--open {

src/components/Layout/Layout.scss

@@ -3,9 +3,11 @@
 .main-wrapper {
   min-height: calc(100vh - 60px); // header and footer width
   padding-top: 60px;
+  transition: all 150ms ease-in-out;
 
   &.with-filters {
     padding-top: 120px;
+    min-height: calc(100vh - 120px);
   }
 }
 

src/components/TopBar/ProjectsToolBar.scss

@@ -2,9 +2,9 @@
 @import 'tc-includes';
 
 // TODO: move to includes
-$tc-rgba-10: rgba(71,71,79,0.38);
-$tc-rgba-20: rgba(0,0,0,0.17);
-$tc-body-large        : 20px;
+$tc-rgba-10: rgba(71, 71, 79, 0.38);
+$tc-rgba-20: rgba(0, 0, 0, 0.17);
+$tc-body-large: 20px;
 
 .ProjectsToolBar {
   margin: 0 auto;
@@ -18,11 +18,11 @@ $tc-body-large        : 20px;
     justify-content: space-between;
 
     .logo-wrapper {
-      margin-left: 4*$base-unit;
+      margin-left: 4 * $base-unit;
     }
 
     .welcome-info {
-      margin-right: 4*$base-unit;
+      margin-right: 4 * $base-unit;
     }
 
     .actions {
@@ -40,22 +40,25 @@ $tc-body-large        : 20px;
     margin-top: 15px;
     display: flex;
   }
+
   .search-filter {
     width: 97px;
-    margin-left: 2*$base-unit;
-    .tc-btn{
+    margin-left: 2 * $base-unit;
+
+    .tc-btn {
       display: flex;
       align-items: center;
       // justify-content: center;
-      padding: 0 2*$base-unit 0 34px;
+      padding: 0 2 * $base-unit 0 34px;
       text-align: left;
       color: $tc-gray-40;
       background-color: transparent;
       border-radius: 2px;
       border: 0;
       font-size: 12px;
       position: relative;
-      &:before{
+
+      &:before {
         display: block;
         content: '';
         width: 14px;
@@ -66,10 +69,12 @@ $tc-body-large        : 20px;
         background: url("../../styles/i/icon-filter.png") left top no-repeat;
         background-size: 14px 32px;
       }
-      &.active{
+
+      &.active {
         background: $tc-gray-80;
         box-shadow: inset 0px 1px 3px 0px $tc-rgba-10;
-        &:before{
+
+        &:before {
           background: url("../../styles/i/icon-filter.png") left -16px no-repeat;
           background-size: 14px 32px;
         }
@@ -90,40 +95,47 @@ $tc-body-large        : 20px;
   }
 
   /* .bar__search */
-  .bar__search{
+  .bar__search {
     position: relative;
     min-height: 60px;
+    height: 60px;
     padding: 0 20px;
     background-color: $tc-gray-neutral-light;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
     display: flex;
     width: 100%;
-    h2{
+
+    h2 {
       font-size: $tc-body-large;
       line-height: 60px;
       color: $tc-black;
       width: 120px;
       white-space: nowrap;
     }
-    .bar-control{
+
+    .bar-control {
       width: 120px;
       text-align: right;
       min-height: 30px;
       padding-top: 15px;
-      .tc-btn{
+
+      .tc-btn {
         display: inline-block;
         height: 30px;
         white-space: nowrap;
       }
     }
-    .search-panel{
+
+    .search-panel {
       flex: 1;
       margin: 0 auto;
       text-align: center;
       display: flex;
       justify-content: center;
       padding-top: 15px;
       flex-wrap: wrap;
-      label{
+
+      label {
         @include roboto-medium;
         width: 83px;
         display: inline-block;
@@ -133,12 +145,14 @@ $tc-body-large        : 20px;
         color: $tc-gray-70;
         text-align: right;
       }
-      .search-select-widget{
+
+      .search-select-widget {
         width: 280px;
         margin-left: 10px;
         display: inline-block;
       }
     }
+
     .SwitchButton {
       .label {
         padding-right: 10px;
@@ -148,15 +162,17 @@ $tc-body-large        : 20px;
 }
 
 .project-creation-dialog-overlay {
-  position : fixed;
-  top : 0;
-  left : 0;
-  right : 0;
-  bottom : 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   z-index: 21;/* +1 of the z-index of the topbar */
-  background-color: #fafafb; 
+  background-color: #fafafb;
   /*background-color: $tc-gray-neutral-dark;*/
   overflow-y: scroll;
+  opacity: 1;
+  transition: all .250ms ease-in-out;
 
   .IncompleteProjectConfirmation {
     position: static;
@@ -174,6 +190,7 @@ $tc-body-large        : 20px;
     top: 12px;
     z-index: 22;/* +1 from z-index of the modal overlay */
   }
+
   .FillProjectDetails .header {
     margin: 35px 0 0;
   }
@@ -213,23 +230,27 @@ $tc-body-large        : 20px;
 
 
 @media all and (max-width: 1023px) {
-  .bar__search{
-    h2{
+  .bar__search {
+    h2 {
       width: 110px;
     }
-    .search-panel{
+
+    .search-panel {
       flex: 1;
       margin: 0 auto;
       text-align: left;
       display: flex;
       justify-content: flex-start;
-      label{
+
+      label {
         width: auto;
         margin-left: 30px;
-        &.first{
+
+        &.first {
           margin-left: 0;
         }
       }
+
       .search-select-widget {
         width: 170px;
       }