Update RHS panel UI

public/css/style.css

@@ -38,9 +38,12 @@
   width: var(--w-70);
 }
 .stag-primary-bg {
-  background-color: var(--primary-color);
+  background-color: var(--primary-color) !important;
   color: #fff;
 }
+.stag-primary-border {
+    border-color: var(--primary-color) !important;
+}
 .navbar-brand {
   font-size: 25px;
   font-weight: 900;

resources/views/app/video/call.blade.php

@@ -9,6 +9,7 @@
     <link href="/css/app.css" rel="stylesheet">
     <link rel="stylesheet" href="/fontawesome-free/css/all.min.css">
     <link href="/css/meeting.css" rel="stylesheet">
+    <link href="/css/style.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script src="https://static.opentok.com/v2/js/opentok.js"></script>
 </head>
@@ -21,13 +22,13 @@
             <span class="mr-3">
                 {{ $pro->name_display }} | PRO
             </span>
-            <button class="btn btn-sm btn-primary px-4 font-weight-bold"
+            <button class="btn btn-sm btn-primary px-4 font-weight-bold stag-primary-bg stag-primary-border"
                     v-on:click.prevent="nextPatient()"
                     :disabled="client || checkingForNextPatient || started">Next Patient</button>
-            <span v-if="patientInQueue && !started" class="patient-in-q-alert text-warning text-sm ml-2 small">
+            <span v-if="patientInQueue && !started" class="patient-in-q-alert text-warning text-sm ml-3 small">
                 <i class="fa fa-circle"></i>
             </span>
-            <span v-if="!patientInQueue && !started" class="text-success text-sm ml-2 small">
+            <span v-if="!patientInQueue && !started" class="text-success text-sm ml-3 small">
                 <i class="fa fa-circle"></i>
             </span>
         </div>