BottomBar elements now align to right

src/ui/App.css

@@ -109,6 +109,11 @@ select:focus {
 
   margin: 0;
   text-align: right;
+
+  /* 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);
 }
 
 @media (max-height: 580px) {

src/ui/components/ServerLaunchSection.css

@@ -25,8 +25,10 @@
 
 #serverControls {
   color: white;
-
   text-shadow: 1px 1px 8px black;
+  align-self: flex-end;
+  margin-top: 10px;
+  margin-bottom: -10px;
 } 
 
 .BottomSection .CheckboxDisplay {
@@ -55,8 +57,8 @@
 
 .ServerConfig .Checkbox {
   display: inline-grid;
-  vertical-align: middle;
+  margin-top: 10px;
-  margin-left: 8px;
+  
 }
 
 .ServerLaunchButtons {
@@ -102,8 +104,24 @@
   box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2);
 }
 
-.ServerConfig .TextInputWrapper {
+.ServerConfig {
-  display: inline-block;
+  display: grid;
+  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 {

src/ui/components/ServerLaunchSection.tsx

@@ -277,30 +277,34 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
         {this.state.grasscutterEnabled && (
           <div>
             <div className="ServerConfig" id="serverConfigContainer">
-              <TextInput
+              <div id="ServerConfigCheckbox">
-                id="ip"
+                <Checkbox
-                key="ip"
+                  id="httpsEnable"
-                placeholder={this.state.ipPlaceholder}
+                  label={this.state.httpsLabel}
-                onChange={this.setIp}
+                  onChange={this.toggleHttps}
-                initalValue={this.state.ip}
+                  checked={this.state.httpsEnabled}
-              />
+                />
-              <TextInput
+              </div>
-                style={{
+              <div className="ServerConfigGrid">
-                  width: '10%',
+                <TextInput
-                }}
+                  id="ip"
-                id="port"
+                  key="ip"
-                key="port"
+                  placeholder={this.state.ipPlaceholder}
-                placeholder={this.state.portPlaceholder}
+                  onChange={this.setIp}
-                onChange={this.setPort}
+                  initalValue={this.state.ip}
-                initalValue={this.state.port}
+                />
-              />
+                <TextInput
-              <HelpButton contents={this.state.portHelpText} />
+                  style={{
-              <Checkbox
+                    width: '10%',
-                id="httpsEnable"
+                  }}
-                label={this.state.httpsLabel}
+                  id="port"
-                onChange={this.toggleHttps}
+                  key="port"
-                checked={this.state.httpsEnabled}
+                  placeholder={this.state.portPlaceholder}
-              />
+                  onChange={this.setPort}
+                  initalValue={this.state.port}
+                />
+                <HelpButton contents={this.state.portHelpText} />
+              </div>
             </div>
           </div>
         )}
@@ -314,6 +318,7 @@ 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>