some styling tweaks

This commit is contained in:
Roland Osborne 2024-03-07 23:35:33 -08:00
parent 58ba4857f9
commit 7f8dc1a6be
4 changed files with 12 additions and 12 deletions

View File

@ -15,8 +15,8 @@ export function useRingContext() {
localVideo: false, localVideo: false,
localAudio: false, localAudio: false,
remoteStream: null, remoteStream: null,
removeVideo: false, remoteVideo: false,
removeAudio: false, remoteAudio: false,
}); });
const access = useRef(null); const access = useRef(null);
@ -271,7 +271,7 @@ export function useRingContext() {
audioTrack.current.stop(); audioTrack.current.stop();
audioTrack.current = null; audioTrack.current = null;
} }
updateState({ callStatus: null, remoteVideo: false, remoteAudio: false }); updateState({ callStatus: null, removeStream: null, localStream: null, remoteVideo: false, remoteAudio: false, localVideo: false, localAudio: false });
} }
ws.current.onopen = async () => { ws.current.onopen = async () => {
ws.current.send(JSON.stringify({ AppToken: token })); ws.current.send(JSON.stringify({ AppToken: token }));
@ -394,7 +394,7 @@ export function useRingContext() {
} }
catch (err) { catch (err) {
calling.current = null; calling.current = null;
updateState({ callStatus: null, remoteVideo: false, remoteAudio: false }); updateState({ callStatus: null, remoteStream: null, localStream: null, remoteVideo: false, remoteAudio: false, localVideo: false, localAudio: false });
} }
let index = 0; let index = 0;

View File

@ -309,7 +309,7 @@ export function Session() {
</div> </div>
</RingingWrapper> </RingingWrapper>
</Modal> </Modal>
<Modal centered visible={state.callStatus} footer={null} closable={false} width={getDim() + 12} height={getDim()} bodyStyle={{ padding: 6 }}> <Modal centered visible={state.callStatus} footer={null} closable={false} width={getDim() + 12} height={getDim()} bodyStyle={{ padding: 6, backgroundColor: '#888888', borderRadius: 3 }}>
<CallingWrapper> <CallingWrapper>
<div className={ state.fullscreen ? 'fullscreen' : 'modal' }> <div className={ state.fullscreen ? 'fullscreen' : 'modal' }>
<div className="window"> <div className="window">

View File

@ -15,42 +15,42 @@ export const RingingWrapper = styled.div`
padding-left: 8px; padding-left: 8px;
.ringing-accept { .ringing-accept {
color: ${Colors.primary}; color: ${Colors.white};
font-size: 18; font-size: 18;
width: 32px; width: 32px;
height: 32px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: ${Colors.white}; background-color: ${Colors.primary};
border-radius: 16px; border-radius: 16px;
margin: 8px; margin: 8px;
cursor: pointer; cursor: pointer;
} }
.ringing-ignore { .ringing-ignore {
color: ${Colors.grey}; color: ${Colors.white};
font-size: 18; font-size: 18;
width: 32px; width: 32px;
height: 32px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: ${Colors.white}; background-color: ${Colors.grey};
border-radius: 16px; border-radius: 16px;
margin: 8px; margin: 8px;
cursor: pointer; cursor: pointer;
} }
.ringing-decline { .ringing-decline {
color: ${Colors.alert}; color: ${Colors.white};
font-size: 18; font-size: 18;
width: 32px; width: 32px;
height: 32px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: ${Colors.white}; background-color: ${Colors.alert};
border-radius: 16px; border-radius: 16px;
margin: 8px; margin: 8px;
transform: rotate(224deg); transform: rotate(224deg);

View File

@ -42,7 +42,7 @@ export const CardItemWrapper = styled.div`
.markup { .markup {
position: absolute; position: absolute;
right: 0; right: 0;
margin-right: 16px; margin-right: 24px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;