Taken spikes feedback into account. Removed backdrop blur anyway due to my friends feedback, added shadow gradient for better button visibility. Lmk whether or not to still keep the backdrop blur.

src/ui/App.css

@@ -108,11 +108,8 @@ select:focus {
   height: 160px;
 
   margin: 0;
-  text-align: right;
+  padding: 0;
 
-  /* Gradient shadow */
-  -webkit-box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43);
-  -moz-box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43);
   box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43);
 }
 
@@ -126,4 +123,4 @@ select:focus {
   .BottomSection {
     height: 140px;
   }
-}
+}

src/ui/App.tsx

@@ -114,4 +114,4 @@ class App extends React.Component<Readonly<unknown>, IState> {
   }
 }
 
-export default App
+export default App

src/ui/components/RightBar.css

@@ -1,43 +1,3 @@
-@keyframes background-pan {
-  from {
-    background-position: 0% center;
-  }
-
-  to {
-    background-position: -200% center;
-  }
-}
-
-@keyframes scale {
-  from,
-  to {
-    transform: scale(0);
-  }
-
-  50% {
-    transform: scale(1);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(180deg);
-  }
-}
-
-.magic-text {
-  animation: background-pan 3s linear infinite;
-  background: linear-gradient(to right, #fff, #ffc920, #fff, #fff);
-  background-size: 200%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  white-space: nowrap;
-}
-
 .RightBar {
   position: absolute;
   transform: translate(0%, 0%);

src/ui/components/ServerLaunchSection.css

@@ -8,28 +8,28 @@
   right: 10%;
   top: 50%;
 
-  width: 20%;
+  width: 32%;
-  height: 120%;
+  height: 80%;
   min-width: 357px;
-  padding: 0 0 100px 0;
 }
 
-
+#playButton > div {
+  margin-bottom: 6px;
+}
 
 #playButton .BigButton {
   height: 100%;
   box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2);
   font-size: 24px;
   font-weight: 400;
+  width: 20%;
 }
 
 #serverControls {
   color: white;
+
   text-shadow: 1px 1px 8px black;
-  align-self: flex-end;
+}
-  margin-top: 10px;
-  margin-bottom: -10px;
-} 
 
 .BottomSection .CheckboxDisplay {
   border-color: #c5c5c5;
@@ -57,8 +57,8 @@
 
 .ServerConfig .Checkbox {
   display: inline-grid;
-  margin-top: 10px;
+  vertical-align: middle;
-  
+  margin-left: 8px;
 }
 
 .ServerLaunchButtons {
@@ -104,24 +104,8 @@
   box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2);
 }
 
-.ServerConfig {
+.ServerConfig .TextInputWrapper {
-  display: grid;
+  display: inline-block;
-  height: 100px;
-  grid-template-columns: 1;
-  grid-template-rows: repeat(2, 1fr);
-  justify-content: flex-end;
-}
-
-.ServerConfigGrid {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-#ServerConfigCheckbox {
-  margin-bottom: -10px;
-  margin-top: 10px;
-
 }
 
 #ip {
@@ -146,4 +130,4 @@
   #officialPlay {
     width: 40%;
   }
-}
+}

src/ui/components/ServerLaunchSection.tsx

@@ -277,34 +277,30 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
         {this.state.grasscutterEnabled && (
           <div>
             <div className="ServerConfig" id="serverConfigContainer">
-              <div id="ServerConfigCheckbox">
+              <TextInput
-                <Checkbox
+                id="ip"
-                  id="httpsEnable"
+                key="ip"
-                  label={this.state.httpsLabel}
+                placeholder={this.state.ipPlaceholder}
-                  onChange={this.toggleHttps}
+                onChange={this.setIp}
-                  checked={this.state.httpsEnabled}
+                initalValue={this.state.ip}
-                />
+              />
-              </div>
+              <TextInput
-              <div className="ServerConfigGrid">
+                style={{
-                <TextInput
+                  width: '10%',
-                  id="ip"
+                }}
-                  key="ip"
+                id="port"
-                  placeholder={this.state.ipPlaceholder}
+                key="port"
-                  onChange={this.setIp}
+                placeholder={this.state.portPlaceholder}
-                  initalValue={this.state.ip}
+                onChange={this.setPort}
-                />
+                initalValue={this.state.port}
-                <TextInput
+              />
-                  style={{
+              <HelpButton contents={this.state.portHelpText} />
-                    width: '10%',
+              <Checkbox
-                  }}
+                id="httpsEnable"
-                  id="port"
+                label={this.state.httpsLabel}
-                  key="port"
+                onChange={this.toggleHttps}
-                  placeholder={this.state.portPlaceholder}
+                checked={this.state.httpsEnabled}
-                  onChange={this.setPort}
+              />
-                  initalValue={this.state.port}
-                />
-                <HelpButton contents={this.state.portHelpText} />
-              </div>
             </div>
           </div>
         )}
@@ -318,7 +314,6 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
               <img className="ExtrasIcon" id="extrasIcon" src={Plus} />
             </BigButton>
           )}
-
           <BigButton onClick={this.launchServer} id="serverLaunch">
             <img className="ServerIcon" id="serverLaunchIcon" src={Server} />
           </BigButton>
@@ -326,4 +321,4 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
       </div>
     )
   }
-}
+}