my orders page redesigned

hosting/static/hosting/css/virtual-machine.css

@@ -239,10 +239,10 @@
 }
 
 .dashboard-title-thin .un-icon {
-  height: 34px;
+  height: 30px;
   margin-right: 5px;
   margin-top: -1px;
-  width: 20px;
+  width: 30px;
 }
 
 .dashboard-subtitle {
@@ -287,6 +287,24 @@
   color: #3770CC;
 }
 
+.btn-order-detail {
+  background: #87B6EA;
+  color: #fff;
+  font-weight: 400;
+  letter-spacing: 0.6px;
+  font-size: 14px;
+  border-radius: 3px;
+  border: 2px solid #87B6EA;
+  padding: 4px 20px;
+  width: 125px;
+  /*   padding-bottom: 7px; */
+}
+
+.btn-order-detail:hover, .btn-order-detail:focus, .btn-order-detail:active {
+  background: #fff;
+  color: #87B6EA;
+}
+
 .vm-status, .vm-status-active, .vm-status-failed {
   font-weight: 600;
 }
@@ -373,11 +391,28 @@
     font-weight: 600;
     position: absolute;
     top: 5px;
-
+    left: 8px;
   }
   .table-switch .last-td {
     position: absolute;
     bottom: 20px;
     right: 0;
   }
+  .table-switch tbody tr .xs-td-inline {
+    text-align: right;
+    padding-top: 6px;
+  }
+  .table-switch tbody tr .xs-td-bighalf {
+    width: 52%;
+    display: inline-block;
+  }
+  .table-switch tbody tr .xs-td-smallhalf {
+    width: 47%;
+    text-align: right;
+    display: inline-block;
+  }
+  .table-switch tbody tr .xs-td-smallhalf:before {
+    left: auto;
+    right: 8px;
+  }
 }

hosting/static/hosting/img/shopping-cart.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g>
+	<g>
+		<polygon points="447.992,336 181.555,336 69.539,80 0.008,80 0.008,48 90.477,48 202.492,304 447.992,304 		"/>
+	</g>
+	<path d="M287.992,416c0,26.5-21.5,48-48,48s-48-21.5-48-48s21.5-48,48-48S287.992,389.5,287.992,416z"/>
+	<path d="M447.992,416c0,26.5-21.5,48-48,48s-48-21.5-48-48s21.5-48,48-48S447.992,389.5,447.992,416z"/>
+	<g>
+		<polygon points="499.18,144 511.992,112 160.008,112 172.805,144 		"/>
+		<polygon points="211.195,240 223.992,272 447.992,272 460.805,240 		"/>
+		<polygon points="486.398,176 185.602,176 198.398,208 473.586,208 		"/>
+	</g>
+</g>
+</svg>

hosting/static/hosting/js/initial.js

@@ -13,4 +13,12 @@ $( document ).ready(function() {
         }, 1000);
     });
 
+    $('.alt-text').on('mouseenter mouseleave', function(e){
+        var $this = $(this);
+        var txt = $this.text();
+        var alt = $this.attr('data-alt');
+        $this.text(alt);
+        $this.attr('data-alt', txt);
+    });
+
 });