Release 2

frontend/src/common/components/footer/footer.component.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { LogoMicrosoftComponent } from "../logo-microsoft";
+import { cnc } from "../../../util";
+
+const style = require("./footer.style.scss");
+
+const Links = () => (
+  <div className={style.linkArea}>
+    <a className={style.link} href="https://technet.microsoft.com/en-US/cc300389.aspx" target="__blank">Terms of Use</a>
+    <a className={style.link} href="https://go.microsoft.com/fwlink/?LinkId=248681" target="__blank">Privacy</a>    
+  </div>
+);
+
+const Statement = () => (
+  <div className={style.statementArea}>
+    © Microsoft 2018
+  </div>
+);
+
+export const FooterComponent = ({className = null}) => {
+  return (
+    <footer className={cnc(style.footer, className)}>
+      <Statement />
+      <a href="https:\\www.microsoft.com" target="__blank">
+        <LogoMicrosoftComponent colorful={false} classes={{container: style.logoContainer, svg: style.logoSvg }} />
+      </a> 
+      <Links />
+    </footer>
+  );
+}

frontend/src/common/components/footer/footer.style.scss

@@ -0,0 +1,72 @@
+@import "./../../../theme/_breakpoints.scss";
+@import "./../../../theme/_palette.scss";
+
+@mixin footer-text {
+  color: $colorWhite;
+  font-size: 0.65rem;
+
+  @include respond-to-desktop {
+    font-size: 0.8rem;
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  height: 2rem;
+  padding: 0 1.75rem;
+
+  @include respond-to-desktop {
+    height: 3.5rem;
+    padding: 0.25rem 2.75rem;
+  }
+
+  .logo-container {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .logo-svg {
+      flex-shrink: 0;
+      flex-grow: 0;
+      height: 1rem;
+
+      @include respond-to-desktop {
+        height: 1.8rem;
+      }
+    }
+  }
+
+
+  .link-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    opacity: 0.5;
+    width: 10rem;
+
+    .link {
+      @include footer-text;
+
+      margin-left: 1rem;
+    }
+  }
+
+  .statement-area {
+    @include footer-text;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    width: 10rem;    
+
+    opacity: 0.5;
+  }
+}
+

frontend/src/common/components/footer/index.ts

@@ -0,0 +1 @@
+export { FooterComponent } from "./footer.component";

frontend/src/common/components/logo-jfk/index.ts

@@ -0,0 +1 @@
+export { LogoJFKComponent } from "./logo.component";

frontend/src/common/components/logo-jfk/logo.component.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { JFKSvg } from "./svg.component";
+
+
+export const LogoJFKComponent = ({ classes }) => (
+  <div className={classes.container}>
+    <JFKSvg
+      className={classes.svg}
+    />
+  </div>
+);

frontend/src/common/components/logo/logo.scss → frontend/src/common/components/logo-jfk/style.scss

