Merge pull request #1324 from mozilla/style-tweaks-for-trailhead

tweak some styles for trailhead

app/main.css

@@ -31,6 +31,7 @@ body {
   @apply cursor-pointer;
   @apply py-4;
   @apply px-6;
+  @apply font-semibold;
 }
 
 .btn:hover {
@@ -139,6 +140,11 @@ footer li:hover {
   white-space: nowrap;
 }
 
+.main-header img {
+  height: 32px;
+  width: 170px;
+}
+
 .intro {
   max-width: 100%;
   height: unset;
@@ -159,7 +165,7 @@ footer li:hover {
 .mozilla-logo {
   background-image: url('../assets/mozilla-logo.svg');
   background-repeat: no-repeat;
-  background-size: 100px, 32px;
+  background-size: 100px, 48px;
   overflow: hidden;
   text-indent: 120%;
   white-space: nowrap;
@@ -246,6 +252,11 @@ select {
 }
 
 @screen md {
+  .main-header img {
+    height: 48px;
+    width: auto;
+  }
+
   .intro {
     max-width: unset;
     height: unset;
@@ -261,7 +272,7 @@ select {
     @apply py-8;
 
     min-height: 36rem;
-    max-height: 40rem;
+    max-height: 42rem;
     width: calc(100% - 3rem);
   }
 }
@@ -274,8 +285,9 @@ select {
   }
 
   .shadow-big {
-    box-shadow: 0 0 32px 0 rgba(12, 12, 13, 0.1),
-      0 2px 16px 0 rgba(12, 12, 13, 0.05);
+    box-shadow: 0 12px 18px 2px rgba(34, 0, 51, 0.04),
+      0 6px 22px 4px rgba(7, 48, 114, 0.12),
+      0 6px 10px -4px rgba(14, 13, 26, 0.12);
   }
 }
 

app/ui/archiveTile.js

@@ -430,7 +430,7 @@ module.exports.empty = function(state, emit) {
         `;
   return html`
     <send-upload-area
-      class="flex flex-col items-center justify-center border-2 border-dashed border-grey rounded px-6 py-16 h-full w-full"
+      class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full"
       onclick="${e => {
         if (e.target.tagName !== 'LABEL') {
           document.getElementById('file-upload').click();

app/ui/blank.js

@@ -4,7 +4,7 @@ module.exports = function() {
   return html`
     <main class="main">
       <section
-        class="h-full w-full p-6 md:flex md:flex-row md:rounded-lg md:shadow-big"
+        class="h-full w-full p-6 md:p-8 md:flex md:flex-row md:rounded-xl md:shadow-big"
       >
         <div class="md:mr-6 md:w-1/2 w-full"></div>
         <div class="md:w-1/2 mt-6 md:mt-0 w-full"></div>

app/ui/download.js

@@ -76,7 +76,9 @@ module.exports = function(state, emit) {
   return html`
     <main class="main">
       ${state.modal && modal(state, emit)}
-      <section class="relative h-full w-full p-6 md:rounded-lg md:shadow-big">
+      <section
+        class="relative h-full w-full p-6 md:p-8 md:rounded-xl md:shadow-big"
+      >
         ${content}
       </section>
     </main>

app/ui/error.js

@@ -7,7 +7,7 @@ module.exports = function(state, emit) {
     <main class="main">
       ${state.modal && modal(state, emit)}
       <section
-        class="flex flex-col items-center justify-center h-full w-full p-6 overflow-hidden md:rounded-lg md:shadow-big"
+        class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
       >
         <h1 class="text-center font-bold my-2">
           ${state.translate('errorPageHeader')}

app/ui/footer.js

@@ -19,7 +19,7 @@ class Footer extends Component {
     const feedbackUrl = `https://qsurvey.mozilla.com/s3/Firefox-Send-Product-Feedback?ver=${version}&browser=${browser}`;
     return html`
       <footer
-        class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 font-medium text-xs text-grey-dark md:items-center justify-between"
+        class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-dark md:items-center justify-between"
       >
         <a
           class="mozilla-logo pb-10 md:pb-0 m-2"

app/ui/header.js

@@ -28,7 +28,7 @@ class Header extends Component {
           `;
     return html`
       <header
-        class="relative flex-none flex flex-row items-center justify-between w-full px-6 h-16 md:h-24 z-20 bg-transparent"
+        class="main-header relative flex-none flex flex-row items-center justify-between w-full px-6 md:px-8 h-16 md:h-24 z-20 bg-transparent"
       >
         ${title} ${this.account.render()}
       </header>

app/ui/home.js

@@ -30,9 +30,9 @@ module.exports = function(state, emit) {
     <main class="main">
       ${state.modal && modal(state, emit)}
       <section
-        class="h-full w-full p-6 overflow-hidden md:flex md:flex-row md:rounded-lg md:shadow-big"
+        class="h-full w-full p-6 md:p-8 overflow-hidden md:flex md:flex-row md:rounded-xl md:shadow-big"
       >
-        <div class="px-2 w-full md:px-0 md:mr-6 md:w-1/2">${left}</div>
+        <div class="px-2 w-full md:px-0 md:mr-8 md:w-1/2">${left}</div>
         <div class="mt-6 w-full md:w-1/2 md:-m-2">${right}</div>
       </section>
     </main>

app/ui/intro.js

@@ -7,10 +7,10 @@ module.exports = function intro(state) {
       class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full"
     >
       <div class="mt-12 flex flex-col h-full">
-        <h1 class="font-bold">
+        <h1 class="font-bold md:pb-2">
           ${state.translate('introTitle')}
         </h1>
-        <p class="max-w-sm leading-normal mt-6 md:mt-2 md:pr-16">
+        <p class="max-w-sm leading-loose mt-6 md:mt-2 md:pr-14">
           ${state.translate('introDescription')}
         </p>
         <img class="intro" src="${assets.get('intro.svg')}" />

app/ui/modal.js

@@ -3,7 +3,7 @@ const html = require('choo/html');
 module.exports = function(state, emit) {
   return html`
     <send-modal
-      class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-lg md:my-8"
+      class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8"
       onclick="${close}"
     >
       <div

app/ui/notFound.js

@@ -7,7 +7,7 @@ module.exports = function(state, emit) {
     <main class="main">
       ${state.modal && modal(state, emit)}
       <section
-        class="flex flex-col items-center justify-center h-full w-full p-6 overflow-hidden md:rounded-lg md:shadow-big"
+        class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
       >
         <h1 class="text-center font-bold my-2">
           ${state.translate('expiredTitle')}

tailwind.js

@@ -51,6 +51,7 @@ const colors = {
   'grey-dark': '#8795a1',
   grey: '#B1B1B3',
   'grey-light': '#dae1e7',
+  'grey-transparent': 'hsla(250, 13%, 9%, .2)',
   'grey-lighter': '#f1f5f8',
   'grey-lightest': '#F9F9FA',
   white: '#ffffff',
@@ -300,7 +301,7 @@ module.exports = {
     none: 1,
     tight: 1.25,
     normal: 1.5,
-    loose: 2
+    loose: 1.75
   },
 
   /*
@@ -431,6 +432,7 @@ module.exports = {
     sm: '.125rem',
     default: '.25rem',
     lg: '.5rem',
+    xl: '1rem',
     full: '9999px'
   },