modal check icon thinner, terminate modal text smaller

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -1653,3 +1653,20 @@ a.list-group-item-danger.active:focus {
 .panel-danger > .panel-heading .badge {
     background-color: #eb4d5c;
 }
+
+.checkmark {
+  display: inline-block;
+}
+.checkmark:after {
+  /*Add another block-level blank space*/
+  content: '';
+  display: block;
+  /*Make it a small rectangle so the border will create an L-shape*/
+  width: 25px;
+  height: 60px;
+  /*Add a white border on the bottom and left, creating that 'L' */
+  border: solid #777;
+  border-width: 0 3px 3px 0;
+  /*Rotate the L 45 degrees to turn it into a checkmark*/
+  transform: rotate(45deg);
+}

datacenterlight/templates/datacenterlight/beta_success.html

@@ -8,7 +8,7 @@
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div>
             <div class="modal-body">
-              <div class="modal-icon"><i class="fa fa-check" aria-hidden="true"></i></div>
+              <div class="modal-icon"><i class="checkmark" aria-hidden="true"></i></div>
               <h4 class="modal-title">{% trans "Request Sent" %}</h4>
               <p class="modal-text">{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
             </div>

hosting/static/hosting/css/landing-page.css

@@ -870,3 +870,41 @@ a.list-group-item-danger.active:focus {
 .panel-danger > .panel-heading .badge {
     background-color: #eb4d5c;
 }
+
+.checkmark {
+  display: inline-block;
+}
+.checkmark:after {
+  /*Add another block-level blank space*/
+  content: '';
+  display: block;
+  /*Make it a small rectangle so the border will create an L-shape*/
+  width: 25px;
+  height: 60px;
+  /*Add a white border on the bottom and left, creating that 'L' */
+  border: solid #777;
+  border-width: 0 3px 3px 0;
+  /*Rotate the L 45 degrees to turn it into a checkmark*/
+  transform: rotate(45deg);
+}
+
+.closemark {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    position: relative;
+}
+.closemark:before, .closemark:after {
+  position: absolute;
+  left: 25px;
+  content: ' ';
+  height: 50px;
+  width: 2px;
+  background-color: #777;
+}
+.closemark:before {
+  transform: rotate(45deg);
+}
+.closemark:after {
+  transform: rotate(-45deg);
+}

hosting/static/hosting/js/virtual_machine_detail.js

@@ -79,7 +79,6 @@ $(document).ready(function() {
         $('html,body').scrollTop(scrollmem);
     });
 
-    $('.modal-text').removeClass('hide');
     var create_vm_form = $('#virtual_machine_create_form');
     create_vm_form.submit(function () {
         $('#btn-create-vm').prop('disabled', true);
@@ -90,26 +89,28 @@ $(document).ready(function() {
             success: function (data) {
                 if (data.status === true) {
                     fa_icon = $('.modal-icon > .fa');
-                    fa_icon.attr('class', 'fa fa-check');
+                    fa_icon.attr('class', 'checkmark');
-                    $('.modal-header > .close').attr('class', 'close');
+                    // $('.modal-header > .close').removeClass('hidden');
                     $('#createvm-modal-title').text(data.msg_title);
                     $('#createvm-modal-body').text(data.msg_body);
-                    $('#createvm-modal').on('hidden.bs.modal', function () {
+                    $('#createvm-modal-done-btn').removeClass('hide');
-                        window.location = data.redirect;
-                    })
                 }
             },
             error: function (xmlhttprequest, textstatus, message) {
                     fa_icon = $('.modal-icon > .fa');
-                    fa_icon.attr('class', 'fa fa-times');
+                    fa_icon.attr('class', 'fa fa-close');
-                    $('.modal-header > .close').attr('class', 'close');
+                    // $('.modal-header > .close').attr('class', 'close');
-                    $('.modal-text').addClass('hide');
+                    // $('.modal-text').addClass('hide');
                     if (typeof(create_vm_error_message) !== 'undefined') {
-                        $('#createvm-modal-title').text(create_vm_error_message);
+                        $('#createvm-modal-text').text(create_vm_error_message);
                     }
                     $('#btn-create-vm').prop('disabled', false);
+                    $('#createvm-modal-close-btn').removeClass('hide');
             }
         });
         return false;
     });
+    $('#createvm-modal').on('hidden.bs.modal', function () {
+        $(this).find('.modal-footer .btn').addClass('hide');
+    })
 });

hosting/templates/hosting/order_detail.html

@@ -160,22 +160,19 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <button type="button" class="close hidden" data-dismiss="modal"
-                            aria-label="create-vm-close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
                 </div>
                 <div class="modal-body">
                     <div class="modal-icon">
                         <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
                         <span class="sr-only">{% trans "Processing..." %}</span>
                     </div>
-                    <h4 class="modal-title" id="createvm-modal-title">
+                    <h4 class="modal-title" id="createvm-modal-title"></h4>
-                    </h4>
                     <div class="modal-text" id="createvm-modal-body">
                         {% trans "Hold tight, we are processing your request" %}
                     </div>
                     <div class="modal-footer">
+                        <a id="createvm-modal-done-btn" class="btn btn-danger btn-ok btn-wide hide" href="{% url 'hosting:virtual_machines' %}">{% trans "OK" %}</a>
+                        <button id="createvm-modal-close-btn" type="button" class="btn btn-danger btn-ok btn-wide hide" data-dismiss="modal" aria-label="create-vm-close">{% trans "Close" %}</button>
                     </div>
                 </div>
             </div>

hosting/templates/hosting/virtual_machine_detail.html

@@ -109,7 +109,7 @@
 						<p><strong>{{virtual_machine.name}}</strong></p>
 					</div>
           <div class="modal-footer">
-              <a class="btn btn-danger btn-ok btn-wide">{% trans "OK" %}</a>
+            <a class="btn btn-danger btn-ok btn-wide">{% trans "OK" %}</a>
           </div>
         </div>
       </div>
@@ -123,8 +123,9 @@
 				<div class="modal-header">
 				</div>
         <div class="modal-body">
-					<div class="modal-icon"><i class="fa fa-check" aria-hidden="true"></i></div>
+					<div class="modal-icon"><i class="checkmark" aria-hidden="true"></i></div>
-					<h4 class="modal-title" id="ModalLabel">{% blocktrans with machine_name=virtual_machine.name %}Your Virtual Machine <strong>{{machine_name}}</strong> is successfully terminated!{% endblocktrans %}</h4>
+					<h4 class="modal-title"></h4>
+					<div class="modal-text" id="ModalLabel">{% blocktrans with machine_name=virtual_machine.name %}Your Virtual Machine <strong>{{machine_name}}</strong> is successfully terminated!{% endblocktrans %}</div>
           <div class="modal-footer">
             <a href="{% url 'hosting:virtual_machines' %}"	class="btn btn-success btn-wide">{% trans "OK" %}</a>
           </div>

hosting/views.py

@@ -804,7 +804,6 @@ class OrdersHostingDetailView(LoginRequiredMixin,
 
         response = {
             'status': True,
-            'redirect': reverse('hosting:virtual_machines'),
             'msg_title': str(_('Thank you for the order.')),
             'msg_body': str(_('Your VM will be up and running in a few moments.'
                               ' We will send you a confirmation email as soon as'