refactor more settings styles

app/styles/app/_mixins/vars.sass

@@ -4,10 +4,6 @@ $font-size-sm: 14px
 $line-height-m: 1.3
 $font-size-s: 12px
 
-// colors
-$teal1: #5BA5A4
-$teal2: #63A4A3
-
 $blue-grey: #404650
 $blue-grey-light: #d8e2e6
 $light-gray: #e9e9e7
@@ -35,7 +31,7 @@ $error-color: $fail-color
 $start-color: #D2C93B
 $start-bg-color: #D2CA24
 $cancel-color: #A1A0A0
-$dropdown-color: $teal1
+$dropdown-color: $teal-light
 $created-color: #CDBC2C
 
 $dashboard-text-color: #9d9fa1

app/styles/app/layouts/owner.sass

@@ -112,7 +112,7 @@
   .active,
   .active:hover,
     position: relative
-    color: $teal2
+    color: $teal-dark
     &:after
       content: ""
       position: absolute
@@ -120,7 +120,7 @@
       bottom: -0.25em
       width: 100%
       height: 2px
-      background-color: $teal1
+      background-color: $teal-light
   .active
     font-weight: 600
 

app/styles/app/layouts/settings.sass

@@ -1,11 +1,8 @@
 
 
-$heading-color: #63a4a3
-$setting-section-border: 2px solid #f2f3ef
-
 .small-title
   font-size: 18px
-  color: $heading-color
+  color: $teal-light
   font-weight: 400
 
 .settings
@@ -14,12 +11,14 @@ $setting-section-border: 2px solid #f2f3ef
 .settings-section
   padding: 0 0 1em
   margin-bottom: 1.5em
-  border-bottom: $setting-section-border
+  border-bottom: 2px solid #f2f3ef
   &:last-of-type
     border-bottom: none
   .small-title
     margin-top: 0
 
+
+
 %settings-list
   padding: 0
   margin: 0
@@ -44,36 +43,78 @@ $setting-section-border: 2px solid #f2f3ef
   & + .label
     vertical-align: middle
   input
-    display: inline-block
-    height: 32px
     width: 80px
-    border: 1px solid #eeedec
-    border-radius: 4px
     font-size: $font-size-s
-    color: #8e8f8e
     text-align: center
 
-.settings-envvar
+
+
+%settings-row
   padding: .6em .5em
   border-radius: 4px
   background-color: #F6F5F5
 
-.env-var-name
+.settings-envvar
+  @extend %settings-row
+
+.settings-sshkey
+  @extend %settings-row
+  display: block
+  margin-bottom: 1rem
+  span
+    vertical-align: middle
+
+
+
+%settings-name-section
   display: inline-block
   position: relative
-  width: grid-calc(6, 12)
   vertical-align: middle
   overflow: hidden
+  white-space: nowrap
   &:after
     content: ""
     @include fadeOut(right, -90deg, #F6F5F5)
 
+.ssh-key-name
+  @extend %settings-name-section
+  width: 40%
+  .icon-key
+    @extend %icon
+    @extend .icon-key
+    width: 1.2em
+    height: 1.3em
+
+.env-var-name
+  @extend %settings-name-section
+  width: grid-calc(6, 12)
+
+
+
+%settings-value-section
+  display: inline-block
+  vertical-align: middle
+  white-space: nowrap
+  overflow: hidden
+
+.ssh-key-value
+  @extend %settings-value-section
+  width: 48%
+  text-align: right
+  @media #{$medium-up}
+    width: grid-calc(3, 12)
+  .icon-fingerprint
+    @extend %icon
+    @extend .icon-fingerprint
+    width: 1.3em
+    height: 1.3em
+    margin-right: .5em
+
 .env-var-value
   display: inline-block
   width: grid-calc(4, 12)
   @media #{$medium-up}
     width: grid-calc(3, 12)
-
   input
     display: inline-block
     width: 100%
@@ -88,81 +129,32 @@ $setting-section-border: 2px solid #f2f3ef
       repeat: no-repeat
       position: 0.4em 0.7em
 
-.env-var-action
+
-  position: relative
+
+%settings-action-section
   display: inline-block
+  position: relative
   width: grid-calc(2, 24)
   float: right
+  vertical-align: middle
   text-align: center
-
-  a
-    padding: 1em
-
   .icon-delete
     @extend %icon
     @extend .icon-delete
     width: 1.1em
     height: 1.3em
-
   &:hover
     .icon-delete
       @extend .icon-delete-hover
 
-
+.env-var-action
-.settings-sshkey
+  @extend %settings-action-section
-  display: block
+  a
-  margin-bottom: 1rem
+    padding: 1em
-  padding: .6em .5em
-  border-radius: 4px
-  background-color: #F6F5F5
-
-  span
-    vertical-align: middle
-
-.ssh-key-name
-  display: inline-block
-  position: relative
-  vertical-align: middle
-  width: 40%
-  white-space: nowrap
-  overflow: hidden
-  .icon-key
-    @extend %icon
-    @extend .icon-key
-    width: 1.2em
-    height: 1.3em
-  &:after
-    content: ""
-    @include fadeOut(right, -90deg, #F6F5F5)
-
-.ssh-key-value
-  display: inline-block
-  vertical-align: middle
-  width: 48%
-  text-align: right
-  white-space: nowrap
-  overflow: hidden
-  @media #{$medium-up}
-    width: grid-calc(3, 12)
-  .icon-fingerprint
-    @extend %icon
-    @extend .icon-fingerprint
-    width: 1.3em
-    height: 1.3em
-    margin-right: .5em
 
 .ssh-key-action
-  display: inline-block
+  @extend %settings-action-section
-  position: relative
-  vertical-align: middle
-  width: grid-calc(2, 24)
-  float: right
   .icon-delete
-    @extend %icon
-    @extend .icon-delete
-    display: block
-    width: 1.1em
-    height: 1.3em
     margin: .2em auto 0
   .icon-delete-disabled
     @extend %icon
@@ -171,8 +163,5 @@ $setting-section-border: 2px solid #f2f3ef
     width: 1.1em
     height: 1.3em
     margin: .2em auto 0
-  &:hover
-    .icon-delete
-      @extend .icon-delete-hover
 
 

app/styles/app/layouts/sidebar.sass

@@ -77,7 +77,7 @@ $sb-font-size: 14px
   #tab_new
     a:hover
       .icon--plus:after
-        color: $teal1
+        color: $teal-light
       &:after
         bottom: -2px
 

app/styles/app/modules/tabs.sass

@@ -20,7 +20,7 @@
   .active a,
   a:hover
     position: relative
-    color: $teal2
+    color: $teal-dark
     &:after
       content: ""
       position: absolute
@@ -28,7 +28,7 @@
       bottom: -0.25em
       width: 100%
       height: 2px
-      background-color: $teal2
+      background-color: $teal-dark
   .active a
     font-weight: 600
 
@@ -68,7 +68,7 @@
       color: $grey-light
       padding: .5em 0
     .active
-      color: $teal2
+      color: $teal-dark
 
     @media #{$medium-up}
       border-bottom: solid $cream-dark 2px