Updates changelog and bumps version to 3.0.0-beta.24

Escapes quotation marks in translation results [MAILPOET-864]

.circle_ci/apache/mailpoet.loc.conf

@@ -0,0 +1,14 @@
+Listen 8080
+
+<VirtualHost *:8080>
+  UseCanonicalName Off
+  ServerName mailpoet.loc
+  DocumentRoot /home/ubuntu/mailpoet/wordpress
+  DirectoryIndex index.php
+  LogLevel notice
+
+  <Directory /home/ubuntu/mailpoet/wordpress>
+    Require all granted
+  </Directory>
+</VirtualHost>
+

.circle_ci/fake-sendmail.rb

@@ -0,0 +1,8 @@
+#!/usr/bin/ruby
+path = "/tmp"
+Dir.mkdir(path) if !File.exists?(path)
+File.open("#{path}/mailpoet-#{Time.now.to_f}.txt", "w") do |f|
+    sleep 5
+    f.puts ARGV.inspect
+    $stdin.each_line { |line| f.puts line }
+end

.circle_ci/mailpoet_php.ini

@@ -0,0 +1,3 @@
+; For Unix only.  You may supply arguments as well (default: "sendmail -t -i").
+; http://php.net/sendmail-path
+sendmail_path = /home/ubuntu/mailpoet/.circle_ci/fake-sendmail.rb

.env.sample

@@ -13,4 +13,7 @@ WP_TEST_MAILER_MAILPOET_API=""
 WP_TEST_MAILER_SENDGRID_API=""
 WP_TEST_MAILER_SMTP_HOST=""
 WP_TEST_MAILER_SMTP_LOGIN=""
-WP_TEST_MAILER_SMTP_PASSWORD=""
+WP_TEST_MAILER_SMTP_PASSWORD=""
+WP_SVN_USERNAME=""
+WP_SVN_PASSWORD=""
+WP_TRANSIFEX_API_TOKEN=""

.gitignore

