From 67d657e8fd707416853d319dfe351eac485840ca Mon Sep 17 00:00:00 2001
From: realaravinth <realaravinth@batsense.net>
Date: Fri, 17 Jun 2022 23:44:05 +0530
Subject: [PATCH] feat: change instance configuration display styling

---
 dash/templates/dash/instances/new/index.html | 43 +++++++++++---------
 static/css/main.css                          | 31 +++++++++++++-
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/dash/templates/dash/instances/new/index.html b/dash/templates/dash/instances/new/index.html
index 796a24f..0173fed 100644
--- a/dash/templates/dash/instances/new/index.html
+++ b/dash/templates/dash/instances/new/index.html
@@ -25,25 +25,30 @@
 
   <fieldset class="configuration">
     <legend>Instance Configuration</legend>
-    {% for config in configurations %}
-    <label  for="{{ config.name }}">
-        <div class="configuration__container">
-          <h3 class="configuration__name">{{ config.name }}</h3>
-          <ul>
-            <li class="configuration__spec">{{ config.cpu }} vCPU</li>
-            <li class="configuration__spec">{{ config.ram }} GB RAM</li>
-            <li class="configuration__spec">{{ config.storage }} GB Storage</li>
-          </ul>
-          <input
-            required
-            type="radio"
-            id="{{ config.name }}"
-            name="configuration"
-            value="{{ config.name }}"
-          />
-		</div>
-      </label>
-    {% endfor %}
+	<div class="configurations__container">
+      {% for config in configurations %}
+      <label  for="{{ config.name }}">
+          <div class="configuration__container">
+            <h2 class="configuration__name">{{ config.name }}</h2>
+
+            <p class="configuration__rent">{{ config.rent }}<span class="configuration__rent--unit">&euro;/month</span></p>
+            <ul class="configuration__spec-list">
+              <li class="configuration__spec">{{ config.cpu }} vCPU</li>
+              <li class="configuration__spec">{{ config.ram }} GB RAM</li>
+              <li class="configuration__spec">{{ config.storage }} GB Storage</li>
+            </ul>
+            <input
+              required
+              class="configuration__option"
+              type="radio"
+              id="{{ config.name }}"
+              name="configuration"
+              value="{{ config.name }}"
+            />
+          </div>
+        </label>
+      {% endfor %}
+    </div>
   </fieldset>
   <div class="form__action-container">
     <button class="form__submit" type="submit">Create Instance</button>
diff --git a/static/css/main.css b/static/css/main.css
index 816fda1..09103d2 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -534,7 +534,7 @@ footer {
   flex-direction: column;
   justify-content: space-between;
   min-height: calc(-63px + 100vh);
-  flex:2;
+  flex: 2;
 }
 
 /* dash forms starts */
@@ -551,9 +551,17 @@ fieldset {
   border: none;
 }
 
+.configurations__container {
+  display: grid;
+  grid-template-columns: auto auto auto;
+}
+
 .configuration__container {
+  width: 300px;
   padding: 20px;
+  /*
   padding-left: 0;
+  */
   margin: 10px 20px;
   margin-left: 0;
   border: 1px solid rgb(211, 211, 211);
@@ -562,13 +570,32 @@ fieldset {
 }
 
 .configuration__name {
-  margin-left: 20px;
+  margin-bottom: 20px;
+}
+
+.configuration__spec-list {
+  list-style: "✓  " outside none;
 }
 
 .configuration__spec {
   margin-left: 40px;
 }
 
+.configuration__rent {
+  font-size: 3rem;
+  font-weight: 700;
+  margin: 10px auto;
+}
+
+.configuration__rent--unit {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.configuration__option {
+  margin: 10px;
+}
+
 /*
 .form__label {
   margin: 5px 0;