Bump up release version to 3.0.0-beta.37.0.0

Prevents sending emails when rendered newsletter is broken [MAILPOET-1020]

.circleci/apache/mailpoet.loc.conf

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

.circleci/config.yml

@@ -0,0 +1,94 @@
+version: 2
+jobs:
+  qa_js_php5:
+    working_directory: /home/circleci/mailpoet
+    docker:
+      - image: circleci/php:5.6.30-apache-browsers
+      - image: circleci/mysql:5.7
+    environment:
+      TZ: /usr/share/zoneinfo/Etc/UTC
+    steps:
+      - checkout
+      - run:
+          name: "Set up virtual host"
+          command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
+      - restore_cache:
+          key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+      - restore_cache:
+          key: npm-{{ checksum "package.json" }}
+      - run:
+          name: "Set up test environment"
+          command: source ./.circleci/setup.bash && setup php5
+      - save_cache:
+          key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+          paths:
+            - vendor
+      - save_cache:
+          key: npm-{{ checksum "package.json" }}
+          paths:
+            - node_modules
+      - run:
+          name: "QA Scripts"
+          command: ./do qa
+      - run:
+          name: "Preparing test results folder"
+          command: mkdir test-results
+      - run:
+          name: "JS tests"
+          command: |
+            mkdir test-results/mocha
+            ./do t:j test-results/mocha/junit.xml
+      - run:
+          name: "PHP Unit tests"
+          command: |
+            WP_TEST_PATH="/home/circleci/mailpoet/wordpress" ./do t:u --xml
+      - store_test_results:
+          path: test-results/mocha
+      - store_artifacts:
+          path: test-results/mocha
+          destination: mocha
+      - store_test_results:
+          path: tests/_output
+      - store_artifacts:
+          path: tests/_output
+          destination: codeception
+      - store_artifacts:
+          path: /tmp/fake-mailer/
+          destination: fake-mailer
+  php7:
+    working_directory: /home/circleci/mailpoet
+    docker:
+      - image: circleci/php:7.1-apache-browsers
+      - image: circleci/mysql:5.7
+    environment:
+      TZ: /usr/share/zoneinfo/Etc/UTC
+    steps:
+      - checkout
+      - run:
+          name: "Set up virtual host"
+          command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
+      - restore_cache:
+          key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+      - restore_cache:
+          key: npm-{{ checksum "package.json" }}
+      - run:
+          name: "Set up test environment"
+          command: source ./.circleci/setup.bash && setup php7
+      - run:
+          name: "PHP Unit tests"
+          command: |
+            WP_TEST_PATH="/home/circleci/mailpoet/wordpress" ./do t:u --xml
+      - store_test_results:
+          path: tests/_output
+      - store_artifacts:
+          path: tests/_output
+          destination: codeception
+      - store_artifacts:
+          path: /tmp/fake-mailer/
+          destination: fake-mailer
+workflows:
+  version: 2
+  build_and_test:
+    jobs:
+      - qa_js_php5
+      - php7

.circleci/fake-sendmail.php

@@ -0,0 +1,17 @@
+#!/usr/local/bin/php
+<?php
+$path = "/tmp/fake-mailer";
+if(!file_exists($path)) {
+  mkdir($path);
+}
+$filename = $path . '/mailpoet-' . microtime(true) . '.txt';
+$file_handle = fopen($filename, "w");
+
+$call_arguments = print_r($argv, true) . "\n";
+fwrite($file_handle, $call_arguments);
+
+while($line = fgets(STDIN)) {
+  fwrite($file_handle, $line);
+}
+
+fclose($file_handle);

.circleci/mailpoet_php.ini

@@ -0,0 +1,9 @@
+; For Unix only.  You may supply arguments as well (default: "sendmail -t -i").
+; http://php.net/sendmail-path
+sendmail_path = /usr/local/bin/fake-sendmail.php
+
+[Date]
+; Defines the default timezone used by the date functions
+; http://php.net/date.timezone
+date.timezone = UTC
+

