From 7f8dc1a6be984bfcdec9b1f85b8b64c44518c8e9 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Thu, 7 Mar 2024 23:35:33 -0800
Subject: [PATCH] some styling tweaks

---
 net/web/src/context/useRingContext.hook.js           |  8 ++++----
 net/web/src/session/Session.jsx                      |  2 +-
 net/web/src/session/Session.styled.js                | 12 ++++++------
 .../src/session/cards/cardItem/CardItem.styled.js    |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/net/web/src/context/useRingContext.hook.js b/net/web/src/context/useRingContext.hook.js
index 2e2b1960..7dc12404 100644
--- a/net/web/src/context/useRingContext.hook.js
+++ b/net/web/src/context/useRingContext.hook.js
@@ -15,8 +15,8 @@ export function useRingContext() {
     localVideo: false,
     localAudio: false,
     remoteStream: null,
-    removeVideo: false,
-    removeAudio: false,
+    remoteVideo: false,
+    remoteAudio: false,
   });
   const access = useRef(null);
 
@@ -271,7 +271,7 @@ export function useRingContext() {
         audioTrack.current.stop();
         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.send(JSON.stringify({ AppToken: token }));
@@ -394,7 +394,7 @@ export function useRingContext() {
       }
       catch (err) {
         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;
diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index a7808c0e..962411fd 100644
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@@ -309,7 +309,7 @@ export function Session() {
             </div>
           </RingingWrapper>
         </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>
             <div className={ state.fullscreen ? 'fullscreen' : 'modal' }>
               <div className="window">
diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js
index ecb9eda9..12d2328d 100644
--- a/net/web/src/session/Session.styled.js
+++ b/net/web/src/session/Session.styled.js
@@ -15,42 +15,42 @@ export const RingingWrapper = styled.div`
       padding-left: 8px;
 
       .ringing-accept {
-        color: ${Colors.primary};
+        color: ${Colors.white};
         font-size: 18;
         width: 32px;
         height: 32px;
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: ${Colors.white};
+        background-color: ${Colors.primary};
         border-radius: 16px;
         margin: 8px;
         cursor: pointer;
       }
 
       .ringing-ignore {
-        color: ${Colors.grey};
+        color: ${Colors.white};
         font-size: 18;
         width: 32px;
         height: 32px;
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: ${Colors.white};
+        background-color: ${Colors.grey};
         border-radius: 16px;
         margin: 8px;
         cursor: pointer;
       }
     
       .ringing-decline {
-        color: ${Colors.alert};
+        color: ${Colors.white};
         font-size: 18;
         width: 32px;
         height: 32px;
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: ${Colors.white};
+        background-color: ${Colors.alert};
         border-radius: 16px;
         margin: 8px;
         transform: rotate(224deg);
diff --git a/net/web/src/session/cards/cardItem/CardItem.styled.js b/net/web/src/session/cards/cardItem/CardItem.styled.js
index 57f00c02..eecc0b8d 100644
--- a/net/web/src/session/cards/cardItem/CardItem.styled.js
+++ b/net/web/src/session/cards/cardItem/CardItem.styled.js
@@ -42,7 +42,7 @@ export const CardItemWrapper = styled.div`
   .markup {
     position: absolute;
     right: 0;
-    margin-right: 16px;
+    margin-right: 24px;
     display: flex;
     flex-direction: row;
     align-items: center;