improve main download bar

src/ui/App.css

@@ -34,6 +34,5 @@ body {
 #DownloadProgress {
   position: absolute;
   top: 85%;
-  left: 5%;
   width: 60%;
 }

src/ui/components/common/MainProgressBar.tsx

@@ -41,7 +41,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="ProgressBarWrapper">
+      <div className="MainProgressBarWrapper">
         <div className="ProgressBar">
           <div className="InnerProgress" style={{
             width: `${(() => {

src/ui/components/common/ProgressBar.css

@@ -1,5 +1,5 @@
 .ProgressBar, .InnerProgress {
-  border-radius: 20px;
+  border-radius: 4px;
 }
 
 .ProgressBarWrapper {
@@ -11,7 +11,7 @@
 .ProgressBar {
   height: 20px;
   width: 80%;
-  background-color: #fff;
+  background-color: rgba(204, 204, 204, 0.5);
   color: #c5c5c5;
 
   border: 1px solid #ccc;
@@ -19,10 +19,25 @@
 
 .InnerProgress {
   height: 100%;
-  background-color: #00a8ff;
+  background-color: #ffc61e;
 }
 
 .ProgressText {
   color: #c5c5c5;
   padding: 0px 10px;
+}
+
+.MainProgressBarWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  color: #fff;
+}
+
+.MainProgressBarWrapper .ProgressText {
+  font-size: 20px;
+  font-weight: bold;
+  color: #fff !important;
 }