.circleci/setup.bash

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+
+function setup {
+	local version=$1
+	# install PHP dependencies for WordPress
+	if [[ $version == "php7" ]]; then
+		echo "deb http://packages.dotdeb.org jessie all" | sudo tee -a /etc/apt/sources.list.d/dotdeb.list
+		echo "deb-src http://packages.dotdeb.org jessie all" | sudo tee -a /etc/apt/sources.list.d/dotdeb.list
+		wget -qO - http://www.dotdeb.org/dotdeb.gpg | sudo apt-key add -
+		sudo apt-get update
+		sudo apt-get install mysql-client php7.0-mysql zlib1g-dev
+		sudo docker-php-ext-install mysqli pdo pdo_mysql zip
+	else
+		sudo apt-get update
+		sudo apt-get install mysql-client php5-mysql zlib1g-dev
+		sudo docker-php-ext-install mysql mysqli pdo pdo_mysql zip
+	fi
+	# Add a fake sendmail mailer
+	sudo cp ./.circleci/fake-sendmail.php /usr/local/bin/
+	# configure Apache
+	sudo cp ./.circleci/mailpoet_php.ini /usr/local/etc/php/conf.d/
+	sudo cp ./.circleci/apache/mailpoet.loc.conf /etc/apache2/sites-available
+	sudo a2ensite mailpoet.loc
+	sudo a2enmod rewrite
+	sudo service apache2 restart
+	# Install NodeJS+NPM
+	curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
+	sudo apt-get install nodejs build-essential
+	# install plugin dependencies
+	curl -sS https://getcomposer.org/installer | php
+	./composer.phar install
+	./do install
+	# Set up Wordpress
+	mysql -h 127.0.0.1 -u root -e "create database wordpress"
+	curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
+	chmod +x wp-cli.phar
+	./wp-cli.phar core download --allow-root --path=wordpress
+	# Generate `wp-config.php` file with debugging enabled
+	echo "define(\"WP_DEBUG\", true);" | ./wp-cli.phar core config --allow-root --dbname=wordpress --dbuser=root --dbhost=127.0.0.1 --path=wordpress --extra-php
+	# Install WordPress
+	./wp-cli.phar core install --allow-root --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc:8080 --title=WordPress --path=wordpress
+	# Softlink plugin to plugin path
+	ln -s ../../.. wordpress/wp-content/plugins/mailpoet
+	./wp-cli.phar plugin activate mailpoet --path=wordpress
+	# Create .env file with correct path to WP installation
+	# TODO: Remove this line after PR gets merged and CircleCI env variables change
+	echo "WP_TEST_PATH=\"/home/circleci/mailpoet/wordpress\"" > .env
+}

.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=""

.eslintignore

