Merge pull request #53 from redspacecat/develop

improve extension manager

src/components/extension-manager-modal/ext-manager-modal.css

@@ -61,12 +61,13 @@
     color: white;
     border: none;
     padding: 0.5rem 1rem;
-    margin: 0;
+    margin: 4px;
     border-radius: 4px;
     cursor: pointer;
     font-family: inherit;
     font-weight: bold;
 }
+
 .button:active, .button:focus-within {
     box-shadow: 0 0 0 3px $motion-transparent;
 }
@@ -79,4 +80,4 @@
 }
 [theme="dark"] .warning {
     background: rgb(114, 102, 0);
-}
+}

src/components/extension-manager-modal/modal.jsx

@@ -6,9 +6,10 @@ import Modal from '../../containers/modal.jsx';
 import styles from './ext-manager-modal.css';
 
 const handleRemoveBtnClick = (ext, props) => {
-    props.vm.extensionManager.removeExtension(ext[0]);
-
-    props.onClose();
+    if (confirm("Are you sure?")) {
+        props.vm.extensionManager.removeExtension(ext[0]);
+        props.onClose();
+    }
 }
 
 const ExtensionsManagerModalComponent = props => {
@@ -30,7 +31,7 @@ const ExtensionsManagerModalComponent = props => {
         >
             <Box className={styles.body}>
                 {loadedExtensions.map((ext, i) => (
-                    <button key={i} class={styles.button} onClick={() => handleRemoveBtnClick(ext, props)}>Remove {ext[0]}</button>
+                    <button key={i} class={styles.button} onClick={() => handleRemoveBtnClick(ext, props)}>Remove {props.vm.runtime["ext_" + ext[0]]["getInfo"]().name}</button>
                 ))}
             </Box>
         </Modal>
@@ -47,4 +48,4 @@ ExtensionsManagerModalComponent.propTypes = {
     })
 };
 
-export default injectIntl(ExtensionsManagerModalComponent);
+export default injectIntl(ExtensionsManagerModalComponent);