style new switches

app/styles/app/layouts/profile.sass

@@ -34,7 +34,7 @@
   @extend %border-radius-4px
   ol
     @include resetul
-    padding-bottom: 1em
+    padding: 1em 0
   figure
     margin: 0
   figcaption
@@ -47,8 +47,10 @@
 
   .dismiss
     position: absolute
-    top: .5em
-    right: .5em
+    top: 0
+    right: 0
+    padding: .5em
+    z-index: 99
   @media #{$medium-up}
     li:not(:last-child)
       img

app/styles/app/modules/switch.sass

@@ -0,0 +1,36 @@
+
+$switch-height: 28px
+$switch-inner-height: 22px
+$switch-width: 62px
+$switch-inner-width: 27px
+
+.switch
+  position: relative
+  width: $switch-width
+  height: $switch-height
+  background-color: #d1d1d1
+  border: none
+  cursor: pointer
+  @extend %border-radius-4px
+  &:after
+    content: ""
+    display: block
+    position: absolute
+    top: ($switch-height - $switch-inner-height) / 2
+    right: ($switch-width - ($switch-inner-width * 2)) / 2
+    height: $switch-inner-height
+    width: $switch-inner-width
+    background-color: #919191
+    background-repeat: no-repeat
+    background-size: 14px 14px
+    background-position: 6px
+    transition: right 200ms ease
+    @extend .icon-hook-off
+    @extend %border-radius-4px
+
+  &.is-on
+    background-color: #b6d5b6
+    &:after
+      right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2)
+      background-color: #39a85b
+      @extend .icon-hook-on

app/templates/profile/show.hbs

@@ -42,8 +42,6 @@
     </ul>
   </div>
 
-  {{!-- <h3>{{view.name}}</h3>
-
   {{#if config.billingEndpoint}}
     {{#if view.subscribed}}
       <a class="button activated" {{bind-attr href="billingUrl"}}>
@@ -62,8 +60,8 @@
     {{/if}}
   {{/if}}
 
-  {{view 'profile-tabs'}}
-
+{{!--   {{view 'profile-tabs'}} --}}
+{{!-- 
   <div class="tab">
     {{outlet}}
   </div> --}}

public/images/svg/hooks-on.svg

@@ -3,8 +3,8 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="14px" height="13px" viewBox="0 0 14 13" enable-background="new 0 0 14 13" xml:space="preserve">
-<path fill="#2E3192" d="M13.905,2.135C14.085,1.85,14,1.46,13.718,1.276l-1.802-1.181c-0.283-0.182-0.662-0.097-0.844,0.188
-	l-5.18,8.272C5.71,8.844,5.333,8.929,5.051,8.743L2.105,6.805C1.826,6.624,1.442,6.704,1.263,6.993L0.099,8.851
-	c-0.186,0.287-0.102,0.679,0.178,0.861l4.614,3.059c0.283,0.186,0.781,0.278,1.112,0.204l0.69-0.153
-	c0.328-0.069,0.746-0.365,0.924-0.655L13.905,2.135z"/>
+<path fill="#FFFFFF" d="M13.904,2.135C14.085,1.85,14,1.46,13.718,1.276l-1.802-1.181c-0.283-0.182-0.662-0.097-0.844,0.188
+	l-5.18,8.271C5.71,8.844,5.333,8.93,5.051,8.743L2.105,6.805C1.826,6.624,1.442,6.704,1.263,6.993L0.099,8.852
+	c-0.186,0.287-0.102,0.678,0.178,0.86l4.614,3.06c0.283,0.186,0.781,0.277,1.112,0.203l0.69-0.152
+	c0.328-0.069,0.746-0.365,0.924-0.655L13.904,2.135z"/>
 </svg>