Updates changelog & bumps up release version to 3.0.0-rc.2.0.2

Removes unused properties from the object used to display post types in editor [MAILPOET-1086]

.circleci/apache/mailpoet.loc.conf

@@ -3,13 +3,12 @@ Listen 8080
 <VirtualHost *:8080>
   UseCanonicalName Off
   ServerName mailpoet.loc
-  DocumentRoot /home/ubuntu/mailpoet/wordpress
+  DocumentRoot /home/circleci/mailpoet/wordpress
   DirectoryIndex index.php
   LogLevel notice
 
-  <Directory /home/ubuntu/mailpoet/wordpress>
-    AllowOverride All
-    Allow from All
+  <Directory /home/circleci/mailpoet/wordpress>
+    Require all granted
   </Directory>
 </VirtualHost>
 

.circleci/config.yml

@@ -0,0 +1,137 @@
+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
+  acceptance_tests:
+    working_directory: /home/circleci/mailpoet
+    machine: true
+    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: |
+              sudo apt-get update
+              sudo apt-get install circleci-php-5.6.23
+              sudo rm /usr/bin/php
+              sudo ln -s /opt/circleci/php/5.6.23/bin/php /usr/bin/php
+              # 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
+              php composer.phar install
+              ./do install
+      - save_cache:
+          key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+          paths:
+            - vendor
+      - save_cache:
+          key: npm-{{ checksum "package.json" }}
+          paths:
+            - node_modules
+      - run:
+          name: Run acceptance tests
+          command: |
+              docker-compose run codeception --steps --debug -vvv --html --xml
+      - store_artifacts:
+          path: ~/mailpoet/tests/acceptance-tests/_output
+      - store_test_results:
+          path: ~/mailpoet/tests/acceptance-tests/_output
+  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
+      - acceptance_tests

.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,81 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "amd": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 5
+  },
+  "rules": {
+    "import/no-amd": 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,
+    "no-useless-concat": 0,
+    "no-multi-spaces": 0,
+    "no-nested-ternary": 0,
+    "no-sequences": 0,
+    "no-useless-return": 0,
+    "array-callback-return": 0,
+    "new-cap": 0,
+    "no-continue": 0,
+    "no-new": 0,
+    "space-unary-ops": 0,
+    "no-redeclare": 0,
+    "no-console": 0,
+    "no-empty": 0,
+    "no-useless-escape": 0,
+    "wrap-iife": 0,
+    "no-unused-expressions": 0,
+    "block-spacing": 0,
+    "computed-property-spacing": 0,
+    "no-plusplus": 0,
+    "array-bracket-spacing": 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,
+    "max-len": 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,
+    "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,
+    "keyword-spacing": 0,
+    "eol-last": 0,
+    "dot-notation": 0,
+    "indent": 0,
+    "prefer-template": 0,
+    "func-names": 0
+  }
+}

.eslintrc.es6.json