@@ -12,8 +12,10 @@ npm-debug.log
 /views/cache/**
 temp
 .idea
-wysija-newsletters.zip
+mailpoet.zip
 tests/javascript/testBundles
 assets/css/*.css
 assets/js/*.js
 .vagrant
+lang
+.mp_svn

.tx/config

@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[mp3.mailpoet]
+source_file = lang/mailpoet.pot
+file_filter = lang/mailpoet-<lang>.po
+source_lang = en_US
+type = PO
+minimum_perc = 100

README.md

@@ -128,3 +128,37 @@ _n()
 - Handlebars.
 
 You can use Twig i18n functions in Handlebars, just load your template from a Twig view.
+
+# Build
+
+To build a plugin , run `./build.sh`.
+
+Some build process steps are described below (their dependencies etc.).
+
+## packtranslations step
+
+This step imports translations from Transifex and generates MO files. It requires:
+* `tx` client: https://docs.transifex.com/client/installing-the-client
+* `msgfmt` command (from Gettext package)
+Finally , a `WP_TRANSIFEX_API_TOKEN` environment variable should be initialized with a valid key.
+
+# Publish
+
+The `publish` command currently does the following:
+* Pushes translations POT file to Transifex;
+* Publishes the release in SVN.
+
+Before you run it, you need to:
+1. Ensure there is an up-to-date local copy of MailPoet SVN repository in `.mp_svn` directory by running `./do svn:checkout`.
+2. Have all your features merged in Git `master`, your `mailpoet.php` and `readme.txt` tagged with a new version.
+3. Run `./build.sh` to produce a `mailpoet.zip` distributable archive.
+
+Everything's ready? Then run `./do publish`.
+If the job goes fine, you'll get a message like this:
+```
+Go to '.mp_svn' and run 'svn ci -m "Release 3.0.0-beta.9"' to publish the
+release
+```
+It's quite literal: you can review the changes to be pushed and if you're satisfied, run the suggested command to finish the release publishing process.
+
+If you're confident, execute `./do publish --force` and your release will be published to the remote SVN repository without manual intervention (automatically). For easier authentication you might want to set `WP_SVN_USERNAME` and `WP_SVN_PASSWORD` environment variables.

RoboFile.php

@@ -3,14 +3,21 @@
 class RoboFile extends \Robo\Tasks {
 
   function install() {
-    $this->_exec('./composer.phar install');
-    $this->_exec('npm install');
+    return $this->taskExecStack()
+      ->stopOnFail()
+      ->exec('./composer.phar install')
+      ->exec('npm install')
+      ->run();
   }
 
   function update() {
     $this->say(getenv('WP_TEST_URL'));
-    $this->_exec('./composer.phar update');
-    $this->_exec('npm update');
+
+    return $this->taskExecStack()
+      ->stopOnFail()
+      ->exec('./composer.phar update')
+      ->exec('npm update')
+      ->run();
   }
 
   protected function rsearch($folder, $extensions = array()) {
@@ -61,12 +68,14 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function compileAll() {
-    $this->compileJs();
-    $this->compileCss();
+    $collection = $this->collectionBuilder();
+    $collection->addCode(array($this, 'compileJs'));
+    $collection->addCode(array($this, 'compileCss'));
+    return $collection->run();
   }
 
   function compileJs() {
-    $this->_exec('./node_modules/webpack/bin/webpack.js');
+    return $this->_exec('./node_modules/webpack/bin/webpack.js --bail');
   }
 
   function compileCss() {
@@ -78,7 +87,7 @@ class RoboFile extends \Robo\Tasks {
       'assets/css/src/importExport.styl'
     );
 
-    $this->_exec(join(' ', array(
+    return $this->_exec(join(' ', array(
       './node_modules/stylus/bin/stylus',
       '--include ./node_modules',
       '--include-css',
@@ -89,60 +98,254 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function makepot() {
-    $this->_exec('./node_modules/.bin/grunt makepot'.
-      ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'.
-      ' --base_path '.__DIR__
+    return $this->_exec('./node_modules/.bin/grunt makepot'.
+      ' --gruntfile='.__DIR__.'/tasks/makepot/makepot.js'.
+      ' --base_path='.__DIR__
     );
   }
 
   function pushpot() {
-    $this->_exec('./node_modules/.bin/grunt pushpot'.
-      ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'.
-      ' --base_path '.__DIR__
-    );
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'txinit'))
+      ->taskExec('tx push -s')
+      ->run();
   }
 
-  function testUnit($file = null) {
-    $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
-    $this->_exec('vendor/bin/codecept run unit -f '.(($file) ? $file : ''));
+  function packtranslations() {
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'txinit'))
+      ->taskExec('./tasks/pack_translations.sh')
+      ->run();
   }
 
-  function testCoverage($file = null) {
+  function txinit() {
+    // Define WP_TRANSIFEX_API_TOKEN env. variable
+    $this->loadEnv();
+    return $this->_exec('./tasks/transifex_init.sh');
+  }
+
+  function testUnit($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
-    $this->_exec(join(' ', array(
+
+    $command = 'vendor/bin/codecept run unit -f '.(($opts['file']) ? $opts['file'] : '');
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
+  }
+
+  function testCoverage($opts=['file' => null, 'xml' => false]) {
+    $this->loadEnv();
+    $this->_exec('vendor/bin/codecept build');
+    $command = join(' ', array(
       'vendor/bin/codecept run',
-      (($file) ? $file : ''),
+      (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
-      '--coverage-html'
-    )));
+      ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
+    ));
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
   }
 
-  function testJavascript() {
+  function testJavascript($xml_output_file = null) {
     $this->compileJs();
 
-    $this->_exec(join(' ', array(
+    $command = join(' ', array(
       './node_modules/.bin/mocha',
       '-r tests/javascript/mochaTestHelper.js',
       'tests/javascript/testBundles/**/*.js'
