Merge pull request #29 from jostw/josyeh/Marketplace/master/Bug1240661

Bug 1240661 - [TV][2.5] Update tutorial l10n and visual

locale/en_US/LC_MESSAGES/messages.po

@@ -19,32 +19,24 @@ msgid "Free"
 msgstr "Free"
 
 #: /templates/tutorial.html
-msgid "Press"
-msgstr "Press"
+msgid "Press <b>OK</b> to open and use an app"
+msgstr "Press <b>OK</b> to open and use an app"
 
 #: /templates/tutorial.html
-msgid "OK"
-msgstr "OK"
+msgid "Press <b>OPTION</b> to add an app to the Apps folder"
+msgstr "Press <b>OPTION</b> to add an app to the Apps folder"
 
 #: /templates/tutorial.html
-msgid "to open and use an app"
-msgstr "to open and use an app"
+msgid "Press <b>APPS</b> to see apps added to the Apps folder"
+msgstr "Press <b>APPS</b> to see apps added to the Apps folder"
 
 #: /templates/tutorial.html
-msgid "OPTION"
-msgstr "OPTION"
+msgid "Add to Apps"
+msgstr "Add to Apps"
 
 #: /templates/tutorial.html
-msgid "to add an app to the Apps folder"
-msgstr "to add an app to the Apps folder"
-
-#: /templates/tutorial.html
-msgid "APPS"
-msgstr "APPS"
-
-#: /templates/tutorial.html
-msgid "to see apps added to the Apps folder"
-msgstr "to see apps added to the Apps folder"
+msgid "Apps"
+msgstr "Apps"
 
 #: /templates/tutorial.html
 msgid "Next"

src/media/css/app-preview.styl

@@ -16,7 +16,7 @@ $app-preview-background-color = #72C9B0;
     padding: 7.2rem 18.5rem 6.9rem 15rem;
 
     background-color: $app-preview-background-color;
-    background-image: url('../img/pattern-overlay.png');
+    background-image: url('../img/Pattern_overlay.png');
 
     .suggested {
         position: absolute;

src/media/css/site.styl

@@ -34,7 +34,7 @@ ul {
 .clearfix {
     &::before,
     &::after {
-        content: "";
+        content: '';
         display: table;
     }
 

src/media/css/tutorial.styl

@@ -58,37 +58,76 @@
     font-style: italic;
     line-height: 8rem;
     text-align: center;
+    text-shadow: 0 0 5px rgba(0, 0, 0, .5);
 
     color: $greyscale-white;
 
-    .circle {
+    b {
         display: inline-block;
         margin: 0 .5rem;
+        padding: 0 4rem;
         border-radius: 4rem;
-        box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, .5);
+        box-shadow: 0 0 5px rgba(0, 0, 0, .5);
 
         font-size: 4.5rem;
+        font-weight: normal;
+        text-indent: -.8rem;
         text-align: center;
 
         background-color: $greyscale-black;
     }
-
-    .ok-key {
-        width: 8rem;
-    }
-
-    .option-key {
-        width: 22rem;
-    }
-
-    .apps-key {
-        width: 16rem;
-    }
 }
 
 .slide-section-mid {
     width: 100%;
     height: 100%;
+
+    .circle {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+
+        width: 21.8rem;
+        height: 21.8rem;
+        margin: -10.9rem 0 0 -10.9rem;
+        padding: 4.5rem 0;
+        border-radius: 50%;
+
+        font-size: 1.9rem;
+        font-style: italic;
+        line-height: 2.5rem;
+        text-align: center;
+
+        color: $greyscale-black;
+        background-color: $greyscale-white;
+
+        &::before {
+            content: '';
+
+            display: block;
+            width: 9rem;
+            height: 9rem;
+            margin: 0 auto 1.3rem;
+
+            background-image: url('../img/tutorial_install.png');
+        }
+    }
+
+    .text {
+        position: absolute;
+        top: 19.5rem;
+        left: 50%;
+
+        width: 50rem;
+        margin-left: -25rem;
+
+        font-size: 4.2rem;
+        font-style: italic;
+        line-height: 4.2rem;
+        text-align: center;
+
+        color: $greyscale-white;
+    }
 }
 
 .slide-section-bottom {
@@ -112,11 +151,10 @@ for num in (1..3) {
     }
 
     &[data-type="rounded-corner-text"] {
-        width: 30.4rem;
-        margin: 0 1.5rem;
+        width: 23.7rem;
+        margin: 0 2rem;
 
         font-family: $primary-font-family;
-        font-size: 4.5rem;
 
         background-image: none;
     }

src/templates/tutorial.html

@@ -2,22 +2,24 @@
   {% for i in range(1, 4) %}
     <div class="slide {% if i > 1 %} hidden {% endif %}">
       <div class="slide-section-top">
-        <span>{{ _('Press') }}</span>
-
         {% if i == 1 %}
-          <span class="circle ok-key">{{ _('OK') }}</span>
-          <span>{{ _('key to open and use an app') }}</span>
+          <span>{{ _('Press <b>OK</b> to open and use an app') }}</span>
         {% elif i == 2 %}
-          <span class="circle option-key">{{ _('OPTION') }}</span>
-          <span>{{ _('to add an app to the Apps folder') }}</span>
+          <span>{{ _('Press <b>OPTION</b> to add an app to the Apps folder') }}</span>
         {% elif i == 3 %}
-          <span class="circle apps-key">{{ _('APPS') }}</span>
-          <span>{{ _('to see apps added to the Apps folder') }}</span>
+          <span>{{ _('Press <b>APPS</b> to see apps added to the Apps folder') }}</span>
         {% endif %}
       </div>
 
       <div class="slide-section-mid">
         <div class="slide-image slide-image-0{{ i }}"></div>
+        {% if i == 2 %}
+          <div class="circle">
+            <span>{{ _('Add to Apps') }}</span>
+          </div>
+        {% elif i == 3 %}
+          <span class="text">{{ _('Apps') }}</span>
+        {% endif %}
       </div>
 
       <div class="slide-section-bottom">