@@ -1,6 +1,4 @@
 .logo {
-  enable-background:new 0 0 169.9 169.9;
-
   .st0 {
     fill-rule: evenodd;
     clip-rule: evenodd;

frontend/src/common/components/logo/logo.tsx → frontend/src/common/components/logo-jfk/svg.component.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-const styles = require('./logo.scss');
+const styles = require('./style.scss');
 
 interface Props {
   className: string;
 }
 
-export const Logo: React.StatelessComponent<Props> = (props) => (
+export const JFKSvg: React.StatelessComponent<Props> = (props) => (
   <svg
     className={`${styles.logo} ${props.className}`}
     xmlns="http://www.w3.org/2000/svg"

frontend/src/common/components/logo-microsoft/index.ts

@@ -0,0 +1 @@
+export { LogoMicrosoftComponent } from "./logo.component";

frontend/src/common/components/logo-microsoft/logo.component.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { MicrosoftSvg } from "./svg.component";
+
+
+export const LogoMicrosoftComponent = ({ classes, colorful }) => (
+  <div className={classes.container}>
+    <MicrosoftSvg
+      className={classes.svg}
+      colorful={colorful}
+    />
+  </div>
+);

frontend/src/common/components/logo-microsoft/style.scss

@@ -0,0 +1,43 @@
+@import "../../../theme/_palette.scss";
+
+@mixin common {
+  fill: $colorWhite;
+}
+
+.logo {
+  .text {
+    @include common;
+  }
+
+  .sq1 {
+    @include common;
+
+    &.colorful {
+      fill: #f25022;
+    }
+  }
+
+  .sq2 {
+    @include common;
+
+    &.colorful {
+      fill: #02a4ef;
+    }
+  }
+
+  .sq3 {
+    @include common;
+
+    &.colorful {
+      fill: #ffb902;
+    }
+  }
+
+  .sq4 {
+    @include common;
+
+    &.colorful {
+      fill: #80ba01;
+    }
+  }
+}

frontend/src/common/components/logo-microsoft/svg.component.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cnc } from '../../../util';
+const style = require('./style.scss');
+
+interface Props {
+  className: string;
+  colorful?: boolean;
+}
+
+export const MicrosoftSvg: React.StatelessComponent<Props> = (props) => (
+  <svg
+    className={`${style.logo} ${props.className}`}
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 470 108"
+    xmlSpace="preserve"
+  >
+    <g>
+      <path className={style.text} d="m243.154,47.565c4.144,-0.521 8.277,1.053 11.536,3.536c0.03,-3.214 -0.025,-6.429 0.03,-9.64c-0.904,-0.529 -1.877,-0.918 -2.882,-1.198c-4.875,-1.375 -10.136,-1.431 -15.013,-0.045c-4.477,1.288 -8.585,4.029 -11.212,7.901c-3.135,4.538 -4.243,10.207 -3.997,15.642c0.244,5.229 2.31,10.446 6.116,14.106c3.502,3.394 8.328,5.222 13.166,5.477c4.729,0.232 9.682,-0.4 13.814,-2.854c-0.037,-3.043 0.006,-6.087 -0.022,-9.13c-2.663,1.942 -5.773,3.334 -9.068,3.713c-3.335,0.251 -6.907,-0.549 -9.455,-2.809c-2.453,-2.086 -3.758,-5.229 -4.084,-8.377c-0.435,-4.021 0.149,-8.386 2.678,-11.673c1.968,-2.65 5.104,-4.352 8.393,-4.649zm-34.141,-25.211c-2.807,0.319 -5.201,2.864 -5.125,5.72c-0.118,2.713 2.069,5.146 4.693,5.617c2.529,0.551 5.43,-0.516 6.727,-2.812c1.173,-2.035 0.882,-4.808 -0.702,-6.549c-1.35,-1.59 -3.556,-2.284 -5.593,-1.976zm-27.805,1.282c-5.84,14.501 -11.81,28.944 -17.695,43.425c-1.227,-2.876 -2.321,-5.807 -3.491,-8.704c-4.58,-11.589 -9.189,-23.166 -13.763,-34.754l-14.698,0c-0.006,19.598 -0.003,39.197 0,58.796c3.205,-0.003 6.413,0.005 9.621,-0.003c-0.008,-8.774 0,-17.549 -0.002,-26.324c0.034,-6.336 -0.07,-12.678 0.053,-19.013c0.182,0.287 0.351,0.587 0.508,0.896c5.995,14.813 11.945,29.649 17.97,44.452c2.422,-0.039 4.844,0.042 7.264,-0.045c5.807,-14.816 11.759,-29.577 17.6,-44.38c0.155,-0.324 0.332,-0.638 0.531,-0.94c0.045,0.649 0.067,1.299 0.062,1.949c-0.019,14.464 0.02,28.925 -0.016,43.386c3.398,0.048 6.797,0.011 10.199,0.02c-0.003,-19.596 -0.008,-39.192 0.003,-58.788c-4.718,0.009 -9.434,-0.048 -14.146,0.027zm96.111,17.268c-2.534,1.432 -4.143,3.979 -5.223,6.603c0.009,-2.414 -0.006,-4.824 0.009,-7.235c-3.326,-0.016 -6.652,-0.033 -9.979,0.009c0.02,14.039 0,28.08 0.009,42.118l9.964,0c0.002,-6.717 0,-13.434 0,-20.151c-0.082,-2.917 0.159,-5.935 1.439,-8.603c1.178,-2.521 3.451,-4.718 6.32,-5.043c2.352,-0.238 4.838,0.313 6.831,1.602c0.008,-3.363 -0.006,-6.725 0.008,-10.088c-3.044,-1.022 -6.589,-0.883 -9.378,0.788zm-72.513,-0.633c0.009,14.044 -0.002,28.086 0.006,42.127l10.033,0c0.014,-14.036 -0.022,-28.073 0.017,-42.109c-3.351,-0.064 -6.705,-0.031 -10.056,-0.018zm151.683,19.158c-2.97,-1.714 -6.388,-2.525 -9.253,-4.438c-1.676,-1.062 -2.149,-3.386 -1.465,-5.158c0.861,-1.791 2.938,-2.59 4.827,-2.662c3.75,-0.132 7.524,1.008 10.614,3.128c-0.003,-3.089 0.003,-6.177 -0.003,-9.268c-4.423,-1.672 -9.314,-2.273 -13.988,-1.453c-3.948,0.702 -7.824,2.749 -10.056,6.162c-1.953,2.929 -2.205,6.705 -1.397,10.057c0.545,2.273 1.937,4.289 3.775,5.72c2.615,2.002 5.745,3.119 8.723,4.455c1.586,0.745 3.267,1.504 4.412,2.88c1.224,1.788 0.853,4.708 -1.208,5.729c-2.151,1.03 -4.664,1.013 -6.974,0.639c-3.317,-0.571 -6.452,-1.98 -9.17,-3.948c-0.036,3.248 -0.002,6.496 -0.016,9.746c3.229,1.434 6.761,2.125 10.274,2.353c4.948,0.185 10.328,-0.779 14.063,-4.262c3.913,-3.449 4.855,-9.562 2.63,-14.187c-1.182,-2.47 -3.45,-4.184 -5.788,-5.493zm44.361,-17.916c-4.603,-2.319 -9.957,-2.657 -15,-2.033c-4.067,0.521 -8.063,2.061 -11.168,4.779c-3.789,3.257 -6.012,8.044 -6.666,12.941c-0.623,4.896 -0.412,10.054 1.589,14.637c1.92,4.497 5.708,8.148 10.267,9.937c4.498,1.768 9.5,1.965 14.234,1.201c4.842,-0.797 9.428,-3.337 12.425,-7.246c3.203,-4.037 4.58,-9.262 4.571,-14.352c0.07,-3.407 -0.355,-6.862 -1.571,-10.063c-1.555,-4.182 -4.667,-7.799 -8.681,-9.801zm-0.435,24.087c-0.388,2.218 -1.156,4.429 -2.612,6.185c-1.469,1.764 -3.652,2.839 -5.906,3.169c-2.419,0.361 -4.967,0.188 -7.229,-0.784c-2.441,-1.03 -4.333,-3.138 -5.329,-5.563c-1.199,-2.889 -1.438,-6.09 -1.199,-9.18c0.23,-2.994 1.081,-6.065 3.063,-8.392c1.808,-2.172 4.58,-3.373 7.376,-3.53c2.854,-0.198 5.902,0.46 8.097,2.383c2.023,1.675 3.144,4.183 3.657,6.708c0.576,2.961 0.57,6.026 0.082,9.004zm-80.649,-24.404c-4.501,-2.044 -9.618,-2.318 -14.468,-1.703c-5.094,0.642 -10.053,3.032 -13.286,7.084c-2.953,3.617 -4.39,8.265 -4.664,12.876c-0.408,5.436 0.502,11.202 3.701,15.738c2.726,3.914 7.027,6.604 11.676,7.596c3.884,0.814 7.947,0.817 11.832,0.011c4.544,-0.932 8.787,-3.44 11.603,-7.142c2.75,-3.485 4.131,-7.882 4.442,-12.269c0.317,-4.494 -0.138,-9.148 -2.01,-13.291c-1.754,-3.892 -4.919,-7.142 -8.826,-8.9zm-0.935,28.242c-0.966,2.167 -2.733,3.998 -4.965,4.866c-2.61,1 -5.543,1.059 -8.237,0.361c-2.742,-0.719 -5.068,-2.696 -6.334,-5.214c-1.629,-3.241 -1.872,-6.99 -1.536,-10.546c0.307,-3.234 1.435,-6.56 3.904,-8.792c1.792,-1.668 4.233,-2.483 6.649,-2.618c3.036,-0.198 6.27,0.658 8.452,2.861c2.336,2.291 3.239,5.613 3.489,8.783c0.181,3.47 0.037,7.085 -1.422,10.299zm145.167,-20.993l0,-8.188c-3.334,0.012 -6.669,-0.025 -10,0.022c-0.076,-4.208 -0.009,-8.416 -0.037,-12.621c-3.334,1.002 -6.648,2.069 -10,3.021c-0.08,3.192 -0.005,6.387 -0.042,9.578c-4.928,-0.002 -9.856,0.006 -14.785,-0.005c0.063,-2.515 -0.173,-5.048 0.188,-7.549c0.3,-1.971 1.445,-3.941 3.371,-4.704c2.428,-0.993 5.142,-0.333 7.448,0.681c-0.014,-2.881 0.022,-5.762 -0.02,-8.64c-4.854,-1.333 -10.421,-1.072 -14.729,1.725c-2.778,1.774 -4.794,4.614 -5.7,7.761c-1.071,3.486 -0.525,7.168 -0.696,10.745c-2.338,-0.016 -4.673,-0.039 -7.005,0.015c0.024,2.693 0.015,5.387 0.006,8.077c2.343,0.048 4.688,-0.009 7.032,0.037c-0.02,11.333 -0.005,22.664 -0.005,33.998l10.106,0c0,-11.337 -0.003,-22.674 0.002,-34.01c4.929,-0.008 9.86,-0.006 14.792,-0.003c0.014,7.227 -0.015,14.45 0.011,21.674c0.045,3.364 0.62,6.963 2.854,9.619c1.935,2.353 5.004,3.428 7.968,3.646c3.124,0.221 6.352,-0.16 9.24,-1.411l0,-8.269c-2.215,1.479 -5.273,2.066 -7.686,0.72c-1.438,-0.792 -1.998,-2.489 -2.183,-4.021c-0.306,-2.599 -0.112,-5.219 -0.166,-7.826c-0.003,-4.708 0.009,-9.415 -0.005,-14.122c3.347,0.013 6.695,-0.087 10.041,0.05z"/>
+    </g>
+    <g>
+      <path className={cnc(style.sq1, props.colorful && style.colorful)} d="m4.002,4.003l0,46.617l46.726,0c0.003,-15.539 0,-31.078 0.003,-46.617l-46.729,0z"/>
+    </g>
+    <g>
+      <path className={cnc(style.sq2, props.colorful && style.colorful)} d="m4.002,55.377l0,46.62l46.729,0c0,-15.539 0.003,-31.075 0,-46.614c-15.576,-0.008 -31.152,0 -46.729,-0.006z"/>
+    </g>
+    <g>
+      <path className={cnc(style.sq3, props.colorful && style.colorful)} d="m55.506,55.383c-0.006,15.536 0,31.075 -0.003,46.614l46.729,0l0,-46.617c-15.577,0 -31.153,-0.003 -46.726,0.003z"/>
+    </g>
+    <g>
+      <path className={cnc(style.sq4, props.colorful && style.colorful)} d="m55.503,4.003c0,15.539 -0.003,31.078 0.003,46.617c15.573,0 31.149,-0.003 46.723,0c0.006,-15.539 0.003,-31.078 0.003,-46.617l-46.729,0z"/>
+    </g>
+  </svg>
+)

frontend/src/pages/home-page/components/search/search-input.component.tsx

@@ -29,7 +29,8 @@ export const SearchInput = (props: SearchInputProps) => (
       value={props.searchValue}
       onChange={handleOnChange(props.onSearchUpdate)}
       onKeyPress={captureEnter(props.onSearchSubmit)}
-      autoFocus      
+      spellCheck={false}
+      autoFocus
     />
   </div>
 );

frontend/src/pages/home-page/home-page.component.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { searchPath } from "../search-page";
-import { LogoComponent } from "../../common/components/logo";
+import { LogoJFKComponent } from "../../common/components/logo-jfk";
 import { SearchButton } from "./components/search";
 import { CaptionComponent } from "./components/caption";
 import { SearchInput } from "./components/search";
+import { FooterComponent } from "../../common/components/footer";
 
 const style = require("./home-page.style.scss");
 
@@ -17,7 +18,7 @@ interface HomePageProps {
 export const HomePageComponent: React.StatelessComponent<HomePageProps> = (props) => {
   return (
     <div className={style.container}>
-      <LogoComponent classes={{container: style.logoContainer, object: style.logoObject}} />
+      <LogoJFKComponent classes={{container: style.logoContainer, svg: style.logoSvg}} />
       <div className={style.main}>
         <CaptionComponent />
         <SearchInput         
@@ -27,6 +28,7 @@ export const HomePageComponent: React.StatelessComponent<HomePageProps> = (props
         />
         <SearchButton onClick={props.onSearchSubmit}/>
       </div>
+      <FooterComponent className={style.footer}/>
     </div>
   )
 };

frontend/src/pages/home-page/home-page.container.tsx

@@ -13,7 +13,7 @@ export class HomePageContainer extends React.Component<RouteComponentProps<any>,
     super(props);
 
     this.state = {
-      searchValue: "",
+      searchValue: "oswald",
     }
   }
 

frontend/src/pages/home-page/home-page.style.scss

@@ -27,7 +27,7 @@
     width: 50%;
     color: inherit;
 
-    .logo-object {
+    .logo-svg {
       width: 100%;
       height: 100%;
       min-width: 7.5rem;
@@ -52,4 +52,10 @@
       margin-top: 5rem;
     }
   }
+
+  .footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
 }

frontend/src/pages/search-page/components/page-bar/page-bar.component.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ResultViewMode } from "../../view-model";
 import { MenuButton } from "../../../../common/components/menu-button";
-import { LogoComponent } from "./../../../../common/components/logo";
+import { LogoJFKComponent } from "./../../../../common/components/logo-jfk";
 import { ResultViewModeToggler } from "./view-mode-toggler.component";
 import AppBar from "material-ui/AppBar";
 import Toolbar from "material-ui/Toolbar";
@@ -11,6 +11,7 @@ const style = require("./page-bar.style.scss");
 
 interface BarProps{
   resultViewMode: ResultViewMode;
+  pulseToggle?: ResultViewMode;
   onChangeResultViewMode: (newMode: ResultViewMode) => void;
   onMenuClick: () => void;
 }
@@ -27,7 +28,7 @@ export const PageBarComponent = (props) => {
           className={style.menuButton}
           onClick={props.onMenuClick}
         />
-        <LogoComponent classes={{container: style.logoContainer, object: style.logoObject}}/>
+        <LogoJFKComponent classes={{container: style.logoContainer, svg: style.logoSvg}}/>
         <ResultViewModeToggler {...props} />
       </Toolbar>
     </AppBar>

frontend/src/pages/search-page/components/page-bar/page-bar.style.scss

@@ -9,11 +9,11 @@
     justify-content: flex-start;
     align-items: center;
     height: 3rem;
-    margin: 0.75rem;
+    margin: 0.25rem 0.75rem;
 
     @include respond-to-desktop {
       height: 5rem;
-      margin: 0.75 1.75rem;
+      margin: 0.25rem 1.75rem;
     }
 
     .menu-button {
@@ -28,13 +28,13 @@
       flex-direction: row;
       justify-content: center;
       align-items: center;
-      margin-left: 6rem;
+      margin-left: 3rem;
 
       @include respond-to-desktop {
         margin-left: 6rem;
       }
 
-      .logo-object {
+      .logo-svg {
         flex: 1 1 auto;
         margin: 0 0.5rem;
         max-height: 2.5rem;