From 41d74e3cc78bb1a7b19e4fc7c1ecfca913abe15e Mon Sep 17 00:00:00 2001
From: Tomas Bures <bures@d3s.mff.cuni.cz>
Date: Fri, 28 Dec 2018 05:33:07 +0100
Subject: [PATCH] Work in progress on port to Bootstrap 4

---
 client/package.json                           |   5 +-
 client/src/blacklist/List.js                  |   2 +-
 client/src/campaigns/CUD.js                   |   4 +-
 client/src/campaigns/List.js                  |  21 +-
 client/src/campaigns/triggers/CUD.js          |   2 +-
 client/src/lib/bootstrap-components.js        |  69 ++----
 client/src/lib/files.js                       |   2 +-
 client/src/lib/form.js                        |  14 +-
 client/src/lib/modals.js                      |   2 +-
 client/src/lib/page.js                        |  26 ++-
 client/src/lib/styles.scss                    |  40 ++--
 client/src/lists/CUD.js                       |   2 +-
 client/src/lists/List.js                      |   2 +-
 client/src/lists/fields/CUD.js                |   2 +-
 client/src/lists/forms/CUD.js                 |   2 +-
 client/src/lists/forms/List.js                |   2 +-
 client/src/lists/imports/CUD.js               |   5 +-
 client/src/lists/imports/List.js              |   2 +-
 client/src/lists/segments/CUD.js              |   4 +-
 client/src/lists/segments/RuleSettingsPane.js |   2 +-
 client/src/lists/subscriptions/CUD.js         |   2 +-
 client/src/lists/subscriptions/List.js        |  15 +-
 client/src/namespaces/CUD.js                  |   2 +-
 client/src/namespaces/List.js                 |   2 +-
 client/src/reports/CUD.js                     |   2 +-
 client/src/reports/List.js                    |  12 +-
 client/src/reports/templates/CUD.js           |   2 +-
 client/src/reports/templates/List.js          |  19 +-
 client/src/send-configurations/CUD.js         |   2 +-
 client/src/send-configurations/List.js        |   2 +-
 client/src/shares/UserShares.js               |   2 +-
 client/src/templates/CUD.js                   |   2 +-
 client/src/templates/List.js                  |   2 +-
 client/src/templates/mosaico/CUD.js           |   2 +-
 client/src/templates/mosaico/List.js          |  15 +-
 client/src/users/CUD.js                       |   2 +-
 client/src/users/List.js                      |   2 +-
 .../vendor/skins/gray-flat/Variables.less     | 196 ------------------
 server/views/ckeditor/layout.hbs              |   8 +-
 server/views/codeeditor/layout.hbs            |   8 +-
 40 files changed, 144 insertions(+), 365 deletions(-)
 delete mode 100644 client/static/mosaico/vendor/skins/gray-flat/Variables.less

