design: path selector

SpaceTheme · Nov 13, 2024 · fdc6d74 · fdc6d74
1 parent eff024e
commit fdc6d74
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 48 deletions.
diff --git a/gui/src/select-theme.html b/gui/src/select-theme.html
@@ -34,9 +34,8 @@
                         </div>
                     </div>
                     <div class="steam-path-selector" style="display: none;">
+                        <input id="steam-path-display" placeholder="" disabled></input>
                         <button class="select-steam-path-button">Select Steam Path</button>
-                        <div class="steam-path-display"></div>
-                        <div class="steam-path-error" style="display: none; color: red;"></div>
                     </div>                    
 
                     <div class="popup" id="popup">You didn't select the theme.</div>
@@ -134,8 +133,7 @@
         const uninstallText = document.querySelector('#uninstall-theme .theme-text');
         const steamPathSelector = document.querySelector('.steam-path-selector');
         const selectSteamPathButton = document.querySelector('.select-steam-path-button');
-        const steamPathDisplay = document.querySelector('.steam-path-display');
-        const steamPathError = document.querySelector('.steam-path-error');
+        const steamPathDisplay = document.getElementById('steam-path-display');
         let selectedSteamPath = null;
 
         themeSelector.addEventListener('click', (e) => {
@@ -156,7 +154,7 @@
                 resetText.textContent = `Reset ${selectedTheme}`;
                 uninstallText.textContent = `Uninstall ${selectedTheme}`;
 
-                steamPathSelector.style.display = selectedTheme === 'SteamTheme' ? 'block' : 'none';
+                steamPathSelector.style.display = selectedTheme === 'SteamTheme' ? 'flex' : 'none';
 
                 dropdownMenu.classList.remove('active');
                 themeSelector.classList.remove('active');
@@ -168,20 +166,15 @@
                 const result = await ipcRenderer.invoke('select-steam-path');
                 if (result.success) {
                     selectedSteamPath = result.path;
-                    steamPathDisplay.textContent = `Selected path: ${result.path}`;
-                    steamPathError.style.display = 'none';
+                    steamPathDisplay.placeholder = `${result.path}`;
                     if (selectedOption) {
                         nextButton.classList.add('available');
                     }
                 } else {
-                    steamPathError.textContent = result.error;
-                    steamPathError.style.display = 'block';
-                    selectedSteamPath = null;
-                    nextButton.classList.remove('available');
+                    steamPathDisplay.placeholder = 'Error selecting Steam path';
                 }
             } catch (error) {
-                steamPathError.textContent = 'Error selecting Steam path';
-                steamPathError.style.display = 'block';
+                steamPathDisplay.placeholder = 'Error selecting Steam path';
                 selectedSteamPath = null;
                 nextButton.classList.remove('available');
             }

diff --git a/gui/src/style.css b/gui/src/style.css
@@ -334,6 +334,36 @@ body {
 }
 
 
+.steam-path-selector {
+    gap: 6px;
+    justify-content: space-between;
+    margin: -6px 0 0;
+}
+
+#steam-path-display {
+    width: 100%;
+    padding: 0 12px;
+    font-weight: 600;
+    border: 2px solid rgb(60, 58, 61);
+    border-radius: 8px;
+    background-color: rgb(30, 30, 30);
+}
+
+.select-steam-path-button {
+    white-space: nowrap;
+    padding: 6px 12px;
+    border: 2px solid rgb(60, 58, 61);
+    border-radius: 8px;
+    color: #fff;
+    background-color: rgb(30, 30, 30);
+    cursor: pointer;
+}
+
+.select-steam-path-button:hover {
+    background-color: rgb(40, 40, 40);
+}
+
+
 
 .installation-header {
     display: flex;
@@ -494,38 +524,4 @@ body {
 .nav-button.next.available {
     cursor: pointer;
     opacity: 1;
-}
-
-.steam-path-selector {
-    margin: 10px 0;
-    padding: 10px;
-    border-radius: 5px;
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.select-steam-path-button {
-    padding: 8px 16px;
-    background: #4a4a4a;
-    border: none;
-    border-radius: 4px;
-    color: white;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.select-steam-path-button:hover {
-    background: #5a5a5a;
-}
-
-.steam-path-display {
-    margin-top: 8px;
-    font-size: 0.9em;
-    color: #ccc;
-    word-break: break-all;
-}
-
-.steam-path-error {
-    margin-top: 8px;
-    font-size: 0.9em;
-    color: #ff4444;
-}
+}