Calls: Change header color, add Close button

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%;
+  }
 }

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}>