Better launch page styling

openflighthpc · Mar 7, 2024 · 18628bc · 18628bc
1 parent 6d536d0
commit 18628bc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/app/assets/stylesheets/components/_cluster_types_view.scss b/app/assets/stylesheets/components/_cluster_types_view.scss
@@ -85,6 +85,7 @@
     column-gap: 1.2rem;
     row-gap: 0.3rem;
     justify-content: start;
+    margin-bottom: 0.625rem;
 
     .cluster-type-card-title {
 	    justify-self: left;

diff --git a/app/assets/stylesheets/components/_new_cluster_form.scss b/app/assets/stylesheets/components/_new_cluster_form.scss
@@ -19,7 +19,7 @@
     }
 
     .cluster-field-group {
-        margin-bottom: 2rem;
+        margin-bottom: 0.625rem;
     }
     .cluster-field-group-label { }
     .cluster-field-group-description {
@@ -39,8 +39,13 @@
     }
 }
 
+.cluster-form-instructions {
+	padding-left: 10px;
+	margin-bottom: 0.625rem;
+}
+
 .cluster-launch-instructions {
 	max-width: 30rem;
-	margin-top: -1rem;
 	margin-bottom: 1rem;
+	margin-left: 1rem;
 }
diff --git a/app/views/clusters/new.html.erb b/app/views/clusters/new.html.erb
@@ -11,9 +11,9 @@
   <%= render partial: 'cluster_types/card_content', object: @cluster_type %>
 </div>
 
-<p>
+<div class="cluster-form-instructions">
 Complete the details below and click "Launch".
-</p>
+</div>
 
 
 <%= form_for(@cluster, url: cluster_type_clusters_path(@cluster_type)) do |f| %>
@@ -23,7 +23,7 @@ Complete the details below and click "Launch".
   <% @cluster.field_groups.each do |field_group| %>
     <% next if field_group.empty? %>
     <div class="cluster-field-group" data-cluster-form-optional-field-group="field-group">
-      <h4 class="cluster-field-group-label"><%= field_group.label %></h4>
+      <h2 class="cluster-field-group-label"><%= field_group.label %></h2>
       <% unless field_group.description.blank? %>
         <div class="cluster-field-group-description"><%= field_group.description %></div>
       <% end %>
@@ -54,6 +54,7 @@ Complete the details below and click "Launch".
 
   <% presenter = presenter_for(@cluster_type) %>
   <% if presenter.instruction('launch').present? %>
+    <h2><%= presenter.instruction('launch')['title'] %></h2>
     <div class="cluster-launch-instructions">
       <%= MarkdownRenderer.render(presenter.instruction('launch')['text']) %>
     </div>