@@ -0,0 +1,85 @@
+{
+  "extends": "airbnb",
+  "env": {
+    "amd": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "comma-dangle": ["error", "always-multiline"],
+    "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,
+    "func-names": 0,
+    "object-shorthand": 0,
+    "no-bitwise": 0,
+    "arrow-body-style": 0,
+    "prefer-template": 0,
+    "keyword-spacing": 0,
+    "default-case": 0,
+    "array-callback-return": 0,
+    "consistent-return": 0,
+    "no-unreachable": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": 0,
+    "import/no-extraneous-dependencies": 0,
+    "camelcase": 0,
+    "template-curly-spacing": 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,
+    "space-in-parens": 0,
+    "no-case-declarations": 0,
+    "array-bracket-spacing": 0,
+    "no-else-return": 0,
+    "max-len": 0,
+    "no-useless-concat": 0,
+    "no-unused-expressions": 0,
+    "no-sequences": 0,
+    "no-extra-boolean-cast": 0,
+    "dot-notation": 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,35 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "amd": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "rules": {
+    "import/no-amd": 0,
+    "no-undef": 0,
+    "one-var": 0,
+    "indent": 0,
+    "no-whitespace-before-property": 0,
+    "global-require": 0,
+    "keyword-spacing": 0,
+    "no-bitwise": 0,
+    "no-spaced-func": 0,
+    "func-call-spacing": 0,
+    "max-len": 0,
+    "space-unary-ops": 0,
+    "no-unused-vars": 0,
+    "no-unused-expressions": 0,
+    "no-underscore-dangle": 0,
+    "no-shadow": 0,
+    "padded-blocks": 0,
+    "vars-on-top": 0,
+    "space-before-blocks": 0,
+    "object-curly-spacing": 0,
+    "one-var-declaration-per-line": 0,
+    "func-names": 0,
+    "space-before-function-paren": 0
+  }
+}

.gitignore

@@ -1,20 +1,23 @@
-.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/js/*.js
-.vagrant
-lang
+.DS_Store
+TODO
+composer.phar
+/vendor
+tests/_output/*
+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.

Dockerfile

@@ -0,0 +1,39 @@
+FROM php:5.6-cli
+
+ENV COMPOSER_ALLOW_SUPERUSER=1
+
+RUN apt-get update && \
+    apt-get -y install \
+            git \
+            zlib1g-dev \
+            libssl-dev \
+            mysql-client \
+            sudo less  \
+        --no-install-recommends && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* && \
+    docker-php-ext-install bcmath zip mysqli pdo pdo_mysql && \
+    echo "date.timezone = UTC" >> /usr/local/etc/php/php.ini && \
+    curl -sS https://getcomposer.org/installer | php -- \
+        --filename=composer \
+        --install-dir=/usr/local/bin && \
+    composer global require --optimize-autoloader "hirak/prestissimo" && \
+    curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && \
+    chmod +x wp-cli.phar && \
+    mv wp-cli.phar /usr/local/bin/wp
+
+# Prepare application
+WORKDIR /repo
+
+# Install vendor
+COPY ./composer.json /repo/composer.json
+
+# Add source-code
+COPY . /repo
+
+WORKDIR /wp-core/wp-content/plugins/mailpoet
+ENV WP_TEST_PATH=/wp-core
+
+ADD docker-entrypoint.sh /
+
+RUN ["chmod", "+x", "/docker-entrypoint.sh"]

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,57 @@ _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.
+
+# Acceptance testing
+
+We are using Gravity Flow plugin's setup as an example for our acceptance test suite: https://www.stevenhenty.com/learn-acceptance-testing-deeply/
+
+From the article above:
+
+_Windows users only: enable hard drive sharing in the Docker settings._
+
+The browser runs in a docker container. You can use a VNC client to watch the test run, follow instructions in official 
+repo: https://github.com/SeleniumHQ/docker-selenium
+If you’re on a Mac, you can open vnc://localhost:5900 in Safari to watch the tests running in Chrome. If you’re on Windows, you’ll need a VNC client. Password: secret.
+
+
+To run tests:
+```sh
+$ ./do test:acceptance
+```

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,27 +104,58 @@ 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 packtranslations() {
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'txinit'))
+      ->taskExec('./tasks/pack_translations.sh')
+      ->run();
+  }
+
+  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');
 
-    $command = 'vendor/bin/codecept run unit -f '.(($opts['file']) ? $opts['file'] : '');
+    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml -f '.(($opts['file']) ? $opts['file'] : '');
 
     if($opts['xml']) {
       $command .= ' --xml';
@@ -116,9 +165,8 @@ class RoboFile extends \Robo\Tasks {
 
   function testCoverage($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
     $command = join(' ', array(
-      'vendor/bin/codecept run',
+      'vendor/bin/codecept run unit -c codeception.unit.yml ',
       (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
       ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
@@ -149,25 +197,44 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec($command);
   }
 
-  function testDebug() {
-    $this->_exec('vendor/bin/codecept build');
+  function testDebug($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept run unit --debug');
+    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
+
+    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml --debug -f '.(($opts['file']) ? $opts['file'] : '');
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
+  }
+
+  function testAcceptance() {
+    return $this->_exec('COMPOSE_HTTP_TIMEOUT=200 docker-compose run codeception --steps --debug -vvv');
   }
 
   function testFailed() {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
-    $this->_exec('vendor/bin/codecept run -g failed');
+    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
+    return $this->_exec('vendor/bin/codecept run -c codeception.unit.yml -g failed');
   }
 
   function qa() {
-    $this->qaLint();
-    $this->qaCodeSniffer('all');
+    $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() {
-    $this->_exec('./tasks/php_lint.sh lib/ tests/ mailpoet.php');
+    return $this->_exec('./tasks/php_lint.sh lib/ tests/ mailpoet.php');
+  }
+
+  function qaLintJavascript() {
+    return $this->_exec('npm run lint');
   }
 
   function qaCodeSniffer($severity='errors') {
@@ -176,18 +243,185 @@ class RoboFile extends \Robo\Tasks {
     } else {
       $severityFlag = '-n';
     }
-    $this->_exec(
-      './vendor/bin/phpcs '.
-      '--standard=./tasks/code_sniffer/MailPoet '.
-      '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
-      './lib/Config/PopulatorData/Templates/* '.
-      'lib/ '.
-      $severityFlag
-    );
+    return $this->collectionBuilder()
+      ->taskExec(
+        './vendor/bin/phpcs '.
+        '--standard=./tasks/code_sniffer/MailPoet '.
+        '--runtime-set testVersion 5.3-7.0 '.
+        '--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/MailPoet '.
+        '--runtime-set testVersion 5.4-7.0 '.
+        '--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_name = explode('-', $plugin_dist_name);
+    $plugin_dist_name = $plugin_dist_name[0];
+    $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,15 +30,15 @@
   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-width: $thumbnail-width
     height: auto
     width: 110%
     position: relative
@@ -60,20 +72,21 @@
 .mailpoet_boxes .mailpoet_description
   float:left
   width: 245px
-  max-height: calc(115px - 2em)
-  padding-bottom: 2em
+  max-height: $box-description-height
+  padding-bottom: 0
   overflow: hidden
 
   h3
-    margin: 0 0 0.7em 0
+    margin: 0 0 $box-description-space-between-heading-and-paragraph 0
     overflow: hidden
     max-width: 210px
-    line-height: 1.4em
+    line-height: $box-heading-line-height
+    font-size: $box-heading-font-size
 
   p
-    font-size: 13px
-    line-height: 1.5
-    margin: 1em 0
+    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/modal.styl

@@ -45,7 +45,6 @@ body.mailpoet_modal_opened
   position: absolute
   z-index: 25
   top: 48px
-  padding-bottom: 48px
   margin: 0
 
 .mailpoet_popup_wrapper
@@ -54,6 +53,7 @@ body.mailpoet_modal_opened
   position: relative
   width: 100%
   z-index: 0
+  height: 96%
 
 .mailpoet_overlay_hidden .mailpoet_popup_wrapper
   border: 1px solid #333
@@ -75,6 +75,7 @@ body.mailpoet_modal_opened
 
 .mailpoet_popup_body
   padding: 10px 10px 10px 10px
+  height: 92%
 
 // modal panel
 #mailpoet_modal_overlay.mailpoet_panel_overlay

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

@@ -179,6 +179,28 @@ select.mailpoet_font-size
   width: 100%
   box-sizing: border-box
 
+.tooltip-help-designer-subject-line div, .tooltip-help-designer-preheader div
+  z-index: 100001
+
+.tooltip-help-send-preview
+  position: absolute
+  right: 15px
+
+.tooltip-help-designer-ideal-width
+  color: #656565
+  text-transform: none
+  margin-left: 5px
+  font-weight: normal
+
+.tooltip-help-designer-styles
+  position: absolute
+  top: 40px
+
+.tooltip-help-designer-full-width .dashicons
+  line-height 34px
+.tooltip-help-designer-full-width span
+  line-height 1.4em
+
 .mailpoet_button_primary
   border-color: $button-primary-border-color
   background-color: $button-primary-background-color

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

@@ -26,15 +26,11 @@ $block-text-line-height = $text-line-height
   &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
 
-
-.mailpoet_block:last-child
-  margin-bottom: 0
-
 .mailpoet_content
   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 +40,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/libraryOverrides.styl

@@ -127,10 +127,8 @@ body
   background-color: $primary-background-color
   border: 1px solid $content-border-color
 
-#mailpoet_modal_close
-  display: none
-
 .wrap > .mailpoet_notice,
+.notice
 .update-nag
   margin-left: 2px + 15px !important
 

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

@@ -9,29 +9,38 @@
   // 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
       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
@@ -39,18 +48,25 @@
         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
+
+  .tooltip.dashicons.dashicons-editor-help
+    line-height: 1.4
+
+  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)
@@ -58,8 +74,10 @@
       width auto
 
     .mailpoet_sending_methods
-      li
-        float none
-        width auto
+      flex-flow: row wrap
+      justify-content: space-around
+      > li
         margin-right 0
+        flex-basis auto
+