Merge branch 'dev' into extract-scripts

src/components/GlobalNav/GlobalNav.jsx

@@ -24,14 +24,15 @@ export const GlobalNav = () => (
       <ToolbarGroup>
         <RoleSwitcher />
         <ToolbarSeparator style={styles.separator} />
-        <a href="https://github.com/IBM-Bluemix/logistics-wizard" target="_blank">
-          <IconButton >
+        <IconButton >
+          <a href="https://github.com/IBM-Bluemix/logistics-wizard" target="_blank">
             <Icon
               name="github"
               className={classes.github}
             />
-          </IconButton>
-        </a>
+          </a>
+        </IconButton>
+
       </ToolbarGroup>
     </Toolbar>
   </div>

src/components/GlobalNav/GlobalNav.scss

@@ -3,11 +3,13 @@
 .title {
   padding-left: 2rem;
   color: $alternateTextColor;
+  font-size: 8rem;
 }
 
 .github {
-  font-size: 1.9rem;
+  font-size: 1.98rem;
   color: $primary3Color;
+  margin-top: -2px;
 
   &:hover {
     color: $alternateTextColor;

src/routes/Dashboard/components/AlertsCard/AlertsCard.scss

@@ -19,7 +19,7 @@
 .content {
   color: $textColor;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   display: flex;
   flex-direction: column;
   height: 100%;

src/routes/Dashboard/components/Dashboard.jsx

@@ -10,7 +10,7 @@ import classes from './Dashboard.scss';
 export const Dashboard = () => (
   <div className={classes.wrapper}>
     <div className={classes.pageContainer}>
-      <DashboardTitle />
+      {/* <DashboardTitle /> */}
       <div className={classes.cardSection}>
         <CompletionCard />
         <ProgressCard />

src/routes/Dashboard/components/Dashboard.scss

@@ -15,40 +15,42 @@
 .cardSection {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 1.5rem;
+  padding-top: .4rem;
+  padding-bottom: .4rem;
+  max-height: 140px;
 }
 
 .shipmentsWrapper {
   border: 1px solid $borderColor;
   background: white;
-  padding: 1rem;
+  padding: 20px;
   flex: 1;
   margin-right: 1.5rem;
 }
 
 .shipmentsHeader {
   border-bottom: 1px solid $borderColor;
-  padding-bottom: 1rem;
+  padding-bottom: .3rem;
 }
 
 .shipmentsAmount {
-  font-size: 2.5rem;
+  font-size: 1.5rem;
   color: $accent1Color;
   text-align: center;
   font-weight: 300;
 }
 
 .shipmentsSubtitle {
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 500;
   color: $primary1Color;
   text-align: center;
 }
 
 .shipmentsBottom {
   display: flex;
   justify-content: space-between;
-  padding-top: 1rem;
+  padding-top: .3rem;
   color: $textColor;
   font-weight: 300;
   font-size: 14px;
@@ -57,5 +59,5 @@
 .selected {
   color: $primary1Color;
   text-decoration: underline;
-  font-weight: 700;
+  font-weight: 500;
 }

src/routes/Dashboard/components/Map/MapMarker/MapMarker.scss

@@ -102,8 +102,8 @@ div.shipment:hover > div.mapMarkerPopup {
   position: absolute;
   left: -100px;
   top: -100px;
-  background: lightblue;
-  opacity: 0.5;
+  background: #0F94A7;
+  opacity: 0.4;
   align-items: center;
 }
 
@@ -112,4 +112,5 @@ div.shipment:hover > div.mapMarkerPopup {
   position: absolute;
   left: -25px;
   top: -25px;
+  color: #0F94A7;
 }

src/routes/Dashboard/components/Map/PopUpCard/DCCard/DCCard.jsx

@@ -40,7 +40,7 @@ const DCCard = ({ address, contact, shipments }) => (
         </div>
       </div>
       :
-      <div className={classes.contentContainer}>No Outgoing Shipments</div>
+      <div className={classes.contentContainer}><h4>No Outgoing Shipments</h4></div>
     }
   </div>
 );

src/routes/Dashboard/components/Map/PopUpCard/PopUpCard.scss

@@ -80,6 +80,12 @@ h2 {
   font-size: 14px;
 }
 
+h4 {
+  font-weight: bold;
+  font-size: 12px;
+  font-color: #0C7483;
+}
+
 small {
   color: $primary1Color;
 }

src/routes/Dashboard/components/ShipmentsTable/ShipmentsTable.jsx

@@ -64,6 +64,7 @@ export class ShipmentsTable extends React.PureComponent {
           {props.shipments.map(shipment =>
             <TableRow
               key={shipment.id}
+              style={{ padding: '40px' }}
             >
               <TableRowColumn>{shipment.id}</TableRowColumn>
               <TableRowColumn>{shipment.status}</TableRowColumn>

src/routes/Home/components/LandingPage/Header/Header.jsx

@@ -41,6 +41,7 @@ export class Header extends React.PureComponent {
         </Toolbar>
 
         <h1>Let your global supply chain do the THINKing,<br /> so you don't have to.</h1>
+        <br />
         <GhostButton
           label="View Logistics Wizard in Action"
           primary={false}

src/styles/base/_colors.scss

@@ -1,7 +1,8 @@
-$primary1Color: rgba(15, 148, 167, 1);
+$navColor: rgba(15, 148, 167, 1);
+$primary1Color: #0C7483;
 $primary2Color: rgba(72, 85, 102, 1);
 $primary3Color: rgba(184, 222, 228, 1);
-$accent1Color: rgba(145, 195, 131, 1);
+$accent1Color: #749C68;
 $alternateTextColor: rgba(255, 255, 255, 1);
 $borderColor: rgba(218, 221, 224, 1);
 $textColor: $primary2Color;
@@ -13,6 +14,7 @@ $map2Accent: #F6ECF5;
 $map3Primary: #749C68;
 $map3Accent: #F4F9F2;
 
+:export { navColor: $navColor; }
 :export { primary1Color: $primary1Color; }
 :export { primary2Color: $primary2Color; }
 :export { primary3Color: $primary3Color; }

src/styles/muiTheme.js

@@ -2,6 +2,7 @@ import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import colors from './base/_colors.scss';
 
 export const palette = {
+  navColor: colors.navColor,
   primary1Color: colors.primary1Color,
   primary2Color: colors.primary2Color,
   primary3Color: colors.primary3Color,
@@ -28,7 +29,7 @@ const muiTheme = getMuiTheme({
   toolbar: {
     titleFontSize: '1rem',
     separatorColor: palette.primary3Color,
-    backgroundColor: palette.primary1Color,
+    backgroundColor: palette.navColor,
     iconColor: palette.alternateTextColor,
   },
   tableHeader: {