WIP call style

public/res/ic/filled/hangup_call.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M480 416q126 0 241 50.5T918 613q8 10 8.5 22t-8.5 21l-94 94q-8 8-23 9t-24-6l-114-85q-6-5-9-11t-3-13V505q-42-16-85.5-22.5T480 476q-42 0-85.5 6.5T309 505v139q0 7-3 13t-9 11l-114 85q-12 9-24.5 8T136 750l-94-94q-9-9-8.5-21t8.5-22q82-96 197-146.5T480 416Z"/></svg>

src/app/organisms/room/JitsiRoom.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
-import './Room.scss';
+import './JitsiRoom.scss';
 import { JitsiMeeting } from '@jitsi/react-sdk';
+import SearchIC from '../../../../public/res/ic/filled/hangup_call.svg';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -69,19 +70,7 @@ function JitsiRoom({ setIsJitsiRoom }) {
         <div className="call_header" id="header" ref={openerRef}>
           {roomName}
         </div>
-        <Button
-          onClick={() => {
-            setJitsiCallId(null);
-            setRoomName('');
-            setRoomInfo({
-              roomTimeline: null,
-              eventId: null,
-            });
-          }}
-        >
-          X
-        </Button>
-        <Button>Return</Button>
+        <div className="call_iframe">
           <JitsiMeeting
             key={counter}
             domain="meet.calyx.net"
@@ -134,8 +123,27 @@ function JitsiRoom({ setIsJitsiRoom }) {
               // here you can attach custom event listeners to the Jitsi Meet External API
               // you can also store it locally to execute commands
             }}
+            getIFrameRef={(iframeRef) => {
+              iframeRef.style.height = '96%';
+            }}
           />
         </div>
+        <div className="call_buttons">
+          <Button
+            onClick={() => {
+              setJitsiCallId(null);
+              setRoomName('');
+              setRoomInfo({
+                roomTimeline: null,
+                eventId: null,
+              });
+            }}
+            className="close_button"
+          >
+            <img src={SearchIC} alt="hangup" />
+          </Button>
+        </div>
+      </div>
     );
   }
   return null;

src/app/organisms/room/JitsiRoom.scss

@@ -0,0 +1,34 @@
+@use '../../partials/flex';
+@use '../../partials/screen';
+
+.call_iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.call{
+  user-select: none;
+  border: 1px solid var(--bg-surface-border);
+  border-radius: var(--bo-radius);
+  color: var(--tc-surface-normal-low);
+  background-color: var(--bg-surface);
+}
+
+.call_header{
+  z-index: 2001;
+  cursor: move;
+  text-align: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.call_buttons {
+  position: absolute;
+  top: 0.15rem;
+  right: 0.1rem;
+}
+
+.close_button {
+  filter: invert(26%) sepia(90%) saturate(1997%) hue-rotate(345deg) brightness(113%) contrast(91%);
+  height: 3rem;
+}

src/app/templates/client/Client.jsx

@@ -162,7 +162,7 @@ function Client() {
     initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
   }
 
-  const JITSI_ROOM_CLASS = 'jitsi_room__wrapper'
+  const JITSI_ROOM_CLASS = 'jitsi_pip'
   const ROOM_CLASS = `room__wrapper ${classNameHidden}`
 
   return (

src/app/templates/client/Client.scss

@@ -19,7 +19,7 @@
   @extend .cp-fx__item-one;
 }
 
-.jitsi_room__wrapper {
+.jitsi_pip {
   display: grid;
   position: absolute;
   top: 20rem;
@@ -29,32 +29,12 @@
   width: 25rem;
 }
 
-.call_header{
-  z-index: 2001;
-  cursor: move;
-  text-align: center;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.call{
-  user-select: none;
-  border: 1px solid var(--bg-surface-border);
-  border-radius: var(--bo-radius);
-  color: var(--tc-surface-normal-low);
-  background-color: var(--bg-surface);
-}
-
 @include screen.smallerThan(mobileBreakpoint) {
   .client__item-hidden {
     display: none;
   }
 }
 
-.hidden {
-  display: none;
-}
-
 .loading-display {
   position: absolute;
   top: 0;