From e4b758bb1107bead71d215c4403c879cd68032d2 Mon Sep 17 00:00:00 2001
From: Lino Schmidt <linoschmidt@lino3d.de>
Date: Wed, 15 Jun 2022 02:16:03 +0200
Subject: [PATCH] Updated design

---
 src/components/ui/settingsSide.tsx | 74 ++++++++++++++++--------------
 src/index.css                      | 35 ++++++++++++++
 src/index.ts                       |  2 +
 3 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/src/components/ui/settingsSide.tsx b/src/components/ui/settingsSide.tsx
index e3e70bd..d21a9e9 100644
--- a/src/components/ui/settingsSide.tsx
+++ b/src/components/ui/settingsSide.tsx
@@ -45,43 +45,47 @@ function SettingsSide() {
     
     return (
         <div id="content">
-            <div className="dataDiv">
-                <p>FPS: </p>
-                <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>
-                <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>
-                <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));
-                }}/>
-            </div>
-            <div className="dataDiv">
-                <p>Stick Mode:</p>
-                <label htmlFor="stickMode" className="toggle-switchy" data-style="rounded" data-text="12">
-                    <input checked={stickMode2} type="checkbox" id="stickMode" onChange={e => {
-                        setStickMode2(e.target.checked);
+            <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));
                     }}/>
-                    <span className="toggle">
-                        <span className="switch"></span>
-                    </span>
-                </label>
+                </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));
+                    }}/>
+                </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">
+                        <input checked={stickMode2} type="checkbox" id="stickMode" onChange={e => {
+                            setStickMode2(e.target.checked);
+                        }}/>
+                        <span className="toggle">
+                            <span className="switch"></span>
+                        </span>
+                    </label>
+                </div>
+                <button id="resetSettingsButton" onClick={() => {
+                    settingListLoadDefault();
+                    
+                    setFps(settingList.fps);
+                    setWidth(settingList.width);
+                    setStickDistance(settingList.stickDistance);
+                    setStickMode2(settingList.stickMode2);
+                }}>Reset Settings</button>
             </div>
-            <button onClick={() => {
-                settingListLoadDefault();
-                
-                setFps(settingList.fps);
-                setWidth(settingList.width);
-                setStickDistance(settingList.stickDistance);
-                setStickMode2(settingList.stickMode2);
-            }}>Reset Settings</button>
             <div id="renderImgDiv">
                 <img id="render-ex" src={renderImg}></img>
                 {renderLoading? <RenderLoadingSpinner/> : null}
diff --git a/src/index.css b/src/index.css
index c21c293..13c2e9a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -239,4 +239,39 @@ 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;
 }
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 9d2970d..9c5baca 100644
--- a/src/index.ts
+++ b/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,