@@ -0,0 +1,3 @@
+**/vendor/**
+**/testBundles/**
+assets/js/src/newsletter_editor/tinymce/wplink/plugin.js

.eslintrc.es5.json

@@ -0,0 +1,100 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "amd": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 5
+  },
+  "rules": {
+    "import/no-amd": 0,
+
+
+
+
+
+    "comma-dangle": 0,
+    "space-before-function-paren": 0,
+    "prefer-arrow-callback": 0,
+    "no-undef": 0,
+    "key-spacing": 0,
+    "radix": 0,
+    "no-alert": 0,
+    "block-scoped-var": 0,
+    "guard-for-in": 0,
+    "no-prototype-builtins": 0,
+    "no-restricted-syntax": 0,
+    "newline-per-chained-call": 0,
+    "no-useless-concat": 0,
+    "no-multi-spaces": 0,
+    "no-nested-ternary": 0,
+    "semi-spacing": 0,
+    "no-sequences": 0,
+    "no-useless-return": 0,
+    "array-callback-return": 0,
+    "new-cap": 0,
+    "no-return-assign": 0,
+    "no-continue": 0,
+    "no-new": 0,
+    "no-cond-assign": 0,
+    "space-unary-ops": 0,
+    "no-redeclare": 0,
+    "no-console": 0,
+    "no-empty": 0,
+    "no-extra-semi": 0,
+    "no-useless-escape": 0,
+    "comma-spacing": 0,
+    "wrap-iife": 0,
+    "no-unused-expressions": 0,
+    "block-spacing": 0,
+    "computed-property-spacing": 0,
+    "no-plusplus": 0,
+    "array-bracket-spacing": 0,
+    "lines-around-directive": 0,
+    "no-unreachable": 0,
+    "default-case": 0,
+    "no-lonely-if": 0,
+    "space-before-blocks": 0,
+    "no-unneeded-ternary": 0,
+    "no-mixed-operators": 0,
+    "eqeqeq": 0,
+    "space-in-parens": 0,
+    "semi": 0,
+    "max-len": 0,
+    "no-multi-assign": 0,
+    "no-trailing-spaces": 0,
+    "global-require": 0,
+    "no-throw-literal": 0,
+    "no-extra-bind": 0,
+    "one-var-declaration-per-line": 0,
+    "consistent-return": 0,
+    "no-shadow": 0,
+    "no-underscore-dangle": 0,
+    "brace-style": 0,
+    "no-else-return": 0,
+    "no-use-before-define": 0,
+    "one-var": 0,
+    "camelcase": 0,
+    "spaced-comment": 0,
+    "quotes": 0,
+    "padded-blocks": 0,
+    "object-curly-spacing": 0,
+    "strict": 0,
+    "vars-on-top": 0,
+    "no-var": 0,
+    "space-infix-ops": 0,
+    "no-unused-vars": 0,
+    "object-shorthand": 0,
+    "new-parens": 0,
+    "no-param-reassign": 0,
+    "keyword-spacing": 0,
+    "eol-last": 0,
+    "dot-notation": 0,
+    "linebreak-style": 0,
+    "indent": 0,
+    "quote-props": 0,
+    "prefer-template": 0,
+    "func-names": 0
+  }
+}

.eslintrc.es6.json

@@ -0,0 +1,96 @@
+{
+  "extends": "airbnb",
+  "env": {
+    "amd": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "import/no-amd": 0,
+
+
+    "react/no-multi-comp": 0,
+    "react/sort-comp": 0,
+    "react/jsx-max-props-per-line": 0,
+    "react/prop-types": 0,
+    "react/jsx-first-prop-new-line": 0,
+    "react/jsx-indent-props": 0,
+    "react/no-is-mounted": 0,
+    "react/jsx-no-target-blank": 0,
+    "react/no-render-return-value": 0,
+    "react/jsx-boolean-value": 0,
+    "react/jsx-indent": 0,
+    "react/jsx-no-bind": 0,
+    "react/no-array-index-key": 0,
+    "react/self-closing-comp": 0,
+    "react/jsx-tag-spacing": 0,
+    "react/jsx-closing-bracket-location": 0,
+    "react/no-string-refs": 0,
+    "react/jsx-curly-spacing": 0,
+    "react/no-did-mount-set-state": 0,
+    "react/prefer-stateless-function": 0,
+
+    "jsx-a11y/label-has-for": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/alt-text": 0,
+
+    "comma-dangle": 0,
+    "func-names": 0,
+    "object-shorthand": 0,
+    "no-bitwise": 0,
+    "arrow-body-style": 0,
+    "prefer-template": 0,
+    "keyword-spacing": 0,
+    "default-case": 0,
+    "quote-props": 0,
+    "array-callback-return": 0,
+    "consistent-return": 0,
+    "no-unreachable": 0,
+    "no-extra-semi": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": 0,
+    "import/no-extraneous-dependencies": 0,
+    "camelcase": 0,
+    "template-curly-spacing": 0,
+    "quotes": 0,
+    "eqeqeq": 0,
+    "no-lonely-if": 0,
+    "space-unary-ops": 0,
+    "block-scoped-var": 0,
+    "no-extra-bind": 0,
+    "no-multi-spaces": 0,
+    "class-methods-use-this": 0,
+    "key-spacing": 0,
+    "no-multiple-empty-lines": 0,
+    "space-in-parens": 0,
+    "no-case-declarations": 0,
+    "array-bracket-spacing": 0,
+    "newline-per-chained-call": 0,
+    "no-else-return": 0,
+    "max-len": 0,
+    "comma-spacing": 0,
+    "no-useless-concat": 0,
+    "no-unused-expressions": 0,
+    "no-sequences": 0,
+    "no-extra-boolean-cast": 0,
+    "dot-notation": 0,
+    "no-param-reassign": 0,
+    "no-shadow": 0,
+    "one-var": 0,
+    "no-alert": 0,
+    "one-var-declaration-per-line": 0,
+    "no-script-url": 0,
+    "wrap-iife": 0,
+    "vars-on-top": 0,
+    "space-infix-ops": 0,
+    "no-irregular-whitespace": 0,
+    "padded-blocks": 0,
+    "no-underscore-dangle": 0,
+    "no-undef": 0
+  }
+}

.eslintrc.tests.json

@@ -0,0 +1,47 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "amd": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "rules": {
+    "import/no-amd": 0,
+
+
+
+    "no-undef": 0,
+    "one-var": 0,
+    "indent": 0,
+    "linebreak-style": 0,
+    "no-whitespace-before-property": 0,
+    "object-property-newline": 0,
+    "global-require": 0,
+    "semi": 0,
+    "keyword-spacing": 0,
+    "no-bitwise": 0,
+    "no-multi-assign": 0,
+    "newline-per-chained-call": 0,
+    "no-spaced-func": 0,
+    "func-call-spacing": 0,
+    "max-len": 0,
+    "space-unary-ops": 0,
+    "quotes": 0,
+    "no-unused-vars": 0,
+    "no-unused-expressions": 0,
+    "no-underscore-dangle": 0,
+    "quote-props": 0,
+    "no-shadow": 0,
+    "padded-blocks": 0,
+    "comma-dangle": 0,
+    "vars-on-top": 0,
+    "space-before-blocks": 0,
+    "object-curly-spacing": 0,
+    "no-param-reassign": 0,
+    "one-var-declaration-per-line": 0,
+    "func-names": 0,
+    "space-before-function-paren": 0
+  }
+}

.gitignore

@@ -1,19 +1,24 @@
-.DS_Store
-TODO
-composer.phar
-/vendor
-tests/_output/*
-tests/acceptance.suite.yml
-tests/_support/_generated/*
-node_modules
-.env
-npm-debug.log
-!tasks/**
-/views/cache/**
-temp
-.idea
-wysija-newsletters.zip
-tests/javascript/testBundles
-assets/css/*.css
-assets/js/*.js
-.vagrant
+.DS_Store
+TODO
+composer.phar
+/vendor
+tests/_output/*
+tests/acceptance.suite.yml
+tests/_support/_generated/*
+node_modules
+.env
+npm-debug.log
+!tasks/**
+/views/cache/**
+temp
+.idea
+mailpoet.zip
+tests/javascript/testBundles
+assets/css/*.css
+assets/css/*.json
+assets/js/*.js
+assets/js/*.json
+.vagrant
+lang
+.mp_svn
+/nbproject/

.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 = 75

CONTRIBUTING.md

@@ -5,30 +5,32 @@
 - CamelCase for classes.
 - camelCase for methods.
 - snake_case for variables and class properties.
-- Max line length at 80 chars.
-- Classes can be no longer than 100 LOC.
-- Methods can be no longer than 5 LOC.
-- Pass no more than 4 parameters/hash keys into a method.
 - Composition over Inheritance.
-- Comments are a code smell.
-- Routes can instantiate only one object.
+- Comments are a code smell. If you need to use a comment - see if same idea can be achieved by more clearly expressing code.
 - Require other classes with 'use' at the beginning of the class file.
 - Do not specify 'public' if method is public, it's implicit.
 - Always use guard clauses.
+- Ensure compatibility with PHP 5.3 and newer versions.
+- Cover your code in tests.
+
+Recommendations:
+- Max line length at 80 chars.
+- Keep classes under 100 LOC.
+- Keep methods under 10 LOC.
+- Pass no more than 4 parameters/hash keys into a method.
+- Keep Pull Requests small, under 100 LOC changed.
 
 ## Git flow.
 - Do not commit to master.
 - Open a short-living feature branch.
 - Open a pull request.
-- Add close #issue in pull request description.
+- Add Jira issue reference in the title of the Pull Request.
 - Work on the pull request.
-- Wait for confirmation before merging to master.
-- No one will accept a pull request that doesn't have 100% test coverage.
+- Wait for review and confirmation from another developer before merging to master.
 - Commit title no more than 80 chars, empty line after.
 - Commit description as long as you want, 80 chars wrap.
-- Keep the GitHub open issues count at less than 10.
 
 ## Issues creation.
+- Issues are managed on Jira.
 - Discuss issues on public Slack chats, discuss code in pull requests.
-- Organize features on Trello.
-- Open a small github issue only when it has been discussed.
+- Open a small Jira issue only when it has been discussed.

README.md

@@ -46,11 +46,26 @@ $ ./do compile:all
 $ ./do test:unit
 ```
 
+- JS tests (using Mocha):
+```sh
+$ ./do test:javascript
+```
+
 - Debug tests:
 ```sh
 $ ./do test:debug
 ```
 
+- Code linters and quality checkers:
+```sh
+$ ./do qa
+```
+
+- Javascript linter:
+```sh
+$ ./do lint:javascript
+```
+
 # CSS
 - [Stylus](https://learnboost.github.io/stylus/)
 - [Nib extension](http://tj.github.io/nib/)
@@ -109,6 +124,7 @@ Once javascript is compiled with `./do compile:javascript`, your module will be
 ```php
 __()
 _n()
+_x()
 ```
 
 ```html
@@ -128,3 +144,39 @@ _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
+
+Run 'svn copy ...' to tag 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

@@ -1,16 +1,22 @@
 <?php
 
 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()) {
@@ -60,16 +66,28 @@ class RoboFile extends \Robo\Tasks {
     $this->_exec('./node_modules/webpack/bin/webpack.js --watch');
   }
 
-  function compileAll() {
-    $this->compileJs();
-    $this->compileCss();
+  function compileAll($opts = ['env' => null]) {
+    $collection = $this->collectionBuilder();
+    $collection->addCode(function() use ($opts) {
+      return call_user_func(array($this, 'compileJs'), $opts);
+    });
+    $collection->addCode(function() use ($opts) {
+      return call_user_func(array($this, 'compileCss'), $opts);
+    });
+    return $collection->run();
   }
 
-  function compileJs() {
-    $this->_exec('./node_modules/webpack/bin/webpack.js');
+  function compileJs($opts = ['env' => null]) {
+    $env = ($opts['env']) ?
+      sprintf('./node_modules/cross-env/dist/bin/cross-env.js NODE_ENV="%s"', $opts['env']) :
+      null;
+    return $this->_exec($env . ' ./node_modules/webpack/bin/webpack.js --bail');
   }
 
-  function compileCss() {
+  function compileCss($opts = ['env' => null]) {
+    // Clean up folder from previous files
+    array_map('unlink', glob("assets/css/*.*"));
+
     $css_files = array(
       'assets/css/src/admin.styl',
       'assets/css/src/newsletter_editor/newsletter_editor.styl',
@@ -78,7 +96,7 @@ class RoboFile extends \Robo\Tasks {
       'assets/css/src/importExport.styl'
     );
 
-    $this->_exec(join(' ', array(
+    $compilation_result = $this->_exec(join(' ', array(
       './node_modules/stylus/bin/stylus',
       '--include ./node_modules',
       '--include-css',
@@ -86,63 +104,313 @@ class RoboFile extends \Robo\Tasks {
       join(' ', $css_files),
       '-o assets/css/'
     )));
+
+    // Create manifest file
+    $manifest = [];
+    foreach(glob('assets/css/*.css') as $style) {
+      // Hash and rename styles if production environment
+      if($opts['env'] === 'production') {
+        $hashed_style = sprintf(
+          '%s.%s.css',
+          pathinfo($style)['filename'],
+          substr(md5_file($style), 0, 8)
+        );
+        $manifest[basename($style)] = $hashed_style;
+        rename($style, str_replace(basename($style), $hashed_style, $style));
+      } else {
+        $manifest[basename($style)] = basename($style);
+      }
+    }
+    file_put_contents('assets/css/manifest.json', json_encode($manifest, JSON_PRETTY_PRINT));
+    return $compilation_result;
   }
 
   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');
+    });
+    $collection->addCode(array($this, 'qaLintJavascript'));
+    return $collection->run();
+  }
+
+  function qaLint() {
+    return $this->_exec('./tasks/php_lint.sh lib/ tests/ mailpoet.php');
+  }
+
+  function qaLintJavascript() {
+    return $this->_exec('npm run lint');
+  }
+
+  function qaCodeSniffer($severity='errors') {
+    if ($severity === 'all') {
+      $severityFlag = '-w';
+    } else {
+      $severityFlag = '-n';
+    }
+    return $this->collectionBuilder()
+      ->taskExec(
+        './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
+      )
+      ->taskExec(
+        './vendor/bin/phpcs '.
+        '--standard=./tasks/code_sniffer/MailPoetTests '.
+        '--ignore=./tests/unit/_bootstrap.php '.
+        'tests/unit/ '.
+        $severityFlag
+      )
+      ->run();
+  }
+
+  function svnCheckout() {
+    $svn_dir = ".mp_svn";
+
+    $collection = $this->collectionBuilder();
+
+    // Clean up the SVN dir for faster shallow checkout
+    if(file_exists($svn_dir)) {
+      $collection->taskExecStack()
+        ->exec('rm -rf ' . $svn_dir);
+    }
+
+    $collection->taskFileSystemStack()
+        ->mkdir($svn_dir);
+
+    return $collection->taskExecStack()
+      ->stopOnFail()
+      ->dir($svn_dir)
+      ->exec('svn co https://plugins.svn.wordpress.org/mailpoet/ -N .')
+      ->exec('svn up trunk')
+      ->exec('svn up assets')
+      ->run();
+  }
+
+  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");
+
+    $result = $collection->run();
+
+    if($result->wasSuccessful()) {
+      // Run or suggest release command depending on a flag
+      $repo_url = "https://plugins.svn.wordpress.org/$plugin_dist_name";
+      $release_cmd = "svn ci -m \"Release $plugin_version\"";
+      $tag_cmd = "svn copy $repo_url/trunk $repo_url/tags/$plugin_version -m \"Tag $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)
+          ->exec($tag_cmd)
+          ->run();
+      } else {
+        $this->yell(
+          "Go to '$svn_dir' and run '$release_cmd' to publish the release"
+        );
+        $this->yell(
+          "Run '$tag_cmd' to tag 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

@@ -22,3 +22,8 @@
 @require 'progress_bar'
 
 @require 'subscribers'
+
+@require 'pages'
+@require 'pages_custom'
+
+@require 'mp2migrator'

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/common.styl

@@ -17,6 +17,13 @@ a:focus
 .mailpoet_hidden
   display: none
 
+// add margins to a div
+.mailpoet_spaced_block
+  margin: 1em 0
+
+.mailpoet_centered
+  text-align: center
+
 // select 2
 .select2-container
   width: 25em !important

assets/css/src/listing/newsletters.styl

@@ -1,3 +1,53 @@
+$excellent-badge-color = #2993ab
+$good-badge-color = #f0b849
+$bad-badge-color = #d54e21
+$green-badge-color = #55bd56
+
 #newsletters_container
   h2.nav-tab-wrapper
-    margin-bottom: 1rem
+    margin-bottom: 1rem
+
+.mailpoet_stats_text
+  font-size: 14px
+  font-weight: 600;
+
+.mailpoet_stat
+
+  &_excellent
+    color: $excellent-badge-color
+
+  &_good
+    color: $good-badge-color
+
+  &_bad
+    color: $bad-badge-color
+
+  &_hidden
+    display: none
+
+  &_link_small
+    text-decoration: underline !important
+    font-size: 0.75rem
+
+.mailpoet_badge
+  padding: 4px 6px 3px 6px
+  color: #FFFFFF
+  margin-right: 4px
+  text-transform: uppercase
+  font-size: 0.5625rem
+  font-weight: 500
+  border-radius: 3px
+  letter-spacing: 1px
+  vertical-align: middle
+
+  &_excellent
+    background: $excellent-badge-color
+
+  &_good
+    background: $good-badge-color
+
+  &_bad
+    background: $bad-badge-color
+
+  &_green
+    background: $green-badge-color

assets/css/src/mp2migrator.styl

@@ -0,0 +1,33 @@
+#logger
+  width: 100%
+  height: 300px
+  background-color: transparent
+  border: 0
+  border-top: 1px #aba9a9 solid
+  padding: 2px
+  overflow: scroll
+  resize: both
+  font-size: 0.85em
+  margin-top: 20px
+
+#progressbar
+  width: 50%
+  background-color: #d8d8d8
+  border-radius: 5px
+
+progressbar_color = #fecf23
+progressbar_gradient_to_color = #fd9215
+
+.ui-progressbar .ui-progressbar-value
+  height: 100%
+  background-color: progressbar_color
+  background-image: linear-gradient(to bottom, progressbar_color, progressbar_gradient_to_color)
+  border-radius: 3px
+  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset
+  border 0
+
+.mailpoet_progress_label
+  font-size: 15px
+
+.error_msg
+  color: #f00

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

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

@@ -62,3 +62,9 @@ $draggable-widget-z-index = 2
   background-color: $primary-active-color
   box-shadow(inset 1px 2px 1px $primary-inset-shadow-color)
   color: $white-color
+
+.mailpoet_droppable_block
+  cursor: move
+
+  &.mailpoet_ignore_drag
+    cursor: auto

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/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

@@ -34,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
@@ -44,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/posts.styl

@@ -18,6 +18,7 @@
 .mailpoet_settings_posts_display_options
 .mailpoet_settings_posts_selection
   animation-slide-open-downwards()
+  overflow-x: hidden
 
 .mailpoet_settings_posts_show_display_options,
 .mailpoet_settings_posts_show_post_selection
@@ -26,7 +27,12 @@
 
 .mailpoet_post_selection_container
   margin-top: 20px
-  margin-bottom: 20px
+  margin-bottom: 0
+
+.mailpoet_post_scroll_container
+  overflow-y: scroll
+  overflow-x: hidden
+  max-height: 400px
 
 .mailpoet_settings_posts_single_post
   border-radius(1px)
@@ -45,3 +51,6 @@
   .mailpoet_select_post_checkbox
     margin-left: 10px
     margin-right: 8px
+
+.mailpoet_post_selection_loading
+  color: #999

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

@@ -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/pages.styl

@@ -0,0 +1,228 @@
+/*
+Based on /wp-admin/css/about.css of WP 4.7.
+This is to make MailPoet pages independent of the WordPress
+About page styles that may differ across WP versions.
+Please add custom styles to pages_custom.styl
+*/
+
+.mailpoet-about-wrap
+  position: relative
+  margin: 25px 40px 0 20px
+  max-width: 1050px /* readability */
+  font-size: 15px
+
+  div.updated, div.error, .notice
+    display: none !important
+
+  hr
+    border: 0
+    height: 0
+    margin: 0
+    border-top: 1px solid rgba(0, 0, 0, 0.1)
+
+  img
+    margin: 0
+    max-width: 100%
+    height: auto
+    vertical-align: middle
+
+  .mailpoet-logo
+    position: absolute
+    top: .2em
+    right: 0;
+
+  .nav-tab
+    padding-right: 15px
+    padding-left: 15px
+    font-size: 18px
+
+  p
+    line-height: 1.5
+    font-size: 14px
+
+  .feature-section p
+    max-width: 55em
+    margin-left: auto
+    margin-right: auto
+
+  h1
+    margin: 0.2em 200px 0 0
+    padding: 0
+    color: #32373c
+    line-height: 1.2em
+    font-size: 2.8em
+    font-weight: 400
+
+  h2
+    margin: 40px 0 .6em
+    font-size: 2.7em
+    line-height: 1.3
+    font-weight: 300
+    text-align: center
+
+  h3
+    margin: 1.25em 0 .6em
+    font-size: 1.4em
+    line-height: 1.5
+
+  h4
+    color: #23282d
+
+  .about-description
+  .about-text
+    margin-top: 1.4em
+    font-weight: 400
+    line-height: 1.6em
+    font-size: 19px
+
+  .about-text
+    margin: 1em 200px 1em 0
+    min-height: 60px
+    color: #555d66
+
+  [class$=col]
+    .col
+      float: left
+      position: relative
+
+  .two-col
+    .col
+      margin-right: 4.799999999%
+      width: 47.6%
+
+  .two-col
+    img
+      margin-bottom: 1.5em
+
+  .feature-section
+    &.two-col
+      .col
+        display: inline-block
+        float: none
+        margin-top: 1em
+        margin-right: 4.799999999%
+        width: calc( 47.6% - 4px )
+        vertical-align: top
+
+  .three-col
+    .col
+      margin-right: 4.999999999%
+      width: 29.95%
+
+  .two-col .col:nth-of-type(2n)
+  .three-col .col:nth-of-type(3n)
+    margin-right: 0
+
+  .feature-section
+    &.two-col
+      h3
+        margin-top: 0
+
+  .feature-section
+    h4
+      margin: 1.4em 0 0.6em 0
+      font-size: 1em
+
+  .feature-section
+    p
+      margin-top: 0.6em
+
+  .lead-description
+    font-size: 1.5em
+    text-align: center
+
+  .two-col-text
+    column-count: 2
+    column-gap: 40px
+
+  .two-col-text
+    p:first-of-type
+      margin-top: 0
+
+  .headline-feature
+    &.feature-video
+      position: relative
+      margin: 40px 0
+      padding-bottom: 56.25%
+      width: 100%
+      max-width: 100%
+      height: 0
+      text-align: center
+
+  .feature-video
+    embed
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+
+  .featured-image
+    text-align: center
+
+  .feature-section
+    overflow: hidden
+    padding: 0 0 40px
+
+  .feature-section
+    &.no-heading
+      padding-top: 35px
+
+  .headline-feature
+    margin: 0 auto
+    max-width: 80%
+
+  .feature-section
+    .media-container
+      overflow: hidden
+
+  .feature-section
+    img
+      margin-bottom: 1em
+
+  .embed-container
+    text-align: center
+
+  .embed-container
+    iframe
+      max-width: 100%
+
+  .wp-embedded-content
+    max-width: 100%
+
+  .feature-section
+    .col
+      margin-top: 40px
+
+  .changelog
+    margin-bottom: 40px
+
+  .changelog
+    &.feature-section
+      .col
+        margin-top: 40px
+
+  @media screen and (max-width: 782px)
+    .two-col-text
+      column-count: 1
+    .three-col img
+      display: block
+      margin: 0 auto
+
+  @media only screen and (max-width: 500px)
+    margin-right: 20px
+    margin-left: 10px
+    h1
+    .about-text
+      margin-right: 0
+    .about-text
+      margin-bottom: 0.25em
+    .mailpoet-logo
+      position: relative
+      margin: 1em 0
+      width: 100%
+      text-align: center
+    .two-col .col
+    .three-col .col
+      width: 100% !important
+      float: none !important