-    )));
+    ));
+
+    if(!empty($xml_output_file)) {
+      $command .= sprintf(
+        ' --reporter xunit --reporter-options output="%s"',
+        $xml_output_file
+      );
+    }
+
+    return $this->_exec($command);
   }
 
   function testDebug() {
     $this->_exec('vendor/bin/codecept build');
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept run unit --debug');
+    return $this->_exec('vendor/bin/codecept run unit --debug');
   }
 
   function testFailed() {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
-    $this->_exec('vendor/bin/codecept run -g failed');
+    return $this->_exec('vendor/bin/codecept run -g failed');
+  }
+
+  function qa() {
+    $collection = $this->collectionBuilder();
+    $collection->addCode(array($this, 'qaLint'));
+    $collection->addCode(function() {
+      return $this->qaCodeSniffer('all');
+    });
+    return $collection->run();
+  }
+
+  function qaLint() {
+    return $this->_exec('./tasks/php_lint.sh lib/ tests/ mailpoet.php');
+  }
+
+  function qaCodeSniffer($severity='errors') {
+    if ($severity === 'all') {
+      $severityFlag = '-w';
+    } else {
+      $severityFlag = '-n';
+    }
+    return $this->_exec(
+      './vendor/bin/phpcs '.
+      '--standard=./tasks/code_sniffer/MailPoet '.
+      '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
+      './lib/Util/pQuery/*,./lib/Config/PopulatorData/Templates/* '.
+      'lib/ '.
+      $severityFlag
+    );
+  }
+
+  function svnCheckout() {
+    return $this->_exec('svn co https://plugins.svn.wordpress.org/mailpoet/ .mp_svn');
+  }
+
+  function svnPublish($opts = ['force' => false]) {
+    $this->loadWPFunctions();
+
+    $svn_dir = ".mp_svn";
+    $plugin_data = get_plugin_data('mailpoet.php', false, false);
+    $plugin_version = $plugin_data['Version'];
+    $plugin_dist_name = sanitize_title_with_dashes($plugin_data['Name']);
+    $plugin_dist_file = $plugin_dist_name . '.zip';
+
+    $this->say('Publishing version: ' . $plugin_version);
+
+    // Sanity checks
+    if(!is_readable($plugin_dist_file)) {
+      $this->say("Failed to access " . $plugin_dist_file);
+      return;
+    } elseif(!file_exists($svn_dir . "/.svn/")) {
+      $this->say("$svn_dir/.svn/ dir not found, is it a SVN repository?");
+      return;
+    } elseif(file_exists($svn_dir . "/tags/" . $plugin_version)) {
+      $this->say("A SVN tag already exists: " . $plugin_version);
+      return;
+    }
+
+    $collection = $this->collectionBuilder();
+
+    // Clean up tmp dirs if the previous run was halted
+    if(file_exists("$svn_dir/trunk_new") || file_exists("$svn_dir/trunk_old")) {
+      $collection->taskFileSystemStack()
+        ->stopOnFail()
+        ->remove(array("$svn_dir/trunk_new", "$svn_dir/trunk_old"));
+    }
+
+    // Extract the distributable zip to tmp trunk dir
+    $collection->taskExtract($plugin_dist_file)
+      ->to("$svn_dir/trunk_new")
+      ->preserveTopDirectory(false);
+
+    // Rename current trunk
+    if(file_exists("$svn_dir/trunk")) {
+      $collection->taskFileSystemStack()
+        ->rename("$svn_dir/trunk", "$svn_dir/trunk_old");
+    }
+
+    // Replace old trunk with a new one
+    $collection->taskFileSystemStack()
+      ->stopOnFail()
+      ->rename("$svn_dir/trunk_new", "$svn_dir/trunk")
+      ->remove("$svn_dir/trunk_old");
+
+    // Add new repository assets
+    $collection->taskFileSystemStack()
+      ->mirror('./plugin_repository/assets', "$svn_dir/assets_new");
+
+    // Rename current assets folder
+    if(file_exists("$svn_dir/assets")) {
+      $collection->taskFileSystemStack()
+        ->rename("$svn_dir/assets", "$svn_dir/assets_old");
+    }
+
+    // Replace old assets with new ones
+    $collection->taskFileSystemStack()
+      ->stopOnFail()
+      ->rename("$svn_dir/assets_new", "$svn_dir/assets")
+      ->remove("$svn_dir/assets_old");
+
+    // Windows compatibility
+    $awkCmd = '{print " --force \""$2"\""}';
+    // Mac OS X compatibility
+    $xargsFlag = (stripos(PHP_OS, 'Darwin') !== false) ? '' : '-r';
+
+    $collection->taskExecStack()
+      ->stopOnFail()
+      // Set SVN repo as working directory
+      ->dir($svn_dir)
+      // Remove files from SVN repo that have already been removed locally
+      ->exec("svn st | grep ^! | awk '$awkCmd' | xargs $xargsFlag svn rm")
+      // Recursively add files to SVN that haven't been added yet
+      ->exec("svn add --force * --auto-props --parents --depth infinity -q")
+      // Tag the release
+      ->exec("svn cp trunk tags/$plugin_version");
+
+    $result = $collection->run();
+
+    if($result->wasSuccessful()) {
+      // Run or suggest release command depending on a flag
+      $release_cmd = "svn ci -m \"Release $plugin_version\"";
+      if(!empty($opts['force'])) {
+        $svn_login = getenv('WP_SVN_USERNAME');
+        $svn_password = getenv('WP_SVN_PASSWORD');
+        if ($svn_login && $svn_password) {
+          $release_cmd .= " --username $svn_login --password $svn_password";
+        } else {
+          $release_cmd .= ' --force-interactive';
+        }
+        $result = $this->taskExecStack()
+          ->stopOnFail()
+          ->dir($svn_dir)
+          ->exec($release_cmd)
+          ->run();
+      } else {
+        $this->yell(
+          "Go to '$svn_dir' and run '$release_cmd' to publish the release"
+        );
+      }
+    }
+
+    return $result;
+  }
+
+  public function publish($opts = ['force' => false]) {
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'pushpot'))
+      ->addCode(function () use ($opts) {
+        return $this->svnPublish($opts);
+      })
+      ->run();
   }
 
   protected function loadEnv() {
     $dotenv = new Dotenv\Dotenv(__DIR__);
     $dotenv->load();
   }
