Styling changes

src/Input.module.css

@@ -95,6 +95,7 @@
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   text-align: center;
+  font-weight: 700;
 }
 
 .button:hover {

src/Room.jsx

@@ -26,7 +26,8 @@ import {
   MicButton,
   VideoButton,
 } from "./RoomButton";
-import { Header, LeftNav, RightNav } from "./Header";
+import { Header, LeftNav, RightNav, CenterNav } from "./Header";
+import { Button } from "./Input";
 
 function useQuery() {
   const location = useLocation();
@@ -97,9 +98,9 @@ export function Room({ manager }) {
               <li key={member.userId}>{member.name}</li>
             ))}
           </ul>
-          <button disabled={joining} onClick={joinCall}>
+          <Button disabled={joining} onClick={joinCall}>
             Join Call
-          </button>
+          </Button>
         </div>
       )}
       {!loading && room && joined && participants.length === 0 && (

src/Room.module.css

@@ -35,21 +35,6 @@ limitations under the License.
   padding-left: 0;
 }
 
-.joinRoom button {
-  border: none;
-  background: green;
-  color: white;
-  font-size: 16px;
-  font-weight: bold;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.joinRoom button:hover, .joinRoom button:active {
-  background: darkgreen;
-}
-
 .centerMessage {
   display: flex;
   flex: 1;

src/RoomButton.module.css

@@ -23,6 +23,7 @@ limitations under the License.
   justify-content: center;
   align-items: center;
   padding: 0;
+  border: none;
 }
 
 .roomButton:hover {
@@ -46,6 +47,7 @@ limitations under the License.
   background-color: transparent;
   border-radius: 32px;
   padding: 0;
+  border: none;
 }
 
 .headerButton:hover {