Merge pull request #1419 from mailpoet/send_tab_update

Redesigns the "Send With..." tab [MAILPOET-1441]

assets/css/src/settings.styl

@@ -19,13 +19,15 @@
       flex-direction column
       flex-basis 0
       margin 0 25px 25px 0
-      border 1px solid #dedede
       background-color #fff
+      border 2px solid #dcdcdc
       max-width 500px
       .mailpoet_sending_method_description
         padding: 25px
         flex-grow 1
         flex-shrink 0
+      &:hover:not(.mailpoet_active)
+        border-color #c5c5c5
     > li:last-child
       margin-right 0
     h3
@@ -37,22 +39,36 @@
     .mailpoet_status
       display flex
       flex-direction row
-      justify-content space-between
+      justify-content flex-end
       align-items center
-      background-color #2f2f2f
+      background-color #dcdcdc
       color #fff
       text-overflow ellipsis
-      padding 15px
+      min-height 2em
+      padding 1em
       span
         visibility hidden
         font-weight bold
+      div
+        margin-left 1em
     .mailpoet_active
+      border 2px solid #088b00
+      &.mailpoet_invalid_key
+        border 2px solid #dc3232
       .mailpoet_status
         background-color #088b00
+        &.mailpoet_invalid_key
+          background-color #dc3232
+          .mailpoet_actions
+            color white
+            a:not(.button-primary)
+              color white
         span
           visibility visible
       #mailpoet_mta_activate
         visibility hidden
+    .mailpoet_actions
+      color initial
 
   .tooltip.dashicons.dashicons-editor-help
     line-height: 1.4