add styles for public env-vars and tweak some other styles

app/components/env-var.coffee

@@ -3,6 +3,7 @@
 EnvVarComponent = Ember.Component.extend
 
   classNames: ['settings-envvar']
+  classNameBindings: ['envVar.public:is-public']
 
   isEditing: false
   isDeleting: false

app/styles/app/layouts/settings.sass

@@ -115,15 +115,10 @@
 .env-var-value
   @extend %settings-value-section
 
-  // public value
-  // background-image: none;
-  // font-size: 16px;
-  // padding: 0.4rem 0 0.4rem 0.7rem;
-
   input
     display: inline-block
     width: 100%
-    padding: 0.7em 0.5em 0.7em 2.2em
+    padding: 0.7em 0.5em 0.7em 2.6em
     border-radius: 4px
     border: none
     background-color: #eeedec
@@ -132,8 +127,12 @@
     background:
       size: 14px
       repeat: no-repeat
-      position: 0.4em 0.7em
-
+      position: 0.8em 0.7em
+  .is-public &
+    input
+      background-image: none;
+      padding: 0.4em 0 0.5em 0.9em;
+      font-size: 14px;
 
 %settings-action-section
   display: inline-block
@@ -146,7 +145,8 @@
     @extend %icon
     @extend .icon-delete
     width: 1.1em
-    height: 1.3em
+    height: 1.6em
+    background-position: 0 4px
   &:hover
     .icon-delete
       @extend .icon-delete-hover
@@ -172,14 +172,4 @@
     height: 1.3em
     margin: .2em auto 0
 
-.form-error
-  .env-name
-    border: $fail-color 2px solid
-  .form-error
-    color: $fail-color
-    font-size: 14px
-    margin: 0
-
-
-
 

app/styles/app/modules/forms.sass

@@ -47,6 +47,11 @@ textarea
     vertical-align: top
     width: 100%
     margin-bottom: 1em
+  .switch
+    .label
+      font-size: $font-size-s
+      width: 7rem;
+      line-height: 1.2;
 
   @media #{$medium-up}
     .form-elem
@@ -61,3 +66,13 @@ textarea
       width: 6%
       float: right
       text-align: right
+
+
+.form-error
+  .env-name
+    border: $fail-color 2px solid
+  .form-error-message
+    color: $fail-color
+    font-size: 14px
+    padding: .2em 0
+    margin: 0

app/styles/app/modules/tooltips.sass

@@ -53,7 +53,7 @@
     &:before
       left: 46%
       @media #{$medium-up}
-        left: 42%
+        left: 44%
 
 .tooltip--jobs
   @extend %tooltip

app/templates/components/add-env-var.hbs

@@ -2,7 +2,7 @@
   <div class="form-elem">
     {{input value=name class="env-name" on="key-press" action="nameChanged" placeholder="Name"}}
     {{#if nameIsBlank }}
-      <p class="form-error">Name cannot be blank</p>
+      <p class="form-error-message">Name cannot be blank</p>
     {{/if}}
   </div>
   <div class="form-elem">

tests/integration/components/add-env-var-test.js

@@ -52,11 +52,11 @@ test('it shows an error if no name is present', function(assert) {
 
   this.$('.form-submit').click();
 
-  assert.ok(this.$('.form-error').length, 'the error message should be displayed');
+  assert.ok(this.$('.form-error-message').length, 'the error message should be displayed');
 
   var e = jQuery.Event("keypress");
   e.which = 50;
   this.$('.env-name').trigger(e);
 
-  assert.ok(!this.$('.form-error').length, 'the error message should be removed after value is changed');
+  assert.ok(!this.$('.form-error-message').length, 'the error message should be removed after value is changed');
 });