Updated design

src/components/ui/settingsSide.tsx

@@ -45,24 +45,27 @@ function SettingsSide() {
     
     return (
         <div id="content">
-            <div className="dataDiv">
-                <p>FPS: </p>
+            <div id="settingRow">
+                <span className="inputSpan">
+                    <label>FPS</label>
                     <input id="fpsInput" type="number" value={fps.toString()} min="1" step="1" onChange={e => {
                         if(e.target.value.trim().length !== 0) setFps(parseInt(e.target.value));
                     }}/>
-            </div>
-            <div className="dataDiv">
-                <p>Width: </p>
+                </span>
+                <span className="inputSpan">
+                    <label>Width: </label>
                     <input id="widthInput" type="number" value={width.toString()} min="1" step="1" onChange={e => {
                         if(e.target.value.trim().length !== 0) setWidth(parseInt(e.target.value));
                     }}/>
-            </div>
-            <div className="dataDiv">
-                <p>Stick Distance: </p>
+                </span>
+                <span className="inputSpan">
+                    <label>Stick Distance: </label>
                     <input id="stickDistanceInput" type="number" value={stickDistance.toString()} min="0" step="1" onChange={e => {
                         if(e.target.value.trim().length !== 0) setStickDistance(parseInt(e.target.value));
                     }}/>
+                </span>
             </div>
+            <div id="settingRow">
                 <div className="dataDiv">
                     <p>Stick Mode:</p>
                     <label htmlFor="stickMode" className="toggle-switchy" data-style="rounded" data-text="12">
@@ -74,7 +77,7 @@ function SettingsSide() {
                         </span>
                     </label>
                 </div>
-            <button onClick={() => {
+                <button id="resetSettingsButton" onClick={() => {
                     settingListLoadDefault();
                     
                     setFps(settingList.fps);
@@ -82,6 +85,7 @@ function SettingsSide() {
                     setStickDistance(settingList.stickDistance);
                     setStickMode2(settingList.stickMode2);
                 }}>Reset Settings</button>
+            </div>
             <div id="renderImgDiv">
                 <img id="render-ex" src={renderImg}></img>
                 {renderLoading? <RenderLoadingSpinner/> : null}

src/index.css

@@ -240,3 +240,38 @@ button {
 button:hover {
     transform: scale(1.05);
 }
+
+.inputSpan {
+    position: relative;
+    display: inline-block;
+    align-items: center;
+    padding-bottom: 15px;
+}
+.inputSpan input {
+    width: 75px;
+    padding: 8px 0;
+    border: 0;
+    border-top-right-radius: 18px;
+    border-bottom-right-radius: 18px;
+    text-align: center;
+    font-size: large;
+    line-height: 0px;
+}
+.inputSpan label {
+    padding: 10px 10px;
+    background: #00c24a;
+    border-top-left-radius: 18px;
+    border-bottom-left-radius: 18px;
+    font-weight: bolder;
+    text-shadow: #0d131e 1px 1px 1px;
+}
+
+#settingRow {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+#resetSettingsButton {
+    height: 35px;
+}

src/index.ts

@@ -58,6 +58,8 @@ const createWindow = () => {
   const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
+    minWidth: 600,
+    minHeight: 600,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,