From 33258e0f4539b8dcd3bf777e51a33d5ee2d75cda Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 29 Nov 2021 18:25:52 +0100
Subject: [PATCH] Calls: Change header color, add Close button

---
 src/components/calls/ActiveCallHeader.scss |  6 +++++-
 src/components/calls/group/GroupCall.tsx   | 15 +++++++++------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/calls/ActiveCallHeader.scss b/src/components/calls/ActiveCallHeader.scss
index e17ae83be..89056358e 100644
--- a/src/components/calls/ActiveCallHeader.scss
+++ b/src/components/calls/ActiveCallHeader.scss
@@ -13,10 +13,14 @@
   color: #fff;
   align-items: center;
   padding: 0 1rem;
-  background: linear-gradient(90deg, rgb(82, 206, 93), rgb(0, 177, 192));
+  background: linear-gradient(135deg, rgb(49, 82, 232), rgb(143, 74, 172));
   transform: translateY(-100%);
 
   &.open {
     transform: translateY(0);
   }
+
+  span {
+    line-height: 100%;
+  }
 }
diff --git a/src/components/calls/group/GroupCall.tsx b/src/components/calls/group/GroupCall.tsx
index e9847a844..b14c52253 100644
--- a/src/components/calls/group/GroupCall.tsx
+++ b/src/components/calls/group/GroupCall.tsx
@@ -127,10 +127,6 @@ const GroupCall: FC<OwnProps & StateProps & DispatchProps> = ({
     }
   }, [connectionState, playGroupCallSound]);
 
-  const handleShouldEndGroupCallChange = useCallback(() => {
-    setShouldEndGroupCall(!shouldEndGroupCall);
-  }, [shouldEndGroupCall]);
-
   const handleCloseConfirmLeaveModal = () => {
     closeConfirmLeaveModal();
     setIsEndGroupCallModal(false);
@@ -302,7 +298,14 @@ const GroupCall: FC<OwnProps & StateProps & DispatchProps> = ({
             )}
           </DropdownMenu>
         )}
-
+        <Button
+          round
+          size="smaller"
+          color="translucent"
+          onClick={toggleGroupCallPanel}
+        >
+          <i className="icon-close" />
+        </Button>
       </div>
 
       <div className="scrollable custom-scroll">
@@ -370,7 +373,7 @@ const GroupCall: FC<OwnProps & StateProps & DispatchProps> = ({
           <Checkbox
             label={lang('VoipGroupEndChat')}
             checked={shouldEndGroupCall}
-            onChange={handleShouldEndGroupCallChange}
+            onCheck={setShouldEndGroupCall}
           />
         )}
         <Button isText className="confirm-dialog-button" onClick={handleLeaveGroupCall}>