More standardization color changes

src/common/AsideMenu.scss

@@ -48,7 +48,7 @@ $asideMenuMobileWidth: 280px;
 }
 
 .aside-menu__item:hover {
-  background-color: $lightHoverColor;
+  background-color: $lightColor;
 }
 
 .aside-menu__item--selected {

src/index.scss

@@ -6,7 +6,7 @@ html,
 body,
 #root {
   height: 100%;
-  background: #f5f6fe;
+  background: $lightColor;
 }
 
 * {
@@ -44,6 +44,10 @@ body,
   background-color: $mainColor;
 }
 
+.table-hover tbody tr:hover {
+  background-color: $lightColor;
+}
+
 .react-datepicker__input-container,
 .react-datepicker-wrapper {
   display: block !important;

src/utils/DateRangeRow.scss

@@ -1,7 +0,0 @@
-@import '../utils/base';
-
-.date-range-row__date-input {
-  @media (max-width: $smMax) {
-    margin-top: .5rem;
-  }
-}

src/utils/DateRangeRow.tsx

@@ -1,6 +1,5 @@
 import moment from 'moment';
 import DateInput from './DateInput';
-import './DateRangeRow.scss';
 
 interface DateRangeRowProps {
   startDate?: moment.Moment | null;
@@ -26,7 +25,7 @@ const DateRangeRow = (
     </div>
     <div className="col-md-6">
       <DateInput
-        className="date-range-row__date-input"
+        className="mt-2 mt-md-0"
         selected={endDate}
         placeholderText="Until"
         isClearable

src/utils/base.scss

@@ -10,7 +10,7 @@ $xlgMin: 1200px;
 
 // Colors
 $mainColor: #4696e5;
-$lightHoverColor: #eeeeee;
+$lightColor: #f5f6fe;
 $lightGrey: #dddddd;
 $dangerColor: #dc3545;
 $mediumGrey: #dee2e6;