feat(client): improve modal and add hang up confirmation

spot-client/src/common/css/_hangup-modal.scss

@@ -0,0 +1,31 @@
+.hangup-modal-select {
+    @include centered-content;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 360px;
+    text-align: center;
+    width: 100%;
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .footer {
+        align-items: center;
+        display: flex;
+        padding: 24px;
+        justify-content: center;
+        width: 100%;
+    }
+
+    .hangup-button {
+        display: block;
+        font-size: 19px;
+    }
+
+    .description {
+        font-size: 19px;
+    }
+}

spot-client/src/common/css/_modal.scss

@@ -4,10 +4,11 @@
     height: 100%;
     justify-content: center;
     left: 0;
-    pointer-events: none;
     position: fixed;
     top: 0;
     width: 100%;
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
 
     .modal-shroud {
         height: 100%;
@@ -24,7 +25,9 @@
         overflow: auto;
         pointer-events: all;
         position: relative;
-
+        border: 1px solid rgb(61, 61, 61);
+        box-shadow: rgba(20, 20, 20, 0.6) 0px 4px 25px 4px;
+        border-radius: 6px;
 
         @media #{$mqw-tablet} {
             background-color: var(--container-bg-color);

spot-client/src/common/css/index.scss

@@ -31,6 +31,7 @@
 @import './desktop-picker.scss';
 @import './dial-pad.scss';
 @import './electron.scss';
+@import './hangup-modal';
 @import './help-view.scss';
 @import './home-view.scss';
 @import './idle-cursor.scss';

spot-client/src/common/i18n/en.json

@@ -102,6 +102,10 @@
         "rate": "Rate your experience",
         "thanks": "Thanks for using {{ productName }}!"
     },
+    "hangup": {
+        "confirmation" : "Are you sure you want to hang up?",
+        "button": "Hang up"
+    },
     "help": {
         "howToConnect": "Open {{ url }} in a desktop Google Chrome browser in the conference room to set it up and obtain a share key. Next enter the {{ codeLength }}-character share key in this app.",
         "isRemote": "This app is a remote controller for a conference room."

spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupButton.js

@@ -1,11 +1,12 @@
-import { hangUp } from 'common/app-state';
+import { showModal } from 'common/app-state';
 import { CallEnd } from 'common/icons';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
 
 import { NavButton } from './../../nav';
+import HangupModal from './HangupModal';
 
 /**
  * A component for leaving a meeting in progress.
@@ -39,7 +40,7 @@ HangupButton.propTypes = {
 function mapDispatchToProps(dispatch) {
     return {
         onHangup() {
-            dispatch(hangUp());
+            dispatch(showModal(HangupModal));
         }
     };
 }

spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js

@@ -0,0 +1,72 @@
+import { hangUp, hideModal } from 'common/app-state';
+import { Button, Modal } from 'common/ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+
+/**
+ * Implements a modal dialog for confirming that the user wants to hang up.
+ */
+export class HangupModal extends React.Component {
+    static propTypes = {
+        onClose: PropTypes.func,
+        onHangup: PropTypes.func,
+        t: PropTypes.func
+    };
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { t } = this.props;
+
+        return (
+            <Modal
+                onClose = { this.props.onClose }
+                qaId = 'hangup-modal'>
+                <div className = 'hangup-modal-select'>
+                    <div className = 'content'>
+                        <div className = 'description'>
+                            { t('hangup.confirmation') }
+                        </div>
+                    </div>
+                    <div className = 'footer'>
+                        <Button
+                            appearance = 'primary'
+                            className = 'hangup-button'
+                            color = 'secondary'
+                            onClick = { this.props.onHangup }
+                            qaId = 'hangup-button'>
+                            { t('hangup.button') }
+                        </Button>
+                    </div>
+                </div>
+            </Modal>
+        );
+    }
+}
+
+/**
+ * Creates actions which can update Redux state.
+ *
+ * @param {Function} dispatch - The Redux dispatch function to update state.
+ * @private
+ * @returns {Object}
+ */
+function mapDispatchToProps(dispatch) {
+    return {
+        onClose() {
+            dispatch(hideModal());
+        },
+        onHangup() {
+            dispatch(hangUp());
+            dispatch(hideModal());
+        }
+    };
+}
+
+export default connect(null, mapDispatchToProps)(withTranslation()(HangupModal));