merged master

hosting/static/hosting/css/commons.css

@@ -12,6 +12,11 @@
   max-width: 768px;
 }
 
+.dashboard-container.wide {
+  padding-top: 90px;
+  max-width: 980px;
+}
+
 .content-dashboard{
 	min-height: calc(100vh - 70px);
 	width: 80%;
@@ -241,6 +246,113 @@
   transform: translate(-50%,-50%);
 }
 
+.settings-container {
+  padding: 8px;
+}
+
+.settings-container h4 {
+  margin-bottom: 15px;
+  color: #333;
+  font-size: 14px;
+}
+
+.settings-container .card-expiry-element,
+.settings-container .card-cvc-element {
+  padding: 0 15px;
+}
+.settings-container .card-cvc-element .my-input,
+.settings-container .card-cvc-element label {
+  padding-left: 0;
+}
+
+.settings-container .stripe-payment-btn {
+  float: none;
+  position: static;
+}
+
+.settings-container h3 {
+  font-weight: bold;
+}
+
+.settings-container hr {
+  margin-top: 15px;
+}
+
+.settings-container .credit-card-details {
+  padding-bottom: 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.settings-container .credit-card-details h5 {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.credit-card-form {
+  max-width: 360px;
+}
+
+.btn-wide {
+  min-width: 100px;
+}
+
+.caps-link {
+  font-weight: 600;
+  color: #8da4c0;
+  fill: #8da4c0;
+  padding: 8px 0;
+  display: block;
+}
+.caps-link:hover,
+.caps-link:focus,
+.caps-link:active {
+  color: #627388;
+  fill: #627388;
+  text-decoration: none;
+}
+
+.settings-container .credit-card-details-opt {
+  padding-top: 15px;
+}
+
+.caps-link .svg-img {
+  margin-right: 5px;
+  height: 13px;
+  position: relative;
+  top: 1px;
+  vertical-align: baseline;
+}
+
+.settings-container .caps-link {
+  font-size: 13px;
+  letter-spacing: 1.1px;
+}
+
+.settings-container .btn-vm-contact {
+  font-weight: 600;
+  font-size: 13px;
+  /* padding: 4px 15px; */
+}
+
 .btn-wide {
 	min-width: 100px;
+}
+
+.no-cards {
+  text-align: center;
+  color: #999;
+  padding: 15px;
+  background: rgba(0,0,0,0.02);
+  display: flex;
+  flex-direction: column;
+  height: 230px;
+  justify-content: center;
+}
+
+.no-cards h4 {
+  font-size: 24px;
+}
+
+.no-cards a {
+  color: #7ca3d0;
 }

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

@@ -615,6 +615,7 @@ a.unlink:hover {
     border: 1px solid #a1a1a1;
     border-radius: 3px;
     padding: 5px;
+    margin-bottom: 15px;
 }
 .card-warning-error {
     border: 1px solid #EB4D5C;
@@ -772,12 +773,12 @@ a.unlink:hover {
 
 @media (min-width: 768px) {
     .dcl-billing {
-        padding-right: 50px;
+        padding-right: 65px;
         border-right: 1px solid #eee;
     }
 
     .dcl-creditcard {
-        padding-left: 50px;
+        padding-left: 65px;
     }
 
     .tbl-tot {

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

@@ -446,6 +446,11 @@
   width: 34px;
   vertical-align: middle;
 }
+.dashboard-title-thin .un-icon.wide {
+  height: 38px;
+  width: 38px;
+  margin-top: -6px;
+}
 
 .dashboard-subtitle {
   font-weight: 300;
@@ -533,6 +538,11 @@
     width: 22px;
     margin-top: -3px;
   }
+  .dashboard-title-thin .un-icon.wide {
+    height: 25px;
+    width: 25px;
+    margin-top: -5px;
+  }
   .dashboard-subtitle p {
     width: 200px;
   }

hosting/static/hosting/img/delete.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path d="M185,150h630c19.3,0,35-15.7,35-35s-15.7-35-35-35H605c0-38.7-31.3-70-70-70h-70c-38.7,0-70,31.3-70,70H185c-19.3,0-35,15.7-35,35S165.7,150,185,150z"/><path d="M885,220h-69.9c-0.1,0-0.3,0-0.4,0H395.1c0,0-0.1,0-0.1,0H185.3c-0.1,0-0.2,0-0.3,0h-70c-19.3,0-35,15.7-35,35c0,19.3,15.7,35,35,35h39.9l100.5,670.2C258,977.3,272.7,990,290,990h139.9c0,0,0,0,0,0c0,0,0,0,0,0h140c0,0,0,0,0,0c0,0,0,0,0,0H710c17.3,0,32-12.7,34.6-29.8L845.1,290H885c19.3,0,35-15.7,35-35C920,235.7,904.3,220,885,220z M463.3,920l-31.5-630h136.4l-31.5,630H463.3z M225.6,290h136.1l31.5,630h-73.1L225.6,290z M679.9,920h-73.1l31.5-630h136.1L679.9,920z"/></g>
+</svg>

hosting/static/hosting/js/initial.js

@@ -73,7 +73,6 @@ $( document ).ready(function() {
      * Replace all SVG images with inline SVG
      */
     $('.svg-img').each(function() {
-        console.log('asa')
         var $img = $(this);
         var imgID = $img.attr('id');
         var imgClass = $img.attr('class');