Blockquote styling (fixes #9476) (#12227)

* Added blockquote styling based on Zeplin example

* Commit new changes to style blockquotes

* Fix bottom of post margins after markdown class addition

website/client/src/assets/scss/markdown.scss

@@ -41,4 +41,9 @@
   img {
     max-width: 100%;
   }
+  
+  blockquote {
+    padding: 0 16px;
+    border-left: 4px solid #e1e0e3;
+  }
 }

website/client/src/components/chat/chatCard.vue

@@ -33,7 +33,7 @@
       </p>
       <div
         ref="markdownContainer"
-        class="text"
+        class="text markdown"
         v-html="parseMarkdown(msg.text)"
       ></div>
       <hr>
@@ -166,7 +166,6 @@
       color: #4e4a57;
       text-align: left !important;
       min-height: 0rem;
-      margin-bottom: -0.5rem;
     }
   }
 

website/client/src/components/messages/messageCard.vue

@@ -20,7 +20,7 @@
       <span v-if="msg.client && user.contributor.level >= 4"> ({{ msg.client }})</span>
     </p>
     <div
-      class="text"
+      class="text markdown"
       v-html="parseMarkdown(msg.text)"
     ></div>
     <div
@@ -120,7 +120,6 @@
       color: $gray-50;
       text-align: left !important;
       min-height: 0rem;
-      margin-bottom: -0.5rem;
     }
   }