styling/Change size of description

Author: LewisYoul

app/assets/stylesheets/snippets.scss

@@ -93,9 +93,7 @@
   }
 
   &--description {
-    font-family: Helvetica, sans-serif;
-    font-size: 14px;
-    color: darkslategrey;
+    font-weight: 500;
   }
 
   &--content {

app/javascript/controllers/highlight_controller.js

@@ -2,7 +2,7 @@ import { Controller } from 'stimulus';
 import marked from 'marked';
 
 export default class extends Controller {
-  static targets = ["code", "languages", "highlightedBody"];
+  static targets = ["code", "languages", "highlightedBody", "description"];
 
   connect() {
     this.addLanguagesToSelect()
@@ -19,6 +19,10 @@ export default class extends Controller {
 
   }
 
+  updateDescription(event) {
+    this.descriptionTarget.innerHTML = event.target.value
+  }
+
   //  TODO: Pass in the selected language!!!
   highlight(event) {
     const rawCode = event.currentTarget.value

app/views/snippets/_snippet.html.erb

@@ -18,7 +18,7 @@
       </div>
     </div>
   </div>
-  <p class="snippet--description"><%= snippet.description %></p>
+  <h3 class="snippet--description"><%= snippet.description %></h3>
 
   <%= render partial: 'shared/code_highlight', locals: { code: snippet.highlighted_body, language: snippet.language  } %>
 </div>

app/views/snippets/_snippet_preview.html.erb

@@ -18,7 +18,7 @@
       </div>
     </div>
   </div>
-  <p class="snippet--description"><%= snippet.description %></p>
+  <h3 class="snippet--description"><%= snippet.description %></h3>
 
   <%= render partial: 'shared/code_highlight', locals: { code: snippet.highlighted_body, language: snippet.language, classes: 'snippet--content' } %>
 </div>

app/views/snippets/new.html.erb

@@ -14,15 +14,16 @@
   <div data-controller="highlight snippets">
     <div data-target="snippets.errors"></div>
     <%= form_for @snippet, remote: true, html: { data: { type: "html", action: "ajax:success->snippets#onCreateSuccess ajax:error->snippets#onCreateError" } } do |f| %>
-      <%= f.text_field :description, { class: "new-snippet--description", placeholder: "Snippet description..." } %>
       <div class="tabs-details">
         <div data-target="tabs.panel">
+          <%= f.text_field :description, { data: { action: "input->highlight#updateDescription" }, class: "new-snippet--description", placeholder: "Snippet description..." } %>
           <%= f.text_area :body, { data: { action: "input->highlight#highlight" }, id: "code-text-area", class: "new-snippet--body" } %>
           <%= f.text_area :highlighted_body, { data: { target: "highlight.highlightedBody" }, class: "hidden" } %>
         </div>
 
         <div data-target="tabs.panel" class="hidden">
           <div class="new-snippet--preview">
+            <h3 class="snippet--description" data-target="highlight.description"></h3>
             <div class="code-highlight" data-target="highlight.code"></div>
           </div>
         </div>