Updated Style

New style for the dashboard frontpage.

Author: torekndsn

src/components/BrowserCell/BrowserCell.scss

@@ -10,15 +10,15 @@
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: default;
-  color: #0E69A1;
+  color: #14606E;
   height: 30px;
   line-height: 22px;
   padding: 5px 4px 0;
   border-right: 1px solid #e3e3ea;
 }
 
 .empty {
-  color: #7D929F;
+  color: #444444;
 }
 
 .current {
@@ -28,7 +28,7 @@
     position: absolute;
     pointer-events: none;
     content: '';
-    border: 2px solid #555572;
+    border: 2px solid #197182;
     top: 0;
     left: 0;
     right: 0;

src/components/BrowserFilter/BrowserFilter.react.js

@@ -129,7 +129,7 @@ export default class BrowserFilter extends React.Component {
                   onClick={this.addRow.bind(this)}
                 />
                 <Button
-                  color="white"
+                  color="primary"
                   primary={true}
                   value="Apply these filters"
                   width="245px"

src/components/BrowserFilter/BrowserFilter.scss

@@ -16,7 +16,7 @@
   padding: 8px;
 
   svg {
-    fill: #66637A;
+    fill: #D4D4D4;
   }
 
   &:hover svg {
@@ -38,7 +38,7 @@
 }
 
 .title {
-  background: #797691;
+  background: #444444;
   padding: 8px;
   border-radius: 5px 5px 0 0;
 
@@ -79,7 +79,7 @@
   top: 30px;
   right: 0;
   border-radius: 5px 0 5px 5px;
-  background: #797691;
+  background: #444444;
   width: 535px;
   font-size: 14px;
 }
@@ -113,7 +113,7 @@
     @include MonospaceFont;
     height: 30px;
     width: 140px;
-    background: #343445;
+    background: #114F5A;
     border: none;
     outline: none;
     border-radius: 5px;
@@ -125,7 +125,7 @@
 }
 
 .active .row input {
-  background: #0E69A1;
+  background: red;
 }
 
 .remove {

src/components/BrowserMenu/BrowserMenu.scss

@@ -16,7 +16,7 @@
   padding: 8px 8px 0 8px;
 
   svg {
-    fill: #66637A;
+    fill: #D4D4D4;
   }
 
   &:hover {
@@ -36,7 +36,7 @@
 }
 
 .title {
-  background: #797592;
+  background: #444444;
   padding: 8px;
   border-radius: 5px 5px 0 0;
 
@@ -68,7 +68,7 @@
   top: 30px;
   right: 0;
   border-radius: 5px 0 5px 5px;
-  background: #797592;
+  background: #444444;
   padding: 8px 0;
   font-size: 14px;
 }
@@ -81,7 +81,7 @@
   height: 26px;
 
   &:hover {
-    background: $blue;
+    background: $noodlOrange;
   }
 
   &.disabled {

src/components/Button/Button.scss

@@ -11,7 +11,7 @@
   @include DosisFont;
   display: inline-block;
   height: 30px;
-  border: 1px solid $blue;
+  border: 1px solid $noodlOrange;
   line-height: 28px;
   outline: 0;
   text-decoration: none;
@@ -25,17 +25,17 @@
   color: $blue;
 
   &:hover, &:focus {
-    background-color: $blue;
+    background-color: $noodlOrange;
     color: white;
   }
 }
 
 .primary {
-  background-color: $blue;
+  background-color: $noodlOrange;
   color: $white;
 
   &:hover, &:focus {
-    background-color: $darkBlue;
+    background-color: orange;
   }
 }
 

src/components/CategoryList/CategoryList.scss

@@ -16,8 +16,8 @@
     padding-left: 12px;
     height: 20px;
     line-height: 20px;
-    border-left: 1px solid #3e87b2;
-    color: #8fb9cf;
+    border-left: 1px solid $noodlTealLight;
+    color: $noodlTealLight;
     font-size: 12px;
 
     &.active {

src/components/ColumnsConfiguration/ColumnsConfiguration.scss

@@ -6,7 +6,7 @@
   padding: 0 8px;
 
   svg {
-    fill: #66637A;
+    fill: #D4D4D4;
   }
 
   &:hover svg {
@@ -16,7 +16,7 @@
 
 .title {
   margin-top: -4px;
-  background: #797691;
+  background: #444444;
   padding: 4px 8px;
   border-radius: 5px 5px 0 0;
 
@@ -54,7 +54,7 @@
   top: 22px;
   right: 0;
   border-radius: 5px 0 5px 5px;
-  background: #797691;
+  background: #444444;
   width: 220px;
   font-size: 14px;
 

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -31,9 +31,9 @@ export default class DataBrowserHeaderBar extends React.Component {
       if (!visible) return;
       let wrapStyle = { width };
       if (i % 2) {
-        wrapStyle.background = '#726F85';
+        wrapStyle.background = '#114F5A';
       } else {
-        wrapStyle.background = '#66637A';
+        wrapStyle.background = '#14606E';
       }
       let onClick = null;
       if (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean') {

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

@@ -12,7 +12,7 @@
   top: 0;
   left: 0;
   height: 30px;
-  background: #66637a;
+  background: #197182;
   white-space: nowrap;
   display: inline-block;
   min-width: 100%;
@@ -35,7 +35,7 @@
 .addColumnButton {
   @include DosisFont;
   display: inline-block;
-  background: #343445;
+  background: #14606E;
   height: 20px;
   width: 130px;
   text-align: center;
@@ -53,7 +53,7 @@
   vertical-align: top;
   text-align: center;
   width: 30px;
-  background: rgba(224,224,234,0.10);
+  background: #114F5A
 }
 
 .handle {

src/components/FileInput/FileInput.scss

@@ -23,10 +23,10 @@
   height: 30px;
   margin-top: 25px;
   padding: 0 16px;
-  border: 1px solid $blue;
+  border: 1px solid $noodlOrange;
   border-radius: 5px;
   overflow: hidden;
-  color: $blue;
+  color: $noodlOrange;
   transition: background 0.5s, color 0.5s;
 
   &:hover {