Style _gauge_graph

app/assets/stylesheets/sqm_application.scss

@@ -39,6 +39,11 @@
   height: auto;
 }
 
+.gauge-title {
+  margin-top: -1.5em; 
+  margin-bottom: 0;
+}
+
 .measure-presenter {
   flex-basis: 33%;
 }

app/views/sqm_categories/_gauge_graph.html.erb

@@ -1,3 +1,4 @@
+<div class="d-flex flex-column align-items-center">
 <svg
   viewBox="<%= viewbox.x %> <%= viewbox.y %> <%= viewbox.width %> <%= viewbox.height %>"
   class="<%= gauge_class %>"
@@ -13,15 +14,6 @@
     stroke="none"
   />
 
-  <text
-      class="gauge-title <%= font_class %> fill-black"
-    x="<%= arc_center.x %>"
-    y="<%= arc_center.y - 10 %>"
-    text-anchor="middle"
-    dominant-baseline="middle"
-  >
-    <%= gauge.title %>
-  </text>
 
   <path
     class="gauge-outline stroke-gray-2"
@@ -48,8 +40,11 @@
     d="<%= move_to(point: indicator_tip) %>
        <%= draw_line_to(point: indicator_right_corner) %>
        <%= draw_line_to(point: indicator_left_corner) %>
-       <%= draw_line_to(point: indicator_tip) %>"
+  <%= draw_line_to(point: indicator_tip) %>"
     transform="rotate(<%= rotation_angle_for(percentage: gauge.key_benchmark_percentage) %> <%= arc_center.x %> <%= arc_center.y %>)"
     stroke="none"
   />
 </svg>
+
+<p class="gauge-title <%= font_class %> fill-black"><%= gauge.title %></p>
+</div>

app/views/sqm_categories/show.html.erb

@@ -19,7 +19,7 @@
 
     <div class="d-flex justify-space-between align-items-end">
       <div>
-        <%= render partial: "gauge_graph", locals: { gauge: subcategory.gauge_presenter, gauge_class: 'gauge-graph-lg', font_class: 'font-bitter' } %>
+        <%= render partial: "gauge_graph", locals: { gauge: subcategory.gauge_presenter, gauge_class: 'gauge-graph-lg', font_class: 'sub-header-3' } %>
       </div>
       <h2 class="body-large mx-7"><%= subcategory.description %></h2>
     </div>
@@ -31,7 +31,7 @@
         <div class="measure-presenter d-flex flex-column justify-space-between align-items-center px-5">
           <h3 class="measure-description sub-header-4 mb-5 "><%= measure_presenter.name %></h3>
           <div>
-            <%= render partial: "gauge_graph", locals: { gauge: measure_presenter.gauge_presenter, gauge_class: 'gauge-graph-sm', font_class: 'font-cabin' } %>
+            <%= render partial: "gauge_graph", locals: { gauge: measure_presenter.gauge_presenter, gauge_class: 'gauge-graph-sm', font_class: 'weight-700' } %>
           </div>
           <p class="measure-description body-small mt-5 mb-4 "><%= measure_presenter.description %></p>
         </div>