voice recognition trial 2

app/components/InputFrontend.tsx

@@ -1,4 +1,5 @@
 import React, { useState, ForwardedRef, useEffect } from 'react';
+import "../styles/variables.css"
 
 interface InputProps {
   message: string;
@@ -30,6 +31,10 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
       }
     };
 
+    const styles = {
+      
+    }
+
     return (
       <div className="input" id="inputForm" ref={ref}>
         <input
@@ -43,7 +48,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
         <button type="button" onClick={() => onSendClick(inputValue, false)} disabled={inputDisabled ? true : false}>
           <img src="/img/send.svg" alt="send" />
         </button>
-        <button type="button" onClick={onMicClick} style={{backgroundColor: isRecording? "red" : "green"}}>
+        <button className={`microphone-button ${isRecording ? "red":"green"}`} type="button" onClick={onMicClick}>
           <img src="/img/microphone.svg" alt="microphone" />
         </button>
       </div>