-}
+
+  protected function loadWPFunctions() {
+    $this->loadEnv();
+    define('ABSPATH', getenv('WP_TEST_PATH') . '/');
+    define('WPINC', 'wp-includes');
+    require_once(ABSPATH . WPINC . '/functions.php');
+    require_once(ABSPATH . WPINC . '/formatting.php');
+    require_once(ABSPATH . WPINC . '/plugin.php');
+    require_once(ABSPATH . 'wp-admin/includes/plugin.php');
+  }
+}

assets/css/src/admin.styl

@@ -9,6 +9,8 @@
 
 @require 'form_editor'
 @require 'listing'
+@require 'listing/newsletters'
+
 @require 'box'
 @require 'breadcrumb'
 

assets/css/src/box.styl

@@ -1,3 +1,15 @@
+$box-width = 425px
+$box-height = 150px
+$thumbnail-width = $box-height
+$thumbnail-height = $thumbnail-width
+$box-description-space-between-heading-and-paragraph = 5px
+$box-description-height = 110px
+$box-description-text-height = $box-description-height - $box-description-space-between-heading-and-paragraph
+$box-heading-line-height = $box-description-text-height / 4
+$box-heading-font-size = $box-heading-line-height * 5/7
+$box-description-line-height = $box-heading-line-height / 2
+$box-description-font-size = $box-description-line-height
+
 .mailpoet_boxes.mailpoet_boxes_loading
   opacity: 0.2
 
