fix code climate popup and iterate over popups over all

app/styles/app.scss

@@ -18,7 +18,7 @@
 @import "app/main/sponsors";
 @import "app/misc";
 @import "app/popup";
-@import "app/pro";
+// @import "app/pro";
 @import "app/settings";
 @import "app/tabs";
 

app/styles/app/_mixins/colors.sass

@@ -32,6 +32,19 @@ $gray-light-2: #efefef
 $gray-light-3: #f2f2eb
 $gray-light-4: #fdfdfd
 
+$cream-light: #FAFAF8
+$cream-dark: #EFF0EC
+$grey-light: #A1A0A0
+$grey-medium: #969496
+$grey-dark: #808080
+
+$green-light: #73c78d
+$green-dark: #3FA75F
+$red-light: #D7625F
+$red-dark: #DB423C
+$teal-light: #63A4A3
+$teal-dark: #5BA5A4
+
 $slate-blue-1: #e1e2e6
 $slate-blue-2: #e5e8ee
 $slate-blue-3: #f2f4f9

app/styles/app/_mixins/mixins.sass

@@ -1,13 +1,4 @@
 
-@mixin popup
-  display: none
-  position: fixed
-  z-index: 100
-  background-color: #fff
-  border: 10px solid rgba(114, 131, 139, 0.6)
-  background-clip: padding-box
-  border-radius 4px
-
 @mixin fadeOut($position, $angle, $color, $width: 0%)
   content: ""
   display: block

app/styles/app/popup.sass

@@ -1,3 +1,15 @@
+%popup
+  width: 29em
+  height: auto
+  position: fixed
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+  padding: 2.5em 2em
+  color: #565656
+  z-index: 99
+  background-color: $white
+  @extend %border-radius-4px
 
 .help
   display: inline-block
@@ -14,13 +26,14 @@
   cursor: pointer
 
 .popup
-  top: 50%
-  left: 50%
+  @extend %popup
+  display: none
   width: 400px
-  margin: -200px 0 0 -200px
-  padding: 20px
-  @include popup
-  box-sizing: border-box
+  background-color: #fff
+  border: solid 10px $cream-dark
+
+  &:before
+    content: ""
 
   .close
     position: absolute
@@ -29,11 +42,8 @@
     top: 10px
     width: 16px
     height: 16px
-    background:
-      image: inline-image('ui/close.svg')
-      repeat: no-repeat
-      size: 100%
-
+    @extend .icon
+    @extend .icon--dismiss-grey
   h4
     margin-top: 0
     font-size: 18px
@@ -41,20 +51,20 @@
     color: $color-text
 
   p
-    font-size: $font-size-normal
+    font-size: $font-size-sm
     word-wrap: normal
 
   pre
     background-color: $color-bg-pre
     margin: 0
-    padding: 10px 20px
+    padding: 5px 10px
     border-radius: 4px
     overflow-x: scroll
 
 #status-images
-  display: none
-  width: 600px
-  margin: -95px 0 0 -300px
+  width: 100%
+  @media #{$medium-up}
+    width: 600px
 
   p
     margin: 0
@@ -97,19 +107,11 @@
     border-radius: 3px
 
 #regenerate-key, #regeneration-success
-  display: none
   width: 400px
 
 #code-climate
-  width: 500px
-  padding: 5px 20px
-  margin-left: -250px
-
-  pre
-    padding: 5px 10px
-
+  width: 100%
   ol
-    padding-left: 15px
-  img#code-climate-logo
-    margin-right: 50px
-
+    padding-left: 1.2em
+  @media #{$medium-up}
+    width: 550px

app/templates/components/code-climate-popup.hbs

@@ -19,23 +19,20 @@
     <li>
       <p>Add the `code-climate-reporter` gem to your Gemfile:</p>
 
-<pre>
-gem "codeclimate-test-reporter", group: :test, require: nil
+<pre>gem "codeclimate-test-reporter", group: :test, require: nil
 </pre>
     </li>
     <li>
       <p>Load the reporter in your `test_helper` or `spec_helper`, putting it at the very top:</p>
 
-<pre>
-require "codeclimate-test-reporter"
+<pre>require "codeclimate-test-reporter"
 CodeClimate::TestReporter.start
 </pre>
     </li>
     <li>
       <p>Add the Code Climate token to your .travis.yml:</p>
 
-<pre>
-addons:
+<pre>addons:
   code_climate:
     repo_token: adf08323...
 </pre>

app/templates/status-images.hbs

@@ -4,7 +4,7 @@
   {{#if view.branches.isLoaded}}
     {{view Ember.Select contentBinding="view.branches" selectionBinding="view.statusImageBranch" optionLabelPath="content.commit.branch" optionValuePath="content.commit.branch"}}
   {{else}}
-    <span class="loading"></span>
+    {{loading-indicator}}
   {{/if}}
 </p>