Tweak camera ui (#55)

* Tweak camera ui

* Format code

src/views/RoomView.vue

@@ -49,7 +49,7 @@
         class="col-3 p-2 bg-dark d-flex flex-column justify-content-between"
         style="max-height: 100%"
       >
-        <div class="overflow-y-auto mb-2">
+        <div class="row overflow-y-auto mb-2">
           <div class="d-flex justify-content-between px-4 py-2">
             <h3 class="text-center text-primary mt-2">
               {{ channel.state.room?.name }}
@@ -68,23 +68,29 @@
           </div>
 
           <div v-if="channel.state.teacher" class="col-lg-6">
-            <div class="card my-1">
+            <div
+              class="card my-1"
+              :class="channel.isSelf(channel.state.teacher) ? 'bg-primary' : ''"
+            >
               <Camera :user-id="channel.state.teacher.id" />
               <div class="card-body py-2">
                 <div class="card-text text-dark text-decoration-none">
                   {{ channel.state.teacher?.user.name }}
-                  <span class="badge text-bg-primary ms-1">Lehrer</span>
                   <span
-                    v-if="channel.isSelf(channel.state.teacher)"
-                    class="badge text-bg-secondary ms-1"
+                    class="badge ms-1"
+                    :class="
+                      channel.isSelf(channel.state.teacher)
+                        ? 'text-bg-light'
+                        : 'text-bg-primary'
+                    "
                   >
-                    Du
+                    <i class="fa-solid fa-chalkboard-user"></i>
                   </span>
                   <span
                     v-if="!channel.state.teacher.audio"
                     class="badge text-bg-secondary ms-1"
                   >
-                    Muted
+                    <i class="fa fa-volume-mute"></i>
                   </span>
                 </div>
               </div>
@@ -96,7 +102,10 @@
             :key="student.id"
             class="col-lg-6"
           >
-            <div class="card my-1 d-flex flex-column">
+            <div
+              class="card my-1 d-flex flex-column"
+              :class="channel.isSelf(student) ? 'bg-primary' : ''"
+            >
               <div class="position-relative flex-grow-1">
                 <div class="ratio ratio-4x3">
                   <Camera :user-id="student.id" class="w-100 h-100" />
@@ -107,7 +116,7 @@
                   class="dropdown position-absolute top-0 end-0"
                 >
                   <button
-                    class="btn btn-outline-secondary"
+                    class="btn text-white"
                     type="button"
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
@@ -127,16 +136,16 @@
                 <div class="card-text text-dark text-decoration-none">
                   {{ student.name }}
                   <span
-                    v-if="channel.isSelf(student)"
+                    v-if="!student.permission"
                     class="badge text-bg-secondary ms-1"
                   >
-                    Du
+                    <i class="fas fa-lock"></i>
                   </span>
                   <span
                     v-if="!student.audio"
                     class="badge text-bg-secondary ms-1"
                   >
-                    Muted
+                    <i class="fa fa-volume-mute"></i>
                   </span>
                   <span
                     v-if="student.handSignal"
@@ -144,12 +153,6 @@
                   >
                     <i class="fas fa-hand-paper"></i>
                   </span>
-                  <span
-                    v-if="!student.permission"
-                    class="badge text-bg-secondary ms-1"
-                  >
-                    <i class="fas fa-lock"></i>
-                  </span>
                 </div>
               </div>
             </div>