CM tabs UI

public/css/style.css

@@ -2189,4 +2189,24 @@ body.in-iframe .main-row > .sidebar {
 }
 .visit-segment tr:hover .vitals-copy-trigger {
     display: flex;
+}
+[tab-links] {
+
+}
+[tab-links] [tab-link] {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ccc;
+    color: #222;
+    background: #eee;
+    text-decoration: none;
+}
+[tab-links] [tab-link]:not(:last-child) {
+    border-right: 0;
+}
+[tab-links] [tab-link]:not(.tab-link-active):hover {
+    background: #f7f7f7;
+}
+[tab-links] [tab-link].tab-link-active {
+    font-weight: bold;
+    background: #fff;
 }

resources/views/app/patient/care-month/_matrix.blade.php

@@ -28,11 +28,9 @@ foreach ($days as $k => $day) {
 ?>
 
 <div id="cm-matrix-{{$patient->id}}">
-<div class="d-flex align-items-baseline">
-    <a class="font-weight-bold" href="#" tab-link="matrix">Care Month Matrix</a>
-    <span class="mx-2 text-secondary text-sm">|</span>
+<div class="d-flex align-items-baseline" tab-links>
+    <a class="tab-link-active" href="#" tab-link="matrix">Care Month Matrix</a>
     <a class="" href="#" tab-link="bmi-summary">BMI/Weight Management Settings</a>
-    <span class="mx-2 text-secondary text-sm">|</span>
     <a class="" href="#" tab-link="bp-summary">BP Management Settings</a>
 </div>
 <table class="table table-condensed table-sm table-bordered my-3 cm-tab" tab-key="matrix">
@@ -307,8 +305,8 @@ foreach ($days as $k => $day) {
                 .off('click')
                 .on('click', function () {
                     let tab = $(this).attr('tab-link');
-                    $(this).siblings().removeClass('font-weight-bold');
-                    $(this).addClass('font-weight-bold');
+                    $(this).siblings().removeClass('tab-link-active');
+                    $(this).addClass('tab-link-active');
                     $('.cm-tab').addClass('d-none');
                     $('.cm-tab[tab-key="' + tab + '"]').removeClass('d-none');
                     return false;