Fix Messages editor:

- textarea field
- labels and placeholders color

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -9,11 +9,11 @@
   <div id="messageEditor">
 <md-content class="md-padding">
     <form>
-      <div class="PseudoField">
-        <label class="PseudoField-label">
+      <div class="Pseudo-input-container">
+        <label class="Pseudo-input-label">
           <var:string label:value="From"/>
         </label>
-        <!--<div class="PseudoField-inputLike">-->
+        <!--<div class="Pseudo-input-field">-->
           <md-select name="from"
                   data-ng-model="message.editable.from">
                   <md-option ng-value="identity" data-ng-repeat="identity in identities">{{identity}}</md-option>
@@ -22,8 +22,8 @@
 
       </div>
 
-      <div class="PseudoField">
-        <label class="PseudoField-label">
+      <div class="Pseudo-input-container">
+        <label class="Pseudo-input-label">
           <var:string label:value="To"/>
         </label>
 
@@ -35,8 +35,8 @@
           </tags-input>
 
       </div>
-      <div class="PseudoField">
-        <label class="PseudoField-label">
+      <div class="Pseudo-input-container">
+        <label class="Pseudo-input-label">
           <var:string label:value="Cc"/>
         </label>
         <div class="PseudoField-inputLike">
@@ -55,8 +55,8 @@
         <input type="text" name="subject" ng-model="message.editable.subject"/>
       </md-input-container>
 
-      <div class="PseudoField">
-        <label class="PseudoField-label">
+      <div class="Pseudo-input-container">
+        <label class="Pseudo-input-label">
           <var:string label:value="Attachments"/>
         </label>
         <div class="pseudoInput-text">

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -21,7 +21,7 @@
           </div>
         </div>
 
-        <div class="PseudoField--compact">
+        <div class="Pseudo-input-container--compact">
           <label class="PseudoField-label">
             <var:string label:value="To"/>
           </label>

UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss

@@ -15,16 +15,16 @@ tags-input .host:active {
 }
 
 tags-input .tags {
-  @extend .PseudoField-inputLike;
+  @extend .Pseudo-input-field;
   padding: 0;
   line-height: 2 * $mg;
   word-wrap: break-word;
   cursor: text;
-  border-bottom: 1px solid $colorGrayLight;
+  border-bottom: 1px solid $colorGrayLighter;
   transition: $swift-ease-out;
 }
 tags-input .tags.focused {
-  border-bottom: 2px solid sg-color($sogoBlue, 700);
+  border-bottom: 2px solid sg-color($sogoBlue, 500);
 }
 
 tags-input/deep/#inner-editor {
@@ -32,7 +32,7 @@ tags-input/deep/#inner-editor {
   line-height: inherit;
 }
 :root/deep/#placeholder,
-:root/deep/[pseudo="-webkit-input-placeholder"] {
+:root/deep/::-webkit-input-placeholder {
   color: $colorGrayLight;
   height: $mg;
   font: inherit;

UI/WebServerResources/scss/styles.scss

@@ -24,7 +24,7 @@
 /* Local overrides from angular-material src */
 // fixme : refactor all this to meet our practices
 // ------------------------------------------------------------------------------
-@import 'core/variables';
+//@import 'core/variables';
 @import 'core/mixins';
 @import 'core/structure';
 @import 'core/layout';

UI/WebServerResources/scss/views/MailerUI.scss

@@ -45,27 +45,27 @@
   white-space: normal;
 }
 
-// Component: PseudoField
+// Component: Pseudo-input
 // This component mimics the presentation of form fields according to Google's
 // Material Design specs (www.google.com/design/spec/components/text-fields.html)
 // It's used in message headers but could --and should-- be reused
-// The PseudoField element serves as a container for it's two children:
-// --label and --inputLike
+// The Pseudo-input-container element serves as a... container for it's two children:
+// -label and -input-field
 //
 // Typical use:
-// <div class="PseudoField">
-//   <label class="PseudoField-label">Some text</label>
-//   <p class="PseudoField-inputLike">Other input-like text</p>
+// <div class="Pseudo-input-container">
+//   <label class="Pseudo-input-label">Some text</label>
+//   <p class="Pseudo-input-field">Other input-like text</p>
 // </div>
 //
 // ----------------------------------------------------------------------------
 
-.PseudoField {
+.Pseudo-input-container {
   display: block; // Should be (reset to ?) a plain block element
   padding: 0 2px;
 
 }
-.PseudoField-label {
+.Pseudo-input-label {
   display: inline-block;
   margin-top: $mg;
   font-size: sg-size(caption);
@@ -73,27 +73,27 @@
   font-weight: $sg-font-regular;
   color: $colorGrayLight;
 }
-.PseudoField-inputLike {
+.Pseudo-input-field {
   display: block;
   padding: $line 0 0 0;
   margin-bottom: $line;
   font-size: sg-size(subhead);
   line-height: 1;
 }
-.PseudoField-inputLike--underline {
-  @extend .PseudoField-inputLike;
-  border-bottom: 1px solid $colorGrayLight;
+.Pseudo-input-field--underline {
+  @extend .Pseudo-input-field;
+  border-bottom: 1px solid $colorGrayLighter;
   &:focus,
   &:active,
   &:hover {
     margin-bottom: ($line - 1);
-    border-bottom: 2px solid sg-color($sogoBlue, 700);
+    border-bottom: 2px solid sg-color($sogoBlue, 500);
   }
 }
 // The specs dimensions are too large to fit with angular-material
 // Here's a modifier
-.PseudoField--compact {
-  .PseudoField-label {
+.Pseudo-input-container--compact {
+  .Pseudo-input-label {
     margin-top: 0;
   }
 }

UI/WebServerResources/scss/views/MessageEditorUI.scss

@@ -28,7 +28,7 @@ textarea.ck-editor{
   margin-top: $mg;
 }
 // Plain text editor
-textarea.ck-editor {
+[id=messageEditor] textarea {
   width: 100%;
-  min-height: 320px;
+  min-height: grid-step(3);
 }