From dd2b496718948d954a0d919e00db2a7a9df89a00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Jakes=CC=8C?= <jan@jakes.pro>
Date: Wed, 16 Jan 2019 15:01:10 +0100
Subject: [PATCH] Add new modal close icon

[MAILPOET-1510]
---
 assets/css/src/modal.styl                     |  36 +++++++++++++-----
 .../newsletter_editor/libraryOverrides.styl   |   3 ++
 assets/img/modal_close_button.png             | Bin 506 -> 0 bytes
 assets/js/src/modal.js                        |   9 ++++-
 4 files changed, 37 insertions(+), 11 deletions(-)
 delete mode 100644 assets/img/modal_close_button.png

diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl
index 5a07dea89c..9723b8d1cb 100644
--- a/assets/css/src/modal.styl
+++ b/assets/css/src/modal.styl
@@ -5,6 +5,7 @@ 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, 0.6)
 
 // hide scrollbars on background when a modal window opened
@@ -72,6 +73,7 @@ body.mailpoet_modal_opened
   font-size: 23px;
   font-weight: 600;
   line-height: 29px;
+  margin: 0 (modal_close_button_size + 20) 0 0
 
 .mailpoet_popup_body
   height: 92%
@@ -128,24 +130,33 @@ body.mailpoet_modal_opened
 
 // modal button
 .mailpoet_modal_close
-  background: url(../img/modal_close_button.png) 7px 7px no-repeat
-  border: 0
   cursor: pointer
-  height: 30px
+  position: absolute
   overflow: hidden
   padding: 0
-  position: absolute
-  width: 30px
   z-index: 2
   outline: 0 none
 
+  svg
+    opacity: .5
+    stroke: #979797
+
+    &:hover
+      stroke: #636363
+
 .mailpoet_popup .mailpoet_modal_close
-  right: 0
-  top: 0
+  right: modal_popup_padding
+  top: modal_popup_padding
+  width: modal_close_button_size
+  height: modal_close_button_size
+  padding: 3px 0
 
 .mailpoet_panel .mailpoet_modal_close
-  right: 10px
-  top: 7px
+  width: 16px
+  height: 16px
+  right: 20px
+  top: 20px
+  padding: 2px 0
 
 .mailpoet_modal_close:focus
   outline: 0 none
@@ -173,6 +184,13 @@ body.mailpoet_modal_opened
   .mailpoet_popup_wrapper
     padding: modal_popup_padding_mobile
 
+  .mailpoet_popup_title h2
+    margin-right: modal_close_button_size + 10
+
+  .mailpoet_popup .mailpoet_modal_close
+    top: modal_popup_padding_mobile
+    right: modal_popup_padding_mobile
+
   .mailpoet_modal_overlay.mailpoet_panel_overlay
     top: 46px
 
diff --git a/assets/css/src/newsletter_editor/libraryOverrides.styl b/assets/css/src/newsletter_editor/libraryOverrides.styl
index 922981af99..4f7780c8ba 100644
--- a/assets/css/src/newsletter_editor/libraryOverrides.styl
+++ b/assets/css/src/newsletter_editor/libraryOverrides.styl
@@ -122,6 +122,9 @@ 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
diff --git a/assets/img/modal_close_button.png b/assets/img/modal_close_button.png
deleted file mode 100644
index 6a48f46908e4e9250c52bcbfbf75ee7ec91bfbb1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 506
zcmV<W0R{evP)<h;3K|Lk000e1NJLTq000jF000jN0ssI2w6p>p00009a7bBm000XU
z000XU0RWnu7ytkPtVu*cR49>kQcG?kQ4F;G{JIrp#SF`=0s+o|_~oM{$C`=eQdzVR
z5@+ZI3?R4wD2RdS_GcE&l9X!aa+PHpTdkI=5)oX3y90nZs%ngpi=s%=^#1<-s+!PC
zF=k#Y7JpCws8*{rn@#)zW>&jNr6@a{PK=Sy=YojcuUZ2DoKB}CjUo~Vs)4QI`}@zw
z$FaMb2{R3c{a^3DDMWK*W)TVXdcDzT5Rr&5^I$NDF>W@SUa$B1`Z}FXSF4q(0>Ey!
z<0?)>VvKp7o7uy|gPDy+qb$qvJP#p+5X!Q2_luf{%<OnPuGec3d3$^N`1n{Zm*?|Y
zL=Z7a5;ME384-!-a5&uF-oCuNWLft7{M>H0ce`Cxs%~=eHZw$gdU_g<$61!m=W|3H
z4u^<1nM?pcRaN!k&CIIW@AoH@$zrkC@ArA0&t|i#!OYS$RaLyZyX$tl?p`IDnY)J&
z+}+)Ys4UAEV^I{_?Up$pf*}HcyBPu?f|~#U0+h~1(SeY-EX#0H`}X;H`2M2-fLG`q
wLr~S_pSinZv(*-nuYM3*nc2*WqDYeDKaySe$u~rbLI3~&07*qoM6N<$f|#}Ix&QzG

diff --git a/assets/js/src/modal.js b/assets/js/src/modal.js
index 18dbc415ec..1d15e42e2d 100644
--- a/assets/js/src/modal.js
+++ b/assets/js/src/modal.js
@@ -4,6 +4,11 @@ define('modal', ['mailpoet', 'jquery'],
     'use strict';
 
     var MailPoet = mp;
+    var closeModalImage =
+      '<svg viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg">' +
+        '<path d="M21.454 1.546L1.546 21.454M1.546 1.546L21.454 21.454" stroke-width="3" stroke-linecap="round" />' +
+      '</svg>';
+
     /** *************************************************************************
     MailPoet Modal:
 
@@ -82,7 +87,7 @@ define('modal', ['mailpoet', 'jquery'],
         overlay: '<div id="mailpoet_modal_overlay" class="mailpoet_modal_overlay" style="display:none;"></div>',
         popup: '<div id="mailpoet_popup" class="mailpoet_popup" tabindex="-1">' +
         '<div class="mailpoet_popup_wrapper">' +
-        '<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
+        '<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close">' + closeModalImage + '</a>' +
         '<div id="mailpoet_popup_title" class="mailpoet_popup_title"><h2></h2></div>' +
         '<div class="mailpoet_popup_body clearfix"></div>' +
         '</div>' +
@@ -93,7 +98,7 @@ define('modal', ['mailpoet', 'jquery'],
         '<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading mailpoet_modal_loading_3"></div>' +
         '</div>',
         panel: '<div id="mailpoet_panel" class="mailpoet_panel">' +
-        '<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
+        '<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close">' + closeModalImage + '</a>' +
         '<div class="mailpoet_panel_wrapper" tabindex="-1">' +
         '<div class="mailpoet_panel_body clearfix"></div>' +
         '</div>' +