Compound_card - Update unvalid compound header

ippisite/ippidb/static/css/main.css

@@ -566,6 +566,16 @@ div.hidden {
     font-family: "BrandonGrotesqueBlk";
 }
 
+.page-title-warning {
+    margin: 0px 0px 20px;
+    text-transform: uppercase;
+    text-align: center;
+    font-size: 15px;
+    line-height: 1.2;
+    color: #1D1D1B;
+    font-family: "BrandonGrotesqueBlk";
+} 
+
 .page-intro {
     color: #414144;
     font-size: 16px;

ippisite/ippidb/templates/compound_card.html

@@ -32,14 +32,15 @@
     </div>
   </nav>
   <div class="container-fluid inner-wrap compound_header_title" id="compound_header_title">
-    <div class="row">
+    <div class="row {% if compound.is_validated is False %}bg_warning{% endif %}">
       {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile width=250 height=250%}
-      <div class="{% if compound.is_validated is False %}bg_warning{% endif %}" style="display: flex;
+      <div style="display: flex;
       align-items: center;">
-        <h1 class="page-title" style="margin: 0;">Compound {{ compound.id }}</h1>
         {% if compound.is_validated is False %}
-        <h3 class="ml-2">This compound has not been validated by a curator yet, data might be incomplete or
-          inaccurate</h3>
+         <h1 class="page-title-warning" style="margin: 0;">Compound {{ compound.id }} - This compound has not been validated by a curator yet, data might be incomplete or
+          inaccurate</h1>
+          {% else %}
+          <h1 class="page-title" style="margin: 0;">Compound {{ compound.id }}</h1>
         {% endif %}
       </div>
     </div>