fix commands and stylign

src/ui/components/MiniDialog.css

@@ -16,3 +16,19 @@
   border-radius: 10px;
 }
 
+.MiniDialogTop {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 20px;
+}
+
+.MiniDialogTop img {
+  height: 100%;
+}
+
+.MiniDialogTop:hover {
+  cursor: pointer;
+}

src/ui/components/MiniDialog.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 
+import Close from '../../resources/icons/close.svg'
 import './MiniDialog.css'
 
 interface IProps {
   children: React.ReactNode[] | React.ReactNode;
+  closeFn: () => void;
 }
 
 export default class MiniDialog extends React.Component<IProps, never> {
@@ -14,7 +16,13 @@ export default class MiniDialog extends React.Component<IProps, never> {
   render() {
     return (
       <div className="MiniDialog">
-        {this.props.children}
+        <div className="MiniDialogTop" onClick={this.props.closeFn}>
+          <div></div>
+          <img src={Close} className="MiniDialogClose" />
+        </div>
+        <div className="MiniDialogInner">
+          {this.props.children}
+        </div>
       </div>
     )
   }

src/ui/components/common/ProgressBar.css

@@ -12,7 +12,7 @@
   height: 20px;
   width: 80%;
   background-color: #fff;
-  color: #fff;
+  color: #c5c5c5;
 
   border: 1px solid #ccc;
 }
@@ -23,5 +23,5 @@
 }
 
 .ProgressText {
-  color: #fff;
+  color: #c5c5c5;
 }