Merge pull request homedepot#130 from homedepot/98-design-updates

Design updates

ui/src/header/index.js

@@ -1,11 +1,11 @@
 import React from 'react'
-import MakeAWishLogo from '../assets/images/Logo_MakeAWish.svg'
-import GalaxyLogo from '../assets/images/newStyle/logo_galaxy_501x176.svg'
+import MakeAWishLogo from '../assets/images/MAW_Georgia_white.png'
+import RocketLogo from '../assets/images/TheSkyisTheLimitLogo.png'
 import './styles.scss'
 
 export const Header = () => (
   <header>
-    <section className="slidingVertical header-item" style={{color: '#000000'}}>
+    <section className="slidingVertical header-item" style={{color: 'white'}}>
       <span>Hello!</span>
       <span>Bonjour!</span>
       <span>Hola!</span>
@@ -20,7 +20,7 @@ export const Header = () => (
       />
     </section>
     <section className="header-item">
-      <img className="header-galaxy-logo" src={GalaxyLogo} alt="Galaxy Logo" />
+      <img className="header-rocket-logo" src={RocketLogo} alt="Rocket Logo" />
     </section>
   </header>
 )

ui/src/header/styles.scss

@@ -1,4 +1,5 @@
 header {
+  padding-top: 40px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 
@@ -8,11 +9,17 @@ header {
     align-items: center;
   }
 
-  .header-galaxy-logo {
+  .header-rocket-logo {
+    transform: scale(2.0, 2.0);
     max-height: 6em;
   }
 
-  .logo-container, .galaxy-logo-container {
+  .header-make-a-wish-logo {
+    transform: scale(2.0,2.0);
+    max-height: 6em;
+  }
+
+  .logo-container, .rocket-logo-container {
     display: flex;
     justify-content: space-between;
     align-items: center;

ui/src/landing/splashScreen/index.js

@@ -10,7 +10,7 @@ export const Landing = ({ name, age, updateField, selectWishType, validFields })
   return (
     <div id="SplashScreen">
       <Header />
-      <div className="wish-input" style={{color: '#000000'}}>
+      <div className="wish-input">
         <span>My name is </span>
         <input data-test="name-input" placeholder="enter your name" type="text" onChange={(e) => updateField(nameField, e.target.value)} value={name}/>
         <span> and I am </span>

ui/src/landing/splashScreen/styles.scss

@@ -4,10 +4,9 @@
   position: absolute;
   height: 100%;
   width: 100%;
-  background-color: $light-blue;
-  color: $dark-blue;
-  font-family: 'Arial Rounded MT Bold', sans-serif;
-  padding: 2.5em;
+  background-image: url('../../assets/images/MAW_StarrySpace_Background.svg');
+  color: $white;
+  font-family: 'Lato', sans-serif;
   box-sizing: border-box;
 
   .fields-not-valid {
@@ -18,6 +17,7 @@
 
   h1 {
     font-size: 3.5em;
+    color: $white;
   }
 
   .header-title {
@@ -30,10 +30,10 @@
   }
 
   @font-face {
-    font-family: 'Arial Rounded MT Bold';
+    font-family: 'Lato';
     font-style: normal;
     font-weight: normal;
-    src: local('Arial Rounded MT Bold'), url('../../assets/fonts/ARLRDBD_0.woff') format('woff');
+    src: local('Lato'), url('../../assets/fonts/Lato-Bold.ttf') format('ttf');
 }
 
   img.header-galaxy-logo {
@@ -54,7 +54,7 @@
     }
 
     input::placeholder {
-      color: $rose;
+      color: $light-blue;
       font-weight: bold;
     }
 

ui/src/landing/wishTypeCard/index.js

@@ -1,10 +1,9 @@
 import React from 'react'
 import './styles.scss'
 
-export const WishTypeCard = ({imgSrc, altText, title, subtitle}) => (
+export const WishTypeCard = ({imgSrc, altText, title}) => (
   <div className="wishCard containerVertical">
     <img src={imgSrc} alt={altText} className="wish-card-image"/>
     <span className="card-title">{title}</span>
-    <span className="card-subtitle">{subtitle}</span>
   </div>
 )

ui/src/landing/wishTypeCard/styles.scss

@@ -5,10 +5,17 @@
   flex-direction: column;
   align-items: center;
   transition: all .2s ease-in-out;
+  font-family: 'Droid Sans Bold', serif;
 
   &:hover {
     cursor: pointer;
     transform: scale(1.05);
+
+    span {
+      color: #fdec6e;
+      text-shadow:0px 0px 30px #fdec6e;
+      transition: all 0.2s ease-in;
+    }
   }
 
   .wish-card-image {
@@ -21,9 +28,4 @@
     margin: .25em 0;
     font-weight: bold;
   }
-
-  .card-subtitle {
-    font-weight: bold;
-    font-size: 1.8em;
-  }
 }

ui/src/landing/wishTypeList/index.js

@@ -21,38 +21,34 @@ export const WishTypeList = ({ selectWishType, validFields, age, name }) => {
   if (validAge && validName) {
     return (
       <Fragment>
-        <h1 style={styles.text}>I wish to:</h1>
-        <ul id="WishTypeList" className="wish-type-select" style={styles.text}>
-          <li data-test="wishcard-rocket" style={styles.text} onClick={() => selectWishType(GO)}>
+        <h1>I wish to:</h1>
+        <ul id="WishTypeList" className="wish-type-select">
+          <li data-test="wishcard-rocket" onClick={() => selectWishType(GO)}>
             <WishTypeCard
               altText="Rocket"
               imgSrc={Rocket}
-              title={GO}
-              subtitle="Somewhere!"
+              title={`To Go`}
             />
           </li>
           <li data-test="wishcard-alien" onClick={() => selectWishType(MEET)}>
             <WishTypeCard
               altText="Alien"
               imgSrc={Alien}
-              title={MEET}
-              subtitle="Someone!"
+              title={`To Meet`}
             />
           </li>
           <li data-test="wishcard-astronaut" onClick={() => selectWishType(BE)}>
             <WishTypeCard
               altText="Astronaut"
               imgSrc={Astronaut}
-              title={BE}
-              subtitle="Someone!"
+              title={`To Be`}
             />
           </li>
           <li data-test="wishcard-telescope" onClick={() => selectWishType(HAVE)}>
             <WishTypeCard
               altText="Telescope"
               imgSrc={Telescope}
-              title={HAVE}
-              subtitle="Something!"
+              title={`To Have`}
             />
           </li>
         </ul>

ui/src/login/styles.scss

@@ -4,9 +4,8 @@
     display: grid;
     width: 100vw;
     height: 100vh;
-    background-color: $light-blue;
+    background-image: url('../assets/images/MAW_StarrySpace_Background.svg');
     color: $dark-blue;
-    padding: 1.5em;
     box-sizing: border-box;
     grid-template-rows: 20% auto;
 

ui/src/wishList/wishHeader/index.js

@@ -1,13 +1,11 @@
 import React from 'react'
 import makeAWishLogo from '../../assets/images/Logo_MakeWish.png'
-import galaxyLogo from '../../assets/images/Logo_Galaxy.png'
 import './styles.scss'
 
 const WishHeader = () => (
   <div id="wishHeader">
     <div className="logo-container">
       <img src={makeAWishLogo} className="makeAWishLogo" alt="make a wish logo" />
-      <img src={galaxyLogo} className="galaxyLogo" alt="galaxy logo" />
     </div>
     <div className="user-details">
       <span>Mary</span> |