From 32383114ceaf9dae27c77e6922c005b108e0214a Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Fri, 30 Sep 2016 10:02:26 +1300
Subject: [PATCH 1/9] Remove custom add to campaign styles and make them more
 reusable

---
 admin/client/src/styles/legacy/_style.scss | 84 +---------------------
 1 file changed, 1 insertion(+), 83 deletions(-)

diff --git a/admin/client/src/styles/legacy/_style.scss b/admin/client/src/styles/legacy/_style.scss
index 66e0e2df6..f9cb6cddd 100644
--- a/admin/client/src/styles/legacy/_style.scss
+++ b/admin/client/src/styles/legacy/_style.scss
@@ -1943,88 +1943,6 @@ body.cms-dialog {
   }
 }
 
-/** --------------------------------------------
- * Add to campaign dialog
- * -------------------------------------------- */
-
-.add-to-campaign__dialog {
-  overflow: hidden;
-  padding: 12px 16px;
-  margin: 0;
-  border: 0;
-  min-height: 150px;
-  /* no max-height due to overflow: hidden */
-
-  .chosen-results > li {
-    padding: $spacer-y/1.5 $spacer-x;
-  }
-
-  .disabled-result {
-    font-style: italic;
-
-    &::after {
-      font-style: normal;
-      content: "Already contains item";
-      color: $color-text-blue-link;
-      margin-left: $spacer-x;
-      float: right;
-    }
-  }
-
-  @keyframes add-to-campaign--slideup {
-    from {
-      bottom: -100%
-    }
-    to {
-      bottom: 0
-    }
-  }
-
-  .add-to-campaign__response {
-    position: absolute;
-    bottom: 0;
-    height: 100%;
-    left: 0;
-    width: 100%;
-    animation:add-to-campaign--slideup 2s 1;
-    background: $white;
-    display: block;
-    z-index: 1;
-  }
-
-  .response-wrapper {
-    display: table;
-    height: 100%;
-    width: 100%;
-
-    span {
-      display: table-cell;
-      text-align: center;
-      vertical-align: middle;
-      padding-bottom: $spacer-y;
-
-      &::before {
-        font-size: 48px;
-        line-height: 40px;
-        display: block;
-        padding-bottom: $spacer-y;
-      }
-    }
-  }
-
-  .add-to-campaign__response--good {
-    span::before {
-      content: "☺";
-      color: $brand-success;
-    }
-  }
-
-  .add-to-campaign__response--error span::before {
-    /* This is a sad face emoticon. Some fonts don't carry it. @todo: replace or test in all browsers */
-    content: "☹";
-    color: $brand-danger;
-  }
-}
 
 
 /** --------------------------------------------
@@ -2130,7 +2048,7 @@ form.small {
 
     label {
       padding-left: 2px;
-  }
+    }
   }
 
   .fieldgroup .fieldgroup-field {

From 3fdeaea162a4d39c5c66fa96e760467eabdb4209 Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Fri, 30 Sep 2016 10:03:10 +1300
Subject: [PATCH 2/9] Increase the size of select dropdown so they match the
 size of other fields

---
 admin/client/src/styles/legacy/_forms.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/admin/client/src/styles/legacy/_forms.scss b/admin/client/src/styles/legacy/_forms.scss
index 13e3f4dc5..89daff262 100644
--- a/admin/client/src/styles/legacy/_forms.scss
+++ b/admin/client/src/styles/legacy/_forms.scss
@@ -55,7 +55,7 @@ form.nostyle {
 	}
 
   select:not([size]):not([multiple]) {
-    height: 2.5rem;
+    height: 2.924rem;
   }
 
   input.text,

From 3f5d241be4a66d81d1a6980a898ff1d4c1dfd3dc Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Fri, 30 Sep 2016 10:04:05 +1300
Subject: [PATCH 3/9] Add modal specific stylesheet

---
 admin/client/src/styles/bundle.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/admin/client/src/styles/bundle.scss b/admin/client/src/styles/bundle.scss
index 5118ebd14..5450cce4e 100644
--- a/admin/client/src/styles/bundle.scss
+++ b/admin/client/src/styles/bundle.scss
@@ -53,6 +53,7 @@
 @import "../components/Toolbar/Toolbar";
 @import "../components/Tabs/Tabs";
 @import "../components/Form/Form";
+@import "../components/Modal/Modal";
 
 
 // Layout and sections

From d6a24f41337d983f6b8d42654e37c5dd02946eb1 Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Fri, 30 Sep 2016 10:04:45 +1300
Subject: [PATCH 4/9] Use bootstrap modal variables

---
 admin/client/src/styles/_variables.scss | 47 +++++++++++++------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/admin/client/src/styles/_variables.scss b/admin/client/src/styles/_variables.scss
index 47a51ef86..7061f85b0 100644
--- a/admin/client/src/styles/_variables.scss
+++ b/admin/client/src/styles/_variables.scss
@@ -164,6 +164,11 @@ $grid-gutter-width: $spacer * 2.5; // 40px
 $grid-gutter-width-half: $grid-gutter-width / 2; // TODO: Deprecate this, replacing with $panel-padding-x and $panel-padding-y
 
 
+// Panel padding
+$panel-padding-x: $grid-gutter-width / 2;
+$panel-padding-y: $grid-gutter-width / 2;
+
+
 // Typography
 //
 // Font, line-height, and color for body text, headings, and more.
@@ -577,22 +582,22 @@ $popover-padding: $spacer-x;
 // Modals
 
 // Padding applied to the modal body
-// $modal-inner-padding: 15px;
-//
-// $modal-title-padding: 15px;
-// $modal-title-line-height: $line-height;
-//
-// $modal-content-bg: #fff;
-// $modal-content-border-color: rgba(0,0,0,.2);
-//
-// $modal-backdrop-bg: #000;
-// $modal-backdrop-opacity: .5;
-// $modal-header-border-color: #e5e5e5;
-// $modal-footer-border-color: $modal-header-border-color;
-//
-// $modal-lg: 900px;
-// $modal-md: 600px;
-// $modal-sm: 300px;
+$modal-inner-padding: $panel-padding-y $panel-padding-x;
+
+$modal-title-padding: $spacer-xs $panel-padding-x;
+$modal-title-line-height: $line-height;
+
+$modal-content-bg: $background-main;
+$modal-content-border-color: rgba(0,0,0,.2);
+
+$modal-backdrop-bg: #000;
+$modal-backdrop-opacity: .5;
+$modal-header-border-color: #e5e5e5;
+$modal-footer-border-color: $modal-header-border-color;
+
+$modal-lg: 900px;
+$modal-md: 600px;
+$modal-sm: 300px;
 
 
 // Alerts
@@ -692,9 +697,9 @@ $breadcrumb-divider: "/";
 
 // Close
 
-// $close-font-weight: bold;
-// $close-color: #000;
-// $close-text-shadow: 0 1px 0 #fff;
+$close-font-weight: 300;
+$close-color: #000;
+$close-text-shadow: 0 1px 0 #fff;
 
 
 // Code
@@ -716,10 +721,6 @@ $cms-panel-sm: 300px;
 $cms-panel-md: 448px;
 $cms-panel-lg: 638px;
 
-// Panel padding
-$panel-padding-x: $grid-gutter-width / 2;
-$panel-padding-y: $grid-gutter-width / 2;
-
 
 // Shadows
 $shadow-level-1: rgba(0, 0, 0, .1);

From 5f92e1291189aaa5a842eac5eb04dcff4b247d99 Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Fri, 30 Sep 2016 10:23:58 +1300
Subject: [PATCH 5/9] If description field is empty hide it as it has margin

---
 admin/client/src/components/Form/Form.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/admin/client/src/components/Form/Form.scss b/admin/client/src/components/Form/Form.scss
index 3cfd7d4c0..6fe85c55b 100644
--- a/admin/client/src/components/Form/Form.scss
+++ b/admin/client/src/components/Form/Form.scss
@@ -76,6 +76,10 @@
   padding-bottom: $input-padding-y;
   margin-bottom: 0;
   font-size: $font-size-sm;
+
+  &:empty {
+    display: none;
+  }
 }
 
 .form__field-extra-label {

From 374ef6e0c33ea650fa18ce94f0b7b104bd48140d Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Fri, 30 Sep 2016 10:24:12 +1300
Subject: [PATCH 6/9] Modal styles

---
 admin/client/dist/js/bundle.js                |  10 +-
 admin/client/dist/styles/bundle.css           | 220 ++++++++++--------
 .../FormBuilderModal/FormBuilderModal.js      |   4 +-
 admin/client/src/components/Modal/Modal.scss  | 112 +++++++++
 admin/client/src/legacy/AddToCampaignForm.js  |   6 +-
 5 files changed, 248 insertions(+), 104 deletions(-)
 create mode 100644 admin/client/src/components/Modal/Modal.scss

diff --git a/admin/client/dist/js/bundle.js b/admin/client/dist/js/bundle.js
index 68fd75fac..ab8d2fefa 100644
--- a/admin/client/dist/js/bundle.js
+++ b/admin/client/dist/js/bundle.js
@@ -416,10 +416,10 @@ var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))
 return n.handleSubmit=n.handleSubmit.bind(n),n.handleHide=n.handleHide.bind(n),n.clearResponse=n.clearResponse.bind(n),n}return a(t,e),s(t,[{key:"getForm",value:function n(){return u["default"].createElement(h["default"],{
 schemaUrl:this.props.schemaUrl,handleSubmit:this.handleSubmit,handleAction:this.props.handleAction})}},{key:"getResponse",value:function i(){if(!this.state||!this.state.response)return null
 var e=""
-return e=this.state.error?this.props.responseClassBad||"response error":this.props.responseClassGood||"response good",u["default"].createElement("div",{className:e},u["default"].createElement("div",{className:"response-wrapper"
-},u["default"].createElement("span",null,this.state.response)))}},{key:"clearResponse",value:function l(){this.setState({response:null})}},{key:"handleHide",value:function c(){this.clearResponse(),"function"==typeof this.props.handleHide&&this.props.handleHide()
+return e=this.state.error?this.props.responseClassBad||"response error":this.props.responseClassGood||"response good",u["default"].createElement("div",{className:e},u["default"].createElement("span",null,this.state.response))
 
-}},{key:"handleSubmit",value:function f(e,t,n){var i=this,r=null
+}},{key:"clearResponse",value:function l(){this.setState({response:null})}},{key:"handleHide",value:function c(){this.clearResponse(),"function"==typeof this.props.handleHide&&this.props.handleHide()}},{
+key:"handleSubmit",value:function f(e,t,n){var i=this,r=null
 return"function"==typeof this.props.handleSubmit?r=this.props.handleSubmit(e,t,n):(e.preventDefault(),r=n()),r&&r.then(function(e){return i.setState({response:e.message,error:!1}),e})["catch"](function(e){
 e.then(function(e){i.setState({response:e,error:!0})})}),r}},{key:"render",value:function p(){var e=this.getForm(),t=this.getResponse()
 return u["default"].createElement(d.Modal,{show:this.props.show,onHide:this.handleHide,className:this.props.className},this.props.title!==!1&&u["default"].createElement(d.Modal.Header,{closeButton:!0},u["default"].createElement(d.Modal.Title,null,this.props.title)),u["default"].createElement(d.Modal.Body,{
@@ -1475,8 +1475,8 @@ return t.length||(t=e('<div id="add-to-campaign__dialog-wrapper" />'),e("body").
 this._clearModal()},_renderModal:function r(){var t=this,n=function l(){return t._clearModal()},i=function d(){return t._handleSubmitModal.apply(t,arguments)},r=e("form.cms-edit-form :input[name=ID]").val(),o=window.ss.store,a=o.getState().config.sections["SilverStripe\\CMS\\Controllers\\CMSPageEditController"],s=a.form.AddToCampaignForm.schemaUrl+"/"+r
 
 
-c["default"].render(u["default"].createElement(f.Provider,{store:o},u["default"].createElement(h["default"],{show:!0,handleSubmit:i,handleHide:n,schemaUrl:s,bodyClassName:"add-to-campaign__dialog",responseClassBad:"add-to-campaign__response add-to-campaign__response--error",
-responseClassGood:"add-to-campaign__response add-to-campaign__response--good"})),this[0])},_clearModal:function o(){c["default"].unmountComponentAtNode(this[0])},_handleSubmitModal:function a(e,t,n){return e.preventDefault(),
+c["default"].render(u["default"].createElement(f.Provider,{store:o},u["default"].createElement(h["default"],{show:!0,handleSubmit:i,handleHide:n,schemaUrl:s,bodyClassName:"modal__dialog",responseClassBad:"modal__response modal__response--error",
+responseClassGood:"modal__response modal__response--good"})),this[0])},_clearModal:function o(){c["default"].unmountComponentAtNode(this[0])},_handleSubmitModal:function a(e,t,n){return e.preventDefault(),
 t.Campaign?n():(alert(s["default"]._t("AddToCampaigns.ErrorCampaignNotSelected","There was no campaign selected to be added to")),null)}})})},,function(e,t){e.exports=FormBuilderModal},function(e,t,n){
 "use strict"
 function i(e){return e&&e.__esModule?e:{"default":e}}var r=n(1),o=i(r)
diff --git a/admin/client/dist/styles/bundle.css b/admin/client/dist/styles/bundle.css
index e59c2b4e7..dbb64ede5 100644
--- a/admin/client/dist/styles/bundle.css
+++ b/admin/client/dist/styles/bundle.css
@@ -6112,7 +6112,7 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro
 .close{
   float:right;
   font-size:1.5rem;
-  font-weight:700;
+  font-weight:300;
   line-height:1;
   color:#000;
   text-shadow:0 1px 0 #fff;
@@ -6177,7 +6177,7 @@ button.close{
 
 .modal-content{
   position:relative;
-  background-color:#fff;
+  background-color:#f6f7f8;
   background-clip:padding-box;
   border:1px solid rgba(0,0,0,.2);
   border-radius:.3rem;
@@ -6204,7 +6204,7 @@ button.close{
 }
 
 .modal-header{
-  padding:15px;
+  padding:.76925rem 1.5385rem;
   border-bottom:1px solid #e5e5e5;
 }
 
@@ -6225,11 +6225,11 @@ button.close{
 
 .modal-body{
   position:relative;
-  padding:15px;
+  padding:1.5385rem;
 }
 
 .modal-footer{
-  padding:15px;
+  padding:1.5385rem;
   text-align:right;
   border-top:1px solid #e5e5e5;
 }
@@ -8655,7 +8655,7 @@ form.nostyle .TreeDropdownField,form.nostyle input.text,form.nostyle select,form
 }
 
 .field select:not([size]):not([multiple]){
-  height:2.5rem;
+  height:2.924rem;
 }
 
 .field input.creditcard,.field input.phonenumber-field__area,.field input.phonenumber-field__country,.field input.phonenumber-field__extension,.field input.phonenumber-field__number{
@@ -10978,93 +10978,6 @@ body.cms-dialog{
   top:0;
 }
 
-.add-to-campaign__dialog{
-  overflow:hidden;
-  padding:12px 16px;
-  margin:0;
-  border:0;
-  min-height:150px;
-}
-
-.add-to-campaign__dialog .chosen-results>li{
-  padding:.82053rem 1.2308rem;
-}
-
-.add-to-campaign__dialog .disabled-result{
-  font-style:italic;
-}
-
-.add-to-campaign__dialog .disabled-result:after{
-  font-style:normal;
-  content:"Already contains item";
-  color:#0071c4;
-  margin-left:1.2308rem;
-  float:right;
-}
-
-@-webkit-keyframes add-to-campaign--slideup{
-  0%{
-    bottom:-100%;
-  }
-
-  to{
-    bottom:0;
-  }
-}
-
-@keyframes add-to-campaign--slideup{
-  0%{
-    bottom:-100%;
-  }
-
-  to{
-    bottom:0;
-  }
-}
-
-.add-to-campaign__dialog .add-to-campaign__response{
-  position:absolute;
-  bottom:0;
-  height:100%;
-  left:0;
-  width:100%;
-  -webkit-animation:add-to-campaign--slideup 2s 1;
-          animation:add-to-campaign--slideup 2s 1;
-  background:#fff;
-  display:block;
-  z-index:1;
-}
-
-.add-to-campaign__dialog .response-wrapper{
-  display:table;
-  height:100%;
-  width:100%;
-}
-
-.add-to-campaign__dialog .response-wrapper span{
-  display:table-cell;
-  text-align:center;
-  vertical-align:middle;
-  padding-bottom:1.2308rem;
-}
-
-.add-to-campaign__dialog .response-wrapper span:before{
-  font-size:48px;
-  line-height:40px;
-  display:block;
-  padding-bottom:1.2308rem;
-}
-
-.add-to-campaign__dialog .add-to-campaign__response--good span:before{
-  content:"\263A";
-  color:#3fa142;
-}
-
-.add-to-campaign__dialog .add-to-campaign__response--error span:before{
-  content:"\2639";
-  color:#d40404;
-}
-
 .cms-search-form{
   margin-bottom:16px;
 }
@@ -15645,6 +15558,10 @@ div.grid-field__sort-field+.form__fieldgroup-item{
   font-size:.923rem;
 }
 
+.form__field-description:empty,.form__field-extra-label:empty{
+  display:none;
+}
+
 .form__field-extra-label{
   font-style:italic;
 }
@@ -15875,6 +15792,123 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
   }
 }
 
+.modal-content{
+  overflow:hidden;
+  border:0;
+}
+
+.modal-header{
+  height:53px;
+}
+
+.modal-header .close{
+  top:.9231rem;
+  right:.9231rem;
+  position:absolute;
+  z-index:2;
+  margin-right:0;
+  height:32px;
+}
+
+.modal-header .close span{
+  overflow:hidden;
+  display:block;
+  margin-top:-7px;
+}
+
+.modal-body{
+  min-height:200px;
+}
+
+@-webkit-keyframes modal--slideup{
+  0%{
+    bottom:-100%;
+    opacity:.5;
+  }
+
+  to{
+    bottom:0;
+    opacity:1;
+  }
+}
+
+@keyframes modal--slideup{
+  0%{
+    bottom:-100%;
+    opacity:.5;
+  }
+
+  to{
+    bottom:0;
+    opacity:1;
+  }
+}
+
+.modal__response{
+  position:absolute;
+  bottom:0;
+  left:0;
+  height:calc(100% + 53px);
+  width:100%;
+  -webkit-animation:modal--slideup .6s 1;
+          animation:modal--slideup .6s 1;
+  background:#f6f7f8;
+  display:block;
+  border-radius:.3rem;
+  z-index:1;
+  text-align:center;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-pack:center;
+      -ms-flex-pack:center;
+          justify-content:center;
+  -webkit-box-align:center;
+      -ms-flex-align:center;
+          align-items:center;
+  padding:1.5385rem;
+}
+
+.modal__response--error,.modal__response--good{
+  font-size:1.23rem;
+  font-weight:300;
+}
+
+.modal__response--error span:before,.modal__response--good span:before{
+  font-family:silverstripe;
+  margin-bottom:1.2308rem;
+  font-size:48px;
+  line-height:40px;
+  display:block;
+  padding-bottom:1.2308rem;
+}
+
+.modal__response--good span:before{
+  content:"O";
+  color:#3fa142;
+}
+
+.modal__response--error span:before{
+  content:"#";
+  color:#d40404;
+}
+
+.modal__dialog .chosen-results>li{
+  padding:.82053rem 1.2308rem;
+}
+
+.modal__dialog .disabled-result{
+  font-style:italic;
+}
+
+.modal__dialog .disabled-result:after{
+  font-style:normal;
+  content:"Already contains item";
+  color:#0071c4;
+  margin-left:1.2308rem;
+  float:right;
+}
+
 .cms-content__inner{
   height:100%;
 }
diff --git a/admin/client/src/components/FormBuilderModal/FormBuilderModal.js b/admin/client/src/components/FormBuilderModal/FormBuilderModal.js
index 907731378..b5b62f4f9 100644
--- a/admin/client/src/components/FormBuilderModal/FormBuilderModal.js
+++ b/admin/client/src/components/FormBuilderModal/FormBuilderModal.js
@@ -37,9 +37,7 @@ class FormBuilderModal extends SilverStripeComponent {
 
     return (
       <div className={className}>
-        <div className="response-wrapper">
-          <span>{this.state.response}</span>
-        </div>
+        <span>{this.state.response}</span>
       </div>
     );
   }
diff --git a/admin/client/src/components/Modal/Modal.scss b/admin/client/src/components/Modal/Modal.scss
new file mode 100644
index 000000000..f3f4fd392
--- /dev/null
+++ b/admin/client/src/components/Modal/Modal.scss
@@ -0,0 +1,112 @@
+// Based on bootstrap modal
+.modal-content {
+  overflow: hidden;
+  border: 0;
+}
+
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+  height: $toolbar-total-height;
+
+  // Close icon
+  .close {
+    top: $spacer-sm;
+    right: $spacer-sm;
+    position: absolute;
+    z-index: 2;
+    margin-right: 0;
+    height: 32px;
+
+    span {
+      overflow: hidden;
+      display: block;
+      margin-top: -7px;
+    }
+  }
+}
+
+.modal-body {
+  min-height: 200px;
+}
+
+
+// Modal slide up response
+@keyframes modal--slideup {
+  from {
+    bottom: -100%;
+    opacity: .5;
+  }
+
+  to {
+    bottom: 0;
+    opacity: 1;
+  }
+}
+
+.modal__response {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: calc(100% + #{$toolbar-total-height});
+  width: 100%;
+  animation: modal--slideup .6s 1;
+  background: $background-main;
+  display: block;
+  border-radius: $border-radius-lg;
+  z-index: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $panel-padding-y $panel-padding-x;
+}
+
+// Response messages
+.modal__response--good,
+.modal__response--error {
+  font-size: $font-size-lg;
+  font-weight: 300;
+
+  span::before {
+    font-family: silverstripe;
+    margin-bottom: $spacer-y;
+    font-size: 48px;
+    line-height: 40px;
+    display: block;
+    padding-bottom: $spacer-y;
+  }
+}
+
+.modal__response--good span::before {
+  content: "O";
+  color: $brand-success;
+}
+
+.modal__response--error span::before {
+  content: "#";
+  color: $brand-danger;
+}
+
+
+// This code doesn't do anything
+// TODO check whether or why this (chosen) isn't being used?
+.modal__dialog {
+
+  .chosen-results > li {
+    padding: $spacer-y/1.5 $spacer-x;
+  }
+
+  .disabled-result {
+    font-style: italic;
+
+    &::after {
+      font-style: normal;
+      content: "Already contains item";
+      color: $color-text-blue-link;
+      margin-left: $spacer-x;
+      float: right;
+    }
+  }
+}
diff --git a/admin/client/src/legacy/AddToCampaignForm.js b/admin/client/src/legacy/AddToCampaignForm.js
index 7202e97d2..aa2ad32e9 100644
--- a/admin/client/src/legacy/AddToCampaignForm.js
+++ b/admin/client/src/legacy/AddToCampaignForm.js
@@ -57,9 +57,9 @@ jQuery.entwine('ss', ($) => {
             handleSubmit={handleSubmit}
             handleHide={handleHide}
             schemaUrl={modalSchemaUrl}
-            bodyClassName="add-to-campaign__dialog"
-            responseClassBad="add-to-campaign__response add-to-campaign__response--error"
-            responseClassGood="add-to-campaign__response add-to-campaign__response--good"
+            bodyClassName="modal__dialog"
+            responseClassBad="modal__response modal__response--error"
+            responseClassGood="modal__response modal__response--good"
           />
         </Provider>,
         this[0]

From b794a40864dcc269d58e806945500e91455e9ee5 Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Fri, 30 Sep 2016 13:43:11 +1300
Subject: [PATCH 7/9] Group button icon styles

---
 admin/client/dist/styles/bundle.css           | 35 ++++++++++------
 .../src/components/FormAction/FormAction.scss | 41 +++++++++++++------
 2 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/admin/client/dist/styles/bundle.css b/admin/client/dist/styles/bundle.css
index dbb64ede5..a8e80d1fb 100644
--- a/admin/client/dist/styles/bundle.css
+++ b/admin/client/dist/styles/bundle.css
@@ -15048,18 +15048,6 @@ fieldset+.btn-toolbar{
   background:#0071c4;
 }
 
-.btn--top-right{
-  float:right;
-  right:0;
-  margin-right:5px;
-  margin-top:-2px;
-  position:absolute;
-}
-
-.btn--top-right:before{
-  color:#66727d;
-}
-
 .btn-group{
   margin-right:.9231rem;
 }
@@ -15080,6 +15068,29 @@ fieldset+.btn-toolbar{
   outline:none;
 }
 
+.close{
+  font-size:1.8rem;
+  opacity:.3;
+  line-height:20px;
+  display:block;
+}
+
+button.close{
+  padding:.4615rem .7692rem;
+}
+
+.btn--top-right{
+  float:right;
+  right:0;
+  margin-right:5px;
+  margin-top:-2px;
+  position:absolute;
+}
+
+.btn--top-right:before{
+  color:#66727d;
+}
+
 .popover{
   box-shadow:0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.1);
   font-size:1rem;
diff --git a/admin/client/src/components/FormAction/FormAction.scss b/admin/client/src/components/FormAction/FormAction.scss
index f540716aa..7656c8635 100644
--- a/admin/client/src/components/FormAction/FormAction.scss
+++ b/admin/client/src/components/FormAction/FormAction.scss
@@ -180,19 +180,6 @@
   }
 }
 
-// Apply to things like panel close btn
-.btn--top-right {
-  float: right;
-  right: 0;
-  margin-right: 5px;
-  margin-top: -2px;
-  position: absolute;
-
-  // Temp override JQueryUI color
-  &::before {
-    color: $body-color-light;
-  }
-}
 
 // Grouped buttons
 .btn-group {
@@ -216,3 +203,31 @@
 .btn--no-focus:focus {
   outline: none;
 }
+
+
+// Close buttons
+// Bootstrap close button customizations
+.close {
+  font-size: ($font-size-base * 1.8);
+  opacity: .3;
+  line-height: 20px;
+  display: block;
+}
+
+button.close {
+  padding: $btn-padding-y $btn-padding-x;
+}
+
+// Apply to things like panel close btn
+.btn--top-right {
+  float: right;
+  right: 0;
+  margin-right: 5px;
+  margin-top: -2px;
+  position: absolute;
+
+  // Temp override JQueryUI color
+  &::before {
+    color: $body-color-light;
+  }
+}

From 3ac0eaaf62b4767848642784fb44216ac8f9f655 Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Fri, 30 Sep 2016 15:45:12 +1300
Subject: [PATCH 8/9] Remove legacy styles

---
 admin/client/dist/styles/bundle.css          | 16 --------------
 admin/client/src/components/Modal/Modal.scss | 22 --------------------
 2 files changed, 38 deletions(-)

diff --git a/admin/client/dist/styles/bundle.css b/admin/client/dist/styles/bundle.css
index a8e80d1fb..a49b8f336 100644
--- a/admin/client/dist/styles/bundle.css
+++ b/admin/client/dist/styles/bundle.css
@@ -15904,22 +15904,6 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
   color:#d40404;
 }
 
-.modal__dialog .chosen-results>li{
-  padding:.82053rem 1.2308rem;
-}
-
-.modal__dialog .disabled-result{
-  font-style:italic;
-}
-
-.modal__dialog .disabled-result:after{
-  font-style:normal;
-  content:"Already contains item";
-  color:#0071c4;
-  margin-left:1.2308rem;
-  float:right;
-}
-
 .cms-content__inner{
   height:100%;
 }
diff --git a/admin/client/src/components/Modal/Modal.scss b/admin/client/src/components/Modal/Modal.scss
index f3f4fd392..a599df055 100644
--- a/admin/client/src/components/Modal/Modal.scss
+++ b/admin/client/src/components/Modal/Modal.scss
@@ -88,25 +88,3 @@
   content: "#";
   color: $brand-danger;
 }
-
-
-// This code doesn't do anything
-// TODO check whether or why this (chosen) isn't being used?
-.modal__dialog {
-
-  .chosen-results > li {
-    padding: $spacer-y/1.5 $spacer-x;
-  }
-
-  .disabled-result {
-    font-style: italic;
-
-    &::after {
-      font-style: normal;
-      content: "Already contains item";
-      color: $color-text-blue-link;
-      margin-left: $spacer-x;
-      float: right;
-    }
-  }
-}

From ebbb0258ddf544d50132c87385823f9837d88b73 Mon Sep 17 00:00:00 2001
From: Damian Mooyman <damian@silverstripe.com>
Date: Mon, 3 Oct 2016 10:58:58 +1300
Subject: [PATCH 9/9] Fix linting issue

---
 admin/client/src/styles/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/admin/client/src/styles/_variables.scss b/admin/client/src/styles/_variables.scss
index 7061f85b0..c8ca20f4c 100644
--- a/admin/client/src/styles/_variables.scss
+++ b/admin/client/src/styles/_variables.scss
@@ -588,7 +588,7 @@ $modal-title-padding: $spacer-xs $panel-padding-x;
 $modal-title-line-height: $line-height;
 
 $modal-content-bg: $background-main;
-$modal-content-border-color: rgba(0,0,0,.2);
+$modal-content-border-color: rgba(0, 0, 0, .2);
 
 $modal-backdrop-bg: #000;
 $modal-backdrop-opacity: .5;