softhon · obrucheoghene · Nov 7, 2025 · Nov 7, 2025
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Mitsi</title>
     <script src="/config.js"></script>

diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -1,7 +1,9 @@
 import emptyChat from './empty-chat.svg';
 import mitsiUi from './mitsi-ui.jpg';
+import logo from './logo.svg';
 
 export const Assets = {
   emptyChat,
   mitsiUi,
+  logo,
 };
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/components/home/footer.tsx b/src/components/home/footer.tsx
@@ -1,16 +1,15 @@
-import { Video } from 'lucide-react';
+import { Assets } from '@/assets';
 
 const Footer = () => {
   return (
     <footer className="border-t border-white/10 bg-black/50 backdrop-blur-xl">
       <div className="max-w-7xl mx-auto px-8 py-16">
         <div className="flex flex-col md:flex-row justify-between items-center">
           <div className="flex items-center space-x-3 mb-8 md:mb-0">
-            <div className="w-10 h-10 bg-gradient-to-bl from-white/15 to-white/1  backdrop-blur-xl rounded-xl flex items-center justify-center shadow-lg">
-              <Video className="w-6 h-6 text-white" />
-            </div>
+            <img src={Assets.logo} className="w-8 h-8" alt="Logo" />
+
             <div>
-              <span className="text-xl font-light tracking-wider">Mitsi</span>
+              <span className="text-lg font-light tracking-wider">Mitsi</span>
             </div>
           </div>
 

diff --git a/src/components/home/navbar.tsx b/src/components/home/navbar.tsx
@@ -1,8 +1,9 @@
 import uniqid from 'uniqid';
-import { Github, Video } from 'lucide-react';
+import { Github } from 'lucide-react';
 import { Button } from '../ui/button';
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Assets } from '@/assets';
 const Navbar = () => {
   const navigate = useNavigate();
   const roomId = uniqid.time();
@@ -21,9 +22,8 @@ const Navbar = () => {
         <div className="flex items-center justify-between h-20">
           <div className="flex items-center space-x-3">
             <div className="relative">
-              <div className="w-10 h-10 bg-gradient-to-bl from-white/15 to-white/1  backdrop-blur-xl rounded-xl flex items-center justify-center shadow-lg">
-                <Video className="w-6 h-6 text-white" />
-              </div>
+              <img src={Assets.logo} className="w-8 h-8" alt="Logo" />
+
               {/* <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse" /> */}
             </div>
             <div>

diff --git a/src/components/room/join/join-header.tsx b/src/components/room/join/join-header.tsx
@@ -1,50 +1,53 @@
 import { usePeerOthersValues, useRoomData } from '@/store/conf/hooks';
-import { Info, Loader2 } from 'lucide-react';
+import { Info } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { Assets } from '@/assets';
+import { useCopyToClipboard } from '@/hooks/use-copy';
+import { BASE_URL } from '@/lib/constants';
 
 const Header = () => {
   const roomData = useRoomData();
   const peerOthersList = usePeerOthersValues();
+  const { copied, copy } = useCopyToClipboard();
 
   return (
     <div className="text-center space-y-4">
       {/* Enhanced Loading Spinner Icon */}
-      <div className="flex justify-center">
-        <div className="relative">
-          {/* Outer pulsing ring */}
-          <div className="absolute -inset-4 w-20 h-20 border border-blue-500/10 rounded-full animate-pulse delay-1000" />
-          <div className="absolute -inset-2 w-16 h-16 border border-blue-500/20 rounded-full animate-pulse delay-500" />
 
-          {/* Main spinner container */}
-          <div className="w-12 h-12 rounded-full border-2 border-blue-500/30 relative">
-            <div className="w-8 h-8 bg-blue-500 rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center shadow-lg">
-              <Loader2 className="w-4 h-4 text-white animate-spin" />
-            </div>
-          </div>
-        </div>
-      </div>
+      <img src={Assets.logo} className="w-14 h-14 mx-auto" alt="Logo" />
 
       <div className="space-y-2 relative">
-        <div className="flex justify-center">
-          <h1 className="text-2xl md:text-3xl lg:text-4xl font-semibold text-white">
-            {roomData?.roomId}
-          </h1>
-          <Tooltip>
-            <TooltipTrigger>
-              <sup>
-                <Info size={18} />
-              </sup>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Meeting Id, Click to copy invitation</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
+        {roomData?.roomId && (
+          <div className="flex justify-center">
+            <h1
+              onClick={() => copy(`${BASE_URL}/${roomData.roomId}`)}
+              className="text-2xl md:text-3xl lg:text-4xl font-semibold text-white cursor-pointer"
+            >
+              {roomData.roomId}
+            </h1>
+            <Tooltip>
+              <TooltipTrigger>
+                <sup className=" cursor-pointer">
+                  {copied ? (
+                    <Badge className=" bg-green-700/30 text-white">
+                      Copied
+                    </Badge>
+                  ) : (
+                    <Info size={18} />
+                  )}
+                </sup>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Meeting Invite, Click to copy</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        )}
         <div className="text-gray-400 md:text-lg relative">
           Setup your audio and video before joining
         </div>

diff --git a/src/hooks/use-copy.ts b/src/hooks/use-copy.ts
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export const useCopyToClipboard = () => {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async (text: string) => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return { copied, copy };
+};
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -1,7 +1,7 @@
 import type { MediaDeviceType } from '@/types';
 import { MediaPermissionsErrorType } from 'mic-check';
 export const HEARTBEAT_INTERVAL = 45000;
-
+export const BASE_URL = window.location.origin;
 export const APP_NAME = 'Mitsi';
 
 export const DEVICE_ERRORS = {