Release 3.37.0

.babelrc

@@ -0,0 +1,28 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    [
+      "@babel/plugin-transform-runtime", {
+        "sourceType": "unambiguous",
+        "corejs": 3
+      }
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-json-strings",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions"
+  ]
+}

.circleci/fake-sendmail.php

@@ -5,14 +5,13 @@ if (!file_exists($path)) {
   mkdir($path);
 }
 $filename = $path . '/mailpoet-' . microtime(true) . '.txt';
-$fileHandle = fopen($filename, "w");
+$file_handle = fopen($filename, "w");
 
-// phpcs:ignore Squiz.PHP.DiscouragedFunctions
-$callArguments = print_r($argv, true) . "\n";
-fwrite($fileHandle, $callArguments);
+$call_arguments = print_r($argv, true) . "\n";
+fwrite($file_handle, $call_arguments);
 
 while ($line = fgets(STDIN)) {
-  fwrite($fileHandle, $line);
+  fwrite($file_handle, $line);
 }
 
-fclose($fileHandle);
+fclose($file_handle);

.circleci/mailpoet_php.ini

@@ -6,3 +6,4 @@ sendmail_path = /usr/local/bin/fake-sendmail.php
 ; Defines the default timezone used by the date functions
 ; http://php.net/date.timezone
 date.timezone = UTC
+

.circleci/setup.bash

@@ -1,19 +1,16 @@
 #!/usr/bin/env bash
 
 function setup {
-  local script_dir="$(cd -P -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd -P)"
-  local root_dir="$(dirname "$script_dir")"
-
 	local version=$1
-	local wp_cli_wordpress_path="--path=$root_dir/wordpress"
+	local wp_cli_wordpress_path="--path=wordpress"
 	local wp_cli_allow_root="--allow-root"
 
 	# Add a fake sendmail mailer
-	sudo cp "$script_dir/fake-sendmail.php" /usr/local/bin/
+	sudo cp ./.circleci/fake-sendmail.php /usr/local/bin/
 
 	# configure Apache
-	sudo cp "$script_dir/mailpoet_php.ini" /etc/php.d/
-	sudo cp "$script_dir/apache/mailpoet.loc.conf" /etc/apache2/sites-available
+	sudo cp ./.circleci/mailpoet_php.ini /usr/local/etc/php/conf.d/
+	sudo cp ./.circleci/apache/mailpoet.loc.conf /etc/apache2/sites-available
 	sudo a2dissite 000-default.conf
 	sudo a2ensite mailpoet.loc
 	sudo a2enmod rewrite
@@ -29,33 +26,32 @@ function setup {
 	wp core download $wp_cli_wordpress_path $wp_cli_allow_root --version=${2:-latest}
 
 	# Generate `wp-config.php` file with debugging enabled
-	wp config create --dbname=wordpress --dbuser=root --dbhost=127.0.0.1 --dbprefix='mp_' $wp_cli_wordpress_path $wp_cli_allow_root
-	wp config set WP_DEBUG true --raw $wp_cli_wordpress_path $wp_cli_allow_root
+	echo "define(\"WP_DEBUG\", true);" | wp core config --dbname=wordpress --dbuser=root --dbhost=127.0.0.1 --extra-php $wp_cli_wordpress_path $wp_cli_allow_root
 
-  # Disable WP Cron so that it doesn't interfere with tests
-  wp config set DISABLE_WP_CRON true --raw $wp_cli_wordpress_path $wp_cli_allow_root
+	# Change default table prefix
+	sed -i "s/\$table_prefix = 'wp_';/\$table_prefix = 'mp_';/" ./wordpress/wp-config.php
 
 	# Install WordPress
     if [[ $version == "php7_multisite" ]]; then
         # Configure multisite environment
     	wp core multisite-install --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc --title="WordPress MultiSite" $wp_cli_wordpress_path $wp_cli_allow_root
-    	cp "$script_dir/wordpress/.htaccess" "$root_dir/wordpress/"
+    	cp ./.circleci/wordpress/.htaccess ./wordpress/
 
     	# Add a second blog
     	wp site create --slug=php7_multisite $wp_cli_wordpress_path $wp_cli_allow_root
-    	echo "WP_TEST_MULTISITE_SLUG=php7_multisite" >> "$root_dir/mailpoet/.env"
-    	echo "WP_ROOT_MULTISITE=/home/circleci/mailpoet/wordpress" >> "$root_dir/mailpoet/.env"
-    	echo "HTTP_HOST=mailpoet.loc" >> "$root_dir/mailpoet/.env"
+    	echo "WP_TEST_MULTISITE_SLUG=php7_multisite" >> .env
+    	echo "WP_ROOT_MULTISITE=/home/circleci/mailpoet/wordpress" >> .env
+    	echo "HTTP_HOST=mailpoet.loc" >> .env
 
     	# Add a third dummy blog
         wp site create --slug=dummy_multisite $wp_cli_wordpress_path $wp_cli_allow_root
     else
     	wp core install --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc --title="WordPress Single" $wp_cli_wordpress_path $wp_cli_allow_root
-    	echo "WP_ROOT=/home/circleci/mailpoet/wordpress" >> "$root_dir/mailpoet/.env"
+    	echo "WP_ROOT=/home/circleci/mailpoet/wordpress" >> .env
     fi
 
 	# Softlink plugin to plugin path
-	ln -s ../../../mailpoet ../wordpress/wp-content/plugins/mailpoet
+	ln -s ../../.. wordpress/wp-content/plugins/mailpoet
 
 	# Activate plugin
 	if [[ $version == "php7_multisite" ]]; then
@@ -63,16 +59,4 @@ function setup {
 	else
 	    wp plugin activate mailpoet $wp_cli_wordpress_path $wp_cli_allow_root
 	fi
-
-  if [[ $CIRCLE_JOB == *"_with_premium_"* ]]; then
-    # Softlink MailPoet Premium to plugin path
-    ln -s ../../../mailpoet-premium ../wordpress/wp-content/plugins/mailpoet-premium
-    # Activate MailPoet Premium
-    wp plugin activate mailpoet-premium --path="$root_dir/wordpress"
-  fi
-
-  # Fix WP formatting file for compatibility with PHP8.1
-  sed -i "s|if ( strlen( \$email ) < 6 ) {|if ( strlen( (string) \$email ) < 6 ) {|" ../wordpress/wp-includes/formatting.php
-  sed -i "s|return rtrim( \$string, '/\\\\\\\\' );|return rtrim( (string) \$string, '/\\\\\\\\' );|" ../wordpress/wp-includes/formatting.php
-  sed -i "s|return \$wp_hasher->HashPassword( trim( \$password ) );|return \$wp_hasher->HashPassword( trim( (string) \$password ) );|" ../wordpress/wp-includes/pluggable.php
 }

.dockerignore

@@ -1,4 +0,0 @@
-.idea
-mailpoet
-mailpoet-premium
-wordpress

.editorconfig

@@ -1,57 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-indent_style = space
-indent_size = 2
-ij_smart_tabs = false
-max_line_length = off
-
-[*.php]
-ij_php_align_key_value_pairs = false
-ij_php_align_multiline_chained_methods = false
-ij_php_align_assignments = false
-ij_php_align_class_constants = false
-ij_php_align_multiline_parameters = false
-ij_php_align_multiline_ternary_operation = false
-ij_php_align_inline_comments = false
-ij_php_align_multiline_for = true
-ij_php_align_named_arguments = false
-ij_php_align_multiline_array_initializer_expression = false
-ij_php_align_phpdoc_comments = false
-ij_php_blank_lines_after_class_header = 0
-ij_php_blank_lines_around_class = 1
-ij_php_blank_lines_before_class_end = 0
-ij_php_blank_lines_around_method = 1
-ij_php_blank_lines_after_opening_tag = 0
-ij_php_keep_indents_on_empty_lines = false
-ij_php_keep_blank_lines_after_lbrace = 0
-ij_php_keep_blank_lines_before_right_brace = 0
-ij_php_keep_blank_lines_in_declarations = 1
-ij_php_spaces_around_arrow = false
-ij_php_space_after_type_cast = false
-ij_php_blank_lines_after_function = 1
-ij_any_space_after_colon = true
-ij_any_space_before_comma = false
-ij_any_space_after_comma = true
-ij_php_space_before_catch_left_brace = true
-ij_php_space_before_if_left_brace = true
-ij_php_space_before_if_parentheses = true
-ij_php_space_after_quest = true
-ij_php_space_after_unary_not = false
-ij_php_space_before_quest = true
-ij_php_anonymous_brace_style = end_of_line
-ij_php_space_before_method_parentheses = false
-ij_php_space_before_method_call_parentheses = false
-ij_php_spaces_around_assignment_in_declare = true
-ij_php_method_parameters_new_line_after_left_paren = true
-ij_php_method_brace_style = end_of_line
-ij_php_blank_lines_before_method_body = 0
-ij_php_space_before_method_left_brace = true
-ij_php_space_after_for_semicolon = true
-ij_php_space_after_colon_in_return_type = true
-ij_php_space_before_else_keyword = true
-ij_php_for_statement_new_line_after_left_paren = true

.env.sample

@@ -0,0 +1,34 @@
+# Required
+WP_ROOT="/var/www/wordpress"
+WP_TEST_ENABLE_NETWORK_TESTS="false"
+WP_TEST_MAILER_ENABLE_SENDING="false"
+
+# Optional: for multisite acceptance tests
+WP_ROOT_MULTISITE="/var/www/wordpress"
+WP_TEST_MULTISITE_SLUG=""
+HTTP_HOST="" // URL of your site (used for multisite env and equals to DOMAIN_CURRENT_SITE from wp-config.php)
+
+# Optional: for sending tests
+# These are required if WP_TEST_MAILER_ENABLE_SENDING is "true"
+WP_TEST_IMPORT_MAILCHIMP_API=""
+WP_TEST_IMPORT_MAILCHIMP_LISTS="" // (separated with comma)
+WP_TEST_MAILER_AMAZON_ACCESS=""
+WP_TEST_MAILER_AMAZON_SECRET=""
+WP_TEST_MAILER_AMAZON_REGION=""
+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=""
+
+# Optional: for plugin deployment
+WP_SVN_USERNAME=""
+WP_SVN_PASSWORD=""
+WP_TRANSIFEX_API_TOKEN=""
+WP_JIRA_USER="" // JIRA username/email
+WP_JIRA_TOKEN="" // JIRA token from https://id.atlassian.com/manage/api-tokens
+WP_CIRCLECI_USERNAME="" // CircleCI organization or user
+WP_CIRCLECI_TOKEN="" // CircleCI token from https://circleci.com/gh/{user|org}/{project}/edit#api
+WP_GITHUB_USERNAME="" // GitHub username (not email)
+WP_GITHUB_TOKEN="" // GitHub token from https://github.com/settings/tokens
+WP_SLACK_WEBHOOK_URL="" // Webhook URL from https://mailpoet.slack.com/services/BHRB9AHSQ

.eslintrc.es5.json

@@ -0,0 +1,15 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "amd": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-underscore-dangle": 0, // Backbone uses underscores, we cannot remove them
+    "comma-dangle": ["error", "always-multiline"]
+  }
+}

.eslintrc.es6.json

@@ -0,0 +1,37 @@
+{
+  "extends": "airbnb",
+  "env": {
+    "amd": true,
+    "browser": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": [
+    "react-hooks"
+  ],
+  "settings": {
+    "import/resolver": "webpack"
+  },
+  "rules": {
+    // Hooks
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    // Exceptions
+    "arrow-parens": ["error", "always"],
+    "comma-dangle": ["error", "always-multiline"],
+    "no-script-url": 0,
+    "import/extensions": 0, // we wouldn't be able to import jQuery without this line
+    "react/destructuring-assignment": 0, // that would be too many changes to fix this one
+    "prefer-destructuring": 0, // that would be too many changes to fix this one
+    "jsx-a11y/label-has-for": [2, {
+      "required": {"some": ["nesting", "id"]} // some of our labels are hidden and we cannot nest those
+    }],
+    "jsx-a11y/anchor-is-valid": 0 // cannot fix this one, it would break wprdpress themes
+  }
+}
+

.eslintrc.tests.json

@@ -0,0 +1,20 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "amd": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-only-tests/no-only-tests": 2,
+    // Exceptions
+    "func-names": 0,
+    "comma-dangle": ["error", "always-multiline"],
+    // Temporary
+    "no-underscore-dangle": 0
+  },
+  "plugins": ["no-only-tests"]
+}

.git-blame-ignore-revs

@@ -1,41 +0,0 @@
-# This file contains revisions that introduced multiple changes that have no effect on aplication logic.
-# You can add it to you local git config using command: git config blame.ignoreRevsFile .git-blame-ignore-revs
-
-# Convert PHP property names to camel case
-8c848cfa2883d9a0c9614d0be0e9248c5a02d340
-
-# Convert PHP variables to camel case
-54549ff037d6c2ad868cae6e2117ee862297fdbf
-
-# Convert variable names to camel case in strings
-3bbc8ea2aff78040d1e24995de2d62461db88174
-
-# Convert property names to camel case in strings
-7a66366ab58b1b959c8b59dfc4f90c1f3a28b95b
-
-# Convert variable names to camel case in PHPDoc
-d0292f86249140f4978e6b65c4ed1aed4f40c7fe
-
-# Convert variables not caught by Code Sniffer to camel case
-f49757bd4e129d44102a932246c5e892d362054d
-
-# Convert properties not caught by Code Sniffer to camel case
-94afd663259d6600e51c8e13084f7f126874d29e
-
-# Exclude globals from camel case conversion
-6522635dc7455e39ca77370a18a9987de13c61b0
-
-# Convert Doctrine specific code to camel case
-fbcaeaadbca33e6cc9aef0925be019e9b4923a93
-
-# Exclude WordPress and WooCommerce variables from camel case conversion
-685b4885c0d54d03df3cd0412ef3bc9e586cbb03
-
-# Exclude MailPoet data structures from camel case conversion
-e66c76133ec3ef667e382203426d91a4b4aa5174
-
-# Updating rule name in php:cs ignore comments
-65b834a9fff72b1ec5fc81ac383ebb27321da9dc
-
-# Prettier autoformatting
-ab27eaee2df740c0add4331a7f8c115a87ecfa2b

.github/ISSUE_TEMPLATE/Bug_report.md

@@ -1,34 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To reproduce**
-Steps to reproduce the behavior:
-
-1. Go to ...
-2. Click on ...
-3. Scroll down to ...
-
-**Actual behavior**
-A clear and concise description of the incorrect behavior.
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Versions (please complete the following information):**
-
-- WordPress version: [e.g: 5.3.2]
-- PHP version: [e.g: 7.4.2]
-- MailPoet version: [e.g: 3.46.13]
-
-**Additional context**

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,9 +0,0 @@
----
-name: Feature request
-about: https://feedback.mailpoet.com/
-title: ''
-labels: ''
-assignees: ''
----
-
-Please use https://feedback.mailpoet.com/ for feature requests.

.github/SECURITY.md

