From 9c4bee76f5885e2b264985684bdbcb3e39596419 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Thu, 7 May 2015 14:45:26 +0200
Subject: [PATCH] add first_sync styles

---
 app/styles/app.scss                    |  1 +
 app/styles/app/layouts/first-sync.sass | 24 ++++++++++++++++++++++++
 app/templates/first-sync.hbs           | 12 +++++++-----
 3 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 app/styles/app/layouts/first-sync.sass

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 992effcd..1637cc31 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -72,3 +72,4 @@
 @import "app/layouts/requests";
 @import "app/layouts/caches";
 @import "app/layouts/getting-started";
+@import "app/layouts/first-sync";
diff --git a/app/styles/app/layouts/first-sync.sass b/app/styles/app/layouts/first-sync.sass
new file mode 100644
index 00000000..76dcc15c
--- /dev/null
+++ b/app/styles/app/layouts/first-sync.sass
@@ -0,0 +1,24 @@
+
+.mascot
+  display: block
+  margin: 0 0 50px 0
+  height: 150px
+  background: inline-image('travis-mascot-150.png') 50% 0 no-repeat
+  background-size: 150px 150px
+
+
+.first-sync
+
+  .not-syncing
+    margin-top: 5rem
+    text-align: center
+
+  .great-news
+    font-size: 36px
+    font-weight: 400
+    color: $grey3
+
+  p
+    font-size: $font-size-ml
+    line-height: 1.5
+
diff --git a/app/templates/first-sync.hbs b/app/templates/first-sync.hbs
index cec06c8b..288e505b 100644
--- a/app/templates/first-sync.hbs
+++ b/app/templates/first-sync.hbs
@@ -1,4 +1,4 @@
-<div id="first_sync">
+<div id="first_sync" class="first-sync">
   {{#if isSyncing}}
   <img src="/images/getting-started/mustache-spinner.gif" class="spinner" width="300">
   <p class="first-sync-head">One more thing</p>
@@ -19,12 +19,14 @@
   {{/if}}
 
   {{#unless isSyncing}}
-  <div class="sync-row">
-      <img src="/images/getting-started/mustache-no-spin.png" class="spinner" width="100">
-      <p class="great-news">Great news!</p>
+  <div class="row not-syncing">
+    <div class="column medium-4 medium-centered">
+      <span class="mascot"></span>
+      <h1 class="great-news">Great news!</h1>
       <p>
-        We've successfully synchronized your details from GitHub. We will redirect you to your profile in a few seconds.
+        We've successfully synchronized your details from GitHub.<br>We will redirect you to your profile in a few seconds.
       </p>
+    </div>
   </div>
   {{/unless}}
 </div>