@@ -6,8 +18,8 @@
   position: relative
   padding: 15px
   margin: 15px 25px 0 0
-  width: 425px
-  height: 150px
+  width: $box-width
+  height: $box-height
   border: 1px solid #dedede
   background-color: #fff
 
@@ -18,22 +30,21 @@
   background-position: center
   color: #222
   border: 1px solid #ccc
-  width: 150px
-  height: 150px
+  width: $thumbnail-height
+  height: $thumbnail-width
   margin-right: 15px
   float: left
   overflow: hidden
   position: relative
 
   img
-    min-width: 150px
-    min-height: 150px
+    min-width: $thumbnail-width
     height: auto
     width: 110%
     position: relative
-    top: 0
+    top: 50%
     left: 50%
-    transform: translate(-50%, 0%)
+    transform: translate(-50%, -50%)
 
   .mailpoet_overlay
     position: absolute
@@ -61,16 +72,21 @@
 .mailpoet_boxes .mailpoet_description
   float:left
   width: 245px
-  max-height: calc(110px - 2em)
-  padding-bottom: 2em
+  max-height: $box-description-height
+  padding-bottom: 0
   overflow: hidden
 
-.mailpoet_boxes .mailpoet_description h3
-  margin: 0 0 1em 0
-  overflow: hidden
-  white-space: nowrap
-  text-overflow: ellipsis
-  max-width: 220px
+  h3
+    margin: 0 0 $box-description-space-between-heading-and-paragraph 0
+    overflow: hidden
+    max-width: 210px
+    line-height: $box-heading-line-height
+    font-size: $box-heading-font-size
+
+  p
+    font-size: $box-description-font-size
+    line-height: $box-description-line-height
+    margin: 0
 
 .mailpoet_boxes .mailpoet_actions
   position: absolute

assets/css/src/listing/newsletters.styl

@@ -0,0 +1,3 @@
+#newsletters_container
+  h2.nav-tab-wrapper
+    margin-bottom: 1rem

assets/css/src/newsletter_editor/components/blockTools.styl

@@ -1,6 +1,6 @@
-$tool-inactive-color = #bbbbbb
+$tool-inactive-color = #333333
 $tool-inactive-secondary-color = #ffffff
-$tool-hover-color = #333333
+$tool-hover-color = #bbbbbb
 $tool-hover-secondary-color = #ffffff
 $tool-active-color = #d2d2d4
 $tool-active-secondary-color = #ffffff
@@ -12,21 +12,42 @@ $master-column-tool-width = 24px
   position: absolute
   top: 0
   right: 0
-  display: none
   z-index: 20
   padding: 2px
   text-align: right
+  overflow: hidden
+
+  .mailpoet_tool_slider
+    position: relative
+    right: -100%
+    transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
+    opacity: 0
+
+  &.mailpoet_display_tools
+    .mailpoet_tool_slider
+      right: 0
+      opacity: 1
 
   a
     vertical-align: top
 
   .mailpoet_container_horizontal + &
     left: 100%
+    right: initial
     padding-left: 5px
 
+    .mailpoet_tool_slider
+      left: -100%
+      right: initial
+
+    &.mailpoet_display_tools
+      .mailpoet_tool_slider
+        left: 0
+
     .mailpoet_tool
       width: $master-column-tool-width
       height: $master-column-tool-width
+      display: block
 
       .mailpoet_tool_icon
         width: $master-column-tool-width
@@ -46,6 +67,7 @@ $master-column-tool-width = 24px
       opacity: 0
       overflow: hidden
       display: block
+      margin: 0
 
     .mailpoet_delete_block_activated
       width: auto
@@ -125,7 +147,6 @@ $master-column-tool-width = 24px
   border-radius(3px)
   background-color: $warning-background-color
   padding: 3px 5px
