From 36b3c2f84103790ec2331b2436c2af0011db36af Mon Sep 17 00:00:00 2001
From: Wehi <notstrangequark@gmail.com>
Date: Wed, 10 May 2023 15:03:29 +0200
Subject: [PATCH] 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                            |  7 +--
 src/ui/App.tsx                            |  2 +-
 src/ui/components/RightBar.css            | 40 -----------------
 src/ui/components/ServerLaunchSection.css | 42 ++++++-----------
 src/ui/components/ServerLaunchSection.tsx | 55 +++++++++++------------
 5 files changed, 41 insertions(+), 105 deletions(-)

diff --git a/src/ui/App.css b/src/ui/App.css
index 56da799..207faf2 100644
--- a/src/ui/App.css
+++ b/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;
   }
-}
+}
\ No newline at end of file
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 3c46541..5d4f349 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -114,4 +114,4 @@ class App extends React.Component<Readonly<unknown>, IState> {
   }
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/src/ui/components/RightBar.css b/src/ui/components/RightBar.css
index b78756e..47a42f0 100644
--- a/src/ui/components/RightBar.css
+++ b/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%);
diff --git a/src/ui/components/ServerLaunchSection.css b/src/ui/components/ServerLaunchSection.css
index 5be0824..1799025 100644
--- a/src/ui/components/ServerLaunchSection.css
+++ b/src/ui/components/ServerLaunchSection.css
@@ -8,28 +8,28 @@
   right: 10%;
   top: 50%;
 
-  width: 20%;
-  height: 120%;
+  width: 32%;
+  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 {
-  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;
-
+.ServerConfig .TextInputWrapper {
+  display: inline-block;
 }
 
 #ip {
@@ -146,4 +130,4 @@
   #officialPlay {
     width: 40%;
   }
-}
+}
\ No newline at end of file
diff --git a/src/ui/components/ServerLaunchSection.tsx b/src/ui/components/ServerLaunchSection.tsx
index 0c25523..a3de46a 100644
--- a/src/ui/components/ServerLaunchSection.tsx
+++ b/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">
-                <Checkbox
-                  id="httpsEnable"
-                  label={this.state.httpsLabel}
-                  onChange={this.toggleHttps}
-                  checked={this.state.httpsEnabled}
-                />
-              </div>
-              <div className="ServerConfigGrid">
-                <TextInput
-                  id="ip"
-                  key="ip"
-                  placeholder={this.state.ipPlaceholder}
-                  onChange={this.setIp}
-                  initalValue={this.state.ip}
-                />
-                <TextInput
-                  style={{
-                    width: '10%',
-                  }}
-                  id="port"
-                  key="port"
-                  placeholder={this.state.portPlaceholder}
-                  onChange={this.setPort}
-                  initalValue={this.state.port}
-                />
-                <HelpButton contents={this.state.portHelpText} />
-              </div>
+              <TextInput
+                id="ip"
+                key="ip"
+                placeholder={this.state.ipPlaceholder}
+                onChange={this.setIp}
+                initalValue={this.state.ip}
+              />
+              <TextInput
+                style={{
+                  width: '10%',
+                }}
+                id="port"
+                key="port"
+                placeholder={this.state.portPlaceholder}
+                onChange={this.setPort}
+                initalValue={this.state.port}
+              />
+              <HelpButton contents={this.state.portHelpText} />
+              <Checkbox
+                id="httpsEnable"
+                label={this.state.httpsLabel}
+                onChange={this.toggleHttps}
+                checked={this.state.httpsEnabled}
+              />
             </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>
     )
   }
-}
+}
\ No newline at end of file