blurred backdrop for bottom section

src/ui/App.css

@@ -35,9 +35,9 @@ body {
 
 #DownloadProgress {
   position: absolute;
-  top: 85%;
+  top: 15%;
   left: 5%;
-  width: 60%;
+  width: 50%;
 }
 
 .MiniDownloads {
@@ -59,5 +59,15 @@ body {
   position: fixed;
   top: 73%;
   left: 15%;
-  
+}
+
+.BottomSection {
+  position: absolute;
+  top: 80%;
+
+  height: 30%;
+  width: 100%;
+
+  backdrop-filter: blur(8px);
+  box-shadow: inset 0px 5px 12px -3px rgb(50 50 50 / 75%);
 }

src/ui/App.tsx

@@ -80,12 +80,14 @@ class App extends React.Component<IProps, IState> {
           this.state.optionsOpen ? <Options closeFn={() => this.setState({ optionsOpen: !this.state.optionsOpen })}/> : null
         }
 
-        <ServerLaunchSection />
+        <div className="BottomSection">
+          <ServerLaunchSection />
 
-        <div id="DownloadProgress"
+          <div id="DownloadProgress"
-          onClick={() => this.setState({ miniDownloadsOpen: !this.state.miniDownloadsOpen })}
+            onClick={() => this.setState({ miniDownloadsOpen: !this.state.miniDownloadsOpen })}
-        >
+          >
-          <MainProgressBar downloadManager={downloadHandler} />
+            <MainProgressBar downloadManager={downloadHandler} />
+          </div>
         </div>
       </div>
     )

src/ui/components/RightBar.css

@@ -10,6 +10,8 @@
   width: 6%;
   left: 94%;
 
+  z-index: 99;
+
   background-color: rgba(77, 77, 77, 0.6);
 }
 

src/ui/components/ServerLaunchSection.css

@@ -4,11 +4,11 @@
   justify-content: space-between;
 
   position: absolute;
-  top: 75%;
   left: 60%;
+  top: 5%;
 
   width: 30%;
-  height: 18%;
+  height: 55%;
 }
 
 #playButton > div {

src/ui/components/ServerLaunchSection.tsx

@@ -130,7 +130,7 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
         </div>
 
         <div className="ServerConfig">
-          <TextInput id="ip" key="ip" placeholder={this.state.ipPlaceholder} onChange={this.setIp} />,
+          <TextInput id="ip" key="ip" placeholder={this.state.ipPlaceholder} onChange={this.setIp} />
           <TextInput id="port" key="port" placeholder={this.state.portPlaceholder} onChange={this.setPort}/> 
         </div>
 

src/ui/components/common/ProgressBar.css

@@ -10,7 +10,7 @@
 
 .ProgressBar {
   height: 20px;
-  width: 80%;
+  width: 100%;
   background-color: rgba(204, 204, 204, 0.5);
   color: #c5c5c5;
 
@@ -30,7 +30,7 @@
 }
 
 .MainProgressText {
-  width: 100%;
+  width: 80%;
 }
 
 .MainProgressBarWrapper {

src/ui/components/news/NewsSection.css

@@ -9,7 +9,7 @@
   height: 30%;
   width: 40%;
 
-  top: 35%;
+  top: 20%;
   left: 5%;
 }