assets/css/src/pages_custom.styl

@@ -0,0 +1,35 @@
+/*
+Custom styles for MailPoet pages.
+*/
+
+.mailpoet-about-wrap
+
+  .videoWrapper
+    position: relative
+    padding-bottom: 56.25% /* 16:9 */
+    /*padding-top: 25px*/
+    height: 0
+
+    iframe
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+
+
+  .mailpoet_video
+    border: 1px solid rgba(0, 0, 0, 0.1)
+
+  #mailpoet-changelog ul
+    list-style: disc
+    padding-left: 20px
+
+  h2.mailpoet-feature-top
+    margin: 50px auto
+
+  a.button.go-to-plugin
+    margin-top: 2em
+
+  p.top-space-triple
+    margin-top: 3em

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/progress_bar.styl

@@ -4,6 +4,7 @@
   padding: 0
   width: 100%
   margin: 0
+  margin-bottom: 10px
   border-radius: 5px
   position: relative
 
@@ -25,5 +26,5 @@
 
 .mailpoet_progress_complete
   .mailpoet_progress_bar
-    background-color: #fecf23
-    background-image: linear-gradient(top, #fecf23, #fd9215)
+    background-color: hsla(191, 78%, 80%, 1)
+    background-image: linear-gradient(top,  hsla(191, 78%, 80%, 1), hsla(191, 76%, 67%, 1))

assets/css/src/settings.styl

@@ -1,42 +1,46 @@
 #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
     margin 25px 0 0 0
-    li
-      float left
-      position relative
-      padding 15px 15px 0 15px
+    display flex
+    flex-direction row
+    justify-content flex-start
+    > li
+      flex-grow 1
+      flex-shrink 1
+      display flex
+      flex-direction column
+      flex-basis 0
       margin 0 25px 25px 0
-      width 300px
-      height 250px
       border 1px solid #dedede
       background-color #fff
+      max-width 500px
+      .mailpoet_sending_method_description
+        padding: 25px
+        flex-grow 1
+        flex-shrink 0
+    > li:last-child
+      margin-right 0
     h3
       text-align center
       height 54px
-      line-height 54px
       font-size 1.5em
     .mailpoet_description
-      line-height 1.5em
-      font-size 1.1em
+      font-size 14px
     .mailpoet_status
+      display flex
+      flex-direction row
+      justify-content space-between
+      align-items center
       background-color #2f2f2f
       color #fff
-      position absolute
-      bottom 0
-      left 0
-      right 0
       text-overflow ellipsis
       padding 15px
       span
@@ -44,27 +48,33 @@
         font-weight bold
     .mailpoet_active
       .mailpoet_status
+        background-color #088b00
         span
           visibility visible
       #mailpoet_mta_activate
         visibility hidden
-    .mailpoet_actions
-      bottom 15px
-      color #fff
-      padding 0
-      position absolute
-      right 15px
-      .button-secondary
-        margin 0 -6px -4px 0
+
+  ul.sending-method-benefits
+    list-style-type: none
+    margin-bottom: 2em
+    margin-top: 2em
+
+  .mailpoet_success_item::before
+    content '✔ '
+
+  .mailpoet_error_item::before
+    content '✗ '
 
   // 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
+      flex-flow: row wrap
+      justify-content: space-around
+      > li
+        margin-right 0
+        flex-basis auto
+