-  line-height: 1.2em
 
   .mailpoet_delete_block_activate
     overflow: hidden

assets/css/src/newsletter_editor/components/forms.styl

@@ -4,7 +4,6 @@
 
 .mailpoet_form_field_title
   clear: both
-  font-size: 1.1em
   margin-bottom: 5px
 
 .mailpoet_form_field_title_small

assets/css/src/newsletter_editor/components/heading.styl

@@ -4,7 +4,7 @@
 
 .mailpoet_input_title,
 .mailpoet_input_preheader
-  width: 400px
+  width: 500px
   padding: 3px
   line-height: normal
 

assets/css/src/newsletter_editor/components/sidebar.styl

@@ -17,6 +17,7 @@ $widget-icon-width = 30px
   border-left: $content-border-color
   border-bottom: $content-border-color
   color: $sidebar-text-color
+  font-size: $sidebar-text-size
 
   .mailpoet_sidebar_region
     margin-bottom: 0

assets/css/src/newsletter_editor/components/sidepanel.styl

@@ -3,6 +3,7 @@ $sidepanel-active-heading-color = $primary-active-color
 /* Sidepanel */
 .mailpoet_editor_settings
   color: $sidebar-text-color
+  font-size: $sidebar-text-size
 
   p
     font-size: 1em
@@ -18,7 +19,6 @@ $sidepanel-active-heading-color = $primary-active-color
 
 .mailpoet_sidepanel_field_title
   clear: both
-  font-size: 1.1em
   margin-bottom: 5px
 
 .mailpoet_sidepanel_field_title_small

assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl

@@ -9,12 +9,13 @@
   background: rgba(255, 255, 255, 0)
   transition: background .15s ease-out
 
-  &:hover
+  .mailpoet_automated_latest_content_block:hover &
     background: rgba(255, 255, 255, 0.7)
     cursor: pointer
 
 .mailpoet_automated_latest_content_block_posts
   overflow: auto
+  pointer-events: none
 
   & > .mailpoet_block
     width: 100%

assets/css/src/newsletter_editor/contentBlocks/base.styl

@@ -23,6 +23,7 @@ $block-text-line-height = $text-line-height
     border: 1px solid $transparent-color
 
   &:hover > .mailpoet_block_highlight
+  &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
 
 
@@ -33,7 +34,7 @@ $block-text-line-height = $text-line-height
   position: relative
   line-height: $block-text-line-height
 
-  p, h1, h2, h3, h4, h5, h6
+  h1, h2, h3, h4, h5, h6
     line-height: $block-text-line-height
     padding: 0
     margin: 0
@@ -43,9 +44,15 @@ $block-text-line-height = $text-line-height
   h1, h2, h3, h4, h5, h6
     margin-bottom: 0.3em
 
-  p
+  p:not(.mailpoet_wp_post)
     margin-top: 0
     margin-bottom: 0
+    padding: 0
+    margin: 0
+
+  p
+    line-height: $block-text-line-height
+    font-style: normal
     font-weight: normal
 
   ul

assets/css/src/newsletter_editor/contentBlocks/container.styl

@@ -17,7 +17,7 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
   padding-left: 0
   padding-right: 0
 
-  &:hover
+  &:hover > .mailpoet_block_highlight
     border: 0
 
 .mailpoet_container_vertical > *

assets/css/src/newsletter_editor/contentBlocks/social.styl

@@ -5,8 +5,8 @@ $active-social-icon-set-border-color = #adadad
 $active-social-icon-set-background-color = #daebf2
 $social-icon-set-hover-border-color = $primary-active-color
 
-$tool-inactive-color = #bbbbbb
-$tool-hover-color = #333333
+$tool-inactive-color = #333333
+$tool-hover-color = #bbbbbb
 $tool-active-color = #d2d2d4
 
 $tool-width = 16px

