feat: update scss and sales log component styling

app/components/lettings_log_summary_component.html.erb

@@ -8,12 +8,12 @@
           <% end %>
         </h2>
         <% if log.tenancycode? or log.propcode? %>
-          <div class="app-metadata app-log-summary__details">
+          <div class="app-metadata">
             <% if log.tenancycode? %>
-                <div>Tenant <%= log.tenancycode %></div>
+              <div class = "app-log-summary__details">Tenant <%= log.tenancycode %></div>
             <% end %>
             <% if log.propcode? %>
-                <div>Property <%= log.propcode %></div>
+              <div class = "app-log-summary__details">Property <%= log.propcode %></div>
             <% end %>
           </div>
         <% end %>

app/components/sales_log_summary_component.html.erb

@@ -1,20 +1,17 @@
 <article class="app-log-summary">
   <div class="govuk-grid-row">
-    <div class="govuk-grid-column-one-half">
+    <div class="govuk-grid-column-two-thirds">
       <header class="app-log-summary__header">
         <h2 class="app-log-summary__title">
           <%= govuk_link_to sales_log_path(log) do %>
             Log <%= log.id %>
           <% end %>
         </h2>
-          <dl class="app-metadata app-metadata--inline">
+          <% if log.purchaser_code %>
-            <% if log.purchaser_code %>
+            <div class="app-metadata">
-              <div class="app-metadata__item">
+              <div class = "app-log-summary__details">Purchaser <%= log.purchaser_code %></div>
-                <dt class="app-metadata__term">Purchaser</dt>
+            </div>
-                <dd class="app-metadata__definition"><%= log.purchaser_code %></dd>
+          <% end %>
-              </div>
-            <% end %>
-          </dl>
       </header>
       <p class="govuk-body govuk-!-margin-bottom-2">
         <% if log.ownership_scheme %>
@@ -41,7 +38,7 @@
         </dl>
       <% end %>
     </div>
-    <footer class="govuk-grid-column-one-half app-log-summary__footer">
+    <footer class="govuk-grid-column-one-third app-log-summary__footer">
       <p class="govuk-body govuk-!-margin-bottom-2">
         <%= log_status %>
       </p>

app/frontend/styles/_log.scss

@@ -4,9 +4,9 @@
 }
 
 .app-log-summary__header {
-  align-items: baseline;
   display: flex;
   margin-bottom: govuk-spacing(2);
+  align-items: center;
 }
 
 .app-log-summary__title {