Merge pull request #18 from Omikorin/main

fix: overriding external styles

Author: YZarytskyi

src/components/VoiceVisualizer.tsx

@@ -554,7 +554,7 @@ const VoiceVisualizer = ({
             )}
             {isCleared && (
               <button
-                className={`voice-visualizer__btn-center relative ${
+                className={`voice-visualizer__btn-center voice-visualizer__relative ${
                   isProcessingStartRecording
                     ? "voice-visualizer__btn-center--border-transparent"
                     : ""
@@ -563,8 +563,8 @@ const VoiceVisualizer = ({
                 disabled={isProcessingStartRecording}
               >
                 {isProcessingStartRecording && (
-                  <div className="spinner__wrapper">
-                    <div className="spinner" />
+                  <div className="voice-visualizer__spinner-wrapper">
+                    <div className="voice-visualizer__spinner" />
                   </div>
                 )}
                 <img src={microphoneIcon} alt="Microphone" />

src/index.css

@@ -286,11 +286,11 @@
     overflow: hidden;
 }
 
-.relative {
+.voice-visualizer__relative {
     position: relative;
 }
 
-.spinner__wrapper {
+.voice-visualizer__spinner-wrapper {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -302,20 +302,20 @@
     align-items: center;
 }
 
-.spinner {
+.voice-visualizer__spinner {
     flex-shrink: 0;
     width: 100%;
     height: 100%;
     border: 4px solid rgba(197, 197, 197, 0.5);
     border-radius: 50%;
     border-top-color: #b7b7b7;
-    animation: spin 1s ease-in-out infinite;
-    -webkit-animation: spin 1s ease-in-out infinite;
+    animation: voice-visualizer__spin 1s ease-in-out infinite;
+    -webkit-animation: voice-visualizer__spin 1s ease-in-out infinite;
 }
 
-@keyframes spin {
+@keyframes voice-visualizer__spin {
     to { transform: rotate(360deg); }
 }
-@-webkit-keyframes spin {
+@-webkit-keyframes voice-visualizer__spin {
     to { transform: rotate(360deg); }
 }