style: update the audio bar css

Author: ye231101

src/App.css

@@ -350,39 +350,6 @@
   margin-right: 4px !important;
 }
 
-.vp-audio-bars span {
-  width: 3px !important;
-  border-radius: 2px !important;
-  background: #ffffff !important;
-  animation: vp-audio-bar 0.8s ease-in-out infinite !important;
-}
-
-.vp-audio-bars span:nth-child(1) {
-  animation-delay: 0s !important;
-}
-
-.vp-audio-bars span:nth-child(2) {
-  animation-delay: 0.15s !important;
-}
-
-.vp-audio-bars span:nth-child(3) {
-  animation-delay: 0.3s !important;
-}
-
-.vp-audio-bars span:nth-child(4) {
-  animation-delay: 0.45s !important;
-}
-
-@keyframes vp-audio-bar {
-  0%, 100% {
-    height: 4px;
-  }
-
-  50% {
-    height: 20px;
-  }
-}
-
 @media (min-width: 768px) {
   .vp-room {
     bottom: 20px !important;
@@ -436,6 +403,16 @@
   }
 }
 
+@keyframes vp-audio-bar {
+  0%, 100% {
+    height: 4px !important;
+  }
+
+  50% {
+    height: 20px !important;
+  }
+}
+
 .vp-wave {
   position: absolute !important;
   width: 100% !important;
@@ -460,3 +437,26 @@
 .vp-wave:nth-child(4) {
   animation-delay: 2s !important;
 }
+
+.vp-audio-bar {
+  width: 3px !important;
+  border-radius: 2px !important;
+  background: #ffffff !important;
+  animation: vp-audio-bar 0.8s ease-in-out infinite !important;
+}
+
+.vp-audio-bar:nth-child(1) {
+  animation-delay: 0s !important;
+}
+
+.vp-audio-bar:nth-child(2) {
+  animation-delay: 0.15s !important;
+}
+
+.vp-audio-bar:nth-child(3) {
+  animation-delay: 0.3s !important;
+}
+
+.vp-audio-bar:nth-child(4) {
+  animation-delay: 0.45s !important;
+}

src/components/RoomScreen.js

@@ -299,10 +299,10 @@ function RoomContainer({ roomName, onLeave }) {
                   }}
                 />
                 <div className="vp-audio-bars">
-                  <span />
-                  <span />
-                  <span />
-                  <span />
+                  <div className="vp-audio-bar" />
+                  <div className="vp-audio-bar" />
+                  <div className="vp-audio-bar" />
+                  <div className="vp-audio-bar" />
                 </div>
               </>
             ) : (