Merge pull request #144 from openstax/launcher-redesign

Update launcher design

Author: philschatz

resources/images/bg-cc-launcher.png

@@ -265,6 +265,36 @@
   position: relative;
   min-height: 388px;
   height: 100%;
+
+  button {
+    background-color: #F37440;
+    border: 1px solid transparent;
+    font-weight: bold;
+    padding: 20px;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: darken(#F37440, 10%);
+      border-color: darken(#F37440, 15%);
+    }
+  }
+
+  .launcher-background {
+    background: #9dd4db url('/resources/images/bg-cc-launcher.png') repeat left top;
+    color: white;
+    height: 388px;
+    text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.75);
+    width: 100%;
+
+    > h1 {
+      color: white;
+      font-size: 3rem;
+      font-weight: bold;
+      padding-top: 30px;
+      text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.8);
+    }
+  }
 }
 
 .concept-coach-launcher {

resources/styles/components/concept-coach/launcher.less

@@ -39,11 +39,9 @@ Launcher = React.createClass
 
     <div className='concept-coach-launcher-wrapper'>
       <div className={classes} onClick={@launch}>
-        <BackgroundAndDesk height={height}/>
         <LaptopAndMug height={defaultHeight}/>
-
         <BS.Button bsStyle='primary' bsSize='large'>Launch Concept Coach</BS.Button>
-
+        <BackgroundAndDesk height={height}/>
       </div>
     </div>
 

src/concept-coach/launcher/index.cjsx

@@ -25,8 +25,8 @@ LaptopAndMug = React.createClass
 
       <g className='launcher-coffee'>
         <g className='launcher-coffee-steam'>
-          <path fill-rule="evenodd" fill="#FFFFFF" d="M773.967,191.167c3.781,6.054-8.06,11.515-8.06,11.515s6.199-4.644,3.454-11.515 c-2.746-6.872,3.307-9.169,5.757-9.788C775.452,181.296,769.754,184.422,773.967,191.167z"/>
-          <path fill-rule="evenodd" fill="#FFFFFF" d="M756.12,203.833 c0,0,7.693-5.226,4.605-13.243c-3.088-8.016,3.001-10.793,5.757-11.513c0.375-0.099-5.316,4.221-0.575,12.09 C770.161,198.23,756.12,203.833,756.12,203.833z"/>
+          <path fill-rule="evenodd" fill="#000000" d="M773.967,191.167c3.781,6.054-8.06,11.515-8.06,11.515s6.199-4.644,3.454-11.515 c-2.746-6.872,3.307-9.169,5.757-9.788C775.452,181.296,769.754,184.422,773.967,191.167z"/>
+          <path fill-rule="evenodd" fill="#000000" d="M756.12,203.833 c0,0,7.693-5.226,4.605-13.243c-3.088-8.016,3.001-10.793,5.757-11.513c0.375-0.099-5.316,4.221-0.575,12.09 C770.161,198.23,756.12,203.833,756.12,203.833z"/>
         </g>
         <path className='launcher-coffee-mug' fill-rule="evenodd" fill="#77AF42" d="M814.514,245.441c0,10.459-8.742,18.65-19.097,19.097v10.185 c0,4.672-2.966,8.275-7.639,8.275h-42.649c-4.673,0-8.275-3.603-8.275-8.275v-59.2c0-4.671,0.42-6.366,5.094-6.366h49.013 c4.674,0,4.457,1.694,4.457,6.366v10.186C805.772,226.154,814.514,234.981,814.514,245.441z M795.417,232.71v24.825 c6.585-0.443,12.731-5.399,12.731-12.094C808.148,238.746,802.002,233.152,795.417,232.71z"/>
         <path className='launcher-coffee-shine' fill-rule="evenodd" fill="#8EC15A" d="M743.989,215.922c1.055,0,1.911,0.855,1.911,1.91v59.199 c0,1.055-0.856,1.911-1.911,1.911c-1.054,0-1.909-0.855-1.909-1.911v-59.199C742.08,216.777,742.936,215.922,743.989,215.922z"/>
@@ -112,13 +112,8 @@ BackgroundAndDesk = React.createClass
   propTypes:
     height: React.PropTypes.number.isRequired
   render: ->
-    {height} = @props
-    <svg x="0px" y="0px" width="100%" height={"#{height}px"}
-      preserveAspectRatio="xMidYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
-      <g>
-        <rect className='launcher-background' y="0.541" fill="#E5E5E5" width="100%" height="100%"/>
-        <rect className='launcher-desk' y="70%" fill-rule="evenodd" fill="#FFFFFF" width="100%" height="30%"/>
-      </g>
-    </svg>
+    <div className='launcher-background'>
+      <h1>Study Smarter with OpenStax Concept Coach</h1>
+    </div>
 
 module.exports = {LaptopAndMug, BackgroundAndDesk}

src/concept-coach/launcher/items.cjsx

@@ -7,7 +7,7 @@ describe 'Launcher', ->
 
   it 'renders with launching status', ->
     Testing.renderComponent( Launcher, props: {isLaunching: true} ).then ({dom}) ->
-      expect(dom.textContent).equal('Launch Concept Coach')
+      expect(dom.textContent).equal('Launch Concept CoachStudy Smarter with OpenStax Concept Coach')
       expect(dom.querySelector('.concept-coach-launcher').classList.contains('launching')).to.be.true
 
   it 'emits launch action when clicked', ->

test/concept-coach/launcher/index.spec.coffee

@@ -14,5 +14,4 @@ describe 'Launcher SVG items', ->
 
   it 'renders background and desk without errors', ->
     Testing.renderComponent( BackgroundAndDesk, props: @props ).then ({dom}) ->
-      expect(dom.tagName).equal('svg')
-      expect(dom.getAttribute('height')).equal('42px')
+      expect(dom.tagName.toLowerCase()).equal('div')