@@ -1,37 +0,0 @@
-# Security Policy
-
-Full details of the Automattic Security Policy can be found on [automattic.com/security](https://automattic.com/security/).
-
-## Supported Versions
-
-Generally, _only the latest version of MailPoet has continued support_. If a critical vulnerability is found in the current version of MailPoet, we may opt to backport any patches to previous versions.
-
-## Reporting a Vulnerability
-
-[MailPoet](https://wordpress.org/plugins/mailpoet) is an open-source plugin for WordPress. Our HackerOne program covers the plugin software, as well as a variety of related projects and infrastructure.
-
-**For responsible disclosure of security issues and to be eligible for our bug bounty program, please submit your report based on instructions found on [hackerone.com/automattic](https://hackerone.com/automattic).**
-
-Our most critical targets are:
-
-- MailPoet plugin (this repository)
-- MailPoet Premium
-- mailpoet.com -- the primary site, and all of it subdomains, e.g. [account.mailpoet.com](https://account.mailpoet.com/)
-
-For more targets, see the `In Scope` section on [HackerOne](https://hackerone.com/automattic).
-
-_Please note that the **WordPress software is a separate entity** from Automattic. Please report vulnerabilities for WordPress through [the WordPress Foundation's HackerOne page](https://hackerone.com/wordpress)._
-
-## Guidelines
-
-We're committed to working with security researchers to resolve the vulnerabilities they discover. You can help us by following these guidelines:
-
-- Follow [HackerOne's disclosure guidelines](https://www.hackerone.com/disclosure-guidelines).
-- Pen-testing Production:
-- Please **setup a local environment** instead whenever possible. Most of our code is open source (see above).
-- If that's not possible, **limit any data access/modification** to the bare minimum necessary to reproduce a PoC.
-- **_Don't_ automate form submissions!** That's very annoying for us, because it adds extra work for the volunteers who manage those systems, and reduces the signal/noise ratio in our communication channels.
-- To be eligible for a bounty, please follow all of these guidelines.
-- Be Patient - Give us a reasonable time to correct the issue before you disclose the vulnerability.
-
-We also expect you to comply with all applicable laws. You're responsible to pay any taxes associated with your bounties.

.github/pull_request_template.md

@@ -1,23 +0,0 @@
-## Description
-
-_N/A_
-
-## Code review notes
-
-_N/A_
-
-## QA notes
-
-_N/A_
-
-## Linked PRs
-
-_N/A_
-
-## Linked tickets
-
-_N/A_
-
-## After-merge notes
-
-_N/A_

.github/workflows/codeql-analysis.yml

@@ -1,71 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-name: 'CodeQL'
-
-on:
-  push:
-    branches: [trunk]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [trunk]
-  schedule:
-    - cron: '0 17 * * 4'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        # Override automatic language detection by changing the below list
-        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
-        language: ['javascript']
-        # Learn more...
-        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          # We must fetch at least the immediate parents so that if this is
-          # a pull request then we can checkout the head.
-          fetch-depth: 2
-
-      # If this run was triggered by a pull request event, then checkout
-      # the head of the pull request instead of the merge commit.
-      - run: git checkout HEAD^2
-        if: ${{ github.event_name == 'pull_request' }}
-
-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v1
-        with:
-          languages: ${{ matrix.language }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
-          # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-      # If this step fails, then you should remove it and run the build manually (see below)
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v1
-
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 https://git.io/JvXDl
-
-      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-      #    and modify them (or add more) to build your code if your project
-      #    uses a compiled language
-
-      #- run: |
-      #   make bootstrap
-      #   make release
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v1

.gitignore

@@ -1,10 +1,32 @@
 .DS_Store
-.env
-.idea
-.vscode
-dev/data
-docker-compose.override.yml
+TODO
+composer.phar
+php-scoper.phar
+phpstan.phar
+/vendor
+/vendor-prefixed
+/vendor_backup
+/vendor-backup
+/vendor-prefixed-backup
+tests/_output/*
+tests/_support/_generated/*
 node_modules
+.env
 npm-debug.log
-mailpoet-premium
-wordpress
+!tasks/**
+/views/cache/**
+temp
+.idea
+mailpoet.zip
+tests/javascript/testBundles
+assets/dist
+.vagrant
+lang
+.mp_svn
+/nbproject/
+tests/_data/acceptanceBackup.sql
+lib/DI/CachedContainer.php
+prefixer/vendor
+prefixer/build
+docker-compose.override.yml
+tasks/code_sniffer/vendor

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/pre-commit

@@ -1,5 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged -c mailpoet/package.json --cwd mailpoet
-npx lint-staged -c package.json

.npmrc

@@ -1,2 +1 @@
-save-workspace-protocol=rolling
-strict-peer-dependencies=false
+engine-strict=true

.nvmrc

@@ -1 +0,0 @@
-v17.9.1

.prettierignore

@@ -1,27 +0,0 @@
-*.hbs
-*.scss
-.mp_svn
-_generated
-_output
-composer.json
-composer.lock
-node_modules
-pnpm-lock.yaml
-vendor
-vendor-prefixed
-/.mp_svn
-/dev/data
-/mailpoet/assets/dist
-/mailpoet/assets/js/lib
-/mailpoet/assets/js/src/newsletter_editor/behaviors/tinymce_icons.js
-/mailpoet/generated
-/mailpoet/lang
-/mailpoet/lib/Newsletter/Renderer/Template.html
-/mailpoet/lib-3rd-party
-/mailpoet/plugin_repository
-/mailpoet/temp
-/mailpoet/tests/javascript_newsletter_editor/testBundles
-/mailpoet/tests/plugins
-/mailpoet/views
-/mailpoet-premium
-/wordpress

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "printWidth": 80,
-  "singleQuote": true,
-  "trailingComma": "all"
-}

.stylelintrc

@@ -0,0 +1,110 @@
+{
+  "plugins": [
+    "stylelint-order",
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": ["always", {
+      except: ["first-nested", "blockless-after-blockless"],
+    }],
+    "at-rule-name-case": "lower",
+    "at-rule-semicolon-newline-after": "always",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-no-empty": true,
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
+    "comment-no-empty": true,
+    "comment-whitespace-inside": "always",
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-block-no-duplicate-properties": [true, {
+      ignore: ["consecutive-duplicates-with-different-values"],
+    }],
+    "declaration-block-no-redundant-longhand-properties": [true, {
+        ignoreShorthands: [/flex/, /grid/]
+    }],
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-colon-newline-after": "always-multi-line",
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    "declaration-empty-line-before": "never",
+    "font-family-no-duplicate-names": true,
+    "function-calc-no-invalid": true,
+    "function-comma-space-after": "always-single-line",
+    "function-comma-space-before": "never",
+    "function-max-empty-lines": 0,
+    "function-name-case": "lower",
+    "function-parentheses-newline-inside": "always-multi-line",
+    "function-parentheses-space-inside": "never-single-line",
+    "function-url-quotes": "always",
+    "function-whitespace-after": "always",
+    "indentation": 2,
+    "keyframe-declaration-no-important": true,
+    "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
+    "media-feature-name-no-unknown": true,
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-query-list-comma-newline-after": "always-multi-line",
+    "media-query-list-comma-space-after": "always-single-line",
+    "media-query-list-comma-space-before": "never",
+    "no-duplicate-selectors": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "never",
+    "number-no-trailing-zeros": true,
+    "order/properties-alphabetical-order": true,
+    "property-case": "lower",
+    "property-no-unknown": true,
+    "rule-empty-line-before": ["always-multi-line", {
+      except: ["first-nested"],
+      ignore: ["after-comment"]
+    }],
+    "scss/at-rule-no-unknown": true,
+    "scss/dollar-variable-colon-space-after": "always",
+    "scss/dollar-variable-colon-space-before": "never",
+    "scss/operator-no-newline-after": true,
+    "scss/operator-no-newline-before": true,
+    "scss/operator-no-unspaced": true,
+    "scss/selector-no-redundant-nesting-selector": true,
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-space-before": "never",
+    "selector-max-empty-lines": 0,
+    "selector-nested-pattern": "^(?!&-|&_).*",
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-no-unknown": true,
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "single",
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-case": "lower",
+    "shorthand-property-no-redundant-values": true,
+    "string-no-newline": true,
+    "string-quotes": "single",
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+    "value-list-comma-newline-after": "always-multi-line",
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+    "value-list-max-empty-lines": 0,
+  },
+}

.tx/config

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

CONTRIBUTING.md

@@ -1,7 +1,6 @@
 # Contributing
 
 ## PHP Code
-
 - Two spaces indentation.
 - Space between keyword (if, for, switch...) and left bracket
 - CamelCase for classes.
@@ -12,29 +11,18 @@
 - 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 7.1 and newer versions.
+- Ensure compatibility with PHP 5.5 and newer versions.
 - Cover your code in tests.
 
 ## SCSS Code
-
 - camelCase for file name
 - Components files are prefixed with underscore, to indicate, that they aren't compiled separately.
 
 ## JS Code
-
 - Javascript code should follow the [Airbnb style guide](https://github.com/airbnb/javascript).
-- Prefer named export before default export in JS and TS files
-
-## Disabling linting rules
-
-- we want to avoid using `eslint-disable`
-- if we have to use it we need to use a comment explaining why do we need it:
-  `/* eslint-disable no-new -- this class has a side-effect in the constructor and it's a library's. */`
-- for PHP we do the same with the exception `// phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps` which for now doesn’t require an explanation
 
 ## Git flow
-
-- Do not commit to trunk.
+- Do not commit to master.
 - Open a short-living feature branch.
 - Open a pull request.
 - Add Jira issue reference in the title of the Pull Request.
@@ -44,13 +32,6 @@
 - Wait for review from another developer.
 
 ## Issues creation
-
 - Issues are managed on Jira.
 - Discuss issues on public Slack chats, discuss code in pull requests.
 - Open a small Jira issue only when it has been discussed.
-
-## Migration from IdiORM to Doctrine
-
-MailPoet used to use [IdiORM](https://github.com/j4mie/idiorm) as its object-relational mapper (ORM), but the project was abandoned a while ago, so we started a migration to [Doctrine](https://www.doctrine-project.org/). This is a significant effort that has been going on for quite some time. Although you will still see parts of the code that use IdioORM, we ask that all new code be added using Doctrine instead.
-
-All IdioORM models live in [mailpoet/lib/Models](https://github.com/mailpoet/mailpoet/tree/trunk/mailpoet/lib/Models), should be considered deprecated and shouldn't be used by new code. We are moving everything to Doctrine entities and some auxiliary code when needed. You can find Doctrine entities in [mailpoet/lib/Entities](https://github.com/mailpoet/mailpoet/tree/trunk/mailpoet/lib/Entities).

README.md

@@ -1,150 +1,172 @@
 # MailPoet
 
-The **MailPoet** plugin monorepo.
+MailPoet done the right way.
 
-To use our Docker-based development environment (recommended), continue with the steps below.
-If you'd like to use the plugin code directly, see details in [the plugin's readme](mailpoet/README.md).
+# Contents
 
-## 🔌 Initial setup
+- [Setup](#setup)
+- [Frameworks and libraries](#frameworks-and-libraries)
+- [Workflow Commands](#workflow-commands)
+- [Coding and Testing](#coding-and-testing)
 
-1. Run `./do setup` to pull everything and install necessary dependencies.
-2. Add secrets to `.env` files in `mailpoet` and `mailpoet-premium` directories. Go to the Secret Store and look for "MailPoet: plugin .env"
-3. Run `./do start` to start the stack.
-4. Go to http://localhost:8888 to see the dashboard of the dev environment.
+# Setup
 
-## ✅ Additional dependencies
+## Requirements
+- PHP 5.6+
+- NodeJS
+- WordPress
+- Docker & Docker Compose
 
-Even though it possible to run everything using Docker, in the development workflow,
-it may be faster and more convenient to run some tasks outside the container. Therefore,
-the following tools are recommended:
-
-1. **PHP** as per `composer.json` requirements.
-2. **Node.js**, as specified by `.nvmrc`. For automatic management use [nvm](https://github.com/nvm-sh/nvm), [FNM](https://github.com/Schniz/fnm), or [Volta](https://github.com/volta-cli/volta).
-3. **pnpm**, as specified in `package.json`. For automatic setup enable [Corepack](https://nodejs.org/docs/latest-v17.x/api/corepack.html) using `corepack enable`.
-
-## 🔍 PHPStorm setup for XDebug
-
-In `Languages & Preferences > PHP > Servers` set path mappings:
-
-```shell
-wordpress        -> /var/www/html
-mailpoet         -> /var/www/html/wp-content/plugins/mailpoet
-mailpoet-premium -> /var/www/html/wp-content/plugins/mailpoet-premium
+## Installation
+```bash
+# go to WP plugins directory
+$ cd path_to_wp_directory/wp-content/plugins
+# clone this repository
+$ git clone https://github.com/mailpoet/mailpoet.git
+$ cd mailpoet
+# create the .env file
+$ cp .env.sample .env
+# change the values on .env file
+# download composer
+$ curl -sS https://getcomposer.org/installer | php
+$ chmod +x ./composer.phar
+# download a PHP-Scoper
+$ curl -sL https://github.com/humbug/php-scoper/releases/download/0.11.4/php-scoper.phar --output php-scoper.phar
+# needed for installation.
+$ mkdir -p vendor-prefixed
+$ chmod +x ./php-scoper.phar
+# install PHP dependencies
+$ ./composer.phar install
+# install all dependencies (PHP and JS)
+$ ./do install
+# compile JS and CSS files
+$ ./do compile:all
 ```
 
-For PHP 8 and XDebug 3 we support **browser debugging extension**.
-You can choose extension by your browser in [JetBrains documentation](https://www.jetbrains.com/help/phpstorm/browser-debugging-extensions.html).
+# Frameworks and libraries
 
-To use XDebug inside the **cron**, you need to pass a URL argument `&XDEBUG_TRIGGER=yes`
-[in the cron request](https://github.com/mailpoet/mailpoet/blob/bf7bd6d2d9090ed6ec7b8b575bb7d6b08e663a52/lib/Cron/CronHelper.php#L155-L166).
-Alternatively, you can add `XDEBUG_TRIGGER: yes` to the `wordpress` service in `docker-compose.yml` and restart it (which will run XDebug also for all other requests).
+- [Paris ORM](https://github.com/j4mie/paris).
+- [Symfony/dependency-injection](https://github.com/symfony/dependency-injection) ([docs for 3.4](https://symfony.com/doc/3.4/components/dependency_injection.html)).
+- [PHP-Scoper](https://github.com/humbug/php-scoper) for moving dependencies into MP namespace
+- [Twig](https://twig.symfony.com/) and [Handlebars](https://handlebarsjs.com/) are used for templates rendering.
+- [Monolog](https://seldaek.github.io/monolog/) is used for logging.
+- [Robo](https://robo.li/) is used to write and run workflow commands.
+- [Codeception](https://codeception.com/) is used to write unit and acceptance tests.
+- [Docker](https://www.docker.com/), [Docker Compose](https://docs.docker.com/compose/) and [Selenium](https://www.seleniumhq.org/) to run acceptance tests.
+- [React](https://reactjs.org/) is used to create most of UIs.
+- [Marionette](https://marionettejs.com/) is used to build the newsletters editor.
+- [SCSS](http://sass-lang.com/) is used to write styles.
+- [Mocha](https://mochajs.org/), [Chai](https://www.chaijs.com/) and [Sinon](https://sinonjs.org/) are used to write Javascript tests.
+- [ESLint](https://eslint.org/) is used to lint JS files.
+- [Webpack](https://webpack.js.org/) is used to bundle assets.
 
-## Xdebug develop mode
+# Workflow Commands
 
-[Xdebug develop mode](https://xdebug.org/docs/develop) is disabled by default because it causes performance issues due to conflicts with the DI container.
+```bash
+$ ./do install             # install PHP and JS dependencies
+$ ./do update              # update PHP and JS dependencies
 
-It can be enabled when needed using the `XDEBUG_MODE` environment variable. For example, it is possible to enable it by adding the following to `docker-compose.override.yml`:
+$ ./do compile:css         # compiles SCSS files into CSS.
+$ ./do compile:js          # bundles JS files for the browser.
+$ ./do compile:all         # compiles CSS and JS files.
 
-```
-environment:
-    XDEBUG_MODE: debug, develop
+$ ./do watch:css           # watch CSS files for changes and compile them.
+$ ./do watch:js            # watch JS files for changes and compile them.
+$ ./do watch               # watch CSS and JS files for changes and compile them.
+
+$ ./do test:unit [--file=...] [--debug]
+  # runs the PHP unit tests.
+  # if --file specified then only tests on that file are executed.
+  # if --debug then tests are executed in debugging mode.
+$ ./do test:integration [--file=...] [--multisite] [--debug]
+  # runs the PHP integration tests.
+  # if --file specified then only tests on that file are executed.
+  # if --multisite then tests are executed in a multisite wordpress setup.
+  # if --debug then tests are executed in debugging mode.
+$ ./do test:multisite:integration # alias for ./do test:integration --multisite
+$ ./do test:debug:unit            # alias for ./do test:unit --debug
+$ ./do test:debug:integration     # alias for ./do test:integration --debug
+$ ./do test:failed:unit           # run the last failing unit test.
+$ ./do test:failed:integration    # run the last failing integration test.
+$ ./do test:coverage              # run tests and output coverage information.
+$ ./do test:javascript            # run the JS tests.
+$ ./do test:acceptance [--file=...] [--skip-deps]
+  # run acceptances tests into a docker environment.
+  # if --file given then only tests on that file are executed.
+  # if --skip-deps then it skips installation of composer dependencies.
+$ ./do test:acceptance:multisite [--file=...] [--skip-deps]
+  # same as test:acceptance but runs into a multisite wordpress setup.
+$ ./do delete:docker      # stop and remove all running docker containers.
+
+$ ./do qa:lint             # PHP code linter.
+$ ./do qa:lint:javascript  # JS code linter.
+$ ./do qa:phpstan          # PHP code static analysis using PHPStan.
+$ ./do qa                  # PHP and JS linters.
+
+$ ./do changelog:get  [--version-name=...]     # Prints out changelog and release notes for given version or for newest version.
+$ ./do changelog:update  [--version-name=...] [--quiet] # Updates changelog in readme.txt for given version or for newest version.
+
+$ ./do container:dump      # Generates DI container cache.
 ```
 
-## Xdebug for integration tests
+# Coding and Testing
 
-- In Languages & Preferences > PHP > Servers create a new sever named `MailPoetTest`, set the host to `localhost` and port to `80` and set following path mappings:
+## DI
 
-```shell
-wordpress        -> /wp-core
-mailpoet         -> /wp-core/wp-content/plugins/mailpoet
-mailpoet-premium -> /wp-core/wp-content/plugins/mailpoet-premium
-mailpoet/vendor/bin/codecept -> /project/vendor/bin/codecept
-mailpoet/vendor/bin/wp -> /usr/local/bin/wp
+We use Symfony/dependency-injection container. Container configuration can be found in `libs/DI/ContainerFactory.php`
+The container is configured and used with minimum sub-dependencies to keep final package size small.
+You can check [the docs](https://symfony.com/doc/3.4/components/dependency_injection.html) to learn more about Symfony Container.
+
+## PHP-Scoper
+
+We use PHP-Scoper package to prevent plugin libraries conflicts in PHP. Two plugins may be using different versions of a library. PHP-Scoper prefix dependencies namespaces and they are then moved into `vendor-prefixed` directory.
+Dependencies handled by PHP-Scoper are configured in extra configuration files `prefixer/composer.json` and `prefixer/scoper.inc.php`. Installation and processing is triggered in post scripts of the main `composer.json` file.
+
+## i18n
+
+We use functions `__()`, `_n()` and `_x()` with domain `mailpoet` to translate strings.
+
+**in PHP code**
+
+```php
+__('text to translate', 'mailpoet');
+_n('single text', 'plural text', $number, 'mailpoet');
+_x('text to translate', 'context for translators', 'mailpoet');
 ```
 
-- Add `XDEBUG_TRIGGER: 1` environment to `mailpoet/tests/docker/docker-compose.yml` -> codeception service to start triggering Xdebug
-- Make PHPStorm listen to connections by clicking on the phone icon
+**in Twig views**
 
-## 💾 NFS volume sharing for Mac
-
-NFS volumes can bring more stability and performance on Docker for Mac. To setup NFS volume sharing run:
-
-```shell
-sudo sh dev/mac-nfs-setup.sh
+```html
+<%= __('text to translate') %>
+<%= _n('single text', 'plural text', $number) %>
+<%= _x('text to translate', 'context for translators') %>
 ```
 
-Then create a Docker Compose override file with NFS settings and restart containers:
+The domain `mailpoet` will be added automatically by the Twig functions.
 
-```shell
-cp docker-compose.override.macos-sample.yml docker-compose.override.yml
+**in Javascript code**
 
-docker-compose down -v --remove-orphans
-docker-compose up -d
+First add the string to the translations block in the Twig view:
+
+```html
+<% block translations %>
+  <%= localize({
+    'key': __('string to translate'),
+    ...
+  }) %>
+<% endblock %>
 ```
 
-**NOTE:** If you are on MacOS Catalina or newer, make sure to put the repository
-outside your `Documents` folder, otherwise you may run into [file permission issues](https://objekt.click/2019/11/docker-the-problem-with-macos-catalina/).
+Then use `MailPoet.I18n.t('key')` to get the translated string on your Javascript code.
 
-# 🐶 Husky
+## Acceptance testing
 
-We use [Husky](https://github.com/typicode/husky) to run automated checks in pre-commit hooks.
+We are using Gravity Flow plugin's setup as an example for our acceptance test suite: https://www.stevenhenty.com/learn-acceptance-testing-deeply/
 
-In case you're using [NVM](https://github.com/nvm-sh/nvm) for Node version management you may
-need to create or update your `~/.huskyrc` file with:
+From the article above:
 
-```sh
-# This loads nvm.sh and sets the correct PATH before running the hooks:
-export NVM_DIR="$HOME/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
-```
+_Windows users only: enable hard drive sharing in the Docker settings._
 
-Without it, you may experience errors in some Git clients.
-
-## 🕹 Commands
-
-The `./do` script define aliases for most of the commands you will need while working on plugins:
-
-```shell
-./do setup                           Setup the environment.
-./do start                           Start the docker containers.
-./do stop                            Stop the docker containers.
-./do ssh [--test]                    Run an interactive bash shell inside the plugin directory.
-./do run [--test] <command>          Run a custom bash command in the wordpress container.
-./do acceptance [--premium]          Run acceptance tests.
-./do build [--premium]               Builds a .zip for the plugin.
-./do templates                       Generates templates classes and assets.
-./do [--test] [--premium] <command>  Run './do <command>' inside the plugin directory.
-
-Options:
-   --test     Run the command using the 'test_wordpress' service.
-   --premium  Run the command inside the premium plugin.
-```
-
-You can access this help in your command line running `./do` without parameters.
-
-## ✉️ Adding new templates to the plugin
-
-[Read the article.](https://mailpoet.atlassian.net/wiki/spaces/MAILPOET/pages/629374977/Adding+new+templates+to+the+plugin)
-
-## 🚥 Testing with PHP 7.4 or PHP 8.0
-
-To switch the environment to PHP 7.4/8.0:
-
-1. Configure the `wordpress` service in `docker-compose.override.yml` to build from the php74 Dockerfile:
-
-   ```yaml
-   wordpress:
-     build:
-       context: .
-       dockerfile: dev/php74/Dockerfile # OR dev/php80/Dockerfile
-   ```
-
-2. Run `docker-compose build wordpress`.
-3. Start the stack with `./do start`.
-
-To switch back to PHP 8.1 remove what was added in 1) and, run `docker-compose build wordpress` for application container and `docker-compose build test_wordpress` for tests container,
-and start the stack using `./do start`.
-
-## ✅ TODO
-
-- install woo commerce, members and other useful plugins by default
+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.

RoboFile.php

@@ -0,0 +1,938 @@
+<?php
+
+class RoboFile extends \Robo\Tasks {
+  const ZIP_BUILD_PATH = __DIR__ . '/mailpoet.zip';
+
+  use \Codeception\Task\SplitTestsByGroups;
+
+  public function __construct() {
+
+    // disable xdebug to avoid slowing down command execution
+    $xdebug_handler = new \Composer\XdebugHandler\XdebugHandler('mailpoet');
+    $xdebug_handler->setPersistent();
+    $xdebug_handler->check();
+
+    $dotenv = new Dotenv\Dotenv(__DIR__);
+    $dotenv->load();
+  }
+
+  function install() {
+    return $this->taskExecStack()
+      ->stopOnFail()
+      ->exec('./composer.phar install')
+      ->exec('npm ci --prefer-offline')
+      ->run();
+  }
+
+  function update() {
+    return $this->taskExecStack()
+      ->stopOnFail()
+      ->exec('./composer.phar update')
+      ->exec('npm update')
+      ->run();
+  }
+
+  function watch() {
+    $this->say('Warning: this lints and compiles all files, not just the changed one. Use separate tasks watch:js and watch:css for faster and more efficient watching.');
+    $css_files = $this->rsearch('assets/css/src/', ['scss']);
+    $js_files = $this->rsearch('assets/js/src/', ['js', 'jsx']);
+
+    $this->taskWatch()
+      ->monitor($js_files, function() {
+        $this->compileJs();
+      })
+      ->monitor($css_files, function() {
+        $this->compileCss();
+      })
+      ->run();
+  }
+
+  function watchCss() {
+    $css_files = $this->rsearch('assets/css/src/', ['scss']);
+    $this->taskWatch()
+      ->monitor($css_files, function($changedFile) {
+        $file = $changedFile->getResource()->getResource();
+        $this->taskExecStack()
+          ->stopOnFail()
+          ->exec('npm run stylelint -- "' . $file . '"')
+          ->exec('npm run scss')
+          ->exec('npm run autoprefixer')
+          ->run();
+      })
+      ->run();
+  }
+
+  function watchJs() {
+    $this->_exec('./node_modules/webpack/bin/webpack.js --watch');
+  }
+
+  function compileAll($opts = ['env' => null]) {
+    $collection = $this->collectionBuilder();
+    $collection->addCode(function() use ($opts) {
+      return call_user_func([$this, 'compileJs'], $opts);
+    });
+    $collection->addCode(function() use ($opts) {
+      return call_user_func([$this, 'compileCss'], $opts);
+    });
+    return $collection->run();
+  }
+
+  function compileJs($opts = ['env' => null]) {
+    if (!is_dir('assets/dist/js')) {
+      mkdir('assets/dist/js', 0777, true);
+    }
+    $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($opts = ['env' => null]) {
+    if (!is_dir('assets/dist/css')) {
+      mkdir('assets/dist/css', 0777, true);
+    }
+    // Clean up folder from previous files
+    array_map('unlink', glob("assets/dist/css/*.*"));
+
+    $this->_exec('npm run stylelint -- "assets/css/src/components/**/*.scss"');
+    $this->_exec('npm run scss');
+    $compilation_result = $this->_exec('npm run autoprefixer');
+
+    // Create manifest file
+    $manifest = [];
+    foreach (glob('assets/dist/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/dist/css/manifest.json', json_encode($manifest, JSON_PRETTY_PRINT));
+    return $compilation_result;
+  }
+
+  function translationsInit() {
+    // Define WP_TRANSIFEX_API_TOKEN env. variable
+    return $this->_exec('./tasks/transifex_init.sh');
+  }
+
+  function translationsBuild() {
+    return $this->_exec('./node_modules/.bin/grunt makepot' .
+      ' --gruntfile=' . __DIR__ . '/tasks/makepot/makepot.js' .
+      ' --base_path=' . __DIR__
+    );
+  }
+
+  function translationsPack() {
+    return $this->collectionBuilder()
+      ->addCode([$this, 'translationsInit'])
+      ->taskExec('./tasks/pack_translations.sh')
+      ->run();
+  }
+
+  function translationsPush() {
+    return $this->collectionBuilder()
+      ->addCode([$this, 'translationsInit'])
+      ->taskExec('tx push -s')
+      ->run();
+  }
+
+  function testUnit(array $opts=['file' => null, 'xml' => false, 'multisite' => false, 'debug' => false]) {
+    $command = 'vendor/bin/codecept run unit';
+
+    if ($opts['file']) {
+      $command .= ' -f ' . $opts['file'];
+    }
+
+    if ($opts['xml']) {
+      $command .= ' --xml';
+    }
+
+    if ($opts['debug']) {
+      $command .= ' --debug';
+    }
+
+    return $this->_exec($command);
+  }
+
+  function testIntegration(array $opts=['file' => null, 'xml' => false, 'multisite' => false, 'debug' => false]) {
+    $command = 'vendor/bin/codecept run integration';
+
+    if ($opts['multisite']) {
+      $command = 'MULTISITE=true ' . $command;
+    }
+
+    if ($opts['file']) {
+      $command .= ' -f ' . $opts['file'];
+    }
+
+    if ($opts['xml']) {
+      $command .= ' --xml';
+    }
+
+    if ($opts['debug']) {
+      $command .= ' --debug';
+    }
+
+    return $this->_exec($command);
+  }
+
+  function testMultisiteIntegration($opts=['file' => null, 'xml' => false, 'multisite' => true]) {
+    return $this->testIntegration($opts);
+  }
+
+  function testCoverage($opts=['file' => null, 'xml' => false]) {
+    $command = join(' ', [
+      'vendor/bin/codecept run -s acceptance',
+      (($opts['file']) ? $opts['file'] : ''),
+      '--coverage',
+      ($opts['xml']) ? '--coverage-xml' : '--coverage-html',
+    ]);
+
+    if ($opts['xml']) {
+      $command .= ' --xml';
+    }
+
+    return $this->execWithXDebug($command);
+  }
+
+  function testJavascript($xml_output_file = null) {
+    $this->compileJs();
+
+    $command = join(' ', [
+      './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 securityComposer() {
+    return $this->collectionBuilder()
+      ->taskExec('vendor/bin/security-checker security:check --format=simple')
+      ->taskExec('vendor/bin/security-checker security:check --format=simple prefixer/composer.lock')
+      ->run();
+  }
+
+  function testDebugUnit($opts=['file' => null, 'xml' => false, 'debug' => true]) {
+    return $this->testUnit($opts);
+  }
+
+  function testDebugIntegration($opts=['file' => null, 'xml' => false, 'debug' => true]) {
+    return $this->testIntegration($opts);
+  }
+
+  function testAcceptance($opts=['file' => null, 'skip-deps' => false, 'timeout' => null]) {
+    return $this->taskExec(
+      'COMPOSE_HTTP_TIMEOUT=200 docker-compose run ' .
+      ($opts['skip-deps'] ? '-e SKIP_DEPS=1 ' : '') .
+      ($opts['timeout'] ? '-e WAIT_TIMEOUT=' . (int)$opts['timeout'] . ' ' : '') .
+      'codeception --steps --debug -vvv ' .
+      '-f ' . ($opts['file'] ? $opts['file'] : '')
+    )->dir(__DIR__ . '/tests/docker')->run();
+  }
+
+  function testAcceptanceMultisite($opts=['file' => null, 'skip-deps' => false, 'timeout' => null]) {
+    return $this->taskExec(
+      'COMPOSE_HTTP_TIMEOUT=200 docker-compose run ' .
+      ($opts['skip-deps'] ? '-e SKIP_DEPS=1 ' : '') .
+      ($opts['timeout'] ? '-e WAIT_TIMEOUT=' . (int)$opts['timeout'] . ' ' : '') .
+      '-e MULTISITE=1 ' .
+      'codeception --steps --debug -vvv' .
+      '-f ' . ($opts['file'] ? $opts['file'] : '')
+    )->dir(__DIR__ . '/tests/docker')->run();
+  }
+
+  function deleteDocker() {
+    return $this->taskExec(
+      'docker-compose down -v --remove-orphans --rmi all'
+    )->dir(__DIR__ . '/tests/docker')->run();
+  }
+
+  function testFailedUnit() {
+    $this->_exec('vendor/bin/codecept build');
+    return $this->_exec('vendor/bin/codecept run unit -g failed');
+  }
+
+  function testFailedIntegration() {
+    $this->_exec('vendor/bin/codecept build');
+    return $this->_exec('vendor/bin/codecept run integration -g failed');
+  }
+
+  function containerDump() {
+    define('ABSPATH', getenv('WP_ROOT') . '/');
+    if (!file_exists(ABSPATH . 'wp-config.php')) {
+      $this->yell('WP_ROOT env variable does not contain valid path to wordpress root.', 40, 'red');
+      exit(1);
+    }
+
+    $configurator = new \MailPoet\DI\ContainerConfigurator();
+    $dump_file = __DIR__ . '/generated/' . $configurator->getDumpClassname() . '.php';
+    $this->say('Deleting DI Container');
+    $this->_exec("rm -f $dump_file");
+    $this->say('Generating DI container cache');
+    $container_factory = new \MailPoet\DI\ContainerFactory($configurator);
+    $container = $container_factory->getConfiguredContainer();
+    $container->compile();
+    $dumper = new \MailPoetVendor\Symfony\Component\DependencyInjection\Dumper\PhpDumper($container);
+    file_put_contents(
+      $dump_file,
+      $dumper->dump([
+        'class' => $configurator->getDumpClassname(),
+        'namespace' => $configurator->getDumpNamespace(),
+      ])
+    );
+  }
+
+  function doctrineGenerateMetadata() {
+    $metadata_dir = \MailPoet\Doctrine\ConfigurationFactory::METADATA_DIR;
+    $this->_exec("rm -rf $metadata_dir");
+
+    $entity_manager = $this->createDoctrineEntityManager();
+    $entity_manager->getMetadataFactory()->getAllMetadata();
+    $this->say("Doctrine metadata generated to: $metadata_dir");
+  }
+
+  function doctrineGenerateProxies() {
+    $proxy_dir = \MailPoet\Doctrine\ConfigurationFactory::PROXY_DIR;
+    $this->_exec("rm -rf $proxy_dir");
+
+    // set ArrayCache for metadata to avoid reading & writing them on filesystem as a side effect
+    $entity_manager = $this->createDoctrineEntityManager();
+    $entity_manager->getMetadataFactory()->setCacheDriver(new \MailPoetVendor\Doctrine\Common\Cache\ArrayCache());
+    $entity_manager->getProxyFactory()->generateProxyClasses(
+      $entity_manager->getMetadataFactory()->getAllMetadata()
+    );
+    $this->say("Doctrine proxies generated to: $proxy_dir");
+  }
+
+  function qa() {
+    $collection = $this->collectionBuilder();
+    $collection->addCode([$this, 'qaLint']);
+    $collection->addCode(function() {
+      return $this->qaCodeSniffer('all');
+    });
+    $collection->addCode([$this, 'qaLintJavascript']);
+    $collection->addCode([$this, 'qaLintCss']);
+    return $collection->run();
+  }
+
+  function qaLint() {
+    return $this->_exec('./tasks/code_sniffer/vendor/bin/parallel-lint lib/ tests/ mailpoet.php');
+  }
+
+  function qaLintJavascript() {
+    return $this->_exec('npm run lint');
+  }
+
+  function qaLintCss() {
+    return $this->_exec('npm run stylelint -- "assets/css/src/components/**/*.scss"');
+  }
+
+  function qaCodeSniffer($severity='errors') {
+    if ($severity === 'all') {
+      $severityFlag = '-w';
+    } else {
+      $severityFlag = '-n';
+    }
+    return $this->collectionBuilder()
+      ->taskExec(
+        './tasks/code_sniffer/vendor/bin/phpcs ' .
+        '--standard=./tasks/code_sniffer/MailPoet ' .
+        '--runtime-set testVersion 5.6-7.3 ' .
+        '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,' .
+        './lib/Util/pQuery/*,./lib/Config/PopulatorData/Templates/* ' .
+        'lib/ ' .
+        $severityFlag
+      )
+      ->taskExec(
+        './tasks/code_sniffer/vendor/bin/phpcs ' .
+        '--standard=./tasks/code_sniffer/MailPoet ' .
+        '--runtime-set testVersion 5.6-7.3 ' .
+        '--ignore=./tests/unit/_bootstrap.php,./tests/unit/_fixtures.php,./tests/integration/_bootstrap.php,./tests/integration/_fixtures.php ' .
+        'tests/unit tests/integration tests/acceptance tests/DataFactories ' .
+        $severityFlag
+      )
+      ->run();
+  }
+
+  function qaFixFile($filePath) {
+    if (substr($filePath, -4) === '.php') {
+      // fix PHPCS rules
+      return $this->collectionBuilder()
+        ->taskExec(
+          './tasks/code_sniffer/vendor/bin/phpcbf ' .
+            '--standard=./tasks/code_sniffer/MailPoet ' .
+            '--runtime-set testVersion 5.6-7.3 ' .
+            $filePath . ' -n'
+        )
+        ->run();
+    }
+    if (substr($filePath, -4) === '.jsx') {
+      // fix ESLint using ES6 rules
+      return $this->collectionBuilder()
+        ->taskExec(
+          'npx eslint -c .eslintrc.es6.json ' .
+            '--max-warnings 0 ' .
+            '--fix ' .
+            $filePath
+        )
+        ->run();
+    }
+    if (substr($filePath, -8) === '.spec.js') {
+      // fix ESLint using tests rules
+      return $this->collectionBuilder()
+        ->taskExec(
+          'npx eslint -c .eslintrc.tests.json ' .
+            '--max-warnings 0 ' .
+            '--fix ' .
+            $filePath
+        )
+        ->run();
+    }
+    if (substr($filePath, -3) === '.js') {
+      // fix ESLint using ES5 rules
+      return $this->collectionBuilder()
+        ->taskExec(
+          'npx eslint -c .eslintrc.es5.json ' .
+            '--max-warnings 0 ' .
+            '--fix ' .
+            $filePath
+        )
+        ->run();
+    }
+  }
+
+  function qaPhpstan() {
+    // PHPStan must be run out of main plugin directory to avoid its autoloading
+    // from vendor/autoload.php where some dev dependencies cause conflicts.
+    $dir = __DIR__;
+    return $this->collectionBuilder()
+      ->taskExec('rm -rf ' . __DIR__ . '/vendor/goaop')
+      ->taskExec('rm -rf ' . __DIR__ . '/vendor/nikic')
+      ->taskExec('cd ' . __DIR__ . ' && ./composer.phar dump-autoload')
+      ->taskExec(
+        'WP_ROOT="' . getenv('WP_ROOT') . '" ' .
+        'php -d memory_limit=2G ' .
+        "$dir/phpstan.phar analyse " .
+        "--configuration $dir/tasks/phpstan/phpstan.neon " .
+        '--level 5 ' .
+        "$dir/lib"
+      )
+      ->dir(__DIR__ . '/tasks/phpstan')
+      ->taskExec('cd ' . __DIR__ . ' && ./composer.phar install')
+      ->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 svnPushTemplates() {
+    $collection = $this->collectionBuilder();
+    $this->svnCheckout();
+    $awkCmd = '{print " --force \""$2"\""}';
+    $xargsFlag = (stripos(PHP_OS, 'Darwin') !== false) ? '' : '-r';
+    return $collection->taskExecStack()
+      ->stopOnFail()
+      ->dir('.mp_svn')
+      ->exec('cp -R ../plugin_repository/assets/newsletter-templates/* assets/newsletter-templates')
+      ->exec("svn st | grep ^! | awk '$awkCmd' | xargs $xargsFlag svn rm --keep-local")
+      ->exec('svn add --force * --auto-props --parents --depth infinity -q')
+      ->exec('svn commit -m "Push Templates for test"')
+      ->run();
+  }
+
+  function svnPublish() {
+    $svn_dir = ".mp_svn";
+    $plugin_version = $this->getPluginVersion('mailpoet.php');
+    $plugin_dist_name = 'mailpoet';
+    $plugin_dist_file = $plugin_dist_name . '.zip';
+
+    if (!$plugin_version) {
+      throw new \Exception('Could not parse plugin version, check the plugin header');
+    }
+    $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(["$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 --keep-local")
+      // 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()) {
+      $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\"";
+      $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";
+        $tag_cmd .= " --username $svn_login --password $svn_password";
+      } else {
+        $release_cmd .= ' --force-interactive';
+        $tag_cmd .= ' --force-interactive';
+      }
+      $result = $this->taskExecStack()
+        ->stopOnFail()
+        ->dir($svn_dir)
+        ->exec($release_cmd)
+        ->exec($tag_cmd)
+        ->run();
+    }
+
+    return $result;
+  }
+
+  public function testAcceptanceGroupTests() {
+    return $this->taskSplitTestFilesByGroups(5)
+      ->projectRoot('.')
+      ->testsFrom('tests/acceptance')
+      ->groupsTo('tests/acceptance/_groups/group_')
+      ->run();
+  }
+
+  public function releasePrepare($version = null) {
+    $version = $this->releaseVersionAssign($version, ['return' => true]);
+
+    return $this->collectionBuilder()
+      ->addCode(function () use ($version) {
+        return $this->releaseCheckIssues($version);
+      })
+      ->addCode(function () {
+        $this->releasePrepareGit();
+      })
+      ->addCode(function () use ($version) {
+        return $this->releaseVersionWrite($version);
+      })
+      ->addCode(function () use ($version) {
+        return $this->releaseChangelogWrite($version);
+      })
+      ->addCode(function () use ($version) {
+        $this->releaseCreatePullRequest($version);
+      })
+      ->run();
+  }
+
+  public function releaseCheckIssues($version = null) {
+    $jira = $this->createJiraController();
+    $version = $jira->getVersion($this->releaseVersionGetNext($version));
+    $issues = $jira->getIssuesDataForVersion($version);
+    $pull_requests_id = \MailPoetTasks\Release\JiraController::PULL_REQUESTS_ID;
+    foreach ($issues as $issue) {
+      if (strpos($issue['fields'][$pull_requests_id], 'state=OPEN') !== false) {
+        $key = $issue['key'];
+        $this->yell("Some pull request associated to task {$key} is not merged yet!", 40, 'red');
+        exit(1);
+      }
+    }
+  }
+
+  public function releasePrepareGit() {
+    // make sure working directory is clean
+    $git_status = $this->taskGitStack()
+      ->printOutput(false)
+      ->exec('git status --porcelain')
+      ->run();
+    if (strlen(trim($git_status->getMessage())) > 0) {
+      $this->yell('Please make sure your working directory is clean before running release.', 40, 'red');
+      exit(1);
+    }
+    // checkout master and pull from remote
+    $this->taskGitStack()
+      ->stopOnFail()
+      ->checkout('master')
+      ->pull()
+      ->run();
+    // make sure release branch doesn't exist on github
+    $release_branch_status = $this->taskGitStack()
+      ->printOutput(false)
+      ->exec('git ls-remote --heads git@github.com:mailpoet/mailpoet.git release')
+      ->run();
+    if (strlen(trim($release_branch_status->getMessage())) > 0) {
+      $this->yell('Delete old release branch before running release.', 40, 'red');
+      exit(1);
+    }
+    // check if local branch with name "release" exists
+    $git_status = $this->taskGitStack()
+      ->printOutput(false)
+      ->exec('git rev-parse --verify release')
+      ->run();
+    if ($git_status->wasSuccessful()) {
+      // delete local "release" branch
+      $this->taskGitStack()
+        ->printOutput(false)
+        ->exec('git branch -D release')
+        ->run();
+    }
+    // create a new "release" branch and switch to it.
+    $this->taskGitStack()
+      ->printOutput(false)
+      ->exec('git checkout -b release')
+      ->run();
+  }
+
+  public function releaseCreatePullRequest($version) {
+    $this->taskGitStack()
+      ->stopOnFail()
+      ->add('-A')
+      ->commit('Release ' . $version)
+      ->exec('git push --set-upstream git@github.com:mailpoet/mailpoet.git release')
+      ->run();
+    $this->createGitHubController()
+      ->createReleasePullRequest($version);
+  }
+
+  public function releasePublish($version = null) {
+    $version = $this->releaseVersionGetNext($version);
+    return $this->collectionBuilder()
+      ->addCode(function () use ($version) {
+        return $this->releaseCheckPullRequest($version);
+      })
+      ->addCode(function () {
+        return $this->releaseDownloadZip();
+      })
+      ->addCode(function () {
+        return $this->translationsBuild();
+      })
+      ->addCode(function () {
+        return $this->translationsPush();
+      })
+      ->addCode(function () {
+        return $this->svnCheckout();
+      })
+      ->addCode(function () {
+        return $this->svnPublish();
+      })
+      ->addCode(function () use ($version) {
+        return $this->releasePublishGithub($version);
+      })
+      ->addCode(function () use ($version) {
+        return $this->releasePublishJira($version);
+      })
+      ->addCode(function () use ($version) {
+        return $this->releasePublishSlack($version);
+      })
+      ->run();
+  }
+
+  public function releaseCheckPullRequest($version) {
+    $this->createGitHubController()
+      ->checkReleasePullRequestPassed($version);
+  }
+
+  public function releaseVersionGetNext($version = null) {
+    if (!$version) {
+      $version = $this->getReleaseVersionController()
+        ->determineNextVersion();
+    }
+    $this->validateVersion($version);
+    return $version;
+  }
+
+  public function releaseVersionAssign($version = null, $opts = []) {
+    $version = $this->releaseVersionGetNext($version);
+    try {
+      list($version, $output) = $this->getReleaseVersionController()
+        ->assignVersionToCompletedTickets($version);
+    } catch (\Exception $e) {
+      $this->yell($e->getMessage(), 40, 'red');
+      exit(1);
+    }
+    $this->say($output);
+    if (!empty($opts['return'])) {
+      return $version;
+    }
+  }
+
+  public function releaseVersionWrite($version) {
+    $version = trim($version);
+    $this->validateVersion($version);
+
+    $this->taskReplaceInFile(__DIR__ . '/readme.txt')
+      ->regex('/Stable tag:\s*\d+\.\d+\.\d+/i')
+      ->to('Stable tag: ' . $version)
+      ->run();
+
+    $this->taskReplaceInFile(__DIR__ . '/mailpoet.php')
+      ->regex('/Version:\s*\d+\.\d+\.\d+/i')
+      ->to('Version: ' . $version)
+      ->run();
+
+    $this->taskReplaceInFile(__DIR__ . '/mailpoet.php')
+      ->regex("/['\"]version['\"]\s*=>\s*['\"]\d+\.\d+\.\d+['\"],/i")
+      ->to(sprintf("'version' => '%s',", $version))
+      ->run();
+  }
+
+  function releaseChangelogGet($version = null) {
+    $outputs = $this->getChangelogController()->get($version);
+    $this->say("Changelog \n{$outputs[0]} \n{$outputs[1]}\n");
+    $this->say("IMPORTANT NOTES \n" . ($outputs[2] ?: 'none'));
+  }
+
+  function releaseChangelogWrite($version = null) {
+    $this->say("Updating changelog");
+    $outputs = $this->getChangelogController()->update($version);
+    $this->say("Changelog \n{$outputs[0]} \n{$outputs[1]}\n\n");
+    $this->say("IMPORTANT NOTES \n" . ($outputs[2] ?: 'none'));
+  }
+
+  public function releaseDownloadZip() {
+    $circleci_controller = $this->createCircleCiController();
+    $path = $circleci_controller->downloadLatestBuild(self::ZIP_BUILD_PATH);
+    $this->say('Release ZIP downloaded to: ' . $path);
+    $this->say(sprintf('Release ZIP file size: %.2F MB', filesize($path) / pow(1024, 2)));
+  }
+
+  public function releasePublishGithub($version = null) {
+    $jira_controller = $this->createJiraController();
+    $version = $jira_controller->getVersion($version);
+    $changelog = $this->getChangelogController()->get($version['name']);
+
+    $github_controller = $this->createGitHubController();
+    $github_controller->publishRelease($version['name'], $changelog[1], self::ZIP_BUILD_PATH);
+    $this->say("Release '$version[name]' was published to GitHub.");
+  }
+
+  public function releasePublishJira($version = null) {
+    $version = $this->releaseVersionGetNext($version);
+    $jira_controller = $this->createJiraController();
+    $jira_version = $jira_controller->releaseVersion($version);
+    $this->say("JIRA version '$jira_version[name]' was released.");
+  }
+
+  public function releasePublishSlack($version = null) {
+    $jira_controller = $this->createJiraController();
+    $version = $jira_controller->getVersion($version);
+    $changelog = $this->getChangelogController()->get($version['name']);
+
+    $slack_notifier = $this->createSlackNotifier();
+    $slack_notifier->notify($version['name'], $changelog[1], $version['id']);
+    $this->say("Release '$version[name]' info was published on Slack.");
+  }
+
+  public function generateData($generator_name) {
+    require_once __DIR__ . '/tests/DataGenerator/_bootstrap.php';
+    $generator = new \MailPoet\Test\DataGenerator\DataGenerator(new \Codeception\Lib\Console\Output([]));
+    $generator->run($generator_name);
+  }
+
+  protected function rsearch($folder, $extensions = []) {
+    $dir = new RecursiveDirectoryIterator($folder);
+    $iterator = new RecursiveIteratorIterator($dir);
+
+    $pattern = '/^.+\.(' . join($extensions, '|') . ')$/i';
+
+    $files = new RegexIterator(
+      $iterator,
+      $pattern,
+      RecursiveRegexIterator::GET_MATCH
+    );
+
+    $list = [];
+    foreach ($files as $file) {
+      $list[] = $file[0];
+    }
+
+    return $list;
+  }
+
+  protected function getPluginVersion($file) {
+    $data = file_get_contents($file);
+    preg_match('/^[ \t*]*Version:(.*)$/mi', $data, $m);
+    return !empty($m[1]) ? trim($m[1]) : false;
+  }
+
+  protected function validateVersion($version) {
+    if (!\MailPoetTasks\Release\VersionHelper::validateVersion($version)) {
+      $this->yell('Incorrect version format', 40, 'red');
+      exit(1);
+    }
+  }
+
+  protected function getChangelogController() {
+    return new \MailPoetTasks\Release\ChangelogController(
+      $this->createJiraController(),
+      __DIR__ . '/readme.txt'
+    );
+  }
+
+  protected function getReleaseVersionController() {
+    return new \MailPoetTasks\Release\ReleaseVersionController(
+      $this->createJiraController(),
+      \MailPoetTasks\Release\JiraController::PROJECT_MAILPOET
+    );
+  }
+
+  protected function createJiraController() {
+    $help = 'Use your JIRA username and a token from https://id.atlassian.com/manage/api-tokens.';
+    return new \MailPoetTasks\Release\JiraController(
+      $this->getEnv('WP_JIRA_TOKEN', $help),
+      $this->getEnv('WP_JIRA_USER', $help),
+      \MailPoetTasks\Release\JiraController::PROJECT_MAILPOET
+    );
+  }
+
+  protected function createCircleCiController() {
+    $help = "Use 'mailpoet' username and a token from https://circleci.com/gh/mailpoet/mailpoet/edit#api.";
+    return new \MailPoetTasks\Release\CircleCiController(
+      $this->getEnv('WP_CIRCLECI_USERNAME', $help),
+      $this->getEnv('WP_CIRCLECI_TOKEN', $help),
+      \MailPoetTasks\Release\CircleCiController::PROJECT_MAILPOET,
+      $this->createGitHubController()
+    );
+  }
+
+  protected function createGitHubController() {
+    $help = "Use your GitHub username and a token from https://github.com/settings/tokens with 'repo' scopes.";
+    return new \MailPoetTasks\Release\GitHubController(
+      $this->getEnv('WP_GITHUB_USERNAME', $help),
+      $this->getEnv('WP_GITHUB_TOKEN', $help),
+      \MailPoetTasks\Release\GitHubController::PROJECT_MAILPOET
+    );
+  }
+
+  protected function createSlackNotifier() {
+    $help = 'Use Webhook URL from https://mailpoet.slack.com/services/BHRB9AHSQ.';
+    return new \MailPoetTasks\Release\SlackNotifier(
+      $this->getEnv('WP_SLACK_WEBHOOK_URL', $help),
+      \MailPoetTasks\Release\SlackNotifier::PROJECT_MAILPOET
+    );
+  }
+
+  protected function getEnv($name, $help = null) {
+    $env = getenv($name);
+    if ($env === false || $env === '') {
+      $this->yell("Environment variable '$name' was not set.", 40, 'red');
+      if ($help !== null) {
+        $this->say('');
+        $this->say($help);
+      }
+      exit(1);
+    }
+    return $env;
+  }
+
+  private function execWithXDebug($command) {
+    $php_config = new \Composer\XdebugHandler\PhpConfig();
+    $php_config->useOriginal();
+
+    // exec command in subprocess with original settings
+    passthru($command, $exitCode);
+
+    $php_config->usePersistent();
+    return $exitCode;
+  }
+
+  private function createDoctrineEntityManager() {
+    define('ABSPATH', getenv('WP_ROOT') . '/');
+    if (\MailPoet\Config\Env::$db_prefix === null) {
+      \MailPoet\Config\Env::$db_prefix = ''; // ensure some prefix is set
+    }
+    $configuration = (new \MailPoet\Doctrine\ConfigurationFactory(true))->createConfiguration();
+    $platform_class = \MailPoet\Doctrine\ConnectionFactory::PLATFORM_CLASS;
+    return \MailPoetVendor\Doctrine\ORM\EntityManager::create([
+      'driver' => \MailPoet\Doctrine\ConnectionFactory::DRIVER,
+      'platform' => new $platform_class,
+    ], $configuration);
+  }
+}

SUPPORT.md

@@ -1,23 +0,0 @@
-# Getting Support
-
-Welcome to MailPoet!  
-This isn't the right place to get support for using MailPoet,
-but the following resources are available below,
-thanks for understanding.
-
-- [Support](https://www.mailpoet.com/support)
-- [Feature Requests](https://feedback.mailpoet.com)
-
-_DO NOT_ use the issue tracker to ask questions;
-use the links above for that.
-Questions posed to the issue tracker will be closed.
-
-When reporting an issue, please include the following details:
-
-- A narrative description of what you are trying to accomplish.
-- The expected results.
-- The actual results received.
-- We may ask for additional details: what version of the plugin you are using, and what PHP version
-  was used to reproduce the issue.
-
-You may also submit a failing test case as a pull request.

assets/css/src/admin.scss

@@ -0,0 +1,30 @@
+@import 'components/mixins';
+@import '../../../node_modules/select2/dist/css/select2';
+@import 'components/datepicker/datepicker';
+@import 'components/common';
+@import 'components/modal';
+@import 'components/notice';
+@import 'components/formEditor';
+@import 'components/listing';
+@import 'components/listing/newsletters';
+@import 'components/box';
+@import 'components/breadcrumb';
+@import 'components/form';
+@import 'components/parsley';
+@import 'components/formValidation';
+@import 'components/settings';
+@import 'components/progressBar';
+@import 'components/subscribers';
+@import 'components/pages';
+@import 'components/pagesCustom';
+@import 'components/premiumPage';
+@import 'components/mp2migrator';
+@import '../../../node_modules/intro.js/introjs';
+@import 'components/newsletterTemplates';
+@import 'components/welcomeWizard';
+@import 'components/intro';
+@import 'components/featureAnnouncement';
+@import 'components/newsletterCongratulate.scss';
+@import 'components/discounts';
+@import 'components/reviewRequest';
+@import 'components/stats';

assets/css/src/adminGlobal.scss

@@ -0,0 +1,2 @@
+@import 'components/globals';
+@import 'components/plugins/members';

assets/css/src/components/_breadcrumb.scss

@@ -0,0 +1,18 @@
+.mailpoet_breadcrumb {
+  color: #444;
+  font-size: .9em;
+  text-transform: uppercase;
+}
+
+.mailpoet_breadcrumb .mailpoet_current {
+  font-weight: bold;
+}
+
+.mailpoet_breadcrumb a {
+  color: #444;
+  text-decoration: none;
+}
+
+.mailpoet_breadcrumb a:hover {
+  color: darken(#444, 50%);
+}

assets/css/src/components/_common.scss

@@ -0,0 +1,107 @@
+.clearfix {
+  @include clearfix();
+}
+
+a:focus {
+  outline: 0 none !important;
+}
+
+.mailpoet_success {
+  color: #090;
+}
+
+.mailpoet_error {
+  color: #900;
+}
+
+.mailpoet_hidden {
+  display: none;
+}
+
+.mailpoet_spaced_block {
+  margin: 1em 0;
+}
+
+.mailpoet_centered {
+  text-align: center;
+}
+
+.select2-container {
+  width: 25em !important;
+}
+
+$placeholder-color: #999; /* default Select2 placeholder color for single dropdown */
+
+input.select2-search__field::-webkit-input-placeholder {
+  color: $placeholder-color;
+}
+
+input.select2-search__field:-moz-placeholder {
+  color: $placeholder-color;
+}
+
+input.select2-search__field::-moz-placeholder {
+  color: $placeholder-color;
+}
+
+input.select2-search__field:-ms-input-placeholder {
+  color: $placeholder-color;
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: 1px solid #aaa; /* default Select2 border for single dropdown */
+}
+
+textarea.regular-text {
+  width: 25em !important;
+}
+
+@media screen and (max-width: 782px) {
+  .select2-container {
+    width: 100% !important;
+  }
+}
+
+$progress-border-radius: 5px;
+$progress-background: #efefef;
+$progress-foreground: #69b1e9;
+
+progress {
+  background-color: $progress-background;
+  border: 0;
+  height: 2em;
+  width: 100%;
+}
+
+progress::-webkit-progress-bar {
+  background-color: $progress-background;
+}
+
+progress::-webkit-progress-value {
+  background-color: $progress-foreground;
+  border-radius: $progress-border-radius;
+}
+
+progress::-moz-progress-bar {
+  background-color: $progress-foreground;
+  border-radius: $progress-border-radius;
+}
+
+/* double class is intentional here, we need to be very specific here to
+   something wrapping our warning message could override its style */
+p.sender_email_address_warning.sender_email_address_warning,
+p.sender_email_address_warning.sender_email_address_warning a {
+  align-self: flex-start;
+  color: #900;
+  text-align: left;
+}
+
+p.sender_email_address_warning:first-child {
+  margin-top: 1em;
+}
+
+.button.mailpoet-button-bigger {
+  font-size: 1.5em;
+  height: 46px;
+  padding: 10px 18px;
+}

assets/css/src/components/_featureAnnouncement.scss

@@ -0,0 +1,56 @@
+.mailpoet_feature_announcement {
+  float: right;
+}
+
+.button.mailpoet_feature_announcement_button {
+  height: 28px;
+  padding: 0 5px 1px;
+  position: relative;
+}
+
+.mailpoet_feature_announcement_icon {
+  line-height: 28px;
+}
+
+.mailpoet_feature_announcement_dot:before {
+  background: #d54e21;
+  border-radius: 10px;
+  content: '';
+  display: block;
+  height: 10px;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+  width: 10px;
+}
+
+.mailpoet_in_beamer_update_notice {
+  background: #f00;
+  bottom: 0;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 20px;
+  margin: 0;
+  padding: 20px 10px;
+  position: fixed;
+  right: -400px;
+  text-align: center;
+  transition: right .2s ease-in;
+  width: 400px;
+  z-index: 10000000000; // really has to be this high
+
+  a {
+    color: #fff;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
+
+  .beamer_show & {
+    right: 0;
+  }
+}

assets/css/src/components/_form.scss

@@ -0,0 +1,7 @@
+.mailpoet_form {
+  margin: 0 0 20px;
+}
+
+.mailpoet_form td {
+  vertical-align: top !important;
+}

assets/css/src/components/_formEditor.scss

@@ -0,0 +1,647 @@
+@import '../../../../node_modules/codemirror/lib/codemirror';
+@import '../../../../node_modules/codemirror/theme/neo';
+
+$icons: '../../img/form_editor_icons.png';
+$handle_icon: '../../img/handle.png';
+
+#mailpoet_form_name {
+  font-size: 23px;
+}
+
+#mailpoet_form_history {
+  display: none;
+}
+
+#mailpoet_form_editor {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 5px rgba(0, 0, 0, .2), inset 0 0 20px rgba(0, 0, 0, .1);
+  padding: 20px;
+  position: relative;
+  width: 300px;
+}
+
+#mailpoet_form_editor:before,
+#mailpoet_form_editor:after {
+  background: transparent;
+  bottom: 12px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
+  content: ' ';
+  height: 10px;
+  left: 12px;
+  position: absolute;
+  transform: skew(-5deg) rotate(-5deg);
+  width: 40%;
+  z-index: -1;
+}
+
+#mailpoet_form_editor:after {
+  left: auto;
+  right: 12px;
+  transform: skew(5deg) rotate(5deg);
+}
+
+/* Warnings in blocks */
+.mailpoet_warning {
+  color: #900;
+  font-weight: bold;
+}
+
+.block_placeholder {
+  border: 0 none;
+  font-weight: bold;
+  height: 0;
+  line-height: 30px;
+  margin: 0 auto;
+  overflow: hidden;
+  text-align: center;
+  text-indent: -9999px;
+  width: 298px;
+  z-index: 9500;
+}
+
+.block_placeholder.active {
+  /* border:1px dashed #dfdfdf; */
+  /* background-color:#f5f5f5; */
+  background-color: #4cb7e1;
+  display: block;
+  height: 30px;
+  overflow: auto;
+  text-indent: 0;
+}
+
+.block_placeholder.hover {
+  background-color: #0074a2;
+  border-color: #0074a2;
+  color: #fff;
+}
+
+/* Widget: checkbox, radio */
+.mailpoet_radio,
+.mailpoet_checkbox {
+  margin: -2px 5px 0 0;
+}
+
+/* MailPoet Form wrapper */
+#mailpoet_form_wrapper {
+  margin: 20px 0 0;
+  position: relative;
+}
+
+/* MailPoet Form container */
+#mailpoet_form_container {
+  margin: 0;
+  width: 340px;
+}
+
+#mailpoet_form_editor.loading,
+#mailpoet_form_toolbar.loading {
+  background: url('loading.gif') no-repeat center center #fcfcfc;
+}
+
+#mailpoet_form_toolbar.loading {
+  border: 1px solid #dfdfdf;
+}
+
+#mailpoet_form_toolbar.loading #mailpoet_toolbar_fields {
+  visibility: hidden;
+  z-index: 1;
+}
+
+/* Tabs : content/images/styles/themes */
+#wysija-add-field {
+  float: none;
+}
+
+#mailpoet_form_toolbar {
+  position: absolute;
+  width: 400px;
+  z-index: 999;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs {
+  border-bottom: 1px solid #dfdfdf;
+  line-height: 0;
+}
+
+#mailpoet_form_toolbar .add_custom_field {
+  padding: 15px 0 5px;
+  text-align: center;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li,
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
+  display: inline-block;
+  *display: inline;
+  *float: left;
+  height: 30px;
+  line-height: 30px;
+  margin: 0;
+  outline: 0 none;
+  padding: 0;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li {
+  margin: 0 0 1px;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
+  background: linear-gradient(center top, #f9f9f9, #f5f5f5);
+  background-color: #f5f5f5;
+  border: 1px solid #dfdfdf;
+  border-radius: 3px 3px 0 0;
+  box-shadow: 0 1px 0 #fff inset;
+  color: #a6a6a6;
+  font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;
+  outline: 0 none;
+  padding: 0 7px;
+  text-decoration: none;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a:hover {
+  background-color: #eee;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected {
+  background: #fcfcfc;
+  border-bottom: 0 none;
+  color: #000;
+  filter: none;
+  padding-bottom: 1px;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs .last a,
+.wysija_params {
+  display: none !important;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs,
+#mailpoet_form_toolbar #mailpoet_toolbar_fields {
+  margin: 0;
+  position: relative;
+  z-index: 9998;
+}
+
+/* edit form name */
+#mailpoet_form_name_input {
+  vertical-align: bottom;
+}
+
+/* wysija widgets */
+.mailpoet_form_widget {
+  height: 25px;
+  line-height: 25px;
+  width: 298px;
+  z-index: 9999 !important;
+}
+
+.mailpoet_toolbar_section {
+  background: none repeat scroll 0 0 #fff;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
+  cursor: pointer;
+  margin-bottom: 0;
+  max-height: 2000px;
+  min-width: 255px;
+  overflow: hidden;
+  position: relative;
+  transition: max-height .5s ease-in-out;
+}
+
+.mailpoet_toolbar_section > div {
+  height: 100%;
+  min-width: 255px;
+  overflow: auto;
+  padding: 10px 20px 20px;
+}
+
+.mailpoet_toolbar_section h3 {
+  margin: 10px;
+  position: relative;
+}
+
+.mailpoet_toolbar_section.closed {
+  max-height: 38px;
+}
+
+.mailpoet_toolbar_section .mailpoet_toggle {
+  height: 38px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 27px;
+}
+
+.mailpoet_toolbar_section .mailpoet_toggle:focus {
+  box-shadow: none !important;
+  outline: 0 none !important;
+}
+
+.mailpoet_toolbar_section .mailpoet_toggle:before {
+  content: '\f142';
+  display: inline-block;
+  font: 400 20px / 1 dashicons;
+  padding: 8px 10px;
+  position: relative;
+  right: 12px;
+  speak: none;
+  text-decoration: none !important;
+  top: 0;
+}
+
+.mailpoet_toolbar_section.closed .mailpoet_toggle:before {
+  content: '\f140';
+}
+
+#mailpoet_form_styles {
+  margin: 10px;
+  max-width: 318px;
+  min-height: 300px;
+  resize: vertical;
+  width: 318px;
+}
+
+#mailpoet_form_toolbar a.mailpoet_form_field,
+.mailpoet_form_widget {
+  background: linear-gradient(center 0, #f9f9f9, #ececec);
+  background-color: #f5f5f5;
+  border: 1px solid #dfdfdf;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 #fff inset;
+  color: #222;
+  cursor: move;
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  height: 25px;
+  line-height: 25px;
+  padding: 0 7px;
+  text-shadow: 0 1px 0 #fff;
+}
+
+#mailpoet_form_toolbar a.mailpoet_form_field.disabled {
+  color: #ccc;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+.mailpoet_form_field_edit {
+  bottom: 13px;
+  position: absolute;
+  right: 27px;
+}
+
+.mailpoet_form_field_delete {
+  bottom: 13px;
+  position: absolute;
+  right: 7px;
+}
+
+/* toolbar: fields */
+#mailpoet_toolbar_fields li {
+  padding: 0 0 10px;
+  position: relative;
+}
+
+#mailpoet_toolbar_fields li.notice {
+  background: none !important;
+  border: 0 none !important;
+  font-size: 11px;
+  font-style: italic;
+  margin: 0 !important;
+}
+
+/* blocks */
+.mailpoet_form_block {
+  background-color: #fff;
+  border: 0 none;
+  display: inline-table;
+  display: block;
+  height: 1%;
+  margin: 0;
+  padding: 10px 18px;
+  position: relative;
+  z-index: 98;
+}
+
+.mailpoet_form_block.highlighted {
+  border: 1px solid #5897fb;
+  padding: 9px 17px;
+}
+
+.mailpoet_form_block img {
+  max-width: 100%;
+}
+
+/* Widget styles */
+.mailpoet_form_block p {
+  margin: 5px 0;
+  word-wrap: break-word;
+}
+
+.mailpoet_form_block.dragging {
+  pointer-events: none;
+  z-index: 99000;
+}
+
+.mailpoet_form_block:after {
+  clear: both;
+  content: '.';
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
+.mailpoet_form_block.hover {
+  border: 1px dashed #bbb;
+  margin: 0;
+  padding: 9px 17px;
+}
+
+.mailpoet_form_block.static {
+  background-color: #999;
+}
+
+/* controls */
+.mailpoet_form_block .wysija_controls {
+  background: linear-gradient(center 0, #eee, #bbb);
+  background-color: #dfdfdf;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  height: 20px;
+  left: -1px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: -22px;
+  width: 298px;
+}
+
+.mailpoet_form_block .wysija_controls li {
+  float: left;
+  height: 20px;
+  width: 20px;
+}
+
+.mailpoet_form_block .wysija_controls a {
+  color: #000;
+  cursor: pointer;
+  float: left;
+  font-size: 120%;
+  font-weight: bold;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  width: 20px;
+}
+
+.mailpoet_form_block .wysija_controls a.remove {
+  margin: 0 0 0 1px;
+}
+
+.mailpoet_form_block .handle_container,
+.mailpoet_form_block .handle_container a {
+  float: none;
+  width: 40px !important;
+}
+
+.mailpoet_form_block .handle_container {
+  left: 140px;
+  position: absolute;
+  top: 0;
+}
+
+/* controls & icons */
+.wysija_controls a span,
+.wysija_gallery .wysija_tools a span,
+.wysija_image .wysija_tools a span,
+.wysija_text .wysija_tools a span,
+#mailpoet_toolbar_fields a span {
+  display: block;
+  height: 20px;
+  width: 20px;
+}
+
+/* toolbar: full width button */
+/* color picker in control bars */
+.wysija_controls span input {
+  color: transparent;
+  margin: 2px 0 0;
+  padding: 0;
+}
+
+/* left alignment button */
+.alignment-left span {
+  background: url($icons) no-repeat 0 0;
+}
+
+.alignment-left.active span,
+.alignment-left:hover span {
+  background: url($icons) no-repeat 0 -20px;
+}
+
+/* center alignment button */
+.alignment-center span {
+  background: url($icons) no-repeat -20px 0;
+}
+
+.alignment-center.active span,
+.alignment-center:hover span {
+  background: url($icons) no-repeat -20px -20px;
+}
+
+/* right alignment button */
+.alignment-right span {
+  background: url($icons) no-repeat -40px 0;
+}
+
+.alignment-right.active span,
+.alignment-right:hover span {
+  background: url($icons) no-repeat -40px -20px;
+}
+
+/* linking */
+.add-link span {
+  background: url($icons) no-repeat -60px 0;
+}
+
+.add-link.active span,
+.add-link:hover span {
+  background: url($icons) no-repeat -60px -20px;
+}
+
+.remove-link span {
+  background: url($icons) no-repeat -80px 0;
+}
+
+.remove-link.active span,
+.remove-link:hover span {
+  background: url($icons) no-repeat -80px -20px;
+}
+
+/* block controls */
+.remove span,
+.delete span {
+  background: url($icons) no-repeat -100px 0;
+}
+
+.remove.active span,
+.remove:hover span,
+.delete.active span,
+.delete:hover span {
+  background: url($icons) no-repeat -100px -20px;
+}
+
+.handle span {
+  background: url($handle_icon) no-repeat;
+  cursor: move;
+  width: 40px !important;
+}
+
+.duplicate span {
+  background: url($icons) no-repeat -140px 0;
+}
+
+.duplicate.active span,
+.duplicate:hover span {
+  background: url($icons) no-repeat -140px -20px;
+}
+
+.settings span {
+  background: url($icons) no-repeat -160px 0;
+}
+
+.settings.active span,
+.settings:hover span {
+  background: url($icons) no-repeat -160px -20px;
+}
+
+.icon-plus span {
+  background: url($icons) no-repeat -200px 0;
+}
+
+.icon-plus.active span,
+.icon-plus:hover span {
+  background: url($icons) no-repeat -200px -20px;
+}
+
+.icon-minus span {
+  background: url($icons) no-repeat -220px 0;
+}
+
+.icon-minus.active span,
+.icon-minus:hover span {
+  background: url($icons) no-repeat -220px -20px;
+}
+
+/* wysija options */
+.wysija_options {
+  display: none;
+}
+
+/* wysija block settings */
+.wysija_settings {
+  position: absolute;
+  z-index: 1000;
+}
+
+.wysija_settings a {
+  background: linear-gradient(center 0, #f9f9f9, #ececec);
+  background-color: #f5f5f5;
+  border: 1px solid #dfdfdf;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 #fff inset;
+  color: #222;
+  cursor: pointer;
+  display: block;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 5px 5px 3px 27px;
+  text-decoration: none;
+  text-shadow: 0 1px 0 #fff;
+}
+
+.wysija_settings a span {
+  height: 20px;
+  left: 5px;
+  position: absolute;
+  top: 3px;
+  width: 20px;
+}
+
+/* labels */
+.mailpoet_form_block label {
+  display: block;
+  margin: 0 5px 0 0;
+}
+
+/* form settings: success message */
+#mailpoet_on_success textarea,
+#mailpoet_on_success select {
+  width: 100%;
+}
+
+#mailpoet_on_success textarea {
+  height: 50px;
+  min-height: 50px;
+  resize: vertical;
+}
+
+/* make sure textareas within the form editor are not resizeable */
+.mailpoet_form_block textarea {
+  resize: none;
+}
+
+/* remove click events from inputs within form editor */
+.mailpoet_form_block input,
+.mailpoet_form_block textarea {
+  pointer-events: none;
+}
+
+/* form export */
+#mailpoet_form_export textarea {
+  display: none;
+  font-size: 85%;
+  height: 150px;
+  min-height: 150px;
+  resize: vertical;
+  width: 340px;
+}
+
+/** Styling for WP 3.8 and higher */
+.mailpoet_form_field_edit,
+.mailpoet_form_field_delete {
+  text-decoration: none;
+}
+
+.mailpoet_form_field_edit:hover .dashicons-admin-generic:before,
+.mailpoet_form_field_delete:hover .dashicons-dismiss:before,
+.settings:hover .dashicons-admin-generic:before {
+  color: #2ea2cc;
+}
+
+.mailpoet_form_field_edit span,
+.mailpoet_form_field_delete span {
+  background: none !important;
+  color: #999;
+}
+
+.mailpoet_form_field_delete span:before {
+  font-size: 21px;
+}
+
+/* Code Mirror */
+.CodeMirror {
+  border: 1px solid #eee;
+}
+
+/* Settings */
+#mailpoet_form_segments.parsley-error + span .select2-selection {
+  border: 1px solid #b94a48;
+}
+
+.mailpoet_form_field_settings_text {
+  min-height: 100px;
+  width: 100%;
+}

assets/css/src/components/_formValidation.scss

@@ -0,0 +1,8 @@
+.parsley-errors-list {
+  margin-top: 8px;
+}
+
+.parsley-required,
+.parsley-custom-error-message {
+  color: #b94a48;
+}

assets/css/src/components/_globals.scss

@@ -0,0 +1,22 @@
+#wpbody {
+  padding-bottom: 20px;
+}
+
+/* menu icon */
+#adminmenu #toplevel_page_mailpoet-newsletters .wp-menu-image {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 18px 18px;
+}
+
+#adminmenu #toplevel_page_mailpoet-newsletters.wp-not-current-submenu .wp-menu-image {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABcFJREFUeNrsWHtsU1UYP7e37/W9MDYYInSosI6XEBhjgxEEDBI0GNTEGFFgEkR5iEGFsChBghJgSwBh4RElGhN1iQy2MF5jjMfYg40NeQxhjiEra2nXrrfry98pt1hqW1hj+YuTfOm95/R8/Z1zvu/3/U4ZEqV9uX7jZH3akAKXy5UR6NPpEjdtWJe/vurUSVO0uROyssmq1fnTTabOPXhN4bs5oVC476/Wmx98tnJZ2HkCEr2tgRmCO8xm09JPVq2emT0pN+pEj8czjmGYrXhMDuqWwmbBZkea9yhAOhgT3OHz+VisMlcgEPSNNCkrexIBaAN257nQ+WhimDZWQGEbVp7ldDoHRxoH4CSpVJoJ8EwkF/8rIBybfsmyFZkTcyaHHec4BwWbFYvvmAB5vV5WpVKPk0pl/f8TzBNzyOKPlmeYzeYhTwwQ316y220ZoZ1yeUKiVqcb6/V62CcK6J7ZrH1/4SIDDeDgZrPZRuPj1Vj9xgzI7XaT5JR+L2o02pR/uSeHvDc/b7jl3r0+fFcPzBpPQF0UC59pxOf1vtzVZR3/gCMSE5P7pw4YDSINdN2GVccTUCXsz8CL1WpRz33r7VE0kP3vFssoxM5UP1ifj0gkkssqtXo/kiBugDpgJ2Gd/vPo6SGD9PpMpVKZlp4xnMx5480RAJlEx2QyGamtOd+4vXBrk1qtjg8grFSGdC8B6V2lO0B3wuN2jzcajQaFQiF6/oWhIylInhxvddz5+/CF+lqhWCyJDyCVSiXbt6foZE31uYt0B/xZ1dWlmDlr9rPTZswcZ+rszAo6ritqtaZSLBYr6XtcAEkkUvbc2aru1tabx0Ui8V3ahxJChqVnTIMtxXOqv4JKZc7a2vOnyw4dsCtVKnHcghor9QGUBjFRhh24GDg2p5ObBHuFPvurp1jceuP69WOX/7hEpPxOxo2HECuSyooTd+sQsYilQPrI6QbyoOlxNau1Wn+6+3qRYTEBksvlpLmpkVxqvngEP9waOg6Q9gv1dVUnjh6xxIOpQ+sRi0zzz9FoNKeRPfXBAUufcZw3rrdcrairqY4kNZgwfh8bkDso5UlCgqJbKBI56Hv12TOWlmtXypFJrgAoxBdpbKivaaivawxmi4dWxLJSHLs9opaKejwJCfuVShXrcvUkyWRyY8WJo7+2t7X5s6v63BnCObniBXmLdYPT0qY7OQ5lTXfl4IHinRizB4m1FnDXUfgYLWBZH+rcscNlpRHLCRMN0OzXXhf0SUqaAH08EGzcCg6qgkNP8HcoQ+dOmTrMbrdDJcpq62qrrWeqTj0YH/DMQPiZMxDj07E75HZ7+5GS34tbyNP2tMWpMajQ9HMQLPV+WgobQHyWJwVgaLpB6/V40vkEa2eKD5bT28EO2JT7qS5f9/nK5b+ZOu8aeQka6e5luXWrjbPbbOHogqSmDpBD5ioiZDLtk4HD+mzYtGWuw8GtCAhAZu/+n9fiIT+EbTmBgK3kBZkvDJl61FrN2aId205VVVbcMBo7zJAhJEGhIH2TkhPHjs9MW/Thx9m4CNBbiSiEHH18n97r844BjZBAUfYj/f6nXz4Fz3wdg1jz7wR4quCHfbsLSksOtE2dNkM/b37eEmPHnTzwDoPrdu9j6JvNhfq+ySk/AuVQAFP01gHdURTU02KJZBfU4rucw5ETvOLHLqosS9n9mn/mxs2FVMOsBvcvwKrUvJSIVAAZgBA+jgqkwGDuMMceXOc4+OoymTp343ntQ0vZ8O0WOerODBzHFP5vFCaMAwlEl0EkEvWjei0KGKfb7Wp3dDua6I+GCQkKsgPfO9btsB9auXSJ7ZG1LFJ7Z958FXT0FxzHLQQoTRgwVmilbeVlpWuKdm5z98Z3TPdv3CScKKTlGcNHeHEpzAlRDU7c79eXHirJ371ru7e3vtlYCa3hQh2VqjdHjhpjgLh/8E8HVMFxVPOv9hZ9Z43F7z8CDAAMFFaTyVAO5gAAAABJRU5ErkJggg==');
+}
+
+#adminmenu #toplevel_page_mailpoet-newsletters.wp-has-current-submenu .wp-menu-image {
+  background-image: url('data:image/png;base64,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');
+}
+
+#adminmenu #toplevel_page_mailpoet-newsletters a:hover .wp-menu-image {
+  background-image: url('data:image/png;base64,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');
+}

assets/css/src/components/_importExport.scss

@@ -0,0 +1,239 @@
+.mailpoet_hidden,
+.mailpoet_validation_error {
+  display: none;
+}
+
+span {
+  &.mailpoet_mailchimp-key-status {
+    &.mailpoet_mailchimp-ok {
+      &:before {
+        color: #0e90d2;
+        content: '\2713';
+        margin-left: 15px;
+      }
+    }
+
+    &.mailpoet_mailchimp-error {
+      &:before {
+        color: #900;
+        content: '\2717';
+        margin-left: 15px;
+      }
+    }
+  }
+
+  &.select2-search {
+    &.select2-search--dropdown {
+      display: none !important;
+    }
+  }
+}
+
+.subscribers_data {
+  overflow: auto;
+
+  table {
+    width: auto;
+  }
+
+  td {
+    padding: .5em;
+  }
+
+  > table {
+    > thead {
+      > tr {
+        > th {
+          > span {
+            width: 15em !important;
+          }
+        }
+      }
+    }
+
+    > tbody {
+      > td {
+        padding: .5em;
+      }
+
+      > tr {
+        &:nth-child(odd) {
+          background: #f9f9f9;
+        }
+      }
+    }
+  }
+
+  th:first-child,
+  td:first-child {
+    padding: 0 1em !important;
+    text-align: center !important;
+    vertical-align: inherit !important;
+    width: 10em !important;
+  }
+
+  .mailpoet_header {
+    font-weight: 600;
+    text-decoration: underline;
+    text-transform: uppercase;
+  }
+}
+
+.mailpoet_data_match {
+  color: #0e90d2;
+  margin-left: .25em;
+}
+
+.mailpoet_import_error,
+.mailpoet_validation_error {
+  color: #900;
+}
+
+tr {
+  &.mailpoet_segments {
+    > td {
+      > a {
+        margin-left: 15px;
+      }
+    }
+  }
+}
+
+.mailpoet_data_manipulation_step {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    margin: 10px 0;
+  }
+
+  .mailpoet_label_description {
+    padding: 20px 10px 20px 0;
+    width: 310px;
+  }
+
+  .mailpoet_import_select_segment {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    label {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+    }
+
+    .mailpoet_create_segment {
+      margin-left: 15px;
+    }
+  }
+
+  .mailpoet_update_existing_subscribers {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    label {
+      margin-right: 4px;
+    }
+
+    .mailpoet_label_description {
+      font-weight: 400;
+    }
+  }
+}
+
+.mailpoet_subscribers_data_parse_results_details_show,
+.mailpoet_create_segment {
+  cursor: pointer;
+}
+
+.mailpoet_import_validation_step {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  width: 600px;
+
+  .mailpoet_import_step_buttons {
+    margin-top: 40px;
+  }
+
+  h2,
+  .mailpoet_last_sent {
+    margin-bottom: 40px;
+  }
+
+  .mailpoet_import_block {
+    p {
+      font-weight: bold;
+    }
+  }
+}
+
+.mailpoet_method_selection_step {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    margin: 10px 0;
+  }
+
+  .mailpoet_import_selection_form {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+
+    > * {
+      margin-right: 2.5em;
+    }
+  }
+
+  .mailpoet_import_heading {
+    color: #23282d;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  .description {
+    color: #666;
+    font-size: 13px;
+    font-style: italic;
+    font-weight: 600;
+    margin: 2px 0 5px;
+  }
+
+  .mailpoet_import_paste_texts {
+    margin-right: 25px;
+    width: 300px;
+  }
+
+  .mailpoet_import_method_paste {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .mailpoet_import_mailchimp {
+    .mailpoet_mailchimp_key,
+    .mailpoet_mailchimp_lists {
+      align-items: center;
+      display: flex;
+      flex-wrap: nowrap;
+      margin-bottom: 40px;
+    }
+
+    .mailpoet_mailchimp_key_input {
+      align-items: center;
+      display: flex;
+      margin-right: 20px;
+    }
+
+    .mailpoet_import_heading {
+      display: block;
+      width: 300px;
+    }
+  }
+}

assets/css/src/components/_intro.scss

@@ -0,0 +1,83 @@
+.mailpoet-intro-active #adminmenuback {
+  z-index: auto;
+}
+
+#adminmenuwrap.introjs-fixParent {
+  position: absolute;
+}
+
+#adminmenu li.introjs-showElement {
+  background: inherit;
+}
+
+.introjs-helperLayer {
+  background-color: rgba(255, 255, 255, .7);
+  border: none;
+  border-radius: 3px;
+}
+
+.introjs-tooltip {
+  min-width: 240px;
+
+  &[style*='top:'] {
+    margin-top: -8px;
+  }
+}
+
+.introjs-tooltip .introjs-tooltipbuttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.introjs-tooltip .button {
+  margin-top: 15px;
+  position: relative;
+
+  &:hover,
+  &:focus {
+    z-index: 1;
+  }
+
+  &:focus {
+    height: 100%;
+    margin-bottom: -1px;
+
+    &:after {
+      background: #5b9dd9;
+      bottom: 0;
+      content: '';
+      height: 1px;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  &.introjs-hidden {
+    display: none;
+  }
+
+  &.introjs-skipbutton:not(.introjs-donebutton) {
+    margin-right: auto;
+
+    + .button {
+      margin-left: 10px;
+    }
+  }
+
+  &.introjs-donebutton {
+    order: 1;
+  }
+
+  &.introjs-prevbutton {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &:not(.introjs-hidden) + .introjs-nextbutton,
+  &.introjs-donebutton {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    margin-left: -1px;
+  }
+}

assets/css/src/components/_listing.scss

@@ -0,0 +1,47 @@
+.mailpoet_listing_loading tbody tr,
+.mailpoet_form_loading tbody tr {
+  opacity: .2;
+}
+
+.mailpoet_select_all {
+  background-color: #f1f1f1;
+}
+
+.mailpoet_select_all td {
+  text-align: center;
+}
+
+.mailpoet_listing_table {
+  th span {
+    white-space: nowrap;
+  }
+
+  thead .mailpoet-check-column,
+  tfoot .mailpoet-check-column {
+    padding: 10px 0 0 3px;
+    vertical-align: top;
+    width: 2.2em;
+  }
+
+  tbody .mailpoet-check-column {
+    margin: 0 0 0 8px;
+    padding: 11px 0 0 3px;
+    vertical-align: text-top;
+  }
+
+  thead th.column-primary,
+  tfoot th.column-primary {
+    width: 25em;
+
+    .mailpoet-segments-listing & {
+      width: 18em;
+    }
+  }
+
+  @media screen and (max-width: 782px) {
+    thead th.column-primary,
+    tfoot th.column-primary {
+      width: 100% !important;
+    }
+  }
+}

assets/css/src/components/_modal.scss

@@ -0,0 +1,272 @@
+$modal_title_color: #cfcfcf;
+$modal_highlight_background_color: #f1f1f1;
+$modal_background_color: #fff;
+$modal_popup_margin: 30px;
+$modal_popup_margin_mobile: 10px;
+$modal_popup_padding: 30px;
+$modal_popup_padding_mobile: 12px;
+$modal_close_button_size: 23px;
+$overlay_background_color: rgba(0, 0, 0, .6);
+
+body.mailpoet_modal_opened {
+  overflow: hidden;
+}
+
+.mailpoet_modal_overlay {
+  align-items: center;
+  background-color: $overlay_background_color;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: $modal_popup_margin;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100000;
+}
+
+.mailpoet_modal_highlight {
+  background-color: $modal_highlight_background_color;
+  box-shadow: 0 0 20px 2px rgba(#fff, 75%);
+  pointer-events: none;
+  position: relative;
+  z-index: 100001 !important;
+}
+
+.mailpoet_modal_overlay.mailpoet_overlay_transparent {
+  background-color: transparent;
+}
+
+.mailpoet_modal_overlay.mailpoet_overlay_loading {
+  background-color: $overlay_background_color !important;
+  display: flex !important;
+}
+
+.mailpoet_popup {
+  animation: mailpoet_popup_fadein .5s;
+  margin: auto;
+  max-width: 100%;
+  z-index: 25;
+}
+
+@keyframes mailpoet_popup_fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.mailpoet_popup_wrapper {
+  background-color: $modal_background_color;
+  border-radius: 4px;
+  box-shadow: 1px 2px 4px #343434;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+  overflow: hidden;
+  padding: $modal_popup_padding;
+  position: relative;
+  width: 100%;
+  z-index: 0;
+}
+
+.mailpoet_overlay_transparent .mailpoet_popup_wrapper {
+  border: 1px solid #333;
+}
+
+.mailpoet_popup_title h2 {
+  font-size: 23px;
+  font-weight: 600;
+  line-height: 29px;
+  margin: 0 ($modal_close_button_size + 20) 0 0;
+}
+
+.mailpoet_popup_body {
+  flex-grow: 1;
+  margin-top: 20px;
+  position: relative;
+
+  .button + .button {
+    margin-left: 10px;
+  }
+}
+
+.mailpoet_popup_has_title .mailpoet_popup_body {
+  margin-top: 30px;
+}
+
+.mailpoet_modal_overlay.mailpoet_panel_overlay {
+  overflow: hidden;
+  top: 32px;
+}
+
+.mailpoet_panel {
+  bottom: 0;
+  display: none;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  transition: margin 350ms ease-out;
+  width: 100%;
+  z-index: 100002;
+}
+
+.mailpoet_panel_wrapper {
+  background-color: #f1f1f1;
+  border: 1px solid #e1e1e1;
+  border-top: 0 none;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+
+.mailpoet_panel_title {
+  height: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.mailpoet_panel_title h2 {
+  border-left: 1px solid #444;
+  border-right: 1px solid #444;
+  color: $modal_title_color;
+  font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
+  font-size: 1em;
+  font-weight: normal;
+  line-height: 32px;
+  margin: 0;
+  padding: 0 30px 0 10px;
+}
+
+.mailpoet_panel_body {
+  padding: 10px 10px 36px;
+}
+
+.mailpoet_modal_close {
+  cursor: pointer;
+  outline: 0 none;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  z-index: 2;
+
+  svg {
+    opacity: .5;
+    stroke: #979797;
+
+    &:hover {
+      stroke: #636363;
+    }
+  }
+}
+
+.mailpoet_popup .mailpoet_modal_close {
+  height: $modal_close_button_size;
+  padding: 3px 0;
+  right: $modal_popup_padding;
+  top: $modal_popup_padding;
+  width: $modal_close_button_size;
+}
+
+.mailpoet_panel .mailpoet_modal_close {
+  height: 16px;
+  padding: 2px 0;
+  right: 20px;
+  top: 20px;
+  width: 16px;
+}
+
+.mailpoet_modal_close:focus {
+  outline: 0 none;
+}
+
+.mailpoet_align_left {
+  margin: 0;
+  text-align: left;
+}
+
+.mailpoet_align_center {
+  margin: 0;
+  text-align: center;
+}
+
+.mailpoet_align_right {
+  margin: 0;
+  text-align: right;
+}
+
+@media screen and (max-width: 782px) {
+  .mailpoet_modal_overlay {
+    padding: $modal_popup_margin_mobile;
+  }
+
+  .mailpoet_popup {
+    min-width: auto !important;
+    width: 100%;
+  }
+
+  .mailpoet_popup_wrapper {
+    padding: $modal_popup_padding_mobile;
+  }
+
+  .mailpoet_popup_title h2 {
+    margin-right: $modal_close_button_size + 10;
+  }
+
+  .mailpoet_popup .mailpoet_modal_close {
+    right: $modal_popup_padding_mobile;
+    top: $modal_popup_padding_mobile;
+  }
+
+  .mailpoet_modal_overlay.mailpoet_panel_overlay {
+    top: 46px;
+  }
+
+  .mailpoet_panel_body {
+    padding-bottom: 52px;
+  }
+}
+
+.mailpoet_loading {
+  display: flex;
+  flex-direction: row;
+  height: 32px;
+  width: 150px;
+}
+
+.mailpoet_modal_loading {
+  animation-direction: linear;
+  animation-duration: 1.9500000000000002s;
+  animation-iteration-count: infinite;
+  animation-name: bounce_mailpoet_modal_loading;
+  background-color: #e01d4e;
+  border-radius: 21px;
+  height: 32px;
+  margin-left: 17px;
+  width: 32px;
+}
+
+.mailpoet_modal_loading_1 {
+  animation-delay: .39s;
+}
+
+.mailpoet_modal_loading_2 {
+  animation-delay: .9099999999999999s;
+}
+
+.mailpoet_modal_loading_3 {
+  animation-delay: 1.1700000000000002s;
+}
+
+@keyframes bounce_mailpoet_modal_loading {
+  0%,
+  50% { background-color: #064e6d; }
+}

assets/css/src/components/_mp2migrator.scss

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

assets/css/src/components/_newsletterCongratulate.scss

@@ -0,0 +1,38 @@
+.newsletter_congratulate_page {
+  margin-top: 30px;
+}
+
+.mailpoet_newsletter_loading {
+  text-align: center;
+
+  .mailpoet_loading {
+    margin: 100px auto 0;
+  }
+
+  .mailpoet_newsletter_loading_header {
+    margin: 30px;
+  }
+}
+
+.mailpoet_congratulate_success {
+  width: 100%;
+
+  h1 {
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  img,
+  .button {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .typeform-widget {
+    height: 350px;
+    margin: 0 auto 30px;
+    max-width: 100%;
+    width: 500px;
+  }
+}

assets/css/src/components/_newsletterTemplates.scss

@@ -0,0 +1,10 @@
+@import 'newsletterEditor/variables';
+
+.mailpoet_template_iframe {
+  left: 0;
+  max-width: $newsletter-width;
+  position: absolute;
+  top: 0;
+  width: $newsletter-width;
+  z-index: -9999;
+}

assets/css/src/components/_notice.scss

@@ -0,0 +1,44 @@
+.mailpoet_notice {
+  clear: both;
+  position: relative;
+
+  p:empty { display: none; }
+}
+
+.mailpoet_free_plan_announcement {
+  background: #fff;
+  border-left: 4px solid #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 35px rgba(195, 65, 2, .2);
+  clear: both;
+  margin-bottom: 15px;
+  padding: 20px;
+  position: relative;
+
+  h3 {
+    margin: 0;
+  }
+}
+
+.mailpoet_base_notice {
+  background: #fff;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
+  margin: 5px 0 15px;
+  padding: 1px 12px;
+}
+
+.mailpoet_success_notice {
+  border-left: 4px solid #46b450;
+}
+
+.mailpoet_error_notice {
+  border-left: 4px solid #dc3232;
+}
+
+.mailpoet_warning_notice {
+  border-left: 4px solid #ffb900;
+}
+
+.mailpoet_info_notice {
+  border-left: 4px solid #00a0d2;
+}

assets/css/src/components/_pages.scss

@@ -4,6 +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 {
   font-size: 15px;
   margin: 25px 40px 0 20px;
@@ -237,7 +238,7 @@ Please add custom styles to pages_custom.styl
     }
   }
 
-  @include respond-to(small-screen) {
+  @media screen and (max-width: 782px) {
     .two-col-text {
       column-count: 1;
     }
@@ -248,7 +249,7 @@ Please add custom styles to pages_custom.styl
     }
   }
 
-  @include breakpoint-max-width(500px) {
+  @media screen and (max-width: 500px) {
     margin-left: 10px;
     margin-right: 20px;
 

assets/css/src/components/_pagesCustom.scss

@@ -0,0 +1,57 @@
+/*
+Custom styles for MailPoet pages.
+*/
+
+.mailpoet-about-wrap {
+  .videoWrapper {
+    /* padding-top: 25px */
+    height: 0;
+    padding-bottom: 56.25%; /* 16:9 */
+    position: relative;
+
+    iframe {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .mailpoet_video {
+    border: 1px solid rgba(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;
+  }
+
+  p.mailpoet-top-text {
+    margin-right: 0;
+  }
+
+  ul.default-list {
+    list-style-type: disc;
+    margin-left: 40px;
+  }
+
+  .half-width-centered {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 50%;
+  }
+}

assets/css/src/components/_parsley.scss

@@ -0,0 +1,30 @@
+input.parsley-success,
+select.parsley-success,
+textarea.parsley-success {
+  background-color: #dff0d8;
+  border: 1px solid #d6e9c6;
+  color: #468847;
+}
+
+input.parsley-error,
+select.parsley-error,
+textarea.parsley-error {
+  background-color: #f2dede;
+  border: 1px solid #eed3d7;
+  color: #b94a48;
+}
+
+.parsley-errors-list {
+  color: #b94a48;
+  font-size: .9em;
+  line-height: .9em;
+  list-style-type: none;
+  margin: 2px 0 3px;
+  opacity: 0;
+  padding: 0;
+  transition: all .3s ease-in;
+
+  &.filled {
+    opacity: 1;
+  }
+}

assets/css/src/components/_premiumPage.scss

@@ -0,0 +1,130 @@
+
+.mailpoet-about-wrap.mailpoet-premium-page {
+  display: flex;
+  flex-direction: column;
+  margin: 25px auto 0;
+  padding: 0 150px;
+
+  @media screen and (max-width: 1500px) {
+    padding: 0;
+  }
+
+  .button.mailpoet-button-bigger {
+    margin: 1em 0;
+  }
+
+  .mailpoet-premium-page-intro {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 3em;
+
+    @media screen and (max-width: 500px) {
+      flex-wrap: wrap;
+    }
+
+    img {
+      margin-right: 100px;
+
+      @media screen and (max-width: 1100px) {
+        height: 50%;
+        margin-right: 75px;
+        width: 50%;
+      }
+
+      @media screen and (max-width: 500px) {
+        height: 40%;
+        margin: 0 auto;
+        width: 40%;
+      }
+    }
+
+    @media screen and (max-width: 500px) {
+      .mailpoet-premium-page-intro-link-wrap {
+        text-align: center;
+      }
+    }
+  }
+
+  .mailpoet-premium-page-free-disadvantages {
+    li:before {
+      content: '·';
+      padding-right: 5px;
+    }
+  }
+
+  .mailpoet-premium-page-text {
+    padding-bottom: 4em;
+    text-align: center;
+
+    .button.mailpoet-button-bigger:last-child {
+      margin-bottom: 0;
+    }
+
+    .mailpoet-premium-page-paragraph-before-heading {
+      margin-top: 2.8em;
+    }
+
+    .mailpoet-premium-page-paragraph-before-heading + h1 {
+      margin-top: 0;
+    }
+  }
+
+  .mailpoet-premium-page-text-narrow {
+    margin: auto;
+    max-width: 700px;
+  }
+
+  .mailpoet-premium-page-features {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+
+    .mailpoet-premium-page-feature {
+      width: 29%;
+
+      @media screen and (max-width: 640px) {
+        width: 49%;
+      }
+
+      @media screen and (max-width: 500px) {
+        width: 100%;
+      }
+
+      p,
+      h2 {
+        text-align: left;
+      }
+    }
+  }
+
+  .mailpoet-premium-page-options {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+
+    > * {
+      margin: 0 20px;
+
+      @media screen and (max-width: 500px) {
+        width: 100%;
+      }
+    }
+
+    ul {
+      text-align: left;
+
+      li:before {
+        content: '-';
+        padding-right: 5px;
+      }
+    }
+  }
+
+  @media screen and (max-width: 1100px) {
+    h2 {
+      font-size: 2em; // The text WooCommerce is too long and so on smaller displays it overflows. This helps.
+    }
+  }
+}

assets/css/src/components/_public.scss

@@ -0,0 +1,61 @@
+/* labels */
+.mailpoet_text_label,
+.mailpoet_textarea_label,
+.mailpoet_select_label,
+.mailpoet_radio_label,
+.mailpoet_checkbox_label,
+.mailpoet_list_label,
+.mailpoet_date_label {
+  display: block;
+}
+
+/* form loading */
+.mailpoet_form_sending {
+  .mailpoet_form_loading {
+    display: block;
+  }
+
+  .mailpoet_submit {
+    display: none;
+  }
+}
+
+.mailpoet_form_loading {
+  display: none;
+  text-align: center;
+  width: 30px;
+}
+
+.mailpoet_form_loading > span {
+  animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both;
+  background-color: #5b5b5b;
+  border-radius: 100%;
+  display: inline-block;
+  height: 5px;
+  width: 5px;
+}
+
+.mailpoet_form_loading .mailpoet_bounce1 {
+  animation-delay: -.32s;
+}
+
+.mailpoet_form_loading .mailpoet_bounce2 {
+  animation-delay: -.16s;
+  margin: 0 7px;
+}
+
+.mailpoet_captcha_form {
+  .mailpoet_validate_success { color: #468847; }
+  .mailpoet_validate_error { color: #b94a48; }
+}
+
+.mailpoet_captcha_update {
+  cursor: pointer;
+}
+
+@keyframes mailpoet-bouncedelay {
+  0%,
+  80%,
+  100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}

assets/css/src/components/_settings.scss

@@ -0,0 +1,155 @@
+#mailpoet_settings {
+  .mailpoet_tab_panel {
+    display: none;
+  }
+
+  .form-table th {
+    width: 20em;
+  }
+
+  .mailpoet_sending_methods {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin: 25px 0 0;
+
+    > li {
+      background-color: #fff;
+      border: 2px solid #dcdcdc;
+      display: flex;
+      flex-basis: 0;
+      flex-direction: column;
+      flex-grow: 1;
+      flex-shrink: 1;
+      margin: 0 25px 25px 0;
+      max-width: 500px;
+
+      .mailpoet_sending_method_description {
+        flex-grow: 1;
+        flex-shrink: 0;
+        padding: 25px;
+      }
+
+      &:hover:not(.mailpoet_active) {
+        border-color: #c5c5c5;
+      }
+    }
+
+    > li:last-child {
+      margin-right: 0;
+    }
+
+    h3 {
+      font-size: 1.5em;
+      height: 54px;
+      text-align: center;
+    }
+
+    .mailpoet_description {
+      font-size: 14px;
+    }
+
+    .mailpoet_status {
+      align-items: center;
+      background-color: #dcdcdc;
+      color: #fff;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      min-height: 2em;
+      padding: 1em;
+      text-overflow: ellipsis;
+
+      span {
+        font-weight: bold;
+        visibility: hidden;
+      }
+
+      div {
+        margin-left: 1em;
+      }
+    }
+
+    .mailpoet_active {
+      border: 2px solid #088b00;
+
+      &.mailpoet_invalid_key {
+        border: 2px solid #dc3232;
+      }
+
+      .mailpoet_status {
+        background-color: #088b00;
+
+        &.mailpoet_invalid_key {
+          background-color: #dc3232;
+
+          .mailpoet_actions {
+            color: white;
+
+            a:not(.button-primary) {
+              color: white;
+            }
+          }
+        }
+
+        span {
+          visibility: visible;
+        }
+      }
+
+      #mailpoet_mta_activate {
+        visibility: hidden;
+      }
+    }
+
+    .mailpoet_actions {
+      color: initial;
+    }
+  }
+
+  .tooltip.dashicons.dashicons-editor-help {
+    line-height: 1.4;
+  }
+
+  ul.sending-method-benefits {
+    list-style-type: none;
+    margin-bottom: 2em;
+    margin-top: 2em;
+  }
+
+  .sending-free-plan-button {
+    background: #ff5301;
+    border-color: #e64c03;
+    box-shadow: 0 1px 0 #e64c03;
+    margin: 10px 0;
+    text-shadow: 0 -1px 1px #e64c03;
+
+    strong {
+      text-transform: uppercase;
+    }
+  }
+
+  .mailpoet_success_item:before {
+    content: '✔ ';
+  }
+
+  .mailpoet_error_item:before {
+    content: '✗ ';
+  }
+
+  @media screen and (max-width: 782px) {
+    .form-table th {
+      width: auto;
+    }
+
+    .mailpoet_sending_methods {
+      flex-flow: row wrap;
+      justify-content: space-around;
+
+      > li {
+        flex-basis: auto;
+        margin-right: 0;
+      }
+    }
+  }
+}

assets/css/src/components/_stats.scss

@@ -0,0 +1,46 @@
+.mailpoet_stat_grey {
+  color: #707070;
+}
+
+.mailpoet_stat_big {
+  font-size: 23px;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.mailpoet_stat_spaced {
+  margin-bottom: 1rem;
+}
+
+.mailpoet_stat_triple-spaced {
+  margin-bottom: 3rem;
+}
+
+.mailpoet_stat_force-wrap {
+  word-break: break-all;
+}
+
+.mailpoet_stat_info {
+  float: right;
+  width: 40%;
+}
+
+.mailpoet_stat_general {
+  width: 60%;
+}
+
+.mailpoet_stats_premium_banner {
+  background-color: $info-message-background-color;
+  padding: 10px;
+  text-align: center;
+}
+
+@media screen and (max-width: 520px) {
+  .mailpoet_stat_info {
+    display: none;
+  }
+
+  .mailpoet_stat_general {
+    width: 100%;
+  }
+}

assets/css/src/components/_subscribers.scss

@@ -0,0 +1,5 @@
+#subscribers_container {
+  .mailpoet_segments_unsubscribed {
+    color: lighten(#555, 33);
+  }
+}

assets/css/src/components/_welcomeWizard.scss

@@ -0,0 +1,148 @@
+.mailpoet_welcome_wizard_header {
+  text-align: center;
+}
+
+.mailpoet_welcome_wizard_steps {
+  padding-top: 20px;
+  width: 100%;
+
+  div.updated,
+  div.error,
+  .notice {
+    display: none !important;
+  }
+}
+
+.mailpoet_welcome_wizard_flex {
+  display: flex;
+}
+
+.mailpoet_welcome_wizard_illustration {
+  flex-grow: 1;
+  height: 400px;
+  padding: 60px 40px 40px 60px;
+  text-align: right;
+  width: 50%;
+
+  img {
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  @media screen and (max-width: 782px) {
+    display: none;
+  }
+}
+
+.mailpoet_welcome_wizard_step_revenue_tracking {
+  input[type='submit'] {
+    margin-top: 40px;
+  }
+}
+
+.mailpoet_welcome_wizard_step {
+  flex-grow: 1;
+  padding: 60px 60px 40px 40px;
+  text-align: left;
+  width: 50%;
+
+  @media screen and (max-width: 782px) {
+    padding: 30px;
+    width: 100%;
+  }
+}
+
+.mailpoet_welcome_wizard_step_content {
+  margin-top: 40px;
+  max-width: 620px;
+  min-height: 30vh;
+
+  h1 {
+    font-weight: 700;
+    margin: 0 0 20px;
+    padding: 0;
+  }
+
+  p {
+    color: #595c65;
+    font-size: 15px;
+    font-weight: normal;
+    line-height: 22px;
+    margin: 0 0 40px;
+
+    + p { margin-top: -20px; }
+  }
+
+  .welcome_wizard_tracking_sub_title {
+    margin-bottom: 0;
+  }
+
+  .welcome_wizard_tracking_list {
+    list-style: disc;
+    padding-left: 30px;
+  }
+}
+
+#mailpoet_sender_form {
+  margin-top: 30px;
+  width: 330px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    margin-bottom: 20px;
+  }
+
+  input[type='text'] {
+    font-size: 15px;
+    height: 30px;
+    margin-top: 10px;
+    width: 350px;
+  }
+
+  a.sender_form_small {
+    color: #595c65;
+    font-size: 12px;
+  }
+}
+
+.mailpoet_sender_form_loading {
+  opacity: .5;
+}
+
+.mailpoet_welcome_wizard_step_controls {
+  margin: 40px 0 10px;
+
+  .button + .button {
+    margin-left: 20px;
+  }
+}
+
+.mailpoet_welcome_wizard_woo_screenshot {
+  box-shadow: 2px 3px 18px rgba(#000, .3);
+  margin-top: -20px;
+  max-width: 100%;
+  width: 350px;
+}
+
+.welcome_wizard_video {
+  position: absolute;
+  top: -1000px;
+}
+
+.mailpoet_welcome_wizard_centered_column {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.mailpoet_wizard_woocommerce_list {
+  text-align: center;
+
+  label {
+    color: #595c65;
+    display: block;
+    margin-top: 10px;
+  }
+}

assets/css/src/components/datepicker/_datepicker.scss

@@ -0,0 +1,2 @@
+@import 'jquery-ui-1.10.1';
+@import 'melon.datepicker';

assets/css/src/components/datepicker/jquery-ui-1.10.1.css

@@ -0,0 +1,649 @@
+/*! jQuery UI - v1.10.1 - 2013-03-10
+* http://jqueryui.com
+* Includes: jquery.ui.core.css, jquery.ui.datepicker.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
+* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-clearfix {
+	min-height: 0; /* support: IE7 */
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	filter:Alpha(Opacity=0);
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-datepicker {
+	width: 17em;
+	padding: .2em .2em 0;
+	display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+	position: relative;
+	padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+	position: absolute;
+	top: 2px;
+	width: 1.8em;
+	height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+	top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+	left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+	right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+	left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+	right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+	display: block;
+	position: absolute;
+	left: 50%;
+	margin-left: -8px;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+	margin: 0 2.3em;
+	line-height: 1.8em;
+	text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+	font-size: 1em;
+	margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month-year {
+	width: 100%;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+	width: 49%;
+}
+.ui-datepicker table {
+	width: 100%;
+	font-size: .9em;
+	border-collapse: collapse;
+	margin: 0 0 .4em;
+}
+.ui-datepicker th {
+	padding: .7em .3em;
+	text-align: center;
+	font-weight: bold;
+	border: 0;
+}
+.ui-datepicker td {
+	border: 0;
+	padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+	display: block;
+	padding: .2em;
+	text-align: right;
+	text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+	background-image: none;
+	margin: .7em 0 0 0;
+	padding: 0 .2em;
+	border-left: 0;
+	border-right: 0;
+	border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+	float: right;
+	margin: .5em .2em .4em;
+	cursor: pointer;
+	padding: .2em .6em .3em .6em;
+	width: auto;
+	overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+	float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+	width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+	float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+	width: 95%;
+	margin: 0 auto .4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+	width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+	width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+	width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+	border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+	clear: left;
+}
+.ui-datepicker-row-break {
+	clear: both;
+	width: 100%;
+	font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+	direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+	right: 2px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+	left: 2px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+	right: 1px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+	left: 1px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+	clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+	float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+	float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+	border-right-width: 0;
+	border-left-width: 1px;
+}
+
+/* Component containers
+----------------------------------*/
+.ui-widget {
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-size: 1.1em;
+}
+.ui-widget .ui-widget {
+	font-size: 1em;
+}
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-size: 1em;
+}
+.ui-widget-content {
+	border: 1px solid #dddddd;
+	background: #eeeeee url(../../img/datepicker/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
+	color: #333333;
+}
+.ui-widget-content a {
+	color: #333333;
+}
+.ui-widget-header {
+	border: 1px solid #e78f08;
+	background: #f6a828 url(../../img/datepicker/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
+	color: #ffffff;
+	font-weight: bold;
+}
+.ui-widget-header a {
+	color: #ffffff;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+	border: 1px solid #cccccc;
+	background: #f6f6f6 url(../../img/datepicker/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #1c94c4;
+}
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited {
+	color: #1c94c4;
+	text-decoration: none;
+}
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+	border: 1px solid #fbcb09;
+	background: #fdf5ce url(../../img/datepicker/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #c77405;
+}
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited {
+	color: #c77405;
+	text-decoration: none;
+}
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+	border: 1px solid #fbd850;
+	background: #ffffff url(../../img/datepicker/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #eb8f00;
+}
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+	color: #eb8f00;
+	text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+	border: 1px solid #fed22f;
+	background: #ffe45c url(../../img/datepicker/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
+	color: #363636;
+}
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+	color: #363636;
+}
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+	border: 1px solid #cd0a0a;
+	background: #b81900 url(../../img/datepicker/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
+	color: #ffffff;
+}
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+	color: #ffffff;
+}
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+	color: #ffffff;
+}
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+	font-weight: bold;
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+	opacity: .7;
+	filter:Alpha(Opacity=70);
+	font-weight: normal;
+}
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+	opacity: .35;
+	filter:Alpha(Opacity=35);
+	background-image: none;
+}
+.ui-state-disabled .ui-icon {
+	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
+}
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	width: 16px;
+	height: 16px;
+	background-position: 16px 16px;
+}
+.ui-icon,
+.ui-widget-content .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_222222_256x240.png);
+}
+.ui-widget-header .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_ffffff_256x240.png);
+}
+.ui-state-default .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-active .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-highlight .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_228ef1_256x240.png);
+}
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_ffd27a_256x240.png);
+}
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-on { background-position: -96px -144px; }
+.ui-icon-radio-off { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-left,
+.ui-corner-tl {
+	border-top-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-right,
+.ui-corner-tr {
+	border-top-right-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-left,
+.ui-corner-bl {
+	border-bottom-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-right,
+.ui-corner-br {
+	border-bottom-right-radius: 4px;
+}
+
+/* Overlays */
+.ui-widget-overlay {
+	background: #666666 url(../../img/datepicker/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
+	opacity: .5;
+	filter: Alpha(Opacity=50);
+}
+.ui-widget-shadow {
+	margin: -5px 0 0 -5px;
+	padding: 5px;
+	background: #000000 url(../../img/datepicker/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;
+	opacity: .2;
+	filter: Alpha(Opacity=20);
+	border-radius: 5px;
+}

assets/css/src/components/datepicker/melon.datepicker.css

@@ -0,0 +1,115 @@
+/**
+ * Melon skin from: https://github.com/rtsinani/jquery-datepicker-skins
+ */
+
+.wp-admin {
+	font-size: 90%;
+}
+
+.wp-admin .ui-widget {
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+	background: #2e3641;
+	border: none;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+}
+
+.wp-admin .ui-datepicker {
+	padding: 0;
+}
+
+.wp-admin .ui-datepicker-header {
+	border: none;
+	background: transparent;
+	font-weight: normal;
+	font-size: 15px;
+}
+
+.wp-admin .ui-datepicker-header .ui-state-hover {
+	background: transparent;
+	border-color: transparent;
+	cursor: pointer;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-title {
+	margin-top: .4em;
+	margin-bottom: .3em;
+	color: #e9f0f4;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev-hover,
+.wp-admin .ui-datepicker .ui-datepicker-next-hover,
+.wp-admin .ui-datepicker .ui-datepicker-next,
+.wp-admin .ui-datepicker .ui-datepicker-prev {
+	top: .9em;
+	border:none;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev-hover {
+	left: 2px;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-next-hover {
+	right: 2px;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-next span,
+.wp-admin .ui-datepicker .ui-datepicker-prev span {
+	background-image: url(../../img/datepicker/ui-icons_ffffff_256x240.png);
+	background-position: -32px 0;
+	margin-top: 0;
+	top: 0;
+	font-weight: normal;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev span {
+	background-position: -96px 0;
+}
+
+.wp-admin .ui-datepicker table {
+	margin: 0;
+}
+
+.wp-admin .ui-datepicker th {
+	padding: 1em 0;
+	color: #ccc;
+	font-size: 13px;
+	font-weight: normal;
+	border: none;
+	border-top: 1px solid #3a414d;
+}
+
+.wp-admin .ui-datepicker td {
+	background: #f97e76;
+	border: none;
+	padding: 0;
+}
+
+.wp-admin td .ui-state-default {
+	background: transparent;
+	border: none;
+	text-align: center;
+	padding: .5em;
+	margin: 0;
+	font-weight: normal;
+	color: #efefef;
+	font-size: 16px;
+}
+
+.wp-admin .ui-state-disabled  {
+	opacity: 1;
+}
+
+.wp-admin .ui-state-disabled .ui-state-default {
+	color: #fba49e;
+}
+
+.wp-admin td .ui-state-active,
+.wp-admin td .ui-state-hover {
+	background: #2e3641;
+}
+

assets/css/src/components/listing/_newsletters.scss

@@ -0,0 +1,94 @@
+$excellent-badge-color: #2993ab;
+$good-badge-color: #f0b849;
+$bad-badge-color: #d54e21;
+$green-badge-color: #55bd56;
+$video-guide-badge-color: #46b450;
+
+#newsletters_container {
+  h2.nav-tab-wrapper {
+    margin-bottom: 1rem;
+  }
+}
+
+.mailpoet_stats_text {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.mailpoet_stat_excellent {
+  color: $excellent-badge-color;
+}
+
+.mailpoet_stat_good {
+  color: $good-badge-color;
+}
+
+.mailpoet_stat_bad {
+  color: $bad-badge-color;
+}
+
+.mailpoet_stat_hidden {
+  display: none;
+}
+
+.mailpoet_stat_link_small {
+  font-size: .75rem;
+  text-decoration: underline !important;
+}
+
+.mailpoet_badge {
+  border-radius: 3px;
+  color: white;
+  cursor: pointer;
+  font-size: .5625rem;
+  font-weight: 500;
+  letter-spacing: 1px;
+  margin-right: 4px;
+  padding: 4px 6px 3px;
+  text-transform: uppercase;
+  vertical-align: middle;
+}
+
+.mailpoet_badge_excellent,
+.mailpoet_badge_teal {
+  background: $excellent-badge-color;
+}
+
+.mailpoet_badge_good,
+.mailpoet_badge_yellow {
+  background: $good-badge-color;
+}
+
+.mailpoet_badge_bad,
+.mailpoet_badge_red {
+  background: $bad-badge-color;
+}
+
+.mailpoet_badge_green {
+  background: $green-badge-color;
+}
+
+.mailpoet_badge_video {
+  background: $video-guide-badge-color;
+  display: inline-block;
+  line-height: 20px;
+  padding: 3px 6px;
+  text-decoration: none;
+  vertical-align: top;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: $green-badge-color;
+    color: #fff;
+  }
+
+  .dashicons {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+.mailpoet_badge_video_grey {
+  background: #c3c3c3;
+}

assets/css/src/components/newsletterEditor/_common.scss

@@ -0,0 +1,337 @@
+$link-color: $primary-active-background-color;
+
+$select-border-color: $content-border-color;
+$select-text-color: $primary-text-color;
+
+$button-default-border-color: $structure-border-color;
+$button-default-background-color: $primary-background-color;
+$button-default-text-color: $primary-inactive-color;
+
+$button-primary-border-color: $primary-active-color;
+$button-primary-background-color: $primary-active-background-color;
+$button-primary-hover-background-color: $primary-active-color-highlight;
+$button-primary-text-color: $white-color;
+
+$range-track-background-color: $white-color;
+$range-track-border-color: $structure-border-color;
+$range-track-height: 12px;
+$range-thumb-background-color: $primary-inactive-color;
+$range-thumb-border-color: #333;
+$range-thumb-width: 13px;
+$range-thumb-height: 26px;
+$range-border-radius: 3px;
+$range-thumb-hover-background-color: $primary-active-color;
+
+a {
+  color: $link-color;
+  text-decoration: none;
+}
+
+.mailpoet_hidden {
+  display: none !important;
+}
+
+input.mailpoet_color {
+  width: 5em;
+}
+
+select.mailpoet_font-family {
+  width: 8em;
+}
+
+select.mailpoet_font-size {
+  width: 5em;
+}
+
+.mailpoet_input,
+.mailpoet_select {
+  $form-control-padding: 3px;
+  appearance: none;
+  border-radius: 1px;
+  box-shadow: none !important;
+  line-height: 28px - $form-control-padding * 2;
+  padding: $form-control-padding;
+}
+
+.mailpoet_input {
+  border: 1px solid $select-border-color;
+  width: 283px;
+}
+
+.mailpoet_input_small {
+  width: 58px;
+}
+
+.mailpoet_input_medium {
+  width: 150px;
+}
+
+.mailpoet_input_full {
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+}
+
+.mailpoet_range {
+  -webkit-appearance: none;
+  padding: 0;
+  vertical-align: middle;
+  width: 283px;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    margin-top: -1 * $range-thumb-height / 3;
+    width: $range-thumb-width;
+  }
+
+  &:hover::-webkit-slider-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+
+  &::-moz-range-track {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+
+  &::-moz-range-thumb {
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    width: $range-thumb-width;
+  }
+
+  &:hover::-moz-range-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+
+  &::-ms-fill-lower {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+
+  &::-ms-fill-upper {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+
+  &::-ms-track {
+    background: transparent;
+    border-color: transparent;
+    border-width: $range-track-height * 2 0;
+    color: transparent;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+
+  &::-ms-thumb {
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    width: $range-thumb-width;
+  }
+
+  &:hover::-ms-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+
+  &:focus::-ms-fill-lower {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+
+  &:focus::-ms-fill-upper {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+}
+
+.mailpoet_range_small {
+  width: 100px;
+}
+
+.mailpoet_range_medium {
+  width: 180px;
+}
+
+.mailpoet_select {
+  border-color: $select-border-color;
+  color: $select-text-color;
+  margin: 0;
+}
+
+.mailpoet_select_large {
+  width: 139px;
+}
+
+.mailpoet_select_medium {
+  width: 103px;
+}
+
+.mailpoet_select_small {
+  width: 68px;
+}
+
+.mailpoet_select_half_width {
+  width: 50%;
+}
+
+#mailpoet_editor_content ol,
+#mailpoet_editor_content ul {
+  padding-left: 40px;
+}
+
+#mailpoet_editor_content ul {
+  list-style-type: disc;
+
+  ul {
+    list-style-type: circle;
+
+    ul { list-style-type: square; }
+  }
+}
+
+.mailpoet_button {
+  background-color: $button-default-background-color;
+  border: 1px solid $button-default-border-color;
+  border-radius: 3px;
+  color: $button-default-text-color;
+  line-height: normal;
+  margin: 0;
+  padding: 6px 20px;
+  vertical-align: top;
+}
+
+.mailpoet_button_full {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.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;
+  font-weight: normal;
+  margin-left: 5px;
+  text-transform: none;
+}
+
+.tooltip-help-designer-full-width .dashicons {
+  line-height: 34px;
+}
+
+.tooltip-help-designer-full-width span {
+  line-height: 1.4em;
+}
+
+.mailpoet_button_primary {
+  background-color: $button-primary-background-color;
+  border-color: $button-primary-border-color;
+  color: $button-primary-text-color;
+
+  &:hover {
+    background-color: $button-primary-hover-background-color;
+  }
+}
+
+.mailpoet_button_group {
+  display: inline;
+
+  .mailpoet_button:first-child {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    margin-right: 0;
+    padding: 6px 12px;
+  }
+
+  .mailpoet_button:last-child {
+    border-bottom-left-radius: 0;
+    border-left: 0;
+    border-top-left-radius: 0;
+    margin-left: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+.mailpoet_text_content p {
+  margin: 1em 0;
+}
+
+.mailpoet_separator {
+  margin: 17px 20px;
+}
+
+.mailpoet_option_offset_left_small {
+  margin-left: 10px;
+}
+
+input.mailpoet_option_offset_left_small {
+  margin-left: 10px !important;
+}
+
+.mailpoet_form_narrow_select2 span.select2-container {
+  width: 103px !important;
+}
+
+span.select2-container--open > span.select2-dropdown {
+  min-width: 150px;
+}
+
+span.select2-container--open > span.select2-dropdown li.select2-results__option {
+  font-size: 13px;
+  margin: 0 !important;
+
+  .select2-results__group {
+    color: #bfbfbf;
+    font-weight: normal;
+  }
+
+  .select2-results__option {
+    font-size: 13px;
+    padding-left: 15px;
+
+    &[aria-selected=true] {
+      background-color: #eee;
+      color: #444;
+    }
+  }
+}
+
+.mailpoet_settings_notice {
+  color: #999;
+}

assets/css/src/components/newsletterEditor/_layout.scss

@@ -0,0 +1,40 @@
+$sidebar-width: 330px;
+$content-border-color: $structure-border-color;
+
+#mailpoet_editor {
+  clear: both;
+  width: 100%;
+}
+
+#mailpoet_editor_heading {
+  clear: both;
+  margin-bottom: 13px;
+  margin-left: 2px;
+  padding-left: 15px;
+}
+
+#mailpoet_editor_main_wrapper {
+  border: 1px solid $content-border-color;
+  border-left: 0;
+  min-width: 1050px;
+  position: relative;
+}
+
+#mailpoet_editor_content_container {
+  box-sizing: border-box;
+  padding-right: $sidebar-width;
+  width: 100%;
+}
+
+#mailpoet_editor_sidebar {
+  box-sizing: border-box;
+  float: right;
+  width: $sidebar-width;
+}
+
+.mailpoet_newsletter_wrapper {
+  margin: auto;
+  max-width: $newsletter-width;
+  position: relative;
+  width: $newsletter-width;
+}

assets/css/src/components/newsletterEditor/_libraryOverrides.scss

@@ -0,0 +1,175 @@
+/* Fix select2 z-index to work with MailPoet.Modal */
+.select2-dropdown {
+  z-index: 101000 !important;
+}
+
+/* Remove input field styles from select2 type input */
+.select2-container {
+  border: none;
+  padding: 0;
+}
+
+/* Fix select2 input glow and margins that wordpress may insert */
+.select2 input,
+.select2 input:focus {
+  border-color: none;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Fix width overrides for select2 */
+.mailpoet_editor_settings .select2-container {
+  width: 100% !important;
+}
+
+.tox {
+  /* Small style changes to better fit TinyMCE to our editor */
+  &.tox-tinymce-inline {
+    border: 1px solid $content-border-color;
+    border-radius: 3px;
+    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .05);
+    z-index: 1;
+  }
+
+  /* Fix for TinyMCE modals are above WP menu */
+  &.tox-tinymce-aux {
+    z-index: 99999;
+  }
+
+  .tox-toolbar {
+    background-color: $primary-background-color;
+
+    /* Fix double border on top of TineMCE popup */
+    &:first-child {
+      border-top: 0;
+    }
+  }
+
+  /* Slightly smaller TinyMCE button */
+  .tox-tbtn:not(.tox-tbtn--select) {
+    height: 28px;
+    width: 30px;
+  }
+
+  /* Fix for text type select */
+  .tox-collection__item-label {
+    line-height: normal;
+  }
+}
+
+/* TinyMCE remove active border from the editor */
+.mce-edit-focus {
+  outline: none;
+}
+
+#wpbody-content > * {
+  margin-left: 20px;
+}
+
+#wpbody-content > .wrap {
+  margin-left: 0;
+}
+
+#wpcontent {
+  margin-left: 160px;
+  padding-left: 0;
+
+  .folded & {
+    margin-left: 36px;
+  }
+}
+
+.wrap {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/* Reduce WP admin bar z-index in order for TinyMCE toolbar to be visible */
+#wpadminbar {
+  z-index: 50000;
+}
+
+/* Allow horizontal scrolling on smaller (tablet/phone) sized screens */
+body {
+  overflow-x: auto;
+}
+
+/* Hide the "Details" section of WordPress Media manager */
+.media-sidebar {
+  display: none;
+}
+
+#mailpoet-media-manager {
+  .attachments-browser .attachments,
+  .attachments-browser .uploader-inline {
+    margin-right: 0;
+  }
+
+  .attachments-browser .attachments,
+  .attachments-browser .media-toolbar,
+  .attachments-browser .uploader-inline {
+    right: 0;
+  }
+}
+
+/* Remove max width from date selector in WordPress Media Manager */
+#media-attachment-date-filters {
+  max-width: calc(100% - 12px);
+}
+
+/* Alter Spectrum color picker to leave only the color preview, without arrows */
+.sp-replacer {
+  border: 0;
+  border-radius: 3px;
+  box-shadow: 1px 2px darken($primary-background-color, 13%);
+  padding: 0;
+}
+
+.sp-preview {
+  border-width: 0;
+  height: 25px;
+  margin-right: 0;
+  width: 25px;
+}
+
+.sp-dd {
+  display: none;
+}
+
+/* Sidepanel overrides */
+.mailpoet_panel_body {
+  margin: 19px;
+  padding: 0;
+
+  .mailpoet_editor_settings h3 {
+    margin-top: 0;
+  }
+}
+
+.mailpoet_panel_wrapper {
+  background-color: $primary-background-color;
+  border: 1px solid $content-border-color;
+}
+
+.wrap > .mailpoet_notice,
+.notice,
+.update-nag {
+  margin-left: 2px + 15px !important;
+  margin-right: 20px !important;
+}
+
+/* Make a button group */
+.mailpoet_button_group {
+  .button:first-child {
+    border-bottom-right-radius: 0;
+    border-right: 0;
+    border-top-right-radius: 0;
+  }
+
+  .button:last-child {
+    border-bottom-left-radius: 0;
+    border-left: 0;
+    border-top-left-radius: 0;
+  }
+}

assets/css/src/components/newsletterEditor/_variables.scss

@@ -0,0 +1,33 @@
+$transparent-color: rgba(255, 255, 255, 0);
+$white-color: rgb(255, 255, 255);
+$black-color: rgb(0, 0, 0);
+
+$structure-border-color: #ddd;
+$content-border-color: #e5e5e5;
+
+$primary-active-color: #0074a2;
+$primary-active-color-highlight: #1e8cbe;
+$primary-inactive-color: #a4a4a4;
+
+$primary-active-background-color: #2ea1cd;
+$primary-background-color: #f8f8f8;
+
+$primary-text-color: #656565;
+
+$primary-inset-shadow-color: #025c80;
+
+$warning-background-color: #e64047;
+$warning-text-color: $white-color;
+$warning-alternate-text-color: #f4c6c8;
+
+$error-text-color: #d54e21;
+
+$editor-column-color: #7fbbd0;
+$editor-content-color: #0078a2;
+
+$newsletter-width: 660px;
+
+$text-line-height: 1.6em;
+$sidebar-text-size: 13px;
+
+$info-message-background-color: #fed2bf;

assets/css/src/components/newsletterEditor/components/_blockTools.scss

@@ -0,0 +1,219 @@
+$tool-inactive-color: #333;
+$tool-inactive-secondary-color: #fff;
+$tool-hover-color: #bbb;
+$tool-hover-secondary-color: #fff;
+$tool-active-color: #d2d2d4;
+$tool-active-secondary-color: #fff;
+
+$content-icon-size: 14px;
+$content-icon-size-with-padding: 24px;
+$column-icon-size: 15px;
+$column-icon-size-with-padding: 27px;
+
+.mailpoet_tools {
+  bottom: 100%;
+  left: 50%;
+  overflow: hidden;
+  position: absolute;
+  text-align: right;
+  text-align: center;
+  transform: translateX(-50%);
+  transition: visibility 0s linear 250ms;
+  visibility: hidden;
+  z-index: 20;
+
+  .mailpoet_tools_slider {
+    background: $editor-content-color;
+    border-radius: 10px 10px 0 0;
+    display: flex;
+    flex-direction: row;
+    padding: 3px 7px;
+    position: relative;
+    transform: translateY(100%);
+    transition: all 250ms cubic-bezier(.42, 0, .58, 1);
+  }
+
+  .mailpoet_resize_active & .mailpoet_tools_slider,
+  &.mailpoet_display_tools .mailpoet_tools_slider {
+    transform: translateY(0);
+    transition: all 250ms cubic-bezier(.42, 0, .58, 1), visibility 0s linear;
+    visibility: visible;
+  }
+
+  a {
+    vertical-align: top;
+  }
+
+  .mailpoet_container_horizontal + & {
+    bottom: auto;
+    left: 100%;
+    top: -2px;
+    transform: none;
+
+    .mailpoet_tools_slider {
+      background: $editor-column-color;
+      border-radius: 0 10px 10px 0;
+      flex-direction: column;
+      padding: 7px 3px;
+      transform: translateY(0) translateX(-100%);
+    }
+
+    &.mailpoet_display_tools,
+    .mailpoet_resize_active & {
+      z-index: 21;
+
+      .mailpoet_tools_slider {
+        transform: translateY(0) translateX(0);
+      }
+    }
+
+    .mailpoet_tool {
+      display: block;
+      height: $column-icon-size-with-padding;
+      width: $column-icon-size-with-padding;
+
+      svg {
+        height: $column-icon-size;
+        padding: 6px;
+        width: $column-icon-size;
+      }
+    }
+
+    .mailpoet_delete_block {
+      flex-direction: column;
+    }
+
+    .mailpoet_delete_block_activate {
+      display: block;
+      max-height: $column-icon-size-with-padding;
+      max-width: none;
+      opacity: 1;
+    }
+
+    .mailpoet_delete_block_confirm,
+    .mailpoet_delete_block_cancel {
+      display: block;
+      margin: 0;
+      width: 100%;
+    }
+
+    .mailpoet_delete_block_activated {
+      height: auto;
+      padding: 0 5px 3px;
+      width: auto;
+
+      .mailpoet_delete_block_activate {
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+      }
+
+      .mailpoet_delete_block_confirm,
+      .mailpoet_delete_block_cancel {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.mailpoet_tool {
+  display: inline-block;
+  height: $content-icon-size-with-padding;
+  width: $content-icon-size-with-padding;
+
+  svg {
+    fill: #fff;
+    height: $content-icon-size;
+    padding: 5px;
+    vertical-align: top;
+    width: $content-icon-size;
+  }
+
+  &:hover svg,
+  &:focus svg {
+    opacity: .7;
+  }
+
+  .mailpoet_delete_block_confirmation {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 200px;
+  }
+}
+
+.mailpoet_delete_block {
+  border-radius: 3px;
+  display: flex;
+  flex-direction: row-reverse;
+  line-height: 24px;
+  vertical-align: top;
+  white-space: nowrap;
+
+  @include animation-background-color();
+
+  .mailpoet_tool {
+    padding: 0;
+  }
+
+  .mailpoet_delete_block_activate {
+    display: inline-block;
+    max-width: $content-icon-size-with-padding;
+    opacity: 1;
+
+    @include animation-fade-in-and-scale-horizontally();
+  }
+
+  .mailpoet_delete_block_confirm,
+  .mailpoet_delete_block_cancel {
+    display: inline-block;
+    max-height: 0;
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+
+    @include animation-fade-in-and-scale-horizontally();
+  }
+}
+
+.mailpoet_delete_block_activated {
+  background-color: $warning-background-color;
+  height: auto;
+  padding: 0 5px;
+  width: auto;
+
+  .mailpoet_delete_block_activate {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+  }
+
+  .mailpoet_delete_block_confirm,
+  .mailpoet_delete_block_cancel {
+    max-height: 20px;
+    max-width: 90px;
+    opacity: 1;
+  }
+
+  .mailpoet_delete_block_cancel {
+    margin-left: 3px;
+  }
+}
+
+.mailpoet_delete_block_confirm {
+  color: $warning-text-color;
+
+  &:hover {
+    color: $warning-text-color;
+    text-decoration: underline;
+  }
+}
+
+.mailpoet_delete_block_cancel {
+  color: $warning-alternate-text-color;
+
+  &:hover {
+    color: $warning-alternate-text-color;
+    text-decoration: underline;
+  }
+}

assets/css/src/components/newsletterEditor/components/_dragAndDrop.scss

@@ -0,0 +1,83 @@
+$drop-active-color: $primary-active-color;
+
+$marker-width: 2px;
+$marker-z-index: 1;
+
+$draggable-widget-z-index: 2;
+
+.mailpoet_drop_marker {
+  background-color: $primary-active-color;
+  box-shadow: 0 0 1px 0 $primary-active-color;
+  min-height: $marker-width;
+  min-width: $marker-width;
+  position: absolute;
+  z-index: $marker-z-index;
+
+  &:before,
+  &:after {
+    color: $primary-active-color;
+    font: 400 40px / 1 dashicons;
+    margin-top: -18px;
+    position: absolute;
+  }
+
+  &:before {
+    content: '\f139';
+    left: -25px;
+  }
+
+  &:after {
+    content: '\f141';
+    right: -23px;
+  }
+}
+
+.mailpoet_drop_marker.mailpoet_drop_marker_middle,
+.mailpoet_drop_marker.mailpoet_drop_marker_first.mailpoet_drop_marker_after,
+.mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_before {
+  margin-top: -1 * ($marker-width / 2);
+}
+
+.mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_after {
+  margin-top: -1 * $marker-width;
+}
+
+#mailpoet_editor .mailpoet_droppable_active {
+  z-index: 21000;
+}
+
+.mailpoet_block.mailpoet_droppable_active {
+  border: 1px dashed $drop-active-color !important;
+  width: $newsletter-width;
+
+  .mailpoet_tools {
+    display: none !important;
+  }
+}
+
+.mailpoet_widget.mailpoet_droppable_active {
+  margin: 0;
+  padding: 0;
+  z-index: $draggable-widget-z-index;
+
+  @include animation-fade-in();
+
+  .mailpoet_widget_icon {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.mailpoet_drop_active > .mailpoet_container > div > .mailpoet_container_empty {
+  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/components/newsletterEditor/components/_forms.scss

@@ -0,0 +1,52 @@
+.mailpoet_form_field {
+  margin-bottom: 15px;
+  margin-top: 15px;
+}
+
+.mailpoet_form_field_title {
+  clear: both;
+  margin-bottom: 5px;
+}
+
+.mailpoet_form_field_title_small {
+  width: 120px;
+}
+
+.mailpoet_form_field_title_inline {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-top: 6px;
+}
+
+.mailpoet_form_field_optional {
+  color: $primary-inactive-color;
+  font-size: .8em;
+}
+
+.mailpoet_form_field_radio_option,
+.mailpoet_form_field_checkbox_option {
+  display: inline-block;
+  line-height: 30px;
+  margin-right: 5px;
+  vertical-align: top;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.mailpoet_form_field_input_option {
+  display: inline-block;
+
+  input[type=checkbox] {
+    vertical-align: top;
+  }
+
+  input[type=text] {
+    vertical-align: middle;
+  }
+}
+
+.mailpoet_form_field_block {
+  display: block;
+}

assets/css/src/components/newsletterEditor/components/_heading.scss

@@ -0,0 +1,27 @@
+.mailpoet_heading_form_field {
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+
+.mailpoet_input_title,
+.mailpoet_input_preheader {
+  line-height: normal;
+  padding: 3px;
+  width: 500px;
+}
+
+.mailpoet_input_title {
+  font-size: 23px;
+}
+
+.mailpoet_breadcrumbs {
+  float: left;
+  font-size: .9em;
+  margin-bottom: 13px;
+  margin-left: 17px;
+  text-transform: uppercase;
+
+  p {
+    margin: 0;
+  }
+}

assets/css/src/components/newsletterEditor/components/_history.scss

@@ -10,7 +10,7 @@
   svg {
     display: inline-block;
     height: 26px;
-    stroke: $color-primary;
+    stroke: $primary-active-color;
     vertical-align: top;
     width: 26px;
   }
@@ -19,5 +19,5 @@
 .mailpoet_history_arrow_inactive {
   cursor: not-allowed;
 
-  svg { stroke: $color-primary-inactive; }
+  svg { stroke: $primary-inactive-color; }
 }

assets/css/src/components/newsletterEditor/components/_resize.scss

@@ -1,22 +1,26 @@
+$resize-active-color: $editor-content-color;
+$resize-handle-font-color: $white-color;
+$resize-handle-z-index: 2;
+
 .mailpoet_resize_handle_container {
   left: 50%;
   margin-top: -16px;
   position: absolute;
   top: 100%;
   transform: translateX(-50%);
-  z-index: $editor-resize-handle-zindex;
+  z-index: $resize-handle-z-index;
 }
 
 .mailpoet_resize_handle {
   align-items: center;
-  background: $color-editor-background-content;
+  background: $editor-content-color;
   border-radius: 10px;
   cursor: ns-resize;
   display: none;
   justify-content: space-between;
   min-width: 60px;
   padding: 7px 10px;
-  z-index: $editor-resize-handle-zindex;
+  z-index: $resize-handle-z-index;
 
   .mailpoet_resize_handle_text,
   .mailpoet_resize_handle_icon {
@@ -29,7 +33,7 @@
 }
 
 .mailpoet_resize_handle_text {
-  color: $editor-resize-handle-color;
+  color: $resize-handle-font-color;
   font-size: 11px;
   font-weight: bold;
   line-height: 1.5em;
@@ -41,7 +45,7 @@
   margin-left: 5px;
 
   > svg {
-    fill: $editor-resize-handle-color;
+    fill: $resize-handle-font-color;
     height: 15px;
     vertical-align: top;
     width: 15px;
@@ -63,14 +67,14 @@
 }
 
 .mailpoet_image_resize_handle {
-  background: $color-editor-background-content;
+  background: $editor-content-color;
   border-radius: 6px 0 0;
   cursor: nwse-resize;
   display: none;
   height: 24px;
   position: relative;
   width: 24px;
-  z-index: $editor-resize-handle-zindex;
+  z-index: $resize-handle-z-index;
 
   .mailpoet_resizable_block.mailpoet_highlight & {
     display: inline-block;
@@ -92,7 +96,7 @@
   padding: 1px;
 
   > svg {
-    fill: $editor-resize-handle-color;
+    fill: $resize-handle-font-color;
     height: 22px;
     vertical-align: top;
     width: 22px;
@@ -100,7 +104,7 @@
 }
 
 .mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight {
-  border: 2px solid $editor-resize-color;
+  border: 2px solid $resize-active-color;
 
   .mailpoet_image_resize_handle {
     display: inline-block;

assets/css/src/components/newsletterEditor/components/_save.scss

@@ -11,15 +11,11 @@
   .mailpoet_save_next {
     margin-left: 5px;
   }
-
-  .mailpoet_show_preview {
-    margin-right: 5px;
-  }
 }
 
 .mailpoet_save_options {
-  background: $color-white;
-  border: 1px solid $color-editor-border-content;
+  background: $white-color;
+  border: 1px solid $content-border-color;
   border-radius: 3px;
   clear: both;
   margin: 5px 0;
@@ -43,11 +39,11 @@
 }
 
 .mailpoet_save_option:hover {
-  background-color: $color-primary-button;
-  color: $color-white;
+  background-color: $primary-active-background-color;
+  color: $white-color;
 
   > a {
-    color: $color-white;
+    color: $white-color;
   }
 }
 
@@ -63,8 +59,8 @@
 
 .mailpoet_save_as_template_container,
 .mailpoet_export_template_container {
-  background-color: $color-white;
-  border: 1px solid $color-editor-border-structure;
+  background-color: $white-color;
+  border: 1px solid $structure-border-color;
   border-radius: 3px;
   clear: both;
   display: inline-block;
@@ -85,28 +81,23 @@
   float: right;
 }
 
+.mailpoet_editor_messages {
+  position: absolute;
+  right: 0;
+}
+
 .mailpoet_editor_last_saved {
-  color: $color-primary-inactive;
+  color: $primary-inactive-color;
   font-size: .9em;
   margin-top: 10px;
   text-align: right;
 }
 
-.mailpoet_save_woocommerce_customizer_disabled {
-  text-align: right;
-}
-
-.mailpoet_save_woocommerce_error {
-  color: $color-editor-warning;
-  margin-top: 10px;
-  text-align: right;
-}
-
 .mailpoet_save_error {
-  color: $color-editor-warning;
+  color: $error-text-color;
   margin-top: 10px;
   text-align: right;
-  width: $editor-sidebar-width;
+  width: $sidebar-width;
 }
 
 .mailpoet_save_dropdown_down {

assets/css/src/components/newsletterEditor/components/_sidebar.scss

@@ -0,0 +1,207 @@
+$select-border-color: $content-border-color;
+$select-text-color: $primary-text-color;
+
+$sidebar-background-color: $primary-background-color;
+$sidebar-active-heading-color: $primary-active-color;
+$sidebar-inactive-heading-color: $primary-inactive-color;
+$sidebar-text-color: $primary-text-color;
+
+$widget-width: 70px;
+$widget-background-color: $white-color;
+$widget-shadow-color: darken($primary-background-color, 13%);
+$widget-icon-color: darken($primary-background-color, 31.5%);
+$widget-icon-hover-color: $primary-active-color;
+$widget-icon-width: 30px;
+
+#mailpoet_editor_sidebar {
+  border-bottom: $content-border-color;
+  border-left: $content-border-color;
+  color: $sidebar-text-color;
+  font-size: $sidebar-text-size;
+
+  .mailpoet_sidebar_region {
+    border-bottom: 1px solid $content-border-color;
+    border-left: 1px solid $content-border-color;
+    border-right: 0;
+    border-top: 0;
+    margin-bottom: 0;
+
+    &.closed .mailpoet_region_content {
+      display: none;
+    }
+  }
+
+  .mailpoet_region_content {
+    margin-top: 12px;
+    padding: 0 20px;
+  }
+
+  &,
+  .postbox {
+    background-color: $sidebar-background-color;
+  }
+
+  .postbox {
+    padding-bottom: 20px;
+
+    &.closed {
+      padding-bottom: 0;
+    }
+
+    &.closed h3 {
+      color: $sidebar-inactive-heading-color;
+      cursor: pointer;
+    }
+
+    h3,
+    &:hover h3 {
+      color: $sidebar-active-heading-color;
+      margin: 0;
+      padding: 17px 20px;
+      text-transform: uppercase;
+    }
+
+    h3,
+    .handlediv {
+      border: 0;
+      cursor: auto;
+    }
+
+    .handlediv:before {
+      color: $sidebar-active-heading-color;
+      content: '\f142';
+      display: inline-block;
+      font: 400 20px / 1 dashicons;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      position: relative;
+      right: 18px;
+      speak: none;
+      text-decoration: none !important;
+      top: 18px;
+    }
+
+    &.closed .handlediv:before {
+      color: $sidebar-inactive-heading-color;
+      content: '\f140';
+    }
+
+    &.closed:hover .handlediv:before {
+      color: $sidebar-active-heading-color;
+    }
+  }
+}
+
+.mailpoet_widget {
+  display: inline-block;
+  float: left;
+  padding: 0 13px 15px;
+  text-align: center;
+  width: $widget-width;
+
+  &:nth-child(3n+1) {
+    clear: left;
+  }
+
+  .mailpoet_widget_icon {
+    background-color: $widget-background-color;
+    border-radius: 3px;
+    box-shadow: 1px 2px $widget-shadow-color;
+    box-sizing: border-box;
+    color: $widget-icon-color;
+    fill: $widget-icon-color;
+    height: $widget-width;
+    line-height: $widget-width;
+    margin-bottom: 9px;
+    text-align: center;
+    width: $widget-width;
+
+    /* Vertically align widget icon glyphs */
+    > * {
+      font-size: $widget-icon-width;
+      height: $widget-icon-width;
+      vertical-align: middle;
+      width: $widget-icon-width;
+    }
+
+    &:hover {
+      border: 1px solid $widget-icon-hover-color;
+      color: $widget-icon-hover-color;
+      fill: $widget-icon-hover-color;
+    }
+  }
+
+  &.mailpoet_droppable_active {
+    color: $widget-icon-hover-color;
+    fill: $widget-icon-hover-color;
+
+    .mailpoet_widget_icon {
+      border: 1px solid $widget-icon-hover-color;
+      box-shadow: none;
+      color: $widget-icon-hover-color;
+      fill: $widget-icon-hover-color;
+    }
+
+    .mailpoet_widget_title {
+      display: none;
+    }
+  }
+}
+
+/* Browser preview modal */
+.mailpoet_browser_preview_wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_toggle {
+  flex: 0 1 auto;
+  height: 30px;
+  padding: 10px 0;
+  position: absolute;
+  text-align: center;
+  top: -30px;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_toggle > label {
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.mailpoet_browser_preview_container {
+  border: 1px solid #979797;
+  border-radius: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 100%;
+  margin: 15px auto 0;
+  padding: 20px;
+  transition: width .5s;
+}
+
+.mailpoet_browser_preview_container_desktop {
+  width: 100%;
+}
+
+.mailpoet_browser_preview_container_mobile {
+  width: 350px;
+}
+
+.mailpoet_browser_preview_border {
+  border: 1px solid #c3c3c3;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_iframe {
+  display: block;
+  margin: auto;
+  width: calc(100% - 1px);
+}

assets/css/src/components/newsletterEditor/components/_sidepanel.scss

@@ -1,14 +1,16 @@
+$sidepanel-active-heading-color: $primary-active-color;
+
 /* Sidepanel */
 .mailpoet_editor_settings {
-  color: $editor-sidebar-color;
-  font-size: $editor-sidebar-font-size;
+  color: $sidebar-text-color;
+  font-size: $sidebar-text-size;
 
   p {
     font-size: 1em;
   }
 
   h3 {
-    color: $color-primary;
+    color: $sidepanel-active-heading-color;
     font-size: 1.4em;
     text-transform: uppercase;
   }
@@ -36,7 +38,7 @@
 }
 
 .mailpoet_sidepanel_field_optional {
-  color: $color-primary-inactive;
+  color: $primary-inactive-color;
   font-size: .8em;
 }
 

assets/css/src/components/newsletterEditor/contentBlocks/_automatedLatestContent.scss

@@ -0,0 +1,43 @@
+.mailpoet_automated_latest_content_block {
+  padding: 0;
+}
+
+.mailpoet_automated_latest_content_block_overlay {
+  background: rgba(255, 255, 255, 0);
+  height: 100%;
+  position: absolute;
+  transition: background .15s ease-out;
+  width: 100%;
+  z-index: 19;
+
+  .mailpoet_automated_latest_content_block:hover & {
+    background: rgba(255, 255, 255, .7);
+    cursor: pointer;
+  }
+}
+
+.mailpoet_automated_latest_content_block_posts {
+  overflow: hidden;
+  pointer-events: none;
+
+  > .mailpoet_block {
+    width: 100%;
+  }
+
+  .mailpoet_container_block {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+}
+
+.mailpoet_automated_latest_content_display_options {
+  @include animation-slide-open-downwards();
+}
+
+.mailpoet_automated_latest_content_show_amount {
+  width: 25px;
+}
+
+.mailpoet_automated_latest_content_content_type {
+  width: 180px;
+}

assets/css/src/components/newsletterEditor/contentBlocks/_base.scss

@@ -1,5 +1,6 @@
-.mailpoet_block,
-.mailpoet_woocommerce_heading_block {
+$block-text-line-height: $text-line-height;
+
+.mailpoet_block {
   background-color: inherit;
   box-sizing: border-box;
   float: left;
@@ -7,7 +8,7 @@
   position: relative;
 
   > .mailpoet_block_highlight {
-    border: 2px solid $color-transparent;
+    border: 2px solid $transparent-color;
     bottom: 0;
     left: 0;
     pointer-events: none;
@@ -19,7 +20,7 @@
   }
 
   &.mailpoet_highlight > .mailpoet_block_highlight {
-    border: 2px solid $color-editor-background-content !important;
+    border: 2px solid $editor-content-color !important;
   }
 
   > .mailpoet_container_horizontal ~ .mailpoet_block_highlight {
@@ -30,12 +31,12 @@
   }
 
   &.mailpoet_highlight > .mailpoet_container_horizontal ~ .mailpoet_block_highlight {
-    border: 2px solid $color-editor-background-column !important;
+    border: 2px solid $editor-column-color !important;
   }
 }
 
 .mailpoet_content {
-  line-height: $editor-line-height;
+  line-height: $block-text-line-height;
   position: relative;
 
   h1,
@@ -46,7 +47,7 @@
   h6 {
     font-style: normal;
     font-weight: normal;
-    line-height: $editor-line-height;
+    line-height: $block-text-line-height;
     margin: 0 0 .3em;
     padding: 0;
   }
@@ -61,7 +62,7 @@
   p {
     font-style: normal;
     font-weight: normal;
-    line-height: $editor-line-height;
+    line-height: $block-text-line-height;
   }
 
   ul {
@@ -78,7 +79,7 @@
 
   blockquote {
     border-left: 2px #565656 solid;
-    margin: 0 0 $editor-line-height;
+    margin: 0 0 $block-text-line-height;
     padding-left: 10px;
   }
 }

assets/css/src/components/newsletterEditor/contentBlocks/_container.scss

@@ -1,3 +1,9 @@
+$column-margin: 20px;
+$one-column-width: $newsletter-width - (2 * $column-margin);
+$two-column-width: $newsletter-width / 2 - (2 * $column-margin);
+$three-column-width: $newsletter-width / 3 - (2 * $column-margin);
+$two-column-wider-column-width: (($newsletter-width / 3) - $column-margin) * 2;
+
 .mailpoet_container {
   min-height: 15px;
   position: relative;
@@ -31,7 +37,7 @@
 
   > .mailpoet_container_block {
     border: 0;
-    width: $grid-editor-width;
+    width: $newsletter-width;
   }
 
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block {
@@ -42,40 +48,40 @@
   .mailpoet_container_horizontal > .mailpoet_container_block {
     padding-bottom: 0;
     padding-top: 0;
-    width: $editor-column-margin + $editor-column-width-one + $editor-column-margin;
+    width: $column-margin + $one-column-width + $column-margin;
   }
 
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_posts_block > .mailpoet_posts_container > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
   > .mailpoet_container_block > .mailpoet_container .mailpoet_automated_latest_content_block_posts .mailpoet_container_horizontal,
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_products_block > .mailpoet_products_container > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
-  > .mailpoet_container_block > .mailpoet_container .mailpoet_abandoned_cart_content_container .mailpoet_container_horizontal {
+  > .mailpoet_container_block > .mailpoet_container .mailpoet_automated_latest_content_block_products .mailpoet_container_horizontal {
     > .mailpoet_block:first-child:nth-last-child(2),
     > .mailpoet_block:first-child:nth-last-child(2) ~ .mailpoet_block {
-      width: $editor-column-margin + $editor-column-width-two + $editor-column-margin;
+      width: $column-margin + $two-column-width + $column-margin;
     }
 
     > .mailpoet_block:first-child:nth-last-child(3),
     > .mailpoet_block:first-child:nth-last-child(3) ~ .mailpoet_block {
-      width: $editor-column-margin + $editor-column-width-three + $editor-column-margin;
+      width: $column-margin + $three-column-width + $column-margin;
     }
   }
 
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_1_2 > .mailpoet_container_block:first-child,
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_2_1 > .mailpoet_container_block:nth-child(2) {
-    width: $editor-column-margin + $editor-column-width-three + $editor-column-margin;
+    width: $column-margin + $three-column-width + $column-margin;
   }
 
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_2_1 > .mailpoet_container_block:first-child,
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_1_2 > .mailpoet_container_block:nth-child(2) {
-    width: $editor-column-margin + $editor-column-width-two-wider + $editor-column-margin;
+    width: $column-margin + $two-column-wider-column-width + $column-margin;
   }
 }
 
 .mailpoet_container_empty {
   background-color: #f2f2f2;
   border-radius: 3px;
-  box-shadow: inset 1px 2px 1px $color-primary-inactive;
+  box-shadow: inset 1px 2px 1px $primary-inactive-color;
   color: #656565;
   margin: 20px;
   padding: 15px;

assets/css/src/components/newsletterEditor/contentBlocks/_divider.scss

@@ -0,0 +1,35 @@
+$active-divider-border-color: #adadad;
+$active-divider-background-color: #daebf2;
+$divider-hover-border-color: $primary-active-color;
+
+.mailpoet_divider_block {
+  cursor: all-scroll;
+  padding: 0;
+}
+
+.mailpoet_divider {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.mailpoet_field_divider_style {
+  border: 1px solid transparent;
+  display: block;
+  margin: auto;
+  max-width: $newsletter-width;
+  padding: 10px 0;
+  width: 100%;
+
+  &:hover {
+    border: 1px solid $divider-hover-border-color;
+  }
+}
+
+.mailpoet_active_divider_style {
+  background: $active-divider-background-color;
+  border: 1px solid $active-divider-border-color;
+}
+
+.mailpoet_divider_selector img {
+  width: 100%;
+}

assets/css/src/components/newsletterEditor/contentBlocks/_posts.scss

@@ -44,8 +44,8 @@
 }
 
 .mailpoet_settings_posts_single_post {
-  background-color: $color-white;
-  border: 1px solid $color-editor-border-content;
+  background-color: $white-color;
+  border: 1px solid $content-border-color;
   border-radius: 1px;
   box-sizing: border-box;
   height: 38px;
@@ -56,7 +56,7 @@
   width: 100%;
 
   &:hover {
-    border-color: $color-primary;
+    border-color: $primary-active-color;
   }
 
   .mailpoet_select_post_checkbox {

assets/css/src/components/newsletterEditor/contentBlocks/_products.scss

@@ -44,8 +44,8 @@
 }
 
 .mailpoet_settings_products_single_product {
-  background-color: $color-white;
-  border: 1px solid $color-editor-border-content;
+  background-color: $white-color;
+  border: 1px solid $content-border-color;
   border-radius: 1px;
   box-sizing: border-box;
   height: 38px;
@@ -56,7 +56,7 @@
   width: 100%;
 
   &:hover {
-    border-color: $color-primary;
+    border-color: $primary-active-color;
   }
 
   .mailpoet_select_product_checkbox {

assets/css/src/components/newsletterEditor/contentBlocks/_social.scss

@@ -0,0 +1,126 @@
+$social-icon-width: 32px;
+$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: #333;
+$tool-hover-color: #bbb;
+$tool-active-color: #d2d2d4;
+
+$tool-width: 16px;
+
+.mailpoet_social_block {
+  .mailpoet_social {
+    text-align: center;
+  }
+}
+
+.mailpoet_social {
+  span {
+    display: inline-block;
+    padding: 2px 3px;
+  }
+
+  span,
+  a,
+  img {
+    vertical-align: top;
+  }
+
+  a {
+    cursor: all-scroll;
+  }
+}
+
+.mailpoet_social_icon_set {
+  border: 1px solid transparent;
+  margin-bottom: 5px;
+  padding: 5px;
+
+  &:hover {
+    border: 1px solid $social-icon-set-hover-border-color;
+  }
+
+  img {
+    height: $social-icon-width;
+    padding: 2px 3px;
+    vertical-align: middle;
+    width: $social-icon-width;
+  }
+}
+
+.mailpoet_active_icon_set {
+  background-color: $active-social-icon-set-background-color;
+  border: 1px dashed $active-social-icon-set-border-color;
+}
+
+.mailpoet_social_icon_settings {
+  background: $white-color;
+  border: 1px solid $content-border-color;
+  margin-bottom: 9px;
+  padding: 28px 9px (18px - 10px) 9px;
+  position: relative;
+}
+
+.mailpoet_social_icon_settings_row {
+  clear: both;
+  line-height: 30px;
+  margin-bottom: 10px;
+  overflow: auto;
+}
+
+.mailpoet_social_icon_settings_label {
+  margin-right: 5px;
+  text-align: left;
+
+  .mailpoet_social_icon_image {
+    height: 30px;
+    width: 30px;
+  }
+
+  &.mailpoet_social_icon_image_label {
+    line-height: initial;
+  }
+}
+
+.mailpoet_social_icon_settings_form_element {
+  float: left;
+  width: 100%;
+
+  input,
+  select {
+    box-sizing: border-box;
+    display: inline-block;
+    height: 30px;
+    margin: 0;
+    vertical-align: middle;
+    width: 100%;
+  }
+}
+
+.mailpoet_social_icon_settings_tool {
+  position: absolute;
+  top: 10px;
+
+  .mailpoet_tool_icon {
+    fill: $tool-inactive-color;
+    height: $tool-width;
+    width: $tool-width;
+
+    &:hover {
+      fill: $tool-hover-color;
+    }
+
+    &:active {
+      fill: $primary-active-color;
+    }
+  }
+}
+
+.mailpoet_social_icon_settings_move_icon {
+  right: 5px;
+}
+
+.mailpoet_social_icon_settings_delete_icon {
+  right: 5px + 5px + $tool-width;
+}

assets/css/src/importExport.scss

@@ -0,0 +1 @@
+@import 'components/importExport';

assets/css/src/newsletterEditor.scss

@@ -0,0 +1,37 @@
+@import '../../../node_modules/select2/dist/css/select2';
+@import '../../../node_modules/spectrum-colorpicker/spectrum';
+
+@import 'components/newsletterEditor/mixins/transitions';
+
+@import 'components/newsletterEditor/variables';
+@import 'components/newsletterEditor/common';
+@import 'components/newsletterEditor/layout';
+
+
+@import 'components/newsletterEditor/components/forms';
+@import 'components/newsletterEditor/components/heading';
+@import 'components/newsletterEditor/components/history';
+@import 'components/newsletterEditor/components/sidebar';
+@import 'components/newsletterEditor/components/sidepanel';
+@import 'components/newsletterEditor/components/save';
+@import 'components/newsletterEditor/components/blockTools';
+@import 'components/newsletterEditor/components/layers';
+@import 'components/newsletterEditor/components/dragAndDrop';
+@import 'components/newsletterEditor/components/resize';
+
+
+@import 'components/newsletterEditor/contentBlocks/base';
+@import 'components/newsletterEditor/contentBlocks/container';
+@import 'components/newsletterEditor/contentBlocks/automatedLatestContent';
+@import 'components/newsletterEditor/contentBlocks/posts';
+@import 'components/newsletterEditor/contentBlocks/products';
+@import 'components/newsletterEditor/contentBlocks/button';
+@import 'components/newsletterEditor/contentBlocks/divider';
+@import 'components/newsletterEditor/contentBlocks/image';
+@import 'components/newsletterEditor/contentBlocks/social';
+@import 'components/newsletterEditor/contentBlocks/spacer';
+@import 'components/newsletterEditor/contentBlocks/text';
+@import 'components/newsletterEditor/contentBlocks/header';
+@import 'components/newsletterEditor/contentBlocks/footer';
+
+@import 'components/newsletterEditor/libraryOverrides';

assets/css/src/public.scss

@@ -0,0 +1,4 @@
+@import 'components/mixins';
+@import 'components/parsley';
+@import 'components/formValidation';
+@import 'components/public';

assets/css/src/rtl.scss

@@ -0,0 +1 @@
+@import '../../../node_modules/intro.js/introjs-rtl';