upd

src/App.tsx

@@ -363,7 +363,7 @@ function App() {
                       <MailIcon className="lg:w-8 lg:h-8 w-6 h-6" />
                     </a>
                     <a
-                      href="tel:88007700076"
+                      href="tel:88007700067"
                       className="2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] opacity-80 hover:opacity-100 transition-all"
                     >
                       <span>
@@ -442,7 +442,7 @@ function App() {
                     <div className="flex justify-between items-center">
                       <div className="text-[#EBEBEB] flex flex-col gap-1">
                         <a href="mailto:info@graff.tech">info@graff.tech</a>
-                        <a href="tel:88007700076">8 800 770 00 76</a>
+                        <a href="tel:88007700067">8 800 770 00 67</a>
                       </div>
                       <div className="w-12 h-12 border border-[#3D425C] rounded-full flex justify-center items-center">
                         RU

src/components/ToggleMic.tsx

@@ -8,7 +8,7 @@ import MicroOffIcon from "./icons/MicroOffIcon";
 
 function ToggleMic({ socket, handleUpdate }: any) {
   const room = useRoomContext();
-  const [muted, setMuted] = useState(false);
+  const [muted, setMuted] = useState(true);
 
   function toggleMic(value: boolean) {
     const audioTrack = room.localParticipant.getTrack(Track.Source.Microphone);
@@ -45,6 +45,10 @@ function ToggleMic({ socket, handleUpdate }: any) {
     room.on(RoomEvent.TrackUnmuted, (_, participant) => {
       console.log(participant);
     });
+
+    room.on("localTrackPublished", () => {
+      room.localParticipant.getTrack(Track.Source.Microphone)?.mute();
+    });
   }, []);
 
   return (

src/components/modals/UsersManagementModal.tsx

@@ -29,15 +29,15 @@ function UsersManagementModal({
   const [users] = useStreamUserStore((state) => [state.users]);
 
   return (
-    <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px] flex flex-col gap-2">
+    <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[360px] flex flex-col gap-2">
       <div className="flex flex-col lg:gap-8 gap-4">
         <p className="font-gilroy lg:text-2xl">
           <Trans i18nKey={"members"}>Участники</Trans>
         </p>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-4">
           {users.map((user: any, index: number) => (
             <div key={index} className="relative">
-              <div className="flex items-center gap-2 text-white">
+              <div className="flex items-center gap-4 text-white">
                 <div className="relative flex flex-col">
                   {user.admin ? <AdminUserIcon /> : <UserIcon />}
                 </div>
@@ -77,19 +77,19 @@ function UsersManagementModal({
                     )}
 
                     {!user.muted ? (
-                      <p
+                      <button
                         onClick={() => handleUpdate(user.id, { muted: true })}
                         className="outline-none"
                       >
                         <MicroOnIcon />
-                      </p>
+                      </button>
                     ) : (
-                      <p
+                      <button
                         onClick={() => handleUpdate(user.id, { muted: false })}
                         className="outline-none"
                       >
                         <MicroOffIcon />
-                      </p>
+                      </button>
                     )}
                   </>
                 )}