Style new-note moe modal

public/css/style.css

@@ -119,3 +119,6 @@ hr.m-negator {
 .mcp-theme-1 .nav-link:hover {
     background: #e3e3e394;
 }
+.mcp-theme-1 .text-sm {
+    font-size: 85%;
+}

resources/views/layouts/patient.blade.php

@@ -160,53 +160,48 @@
                                     <div><label>Next Appt:</label> {{$patient->mcp_onboarding_visit_date}}</div>
                                 </section>
                                 <section class=vbox>
-                                    <div moe>
+                                    <div moe relative class="mcp-theme-1">
                                         <a start show>
                                             <!-- <i class="fa fa-plus-circle"></i> -->
                                             <button>+ Note</button>
                                         </a>
                                         <form url="/api/note/createUsingFreeTextHtml" right>
                                             <input type="hidden" name="clientUid" value="{{$patient->uid}}">
-                                            <div>
-                                                <label for="" class="control-label">HCP Pro</label>
-                                                <select name="hcpProUid">
-                                                    <option value="">-- select hcp pro --</option>
+                                            <div class="mb-2">
+                                                <select name="hcpProUid" class="form-control form-control-sm">
+                                                    <option value="">-- Select HCP Pro --</option>
                                                     @foreach ($pros as $pro)
                                                         <option
                                                             value="{{$pro->uid}}">{{$pro->name_display}}</option>
                                                     @endforeach
                                                 </select>
                                             </div>
-                                            <div>
-                                                <label for="">Ally Pro</label>
-                                                <select name="allyProUid">
-                                                    <option value="">-- select ally pro --</option>
+                                            <div class="mb-2">
+                                                <select name="allyProUid" class="form-control form-control-sm">
+                                                    <option value="">-- Select Ally Pro --</option>
                                                     @foreach ($pros as $pro)
                                                         <option
                                                             value="{{$pro->uid}}">{{$pro->name_display}}</option>
                                                     @endforeach
                                                 </select>
                                             </div>
-                                            <div>
-                                                <label for="" class="control-label text-left">Title</label>
-                                                <input type="text" name="title">
+                                            <div class="mb-2">
+                                                <input type="text" name="title" placeholder="Title" class="form-control form-control-sm">
                                             </div>
-                                            <div>
-                                                <label for="" class="control-label text-left">Effective date</label>
-                                                <input type="date" name="effectiveDateEST">
+                                            <div class="mb-2">
+                                                <label class="text-secondary text-sm">Effective Date</label>
+                                                <input type="date" name="effectiveDateEST" placeholder="Effective Date" class="form-control form-control-sm">
                                             </div>
-
-                                            <div>
-                                                <label for="" class="control-label text-left">Effective time</label>
-                                                <input type="time" name="effectiveTime">
+                                            <div class="mb-2">
+                                                <label class="text-secondary text-sm">Effective Time</label>
+                                                <input type="time" name="effectiveTime" placeholder="Effective Time" class="form-control form-control-sm">
                                             </div>
-                                            <div>
-                                                <label for="" class="control-label text-left">Content</label>
-                                                <textarea name="freeTextHtml" id="" cols="30" rows="10"></textarea>
+                                            <div class="mb-2">
+                                                <textarea name="freeTextHtml" id="" cols="30" rows="5" placeholder="Content" class="form-control form-control-sm"></textarea>
                                             </div>
                                             <div>
-                                                <button submit>Submit</button>
-                                                <button cancel>Cancel</button>
+                                                <button submit class="btn btn-sm btn-primary mr-1">Submit</button>
+                                                <button cancel class="btn btn-sm btn-default">Cancel</button>
                                             </div>
                                         </form>
                                     </div>