assets/css/src/newsletter_editor/libraryOverrides.styl

@@ -31,7 +31,7 @@ div.mce-toolbar-grp.mce-container
   box-shadow(0px 0px 3px 1px rgba(0, 0, 0, 0.05))
 
 .mce-window
-  /* Fix TinyMCE mailpoet_custom_fields window lack of hiding overflow */
+  /* Fix TinyMCE mailpoet_shortcodes window lack of hiding overflow */
   div.mce-container-body.mce-abs-layout
     overflow: hidden
 
@@ -40,8 +40,8 @@ div.mce-toolbar-grp.mce-container
     width: -webkit-calc( 100% - 36px )
     width: calc( 100% - 36px )
 
-/* TinyMCE mailpoet_custom_fields toolbar icon */
-.mce-i-mailpoet_custom_fields:before
+/* TinyMCE mailpoet_shortcodes toolbar icon */
+.mce-i-mailpoet_shortcodes:before
   font: 400 20px/1 dashicons!important
   content: "\f307"
 
@@ -84,7 +84,7 @@ position: relative
 body
   overflow-x: auto
 
-/* Hide the "Details" section of Wordpress Media manager */
+/* Hide the "Details" section of WordPress Media manager */
 .media-sidebar
   display: none
 
@@ -98,7 +98,7 @@ body
   .attachments-browser .uploader-inline
     right: 0
 
-/* Remove max width from date selector in Wordpress Media Manager */
+/* Remove max width from date selector in WordPress Media Manager */
 #media-attachment-date-filters
   max-width: calc(100% - 12px)
 
@@ -131,6 +131,7 @@ body
   display: none
 
 .wrap > .mailpoet_notice,
+.notice
 .update-nag
   margin-left: 2px + 15px !important
 

assets/css/src/newsletter_editor/mixins/transitions.styl

@@ -1,12 +1,12 @@
-animation-slide-open-downwards()
+animation-slide-open-downwards($max-height = 2000px)
   transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
-  max-height: 2000px
+  max-height: $max-height
   opacity: 1
+  overflow-y: hidden
 
   &.mailpoet_closed
-    max-height: 0
+    max-height: 0px
     opacity: 0
-    overflow-y: hidden
 
 animation-background-color()
   transition: background 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */

assets/css/src/newsletter_editor/variables.styl

@@ -26,3 +26,4 @@ $error-text-color = #d54e21
 $newsletter-width = 660px
 
 $text-line-height = 1.6em
+$sidebar-text-size = 13px

assets/css/src/parsley.styl

@@ -18,6 +18,7 @@ textarea.parsley-error
   list-style-type none
   font-size 0.9em
   line-height 0.9em
+  color #B94A48
   opacity 0
   transition all .3s ease-in
   -o-transition all .3s ease-in

assets/css/src/settings.styl

@@ -1,14 +1,10 @@
 #mailpoet_settings
   // common
   .mailpoet_panel
-    display: none
+    display none
 
   .form-table th
-    width:20em
-
-  // advanced
-  #mailpoet_role_permissions
-    margin-top: 20px;
+    width 20em
 
   // sending methods
   .mailpoet_sending_methods
@@ -19,7 +15,7 @@
       padding 15px 15px 0 15px
       margin 0 25px 25px 0
       width 300px
-      height 250px
+      height 300px
       border 1px solid #dedede
       background-color #fff
     h3
@@ -28,8 +24,7 @@
       line-height 54px
       font-size 1.5em
     .mailpoet_description
-      line-height 1.5em
-      font-size 1.1em
+      font-size 14px
     .mailpoet_status
       background-color #2f2f2f
       color #fff
@@ -60,11 +55,11 @@
   // responsive
   @media screen and (max-width: 782px)
     .form-table th
-      width: auto
+      width auto
 
     .mailpoet_sending_methods
       li
         float none
-        width: auto
-        margin-right: 0
+        width auto
+        margin-right 0