start fresh markup for prgs filter

app/components/orgs-filter.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
 
-  classNames: ['dashboard-filter'],
+  classNames: ['organisation-filter'],
   actions: {
     toggleOrgFilter() {
       this.toggleProperty('showFilter');

app/components/repo-show-tools.js

@@ -3,7 +3,7 @@ import config from 'travis/config/environment';
 
 export default Ember.Component.extend({
   popup: Ember.inject.service(),
-  classNames: ['settings-menu'],
+  classNames: ['option-button'],
   classNameBindings: ['isOpen:display'],
   isOpen: false,
 

app/styles/app/layouts/dashboard.sass

@@ -14,7 +14,7 @@
     align-items: baseline
 
 .dashboard-repos
-  margin-bottom: 5rem
+  padding-bottom: 5rem
 
 .dashboard-section
   margin-bottom: 4rem

app/styles/app/layouts/owner.sass

@@ -1,9 +1,10 @@
 .owner-header
+  display: flex
+  flex-flow: row wrap
+  justify-content: flex-start
+  align-items: center
   padding: 0 $column-gutter/2
   margin-bottom: 3rem
-  color: #969496
-  a
-    color: #969496
   .owner-title
     margin: .3em 0 .2em
     font-size: 36px
@@ -22,61 +23,26 @@
       text-decoration: underline
   img
     border-radius: 50%
-    background-color: #F4F3ED
+    background-color: $pebble-grey
-
-  .sync-button
-    margin-top: .8rem
-    p, button
-      margin: 0
-  .sync-last
-    color: #969496
-    font-size: $font-size-sm
-
-.owner-avatar,
-.owner-info
-  @extend %inline-block
-  vertical-align: middle
 
 .owner-avatar
-  width: grid-calc(4, 12)
+  flex: 0 0 20%
   @media #{$medium-up}
-    width: grid-calc(2, 12)
+    flex: 0 0 17%
 
 .owner-info
-  width: grid-calc(7, 12)
+  flex: 1 0 75%
   @media #{$medium-up}
-    width: grid-calc(29, 36)
+    flex: 1 0 80%
-    position: relative
+  position: relative
-    overflow: hidden
+  overflow: hidden
-    &:after
+  &:after
-      content: ""
+    content: ""
-      @include fadeOut(right, -90deg, white)
+    @include fadeOut(right, -90deg, white)
 
 .tabs--owner
   padding : 0 $column-gutter/2
 
-  .active,
-  .active:hover,
-    position: relative
-    color: $oxide-blue
-    &:after
-      content: ""
-      position: absolute
-      left: 0
-      bottom: -0.25em
-      width: 100%
-      height: 2px
-      background-color: $oxide-blue
-  .active
-    font-weight: 600
-
-.tabnav--owner
-  margin-bottom: 1.5rem
-  @media #{$medium-up}
-    height: 2.2em
-    border-bottom: solid 2px $cream-dark
-
-
 .owner-tiles
   padding: 0
   list-style-type: none

app/styles/app/layouts/profile.sass

@@ -131,9 +131,8 @@ p.profile-user-last
     vertical-align: middle
   .profile-settings
     display: inline-block
-    padding: .2em .2em .2em .5em;
+    padding: .2em .2em .2em .5em
-    height: 28px;
+    height: 28px
-    vertical-align: bottom;
     .icon
       width: 14px
       height: 14px
@@ -145,7 +144,7 @@ p.profile-user-last
   display: inline-block !important
 
 .profile-repo
-  border-radius: 4px
+  border-radius: 2px
   position: relative
   display: inline-block
   width: grid-calc(13, 24)
@@ -162,21 +161,22 @@ p.profile-user-last
   .sync-spinner
     vertical-align: top
   &:hover
-    background-color: #ededec
+    background-color: $pebble-grey
     &:after
       content: ""
-      @include fadeOut(right, -90deg, #ededec)
+      @include fadeOut(right, -90deg, $pebble-grey)
   .active &:hover
-    background-color: #e2eee2
+    background-color: $seed-green
     &:after
       content: ""
-      @include fadeOut(right, -90deg, #e2eee2)
+      @include fadeOut(right, -90deg, $seed-green)
   @media #{$medium-up}
     width: grid-calc(18, 24)
     height: 30px
     &:hover
       span
         display: inline-block
+        color: $cement-grey
   @media #{$large-up}
     width: grid-calc(19, 24)
 

app/styles/app/layouts/repo.sass

@@ -42,78 +42,8 @@
     justify-content: space-between
     border-bottom: 2px #f1f1f1 solid
 
-
+  .option-button
-$dropdown-button-height: 30px
+    width: 10em
-$dropdown-button-margin: -9px
+    margin-top: -9px
-
+    .option-dropdown a
-.settings-button
+       padding-left: 2.4em
-  display: block
-  height: $dropdown-button-height
-  padding: 0
-  border: 1px solid $pebble-grey
-  color: $asphalt-grey
-  border-radius: 2px
-  text-align: center
-  line-height: 2
-  font-size: 14px
-  cursor: pointer
-  .label-align
-    padding: 0 1em
-  &:hover,
-  &:active,
-  // .display &,
-  .settings-menu:hover &
-    color: $oxide-blue
-    border-color: $oxide-blue
-    .settings-tofu
-      border-color: $oxide-blue
-      background-image: inline-image('/line-icons/icon-tofuburger-teal.svg')
-
-  @media #{$medium-up}
-    margin-top: $dropdown-button-margin
-
-.settings-dropdown
-  display: none
-  position: absolute
-  top: $dropdown-button-height + ($dropdown-button-margin * .8)
-  width: 100%
-  padding: 0
-  margin: 6px 0 0
-  list-style: none
-  z-index: 60
-  background-color: white
-  border: 1px solid $oxide-blue
-  a
-    display: block
-    padding: .4em 1em .5em 2.4em
-    font-size: 14px
-    color: $oxide-blue
-    &:hover
-      color: white
-      background-color: $oxide-blue
-  @media #{$medium-up}
-    margin-top: -3px
-
-.settings-tofu
-  width: 2em
-  height: 2em
-  display: inline-block
-  vertical-align: top
-  background:
-    image: inline-image('/line-icons/icon-tofuburger.svg')
-    repeat: no-repeat
-    size: 20px
-    position: 50%
-  @media #{$medium-up}
-    border-left: 1px solid $pebble-grey
-
-.settings-menu
-  position: relative
-  @media #{$small-only}
-    &.display
-      .settings-dropdown
-        display: block
-  @media #{$medium-up}
-    &:hover
-      .settings-dropdown
-        display: block

app/styles/app/modules/dropdown.sass

@@ -1,38 +1,42 @@
-$dropdown-border: #C3D9DB
+.option-button
-
-.dropdown--db
-  @include resetul
-  border-radius: 4px
-  position: absolute
-  padding: .8em .5em
-  z-index: 90
-  width: 12.5em;
-  right: 0;
-  top: 4em;
-  border: 2px $oxide-blue solid;
-  background-color: white
-  display: none
-  a
-    display: block
-    padding: 0.4em 1em .2em
-    &:hover
-      background-color: $oxide-blue
-      color: white
-  &:before
-    content: ""
-    width: 1.2em
-    height: 1.2em
-    display: block
-    position: absolute
-    top: -0.7em;
-    right: 1.1em;
-    background-color: white
-    border-top: solid 2px $oxide-blue;
-    border-left: solid 2px $oxide-blue;
-    transform: rotate(45deg);
-
-.filter
   position: relative
+  width: 17em
+  @media #{$small-only}
+    &.display
+      .option-dropdown
+        display: block
+  @media #{$medium-up}
+    &:hover
+      .option-dropdown
+        display: block
+      .option-display
+        color: $oxide-blue
+        border-color: $oxide-blue
+      .option-tofu
+        border-color: $oxide-blue
+        background-image: inline-image('/line-icons/icon-tofuburger-teal.svg')
+
+$dropdown-button-height: 30px
+$dropdown-button-margin: -9px
+
+.option-display
+  display: flex
+  height: $dropdown-button-height
+  padding: 0
+  border: 1px solid $pebble-grey
+  color: $asphalt-grey
+  border-radius: 2px
+  text-align: center
+  line-height: 2
+  font-size: 14px
+  cursor: pointer
+  text-align: left
+  white-space: nowrap
+  .label-align
+    flex-grow: 1
+    padding: 0 1em
+    line-height: 2
+    overflow: hidden
   img
     max-width: 20px
     max-height: 20px
@@ -41,39 +45,59 @@ $dropdown-border: #C3D9DB
     border-radius: 50%
     overflow: hidden
 
-.filter--org
+.option-tofu
-  float: left
+  width: 2em
+  height: 2em
+  display: inline-block
+  vertical-align: top
+  background:
+    image: inline-image('/line-icons/icon-tofuburger.svg')
+    repeat: no-repeat
+    size: 20px
+    position: 50%
+  @media #{$medium-up}
+    border-left: 1px solid $pebble-grey
 
-.filter-current
+.option-dropdown
-  padding: .9em 0
-  cursor: pointer
-  a
-    color: $oxide-blue
-
-.filter-dropdown
-  @include resetul
-  position: absolute
-  top: 3em
-  min-width: 14em
-  background-color: white
-  border-radius: 2px
-  overflow: hidden
-  border: 1px solid $cream-dark
-  border-top: none
-  z-index: 40
   display: none
-  li
+  position: absolute
-    white-space: nowrap
+  top: $dropdown-button-height + ($dropdown-button-margin * .8)
+  width: 100%
+  padding: 0
+  margin: 6px 0 0
+  list-style: none
+  z-index: 60
+  background-color: white
+  border: 1px solid $oxide-blue
   a
-    display: inline-block
+    display: block
-    width: 100%
+    padding: .5em 1em
-    padding: 10px 10px 10px 20px
+    font-size: 14px
+    color: $oxide-blue
     &:hover
       color: white
-      background : $oxide-blue
+      background-color: $oxide-blue
-  .is-selected
-    a
-      font-weight: 600
 
-  &.is-open
+
+.option-search
+  input[type="text"]
     display: block
+    padding-left: 1em
+    outline: none
+    border-bottom: 1px solid $oxide-blue
+    border-radius: 0
+
+
+.option-list
+  list-style: none
+  padding: 0
+  margin: 0
+  a
+    color: $asphalt-grey
+    cursor: pointer
+  img
+    width: 22px
+    height: 22px
+    vertical-align: top
+    margin-right: .3em
+    border-radius: 50%

app/styles/app/modules/switch.sass

@@ -13,15 +13,15 @@
     padding: 3px 3px 3px 4px
     vertical-align: middle
     overflow: visible
-    background-color: #E2E1E2
+    background-color: darken($pebble-grey, 10)
-    border-radius: 4px
+    border-radius: 2px
     border: none
     cursor: pointer
     span
       width: $switch-inner-width
       height: $switch-inner-heigth
-      border-radius: 4px
+      border-radius: 2px
-      background-color: #A5A4A4
+      background-color: $cement-grey
       color: white
       text-align: center
       font-weight: 300
@@ -50,9 +50,9 @@
 
   &.active
     .switch-inner
-      background-color: #B8D6B9
+      background-color: darken($seed-green, 10)
       span
-        background-color: #3BA85D
+        background-color: $turf-green
     .on
       display: inline-block
     .off

app/templates/components/orgs-filter.hbs

@@ -1,34 +1,41 @@
-<div class="filter-current">
+<div class="option-button">
-  {{#if orgs.isLoading}}
+ {{#if orgs.isLoading}}
     {{loading-indicator}}
   {{else}}
-    <a {{action 'toggleOrgFilter'}} title="">
+    <a href="#" title="" class="option-display" {{action 'toggleOrgFilter'}}>
-      {{#if selected }}
+      <span class="label-align">
-        <img src="{{selected.avatar_url}}" alt="{{org.login}}">
+        {{#if selected }}
-        {{#if selected.name}}
+          <img src="{{selected.avatar_url}}" alt="{{org.login}}">
-          {{selected.name}}
+          {{#if selected.name}}
+            {{selected.name}}
+          {{else}}
+            {{selected.login}}
+          {{/if}}
         {{else}}
-          {{selected.login}}
+          All organizations
         {{/if}}
-      {{else}}
+      </span><span class="option-tofu"></span>
-        All organizations
-      {{/if}}
-    </a><span class="icon-arrow-down"></span>
-  {{/if}}
-</div>
-<ul class="filter-dropdown {{if showFilter 'is-open'}}">
-  {{#if selected }}
-    <li><a title="" {{action 'select'}}>All organizations</a></li>
-  {{/if}}
-  {{#each orgs as |org|}}
-  <li>
-    <a title="" {{action 'select' org}}><img src="{{org.avatar_url}}" alt="">
-      {{#if org.name }}
-        {{org.name}}
-      {{else}}
-        {{org.login}}
-      {{/if}}
     </a>
-  </li>
+  {{/if}}
-  {{/each}}
+  <div class="option-dropdown {{if showFilter 'is-open'}}">
-</ul>
+    <div class="option-search">
+      <input type="text">
+    </div>
+    <div class="option-list">
+      {{#if selected }}
+        <li><a title="" {{action 'select'}}>All organizations</a></li>
+      {{/if}}
+      {{#each orgs as |org|}}
+      <li>
+        <a title="" {{action 'select' org}}><img src="{{org.avatar_url}}" alt="">
+          {{#if org.name }}
+            {{org.name}}
+          {{else}}
+            {{org.login}}
+          {{/if}}
+        </a>
+      </li>
+      {{/each}}
+    </div>
+  </div>
+</div>

app/templates/components/repo-show-tools.hbs

@@ -1,8 +1,8 @@
-<a {{action "menu"}} class="settings-button" type="" title="Show more options">
+<a {{action "menu"}} class="option-display" type="" title="Show more options">
   <span class="label-align">More options</span>
-  <span class="settings-tofu"></span>
+  <span class="option-tofu"></span>
 </a>
-<ul class="settings-dropdown">
+<ul class="option-dropdown">
   {{#if displaySettingsLink}}
     <li>
       {{#link-to "settings" repo}}Settings{{/link-to}}