diff --git a/client/package.json b/client/package.json
index 575b7578..fb64a442 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,13 +4,14 @@
   "description": "Self hosted email newsletter app - client components",
   "main": "index.js",
   "scripts": {
-    "build": "webpack",
+    "js": "webpack",
     "watch-js": "webpack --watch",
     "css": "npm-run-all --sequential css-compile css-minify",
     "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 static/scss/mailtrain.scss dist/mailtrain.css",
     "css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/mailtrain.min.css dist/mailtrain.css",
     "watch-css": "nodemon --watch static/scss -e scss -x \"npm run css\"",
-    "watch": "npm-run-all --parallel watch-css watch-js"
+    "watch": "npm-run-all --parallel watch-css watch-js",
+    "build": "npm-run-all --parallel css js"
   },
   "repository": {
     "type": "git",
diff --git a/client/src/blacklist/List.js b/client/src/blacklist/List.js
index e8f16fce..c89e1e57 100644
--- a/client/src/blacklist/List.js
+++ b/client/src/blacklist/List.js
@@ -108,7 +108,7 @@ export default class List extends Component {
                     tableAddRestActionButton(
                         actions, this,
                         { method: HTTPMethod.DELETE, url: `rest/blacklist/${email}`},
-                        { icon: 'remove', label: t('removeFromBlacklist') },
+                        { icon: 'trash-alt', label: t('removeFromBlacklist') },
                         t('confirmRemovalFromBlacklist'),
                         t('areYouSureYouWantToRemoveEmailFromThe', {email}),
                         t('removingEmailFromTheBlacklist', {email}),
diff --git a/client/src/campaigns/CUD.js b/client/src/campaigns/CUD.js
index f76a1ad7..ba2792a4 100644
--- a/client/src/campaigns/CUD.js
+++ b/client/src/campaigns/CUD.js
@@ -508,7 +508,7 @@ export default class CUD extends Component {
                         {lsts.length > 1 &&
                         <Button
                             className="btn-secondary"
-                            icon="remove"
+                            icon="trash-alt"
                             title={t('remove')}
                             onClickAsync={() => this.onRemoveListEntry(lstUid)}
                         />
@@ -738,7 +738,7 @@ export default class CUD extends Component {
 
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={saveButtonLabel}/>
-                        {canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/campaigns/${this.props.entity.id}/delete`}/> }
+                        {canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/campaigns/${this.props.entity.id}/delete`}/> }
                     </ButtonRow>
                 </Form>
             </div>
diff --git a/client/src/campaigns/List.js b/client/src/campaigns/List.js
index 33c4b42f..d2d0655d 100644
--- a/client/src/campaigns/List.js
+++ b/client/src/campaigns/List.js
@@ -3,11 +3,12 @@
 import React, {Component} from 'react';
 import {withTranslation} from '../lib/i18n';
 import {
-    DropdownMenu,
+    ButtonDropdown,
     Icon
 } from '../lib/bootstrap-components';
 import {
-    MenuLink,
+    ButtonDropdownLink,
+    NavDropdown,
     requiresAuthenticatedUser,
     Title,
     Toolbar,
@@ -109,7 +110,7 @@ export default class List extends Component {
 
                     if (perms.includes('viewStats')) {
                         actions.push({
-                            label: <Icon icon="send" title={t('status')}/>,
+                            label: <Icon icon="envelope" title={t('status')}/>,
                             link: `/campaigns/${data[0]}/status`
                         });
 
@@ -149,14 +150,14 @@ export default class List extends Component {
 
                     if (campaignType === CampaignType.TRIGGERED && perms.includes('viewTriggers')) {
                         actions.push({
-                            label: <Icon icon="flash" title={t('triggers')}/>,
+                            label: <Icon icon="bell" title={t('triggers')}/>,
                             link: `/campaigns/${data[0]}/triggers`
                         });
                     }
 
                     if (perms.includes('share')) {
                         actions.push({
-                            label: <Icon icon="share-alt" title={t('share')}/>,
+                            label: <Icon icon="share" title={t('share')}/>,
                             link: `/campaigns/${data[0]}/share`
                         });
                     }
@@ -173,11 +174,11 @@ export default class List extends Component {
                 {tableRestActionDialogRender(this)}
                 <Toolbar>
                     {this.state.createPermitted &&
-                    <DropdownMenu className="btn-primary" label={t('createCampaign')}>
-                        <MenuLink to="/campaigns/create-regular">{t('regular')}</MenuLink>
-                        <MenuLink to="/campaigns/create-rss">{t('rss')}</MenuLink>
-                        <MenuLink to="/campaigns/create-triggered">{t('triggered')}</MenuLink>
-                    </DropdownMenu>
+                    <ButtonDropdown buttonClassName="btn-primary" menuClassName="dropdown-menu-right" label={t('createCampaign')}>
+                        <ButtonDropdownLink to="/campaigns/create-regular">{t('regular')}</ButtonDropdownLink>
+                        <ButtonDropdownLink to="/campaigns/create-rss">{t('rss')}</ButtonDropdownLink>
+                        <ButtonDropdownLink to="/campaigns/create-triggered">{t('triggered')}</ButtonDropdownLink>
+                    </ButtonDropdown>
                     }
                 </Toolbar>
 
diff --git a/client/src/campaigns/triggers/CUD.js b/client/src/campaigns/triggers/CUD.js
index 882cb940..9261364e 100644
--- a/client/src/campaigns/triggers/CUD.js
+++ b/client/src/campaigns/triggers/CUD.js
@@ -236,7 +236,7 @@ export default class CUD extends Component {
 
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
-                        {isEdit && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/campaigns/${this.props.campaign.id}/triggers/${this.props.entity.id}/delete`}/>}
+                        {isEdit && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/campaigns/${this.props.campaign.id}/triggers/${this.props.entity.id}/delete`}/>}
                     </ButtonRow>
                 </Form>
             </div>
diff --git a/client/src/lib/bootstrap-components.js b/client/src/lib/bootstrap-components.js
index e4a94635..f8206e7d 100644
--- a/client/src/lib/bootstrap-components.js
+++ b/client/src/lib/bootstrap-components.js
@@ -112,35 +112,28 @@ class Button extends Component {
     }
 }
 
-//TODO
-class DropdownMenu extends Component {
+class ButtonDropdown extends Component {
     static propTypes = {
         label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
         noCaret: PropTypes.bool,
-        className: PropTypes.string
+        className: PropTypes.string,
+        buttonClassName: PropTypes.string,
+        menuClassName: PropTypes.string
     }
 
     render() {
         const props = this.props;
 
-        let className = 'btn dropdown-toggle';
-        if (props.className) {
-            className = className + ' ' + props.className;
-        }
-
-        let label;
-        if (this.props.noCaret) {
-            label = props.label;
-        } else {
-            label = <span>{props.label}{' '}<span className="caret"></span></span>;
-        }
+        const className = 'dropdown' + (props.className ? ' ' + props.className : '');
+        const buttonClassName = 'btn dropdown-toggle' + (props.buttonClassName ? ' ' + props.buttonClassName : '');
+        const menuClassName = 'dropdown-menu' + (props.menuClassName ? ' ' + props.menuClassName : '');
 
         return (
-            <div className="btn-group">
-                <button type="button" className={className} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    {label}
+            <div className="dropdown" className={className}>
+                <button type="button" className={buttonClassName} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    {props.label}
                 </button>
-                <ul className="dropdown-menu">
+                <ul className={menuClassName}>
                     {props.children}
                 </ul>
 
@@ -149,41 +142,6 @@ class DropdownMenu extends Component {
     }
 }
 
-//TODO
-class DropdownMenuItem extends Component {
-    static propTypes = {
-        label: PropTypes.string,
-        icon: PropTypes.string,
-        className: PropTypes.string
-    }
-
-    render() {
-        const props = this.props;
-
-        let className = 'nav-item dropdown';
-        if (props.className) {
-            className = className + ' ' + props.className;
-        }
-
-        return (
-            <li className={className}>
-                {props.icon ?
-                    <a href="#" className="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                        <Icon icon={props.icon}/>{' '}{props.label}
-                    </a>
-                    :
-                    <a href="#" className="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                        {props.label}
-                    </a>
-                }
-                <ul className="dropdown-menu">
-                    {props.children}
-                </ul>
-            </li>
-        );
-    }
-}
-
 @withComponentMixins([
     withErrorHandling
 ])
@@ -217,7 +175,6 @@ class ActionLink extends Component {
     withTranslation,
     withErrorHandling
 ])
-//TODO
 class ModalDialog extends Component {
     constructor(props) {
         super(props);
@@ -314,8 +271,8 @@ class ModalDialog extends Component {
                 <div className="modal-dialog" role="document">
                     <div className="modal-content">
                         <div className="modal-header">
-                            <button type="button" className="close" aria-label={t('close')} onClick={::this.onClose}><span aria-hidden="true">&times;</span></button>
                             <h4 className="modal-title">{this.props.title}</h4>
+                            <button type="button" className="close" aria-label={t('close')} onClick={::this.onClose}><span aria-hidden="true">&times;</span></button>
                         </div>
                         <div className="modal-body">{this.props.children}</div>
                         <div className="modal-footer">
@@ -332,7 +289,7 @@ class ModalDialog extends Component {
 
 export {
     Button,
-    DropdownMenu,
+    ButtonDropdown,
     DropdownMenuItem,
     ActionLink,
     DismissibleAlert,
diff --git a/client/src/lib/files.js b/client/src/lib/files.js
index 43967d82..c82c0c75 100644
--- a/client/src/lib/files.js
+++ b/client/src/lib/files.js
@@ -144,7 +144,7 @@ export default class Files extends Component {
 
                     if (this.props.entity.permissions.includes(this.props.managePermission)) {
                         actions.push({
-                            label: <Icon icon="remove" title={t('delete')}/>,
+                            label: <Icon icon="trash-alt" title={t('delete')}/>,
                             action: () => this.deleteFile(data[0], data[1])
                         });
                     }
diff --git a/client/src/lib/form.js b/client/src/lib/form.js
index 3e7045e7..3061a318 100644
--- a/client/src/lib/form.js
+++ b/client/src/lib/form.js
@@ -194,9 +194,9 @@ function wrapInput(id, htmlId, owner, format, rightContainerClass, label, help,
     // wrapInput may be used also outside forms to make a kind of fake read-only forms
     let className;
     if (owner) {
-        className = 'form-group row';
+        className = 'form-group';
     } else {
-        className = 'row ' + styles.staticFormGroup;
+        className = styles.staticFormGroup;
     }
 
     let colLeft = '';
@@ -207,15 +207,17 @@ function wrapInput(id, htmlId, owner, format, rightContainerClass, label, help,
             colLeft = '';
             colRight = '';
             break;
+        case 'inline':
+            colLeft = 'mr-3';
+            colRight = '';
+            break;
         default:
+            className = className + ' row';
             colLeft = 'col-sm-2 col-form-label';
             colRight = 'col-sm-10';
             break;
     }
 
-    if (format === 'inline') {
-    }
-
     let helpBlock = null;
     if (help) {
         helpBlock = <small className={`form-text text-muted`} id={htmlId + '_help'}>{help}</small>;
@@ -239,7 +241,7 @@ function wrapInput(id, htmlId, owner, format, rightContainerClass, label, help,
     if (format === 'inline') {
         return (
             <div className={className} >
-                {labelBlock} &nbsp; {input}
+                {labelBlock}{input}
                 {helpBlock}
                 {validationBlock}
             </div>
diff --git a/client/src/lib/modals.js b/client/src/lib/modals.js
index cd3a13d7..6fb2c935 100644
--- a/client/src/lib/modals.js
+++ b/client/src/lib/modals.js
@@ -224,7 +224,7 @@ export function tableAddDeleteButton(actions, owner, perms, deleteUrl, name, del
     if (!perms || perms.includes('delete')) {
         if (owner.tableRestActionDialogData.shown) {
             actions.push({
-                label: <Icon className={styles.iconDisabled} icon="remove" title={t('delete')}/>
+                label: <Icon className={styles.iconDisabled} icon="trash-alt" title={t('delete')}/>
             });
         } else {
             actions.push({
diff --git a/client/src/lib/page.js b/client/src/lib/page.js
index c67d39dd..649ea958 100644
--- a/client/src/lib/page.js
+++ b/client/src/lib/page.js
@@ -98,7 +98,6 @@ class Breadcrumb extends Component {
     }
 }
 
-//TODO
 class SecondaryNavBar extends Component {
     static propTypes = {
         route: PropTypes.object.isRequired,
@@ -116,9 +115,10 @@ class SecondaryNavBar extends Component {
             title = entry.title;
         }
 
-        let className = '';
+        let liClassName = 'nav-item';
+        let linkClassName = 'nav-link';
         if (entry.active) {
-            className += ' active';
+            linkClassName += ' active';
         }
 
         if (entry.link) {
@@ -130,7 +130,7 @@ class SecondaryNavBar extends Component {
                 link = entry.link;
             }
 
-            return <li key={key} role="presentation" className={className}><Link to={link}>{title}</Link></li>;
+            return <li key={key} role="presentation" className={liClassName}><Link className={linkClassName} to={link}>{title}</Link></li>;
 
         } else if (entry.externalLink) {
             let externalLink;
@@ -140,10 +140,10 @@ class SecondaryNavBar extends Component {
                 externalLink = entry.externalLink;
             }
 
-            return <li key={key} role="presentation" className={className}><a href={externalLink}>{title}</a></li>;
+            return <li key={key} role="presentation" className={liClassName}><a className={linkClassName} href={externalLink}>{title}</a></li>;
 
         } else {
-            return <li key={key} role="presentation" className={className}>{title}</li>;
+            return <li key={key} role="presentation" className={liClassName}>{title}</li>;
         }
     }
 
@@ -153,7 +153,7 @@ class SecondaryNavBar extends Component {
         const keys = Object.keys(route.navs);
         const renderedElems = [];
 
-        for (const key in keys) {
+        for (const key of keys) {
             const entry = route.navs[key];
 
             let visible = true;
@@ -280,10 +280,9 @@ class RouteContent extends Component {
                     <div>
                         {primaryMenuComponent}
 
-                        <div>
-                            <SecondaryNavBar className="hidden-xs pull-right" route={route} params={params} resolved={resolved}/>
+                        <div className={styles.breadcrumbAndSecondaryNavbar}>
                             <Breadcrumb route={route} params={params} resolved={resolved}/>
-                            <SecondaryNavBar className="visible-xs" route={route} params={params} resolved={resolved}/>
+                            <SecondaryNavBar route={route} params={params} resolved={resolved}/>
                         </div>
 
                         <div className="container-fluid">
@@ -473,8 +472,7 @@ export class NavButton extends Component {
     }
 }
 
-// TODO
-export class MenuLink extends Component {
+export class ButtonDropdownLink extends Component {
     static propTypes = {
         to: PropTypes.string,
         className: PropTypes.string
@@ -483,9 +481,9 @@ export class MenuLink extends Component {
     render() {
         const props = this.props;
 
-        const clsName = "nav-item" + (props.className ? " " + props.className : "")
+        const clsName = "dropdown-item" + (props.className ? " " + props.className : "")
         return (
-            <li className={clsName}><Link to={props.to} className="nav-link">{props.children}</Link></li>
+            <Link to={props.to} className={clsName}>{props.children}</Link>
         );
     }
 }
diff --git a/client/src/lib/styles.scss b/client/src/lib/styles.scss
index 5eaa24c6..155bb70e 100644
--- a/client/src/lib/styles.scss
+++ b/client/src/lib/styles.scss
@@ -84,28 +84,32 @@
   margin-bottom: 20px;
 }
 
-.secondaryNav {
-  margin-top: 5px;
-  margin-right: 5px;
-  text-align: right;
-}
+.breadcrumbAndSecondaryNavbar {
+/*
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+*/
 
-@media (max-width: 767px) {
-  .secondaryNav {
-    margin: 0px;
-    background-color: #f5f5f5;
-    padding: 5px 5px;
-    border-radius: 4px;
+  :global .breadcrumb {
+    margin-bottom: 0px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
   }
-}
 
-.secondaryNav > li {
-  display: inline-block;
-  float: none;
-}
+  margin-bottom: 1.5rem;
 
-.secondaryNav > li > a {
-  padding: 3px 10px;
+  .secondaryNav {
+    justify-content: flex-end;
+
+    margin-top: 0.5rem;
+    margin-left: 5px;
+    margin-right: 5px;
+
+    :global .nav-item .nav-link {
+      padding: 3px 10px;
+    }
+  }
 }
 
 .dropZone {
diff --git a/client/src/lists/CUD.js b/client/src/lists/CUD.js
index eb89b27f..256fa2d5 100644
--- a/client/src/lists/CUD.js
+++ b/client/src/lists/CUD.js
@@ -240,7 +240,7 @@ export default class CUD extends Component {
 
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
-                        {canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/${this.props.entity.id}/delete`}/>}
+                        {canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/${this.props.entity.id}/delete`}/>}
                     </ButtonRow>
                 </Form>
             </div>
diff --git a/client/src/lists/List.js b/client/src/lists/List.js
index 16746c3b..6de136f8 100644
--- a/client/src/lists/List.js
+++ b/client/src/lists/List.js
@@ -122,7 +122,7 @@ export default class List extends Component {
 
                     if (triggersCount > 0) {
                         actions.push({
-                            label: <Icon icon="flash" title={t('triggers')}/>,
+                            label: <Icon icon="bell" title={t('triggers')}/>,
                             link: `/lists/${data[0]}/triggers`
                         });
                     }
diff --git a/client/src/lists/fields/CUD.js b/client/src/lists/fields/CUD.js
index 82f0d11a..b175082d 100644
--- a/client/src/lists/fields/CUD.js
+++ b/client/src/lists/fields/CUD.js
@@ -481,7 +481,7 @@ export default class CUD extends Component {
 
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
-                        {isEdit && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/${this.props.list.id}/fields/${this.props.entity.id}/delete`}/>}
+                        {isEdit && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/${this.props.list.id}/fields/${this.props.entity.id}/delete`}/>}
                     </ButtonRow>
                 </Form>
             </div>
diff --git a/client/src/lists/forms/CUD.js b/client/src/lists/forms/CUD.js
index e360149b..6c8c9cd1 100644
--- a/client/src/lists/forms/CUD.js
+++ b/client/src/lists/forms/CUD.js
@@ -525,7 +525,7 @@ export default class CUD extends Component {
 
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
-                        {canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/forms/${this.props.entity.id}/delete`}/>}
+                        {canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/forms/${this.props.entity.id}/delete`}/>}
                     </ButtonRow>
                 </Form>
             </div>
diff --git a/client/src/lists/forms/List.js b/client/src/lists/forms/List.js
index 6a213f3d..99e44ae6 100644
--- a/client/src/lists/forms/List.js
+++ b/client/src/lists/forms/List.js
@@ -76,7 +76,7 @@ export default class List extends Component {
                     }
                     if (perms.includes('share')) {
                         actions.push({
-                            label: <Icon icon="share-alt" title={t('share')}/>,
+                            label: <Icon icon="share" title={t('share')}/>,
                             link: `/lists/forms/${data[0]}/share`
                         });
                     }
diff --git a/client/src/lists/imports/CUD.js b/client/src/lists/imports/CUD.js
index 2b0cc98d..3e9b27bd 100644
--- a/client/src/lists/imports/CUD.js
+++ b/client/src/lists/imports/CUD.js
@@ -11,6 +11,7 @@ import {
     withPageHelpers
 } from '../../lib/page';
 import {
+    AlignedRow,
     Button,
     ButtonRow,
     CheckBox,
@@ -336,7 +337,7 @@ export default class CUD extends Component {
             } else {
                 settingsEdit =
                     <div>
-                        <StaticField withValidation id="csvFileName" label={t('file')}><input ref={node => this.csvFile = node} type="file" onChange={::this.onFileSelected}/></StaticField>
+                        <AlignedRow label={t('file')}><input ref={node => this.csvFile = node} type="file" className="form-control-file" onChange={::this.onFileSelected}/></AlignedRow>
                         <InputField id="csvDelimiter" label={t('delimiter')}/>
                     </div>;
             }
@@ -451,7 +452,7 @@ export default class CUD extends Component {
 
                     <ButtonRow>
                         {saveButtons}
-                        {isEdit && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/${this.props.list.id}/imports/${this.props.entity.id}/delete`}/>}
+                        {isEdit && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/${this.props.list.id}/imports/${this.props.entity.id}/delete`}/>}
                     </ButtonRow>
                 </Form>
             </div>
diff --git a/client/src/lists/imports/List.js b/client/src/lists/imports/List.js
index f7dbe16b..9b0bf251 100644
--- a/client/src/lists/imports/List.js
+++ b/client/src/lists/imports/List.js
@@ -80,7 +80,7 @@ export default class List extends Component {
                     }
 
                     actions.push({
-                        label: <Icon icon="eye-open" title={t('detailedStatus')}/>,
+                        label: <Icon icon="eye" title={t('detailedStatus')}/>,
                         link: `/lists/${this.props.list.id}/imports/${data[0]}/status`
                     });
 
diff --git a/client/src/lists/segments/CUD.js b/client/src/lists/segments/CUD.js
index b0b99951..d9d3aa57 100644
--- a/client/src/lists/segments/CUD.js
+++ b/client/src/lists/segments/CUD.js
@@ -357,7 +357,7 @@ export default class CUD extends Component {
                             <FormButton type="submit" className="btn-primary" icon="check" label={t('saveAndStay')} onClickAsync={::this.submitAndStay}/>
                             <FormButton type="submit" className="btn-primary" icon="check" label={t('saveAndLeave')}/>
 
-                            <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/${this.props.list.id}/segments/${this.props.entity.id}/delete`}/>
+                            <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/${this.props.list.id}/segments/${this.props.entity.id}/delete`}/>
                         </ButtonRow>
                     :
                         <ButtonRow format="wide" className={`col-xs-12 ${styles.toolbar}`}>
@@ -394,7 +394,7 @@ export default class CUD extends Component {
                                     generateNodeProps={data => ({
                                         buttons: [
                                             <ActionLink onClickAsync={async () => !this.state.ruleOptionsVisible && this.showRuleOptions(data.node.rule)} className={styles.ruleActionLink}><Icon icon="edit" title={t('edit')}/></ActionLink>,
-                                            <ActionLink onClickAsync={async () => !this.state.ruleOptionsVisible && this.deleteRule(data.node.rule)} className={styles.ruleActionLink}><Icon icon="remove" title={t('delete')}/></ActionLink>
+                                            <ActionLink onClickAsync={async () => !this.state.ruleOptionsVisible && this.deleteRule(data.node.rule)} className={styles.ruleActionLink}><Icon icon="trash-alt" title={t('delete')}/></ActionLink>
                                         ]
                                     })}
                                 />
diff --git a/client/src/lists/segments/RuleSettingsPane.js b/client/src/lists/segments/RuleSettingsPane.js
index a960b72f..16f5e115 100644
--- a/client/src/lists/segments/RuleSettingsPane.js
+++ b/client/src/lists/segments/RuleSettingsPane.js
@@ -238,7 +238,7 @@ export default class CUD extends Component {
 
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="chevron-left" label={t('ok')}/>
-                        <Button className="btn-primary" icon="remove" label={t('delete')} onClickAsync={::this.deleteRule}/>
+                        <Button className="btn-primary" icon="trash-alt" label={t('delete')} onClickAsync={::this.deleteRule}/>
                     </ButtonRow>
                 </Form>
 
diff --git a/client/src/lists/subscriptions/CUD.js b/client/src/lists/subscriptions/CUD.js
index a1231770..3f96d5f7 100644
--- a/client/src/lists/subscriptions/CUD.js
+++ b/client/src/lists/subscriptions/CUD.js
@@ -223,7 +223,7 @@ export default class CUD extends Component {
                     }
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
-                        {isEdit && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/${this.props.list.id}/subscriptions/${this.props.entity.id}/delete`}/>}
+                        {isEdit && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/${this.props.list.id}/subscriptions/${this.props.entity.id}/delete`}/>}
                     </ButtonRow>
                 </Form>
             </div>
diff --git a/client/src/lists/subscriptions/List.js b/client/src/lists/subscriptions/List.js
index db1b40ce..2eff965b 100644
--- a/client/src/lists/subscriptions/List.js
+++ b/client/src/lists/subscriptions/List.js
@@ -137,7 +137,7 @@ export default class List extends Component {
                         tableAddRestActionButton(
                             actions, this,
                             { method: HTTPMethod.POST, url: `rest/subscriptions-unsubscribe/${this.props.list.id}/${id}`},
-                            { icon: 'off', label: t('unsubscribe') },
+                            { icon: 'power-off', label: t('unsubscribe') },
                             t('confirmUnsubscription'),
                             t('areYouSureYouWantToUnsubscribeEmail?', {email}),
                             t('unsubscribingEmail', {email}),
@@ -150,7 +150,7 @@ export default class List extends Component {
                         tableAddRestActionButton(
                             actions, this,
                             { method: HTTPMethod.POST, url: `rest/blacklist`, data: {email} },
-                            { icon: 'ban-circle', label: t('blacklist') },
+                            { icon: 'ban', label: t('blacklist') },
                             t('confirmEmailBlacklisting'),
                             t('areYouSureYouWantToBlacklistEmail?', {email}),
                             t('blacklistingEmail', {email}),
@@ -194,13 +194,14 @@ export default class List extends Component {
                     <div className="well well-sm">{list.description}</div>
                 }
 
-                <div className="well well-sm">
-                    <Form format="inline" stateOwner={this}>
-                        <Dropdown format="inline" className="input-sm" id="segment" label={t('segment')} options={segmentOptions}/>
-                    </Form>
+                <div className="card bg-light">
+                    <div className="card-body p-2">
+                        <Form format="inline" stateOwner={this}>
+                            <Dropdown format="inline" className="input-sm" id="segment" label={t('segment')} options={segmentOptions}/>
+                        </Form>
+                    </div>
                 </div>
 
-
                 <Table ref={node => this.table = node} withHeader dataUrl={dataUrl} columns={columns} />
             </div>
         );
diff --git a/client/src/namespaces/CUD.js b/client/src/namespaces/CUD.js
index 761874e7..3a12e1a7 100644
--- a/client/src/namespaces/CUD.js
+++ b/client/src/namespaces/CUD.js
@@ -206,7 +206,7 @@ export default class CUD extends Component {
 
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
-                        {canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/namespaces/${this.props.entity.id}/delete`}/>}
+                        {canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/namespaces/${this.props.entity.id}/delete`}/>}
                     </ButtonRow>
                 </Form>
             </div>
diff --git a/client/src/namespaces/List.js b/client/src/namespaces/List.js
index 8d66b3eb..d30af07e 100644
--- a/client/src/namespaces/List.js
+++ b/client/src/namespaces/List.js
@@ -72,7 +72,7 @@ export default class List extends Component {
 
             if (node.data.permissions.includes('share')) {
                 actions.push({
-                    label: <Icon icon="share-alt" title={t('share')}/>,
+                    label: <Icon icon="share" title={t('share')}/>,
                     link: `/namespaces/${node.key}/share`
                 });
             }
diff --git a/client/src/reports/CUD.js b/client/src/reports/CUD.js
index 0297d77f..054b8636 100644
--- a/client/src/reports/CUD.js
+++ b/client/src/reports/CUD.js
@@ -276,7 +276,7 @@ export default class CUD extends Component {
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
                         {canDelete &&
-                            <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/reports/${this.props.entity.id}/delete`}/>
+                            <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/reports/${this.props.entity.id}/delete`}/>
                         }
                     </ButtonRow>
                 </Form>
diff --git a/client/src/reports/List.js b/client/src/reports/List.js
index e1735d87..79cbb1f5 100644
--- a/client/src/reports/List.js
+++ b/client/src/reports/List.js
@@ -122,18 +122,18 @@ export default class List extends Component {
                     } else if (state === ReportState.FINISHED) {
                         if (mimeType === 'text/html') {
                             viewContent = {
-                                label: <Icon icon="eye-open" title={t('view')}/>,
+                                label: <Icon icon="eye" title={t('view')}/>,
                                 link: `/reports/${id}/view`
                             };
                         } else if (mimeType === 'text/csv') {
                             viewContent = {
-                                label: <Icon icon="download-alt" title={t('download')}/>,
+                                label: <Icon icon="file-download" title={t('download')}/>,
                                 href: getUrl(`rpts/${id}/download`)
                             };
                         }
 
                         startStop = {
-                            label: <Icon icon="repeat" title={t('refreshReport')}/>,
+                            label: <Icon icon="redo" title={t('refreshReport')}/>,
                             action: (table) => this.start(table, id)
                         };
 
@@ -143,7 +143,7 @@ export default class List extends Component {
                         };
 
                         startStop = {
-                            label: <Icon icon="repeat" title={t('regenerateReport')}/>,
+                            label: <Icon icon="redo" title={t('regenerateReport')}/>,
                             action: (table) => this.start(table, id)
                         };
                     }
@@ -155,7 +155,7 @@ export default class List extends Component {
                     if (perms.includes('viewOutput')) {
                         actions.push(
                             {
-                                label: <Icon icon="modal-window" title={t('viewConsoleOutput')}/>,
+                                label: <Icon icon="tv" title={t('viewConsoleOutput')}/>,
                                 link: `/reports/${id}/output`
                             }
                         );
@@ -174,7 +174,7 @@ export default class List extends Component {
 
                     if (perms.includes('share')) {
                         actions.push({
-                            label: <Icon icon="share-alt" title={t('share')}/>,
+                            label: <Icon icon="share" title={t('share')}/>,
                             link: `/reports/${id}/share`
                         });
                     }
diff --git a/client/src/reports/templates/CUD.js b/client/src/reports/templates/CUD.js
index ed2f3b79..3d791dd3 100644
--- a/client/src/reports/templates/CUD.js
+++ b/client/src/reports/templates/CUD.js
@@ -335,7 +335,7 @@ export default class CUD extends Component {
                             <Button type="submit" className="btn-primary" icon="check" label={t('saveAndStay')} onClickAsync={::this.submitAndStay}/>
                             <Button type="submit" className="btn-primary" icon="check" label={t('saveAndLeave')}/>
                             {canDelete &&
-                                <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/reports/templates/${this.props.entity.id}/delete`}/>
+                                <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/reports/templates/${this.props.entity.id}/delete`}/>
                             }
                         </ButtonRow>
                     :
diff --git a/client/src/reports/templates/List.js b/client/src/reports/templates/List.js
index 8dfa9d39..4ed7ef3b 100644
--- a/client/src/reports/templates/List.js
+++ b/client/src/reports/templates/List.js
@@ -3,11 +3,12 @@
 import React, {Component} from 'react';
 import {withTranslation} from '../../lib/i18n';
 import {
-    DropdownMenu,
+    ButtonDropdown,
     Icon
 } from '../../lib/bootstrap-components';
 import {
-    MenuLink,
+    ButtonDropdownLink,
+    NavDropdown,
     requiresAuthenticatedUser,
     Title,
     Toolbar,
@@ -85,7 +86,7 @@ export default class List extends Component {
 
                     if (perms.includes('share')) {
                         actions.push({
-                            label: <Icon icon="share-alt" title={t('share')}/>,
+                            label: <Icon icon="share" title={t('share')}/>,
                             link: `/reports/templates/${data[0]}/share`
                         });
                     }
@@ -102,12 +103,12 @@ export default class List extends Component {
                 {tableRestActionDialogRender(this)}
                 {this.state.createPermitted &&
                     <Toolbar>
-                        <DropdownMenu className="btn-primary" label={t('createReportTemplate')}>
-                            <MenuLink to="/reports/templates/create">{t('blank')}</MenuLink>
-                            <MenuLink to="/reports/templates/create/open-counts">{t('openCounts')}</MenuLink>
-                            <MenuLink to="/reports/templates/create/open-counts-csv">{t('openCountsAsCsv')}</MenuLink>
-                            <MenuLink to="/reports/templates/create/aggregated-open-counts">{t('aggregatedOpenCounts')}</MenuLink>
-                        </DropdownMenu>
+                        <ButtonDropdown buttonClassName="btn-primary" menuClassName="dropdown-menu-right" label={t('createReportTemplate')}>
+                            <ButtonDropdownLink to="/reports/templates/create">{t('blank')}</ButtonDropdownLink>
+                            <ButtonDropdownLink to="/reports/templates/create/open-counts">{t('openCounts')}</ButtonDropdownLink>
+                            <ButtonDropdownLink to="/reports/templates/create/open-counts-csv">{t('openCountsAsCsv')}</ButtonDropdownLink>
+                            <ButtonDropdownLink to="/reports/templates/create/aggregated-open-counts">{t('aggregatedOpenCounts')}</ButtonDropdownLink>
+                        </ButtonDropdown>
                     </Toolbar>
                 }
 
diff --git a/client/src/send-configurations/CUD.js b/client/src/send-configurations/CUD.js
index 6ddb11d0..67c23ca5 100644
--- a/client/src/send-configurations/CUD.js
+++ b/client/src/send-configurations/CUD.js
@@ -249,7 +249,7 @@ export default class CUD extends Component {
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
                         {canDelete &&
-                            <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/send-configurations/${this.props.entity.id}/delete`}/>
+                            <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/send-configurations/${this.props.entity.id}/delete`}/>
                         }
                     </ButtonRow>
                 </Form>
diff --git a/client/src/send-configurations/List.js b/client/src/send-configurations/List.js
index 54453844..978d4b58 100644
--- a/client/src/send-configurations/List.js
+++ b/client/src/send-configurations/List.js
@@ -86,7 +86,7 @@ export default class List extends Component {
 
                     if (perms.includes('share')) {
                         actions.push({
-                            label: <Icon icon="share-alt" title={t('share')}/>,
+                            label: <Icon icon="share" title={t('share')}/>,
                             link: `/send-configurations/${data[0]}/share`
                         });
                     }
diff --git a/client/src/shares/UserShares.js b/client/src/shares/UserShares.js
index c22a57d9..c2ed455f 100644
--- a/client/src/shares/UserShares.js
+++ b/client/src/shares/UserShares.js
@@ -69,7 +69,7 @@ export default class UserShares extends Component {
 
                         if (!autoGenerated && perms.includes('share')) {
                             actions.push({
-                                label: <Icon icon="remove" title={t('remove')}/>,
+                                label: <Icon icon="trash-alt" title={t('remove')}/>,
                                 action: () => this.deleteShare(entityTypeId, data[2])
                             });
                         }
diff --git a/client/src/templates/CUD.js b/client/src/templates/CUD.js
index 51ffccb0..879805af 100644
--- a/client/src/templates/CUD.js
+++ b/client/src/templates/CUD.js
@@ -295,7 +295,7 @@ export default class CUD extends Component {
 
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={isEdit ? t('save') : t('saveAndEditTemplate')}/>
-                        {canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/templates/${this.props.entity.id}/delete`}/> }
+                        {canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/templates/${this.props.entity.id}/delete`}/> }
                         {isEdit && <Button className="btn-danger" icon="send" label={t('testSend')} onClickAsync={async () => this.setState({showTestSendModal: true})}/> }
                     </ButtonRow>
                 </Form>
diff --git a/client/src/templates/List.js b/client/src/templates/List.js
index f76d128e..fa2e2a2d 100644
--- a/client/src/templates/List.js
+++ b/client/src/templates/List.js
@@ -100,7 +100,7 @@ export default class List extends Component {
 
                     if (perms.includes('share')) {
                         actions.push({
-                            label: <Icon icon="share-alt" title={t('share')}/>,
+                            label: <Icon icon="share" title={t('share')}/>,
                             link: `/templates/${data[0]}/share`
                         });
                     }
diff --git a/client/src/templates/mosaico/CUD.js b/client/src/templates/mosaico/CUD.js
index 86f1a1ed..82e54083 100644
--- a/client/src/templates/mosaico/CUD.js
+++ b/client/src/templates/mosaico/CUD.js
@@ -196,7 +196,7 @@ export default class CUD extends Component {
                             <Button type="submit" className="btn-primary" icon="check" label={t('saveAndStay')} onClickAsync={::this.submitAndStay}/>
                             <Button type="submit" className="btn-primary" icon="check" label={t('saveAndLeave')}/>
                             {canDelete &&
-                                <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/templates/mosaico/${this.props.entity.id}/delete`}/>
+                                <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/templates/mosaico/${this.props.entity.id}/delete`}/>
                             }
                         </ButtonRow>
                     :
diff --git a/client/src/templates/mosaico/List.js b/client/src/templates/mosaico/List.js
index 25e6a973..414ea2f2 100644
--- a/client/src/templates/mosaico/List.js
+++ b/client/src/templates/mosaico/List.js
@@ -3,11 +3,12 @@
 import React, {Component} from 'react';
 import {withTranslation} from '../../lib/i18n';
 import {
-    DropdownMenu,
+    ButtonDropdown,
     Icon
 } from '../../lib/bootstrap-components';
 import {
-    MenuLink,
+    ButtonDropdownLink,
+    NavDropdown,
     requiresAuthenticatedUser,
     Title,
     Toolbar,
@@ -102,7 +103,7 @@ export default class List extends Component {
 
                     if (perms.includes('share')) {
                         actions.push({
-                            label: <Icon icon="share-alt" title={t('share')}/>,
+                            label: <Icon icon="share" title={t('share')}/>,
                             link: `/templates/mosaico/${data[0]}/share`
                         });
                     }
@@ -119,10 +120,10 @@ export default class List extends Component {
                 {tableRestActionDialogRender(this)}
                 {this.state.createPermitted &&
                     <Toolbar>
-                        <DropdownMenu className="btn-primary" label={t('createMosaicoTemplate')}>
-                            <MenuLink to="/templates/mosaico/create">{t('blank')}</MenuLink>
-                            <MenuLink to="/templates/mosaico/create/versafix">{t('versafixOne')}</MenuLink>
-                        </DropdownMenu>
+                        <ButtonDropdown buttonClassName="btn-primary" menuClassName="dropdown-menu-right" label={t('createMosaicoTemplate')}>
+                            <ButtonDropdownLink to="/templates/mosaico/create">{t('blank')}</ButtonDropdownLink>
+                            <ButtonDropdownLink to="/templates/mosaico/create/versafix">{t('versafixOne')}</ButtonDropdownLink>
+                        </ButtonDropdown>
                     </Toolbar>
                 }
 
diff --git a/client/src/users/CUD.js b/client/src/users/CUD.js
index 9569bcbf..2a313e06 100644
--- a/client/src/users/CUD.js
+++ b/client/src/users/CUD.js
@@ -249,7 +249,7 @@ export default class CUD extends Component {
 
                     <ButtonRow>
                         <Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
-                        {canDelete && <NavButton className="btn-danger" icon="remove" label={t('deleteUser')} linkTo={`/users/${this.props.entity.id}/delete`}/>}
+                        {canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('deleteUser')} linkTo={`/users/${this.props.entity.id}/delete`}/>}
                     </ButtonRow>
                 </Form>
             </div>
diff --git a/client/src/users/List.js b/client/src/users/List.js
index 534eafb9..ed3b7581 100644
--- a/client/src/users/List.js
+++ b/client/src/users/List.js
@@ -60,7 +60,7 @@ export default class List extends Component {
                 });
 
                 actions.push({
-                    label: <Icon icon="share" title={t('share')}/>,
+                    label: <Icon icon="share-square" title={t('share')}/>,
                     link: `/users/${data[0]}/shares`
                 });
 
diff --git a/client/static/mosaico/vendor/skins/gray-flat/Variables.less b/client/static/mosaico/vendor/skins/gray-flat/Variables.less
deleted file mode 100644
index d7f76799..00000000
--- a/client/static/mosaico/vendor/skins/gray-flat/Variables.less
+++ /dev/null
@@ -1,196 +0,0 @@
-// Variables
-// Syntax: <control>-(<sub control>)-<bg|border|text>-(<state>)-(<extra>);
-// Example: @btn-primary-bg-hover-hlight;
-
-@prefix:                         mce;
-
-// Default font
-@font-family:                    "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-size:                      14px;
-@line-height:                    20px;
-@has-gradients:                  false;
-@has-radius:                     true;
-@has-boxshadow:                  false;
-@has-button-borders:             true;
-
-// Text colors
-@text:                           #333333;
-@text-inverse:                   #ffffff;
-@text-disabled:                  #aaaaaa;
-@text-shadow:                    0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75);
-@text-error:                     #aa0000;
-
-// Button
-@btn-text:                       #ffffff;
-@btn-text-shadow:                #333332;
-@btn-border-top:                 rgba(0,0,0,0.1);
-@btn-border-right:               rgba(0,0,0,0.1);
-@btn-border-bottom:              rgba(0,0,0,0.25);
-@btn-border-left:                rgba(0,0,0,0.25);
-@btn-caret-border:               @btn-text;
-@btn-text-disabled:              @text-disabled;
-@btn-box-shadow:                 inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-@btn-box-shadow-active:          inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
-@btn-box-disabled-opacity:       0.4;
-@btn-bg:                         #333332;
-@btn-bg-hlight:                  #333332;
-@btn-bg-hover:                   darken(@btn-bg, 5%);
-@btn-bg-hlight-hover:            darken(@btn-bg-hlight, 5%);
-@btn-border-hover:               darken(@btn-bg, 20%);
-@btn-border-active:              darken(@btn-bg, 20%);
-@btn-padding:                    4px 8px;
-
-@btn-primary-bg:                 #333332;
-@btn-primary-bg-hlight:          #333332;
-@btn-primary-bg-hover:           darken(@btn-primary-bg, 5%);
-@btn-primary-bg-hover-hlight:    darken(@btn-primary-bg-hlight, 5%);
-@btn-primary-text:               #ffffff;
-@btn-primary-text-shadow:        #333333;
-@btn-primary-border-top:         mix(@btn-border-top, @btn-primary-bg, 50%);
-@btn-primary-border-right:       mix(@btn-border-right, @btn-primary-bg, 50%);
-@btn-primary-border-bottom:      mix(@btn-border-bottom, @btn-primary-bg, 50%);
-@btn-primary-border-left:        mix(@btn-border-left, @btn-primary-bg, 50%);
-@btn-primary-border:             transparent;
-@btn-primary-border-hover:       transparent;
-
-// Button group
-@btn-group-border-width:         1px;
-
-// Menu
-@menuitem-text:                  #333333;
-@menu-bg:                        #ffffff;
-@menu-margin:                    -1px 0 0;
-@menu-border:                    rgba(0,0,0,0.2);
-@menubar-border:                 mix(@panel-border, @panel-bg, 60%);
-@menuitem-text-inverse:          #ffffff;
-@menubar-bg-active:              darken(@btn-bg, 10%);
-@menuitem-bg-hover:              #0081C2;
-@menuitem-bg-selected:           #333332;
-@menuitem-bg-selected-hlight:    #333332;
-@menuitem-bg-disabled:           #CCC;
-@menuitem-caret:                 @menuitem-text;
-@menuitem-caret-selected:        @menuitem-text-inverse;
-@menuitem-separator-top:         #cbcbcb;
-@menuitem-separator-bottom:      #ffffff;
-@menuitem-bg-active:             #666666;
-@menuitem-text-active:           #ffffff;
-@menuitem-preview-border-active: #aaaaaa;
-@menubar-menubtn-text:           ;
-
-// Panel
-@panel-border:                   #9e9e9e;
-@panel-bg:                       #f1eee6;
-@panel-bg-hlight:                #f1eee6;
-
-// Tabs
-@tab-border:                     #c5c5c5;
-@tab-bg:                         #e3e3e3;
-@tab-bg-hover:                   #fdfdfd;
-@tab-bg-active:                  #fdfdfd;
-@tabs-bg:						 #ffffff;
-
-// Tooltip
-@tooltip-bg:                     #000;
-@tooltip-text:                   white;
-@tooltip-font-size:              11px;
-
-// Notification
-@notification-font-size:         14px;
-@notification-bg:                #f0f0f0;
-@notification-border:            #cccccc;
-@notification-text:              #333333;
-@notification-success-bg:        #dff0d8;
-@notification-success-border:    #d6e9c6;
-@notification-success-text:      #3c763d;
-@notification-info-bg:           #d9edf7;
-@notification-info-border:       #779ecb;
-@notification-info-text:         #31708f;
-@notification-warning-bg:        #fcf8e3;
-@notification-warning-border:    #faebcc;
-@notification-warning-text:      #8a6d3b;
-@notification-error-bg:          #f2dede;
-@notification-error-border:      #ebccd1;
-@notification-error-text:        #a94442;
-
-// Window
-@window-border:                  #c4c4c4;
-@window-head-border:             @window-border;
-@window-head-close:              mix(@text, @window-bg, 60%);
-@window-head-close-hover:        mix(@text, @window-bg, 40%);
-@window-foot-border:             @window-border;
-@window-foot-bg:                 @window-bg;
-@window-fullscreen-bg:           #FFF;
-@window-modalblock-bg:           #000;
-@window-modalblock-opacity:      0.3;
-@window-box-shadow:              0 3px 7px rgba(0, 0, 0, 0.3);
-@window-bg:                      #ffffff;
-@window-title-font-size:         20px;
-
-// Popover
-@popover-bg:                     @window-bg;
-@popover-arrow-width:            10px;
-@popover-arrow:                  @window-bg;
-@popover-arrow-outer-width:      @popover-arrow-width + 1;
-@popover-arrow-outer:            rgba(0, 0, 0, 0.25);
-
-// Floatpanel
-@floatpanel-box-shadow:          0 5px 10px rgba(0, 0, 0, .2);
-
-// Checkbox
-@checkbox-bg:                    @btn-bg;
-@checkbox-bg-hlight:             @btn-bg-hlight;
-@checkbox-box-shadow:            inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-@checkbox-border:                #c5c5c5;
-@checkbox-border-focus:          #59a5e1;
-
-// Path
-@path-text:                      @text;
-@path-bg-focus:                  #666;
-@path-text-focus:                #fff;
-
-// Textbox
-@textbox-text-placeholder:       #aaa;
-@textbox-box-shadow:             inset 0 1px 1px rgba(0, 0, 0, 0.075);
-@textbox-bg:                     #ffffff;
-@textbox-border:                 #c5c5c5;
-@textbox-border-focus:           #59a5e1;
-
-// Selectbox
-@selectbox-bg:                   @textbox-bg;
-@selectbox-border:               @textbox-border;
-
-// Throbber
-@throbber-bg:                    #fff url('img/loader.gif') no-repeat center center;
-
-// Combobox
-@combobox-border:                @textbox-border;
-
-// Colorpicker
-@colorpicker-border:             @textbox-border;
-@colorpicker-hue-bg:             #fff;
-@colorpicker-hue-border:         #333;
-
-// Grid
-@grid-bg-active:                 @menuitem-bg-active;
-@grid-border-active:             #a1a1a1;
-@grid-border:                    #d6d6d6;
-
-// Misc
-@colorbtn-backcolor-bg:          #bbbbbb;
-@iframe-border:                  @panel-border;
-
-// Slider
-@slider-border:                  #aaaaaa;
-@slider-bg:                      #eeeeee;
-@slider-handle-border:           #bbbbbb;
-@slider-handle-bg:               #dddddd;
-
-// Progress
-@progress-border:                #cccccc;
-@progress-bar-bg:                #dfdfdf;
-@progress-bar-bg-hlight:         #cccccc;
-@progress-text:                  #333333;
-@progress-text-shadow:           #ffffff;
-
-// Flow layout
-@flow-layout-spacing:            2px;
diff --git a/server/views/ckeditor/layout.hbs b/server/views/ckeditor/layout.hbs
index 18120706..2819edc3 100644
--- a/server/views/ckeditor/layout.hbs
+++ b/server/views/ckeditor/layout.hbs
@@ -12,9 +12,13 @@
 
     <title>Mailtrain</title>
 
-    <link rel="stylesheet" href="{{publicPath}}static/bootstrap/themes/united.min.css">
+    <link rel="stylesheet" href="{{publicPath}}mailtrain/mailtrain.css">
+
     <script src="{{publicPath}}static/jquery-3.3.1.min.js"></script>
-    <script src="{{publicPath}}static/bootstrap/js/bootstrap.min.js"></script>
+
+    <script src="{{publicPath}}static-npm/popper.min.js"></script>
+    <script src="{{publicPath}}static-npm/bootstrap.min.js"></script>
+    <script src="{{publicPath}}static-npm/coreui.min.js"></script>
 
     {{#if mailtrainConfig}}
         <script>
diff --git a/server/views/codeeditor/layout.hbs b/server/views/codeeditor/layout.hbs
index 18120706..2819edc3 100644
--- a/server/views/codeeditor/layout.hbs
+++ b/server/views/codeeditor/layout.hbs
@@ -12,9 +12,13 @@
 
     <title>Mailtrain</title>
 
-    <link rel="stylesheet" href="{{publicPath}}static/bootstrap/themes/united.min.css">
+    <link rel="stylesheet" href="{{publicPath}}mailtrain/mailtrain.css">
+
     <script src="{{publicPath}}static/jquery-3.3.1.min.js"></script>
-    <script src="{{publicPath}}static/bootstrap/js/bootstrap.min.js"></script>
+
+    <script src="{{publicPath}}static-npm/popper.min.js"></script>
+    <script src="{{publicPath}}static-npm/bootstrap.min.js"></script>
+    <script src="{{publicPath}}static-npm/coreui.min.js"></script>
 
     {{#if mailtrainConfig}}
         <script>