add some styles for settings and new switches

app/routes/settings/index.coffee

@@ -5,7 +5,16 @@ Route = TravisRoute.extend
 
   model: ->
     repo = @modelFor('repo')
+    console.log('######### YEHA ###############')
     repo.fetchSettings().then (settings) ->
+
+      console.log(settings)
       repo.set('settings', settings)
 
+    # return Ember.RSVP.hash({
+    #   settings: repo.fetchSettings(),
+    #   envVars: repo.envVars(),
+    #   sshKey: repo.sshKey()
+    # })
+
 `export default Route`

app/styles/app.scss

@@ -21,7 +21,7 @@
 // @import "app/pro";
 // @import "app/settings";
 
-@import "app/components/travis-switch";
+// @import "app/components/travis-switch";
 @import "app/components/sync-button";
 @import "app/components/loading-indicator";
 

app/styles/app/_mixins/vars.sass

@@ -2,6 +2,7 @@ $font-size-ml: 18px
 $font-size-m: 16px
 $font-size-sm: 14px
 $line-height-m: 1.3
+$font-size-s: 12px
 
 // colors
 $teal1: #5BA5A4

app/styles/app/layouts/settings.sass

@@ -1,4 +1,3 @@
-// If you'd no longer like to run this project on Travis CI you can deactivate it now.<br>You will be able to reactivate it in the future if you'd like to.
 
 $add-green: #3AA95E
 $add-green-hover: #3BA85D
@@ -15,16 +14,6 @@ $deactivate-bg: #e93d3c
 $heading-color: #63a4a3
 $heading-size: 18px
 
-$switch-height: 32px
-$switch-size: 11px
-$switch-color: $white
-
-$switch-descr-size: 16px
-$switch-descr-color: #8e8f8e
-
-$switch-descr-inline-size: 12px
-$switch-descr-inline-color: #8e8f8e
-
 $input-border: 1px solid #eeedec
 $input-radius: 4px
 $input-color: #8e8f8e
@@ -40,3 +29,50 @@ $env-vars-radius: 4px
 $env-vars-pw-bg: #eeedec
 
 $input-main-height: 30px
+
+
+.small-title
+  font-size: 18px
+  color: $heading-color
+  font-weight: 400
+
+
+.settings
+  padding-top: .8em
+
+.settings-section
+  padding: 0 0 1em
+  margin-bottom: 1.5em
+  border-bottom: $setting-section-border
+  &:last-of-type
+    border-bottom: none
+  .small-title
+    margin-top: 0
+
+
+.settings-list
+  padding: 0
+  margin: 0
+  list-style: none
+
+  li
+    margin-bottom: 1rem
+    @media #{$medium-up}
+      display: inline-block
+      width: grid-calc(11, 24)
+
+.settings-input
+  display: inline-block;
+  margin-right: 1rem;
+  vertical-align: middle
+  & + .label
+    vertical-align: middle
+  input
+    border: 1px solid #eeedec
+    border-radius: 4px
+    color: #8e8f8e
+    text-align: center
+    height: 32px;
+    display: inline-block;
+    width: 80px;
+    

app/styles/app/modules/switch.sass

@@ -1,14 +1,10 @@
 
-.profile-switch
+%switch
   $switch-height: 28px
   $switch-inner-height: 22px
   $switch-width: 62px
   $switch-inner-width: 27px
 
-  span
-    display: none
-
-  .switch
   box-sizing: border-box
   position: relative
   width: $switch-width
@@ -53,3 +49,58 @@
       right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2)
       background-color: #39a85b
       @extend .icon-hook-on
+
+
+
+.profile-switch
+  span
+    display: none
+
+  .switch
+    @extend %switch
+
+
+// NEW SWITCH
+.settings-switch
+  $switch-width: 80px
+  $switch-height: 32px
+
+  div
+    display: inline-block
+    height: $switch-height
+    width: $switch-width
+    margin-right: 1em
+    padding: 3px 3px 3px 4px
+    vertical-align: middle;
+    font-size: $font-size-s
+    border-radius: 4px
+    background-color: #E2E1E2
+    span
+      display: inline-block
+      width: 36px
+      height: 26px
+      vertical-align: middle;
+      border-radius: 4px
+      background-color: #A5A4A4
+      color: $white
+      text-align: center;
+      font-weight: 300;
+      line-height: 2.2;
+  .label
+    vertical-align: middle;
+    font-size: $font-size-m
+    color: $grey-medium
+  .on
+    display: none
+    margin-left: 0
+
+  &.active
+    div
+      background-color: #B8D6B9
+      span
+        background-color: #3BA85D
+    .on
+      display: inline-block
+      margin-left: 36px
+    .off
+      display: none

app/templates/settings.hbs

@@ -1,24 +1,42 @@
 <div class="settings">
   
   <section class="settings-section">
-    <h2>General Settings</h2>
+    <h2 class="small-title">General Settings</h2>
+
+    <ul class="settings-list">
+      <li>{{settings-switch}}</li>
+      <li>
+        <div class="settings-input"><input type="text" pattern="/^[0-9]+$/" value="4"></div><span class="label">Concurrent jobs</span>
+      </li>
+      <li>{{settings-switch}}</li>
+      <li>{{settings-switch}}</li>
+    </ul>
+
   </section>
 
   <section class="settings-section">
-    <h2>Environment Variables</h2>
+    <h2 class="small-title">Environment Variables</h2>
+
+    {{env-var}}
+
+
   </section>
 {{#if config.endpoints.sshKey}}
   <section class="settings-section">
-    <h2>SSH Key</h2>
+    <h2 class="small-title">SSH Key</h2>
+
+    {{ssh-key}}
   </section>
 {{/if}}
   <section class="settings-section">
-    <h2>Deactivate Repository</h2>
+    <h2 class="small-title">Deactivate Repository</h2>
+    <p>If you'd no longer like to run this project on Travis CI you can deactivate it now.<br>You will be able to reactivate it in the future if you'd like to.</p>
+    <a href="#" class="button--delete">Deactivate Repository</a>
   </section>
 
 </div>
 
 
-<div id="settings">
+{{!-- <div id="settings">
   {{outlet}}
-</div>
+</div> --}}