wifi ux cleanup

electron/main.js

@@ -766,32 +766,34 @@ ipcMain.on('scan-wifi', (event) =>
     {
       console.log('Raw WiFi networks:', networks);
 
-      /*
-      // for testing
-      networks.push({
-        ssid: 'Test Network 1',
-        signal_level: -50,
-        security: 'WPA2'
-      });
-
-      networks.push({
-        ssid: 'Test Network 2',
-        signal_level: -90,
-        security: 'WPA2'
-      });
-
-      networks.push({
-        ssid: 'Test Network 3',
-        signal_level: -30,
-        security: 'WPA2'
-      });
+      if (process.platform === 'darwin')
+      {
+        // for testing
+        networks.push({
+          ssid: 'Test Network 1',
+          signal_level: -50,
+          security: 'WPA2'
+        });
+
+        networks.push({
+          ssid: 'Test Network 2',
+          signal_level: -90,
+          security: 'WPA2'
+        });
+
+        networks.push({
+          ssid: 'Test Network 3',
+          signal_level: -30,
+          security: 'WPA2'
+        });
+
+        networks.push({
+          ssid: 'Test Network 1',
+          signal_level: -30,
+          security: 'WPA2'
+        });
+      }
 
-      networks.push({
-        ssid: 'Test Network 1',
-        signal_level: -30,
-        security: 'WPA2'
-      });
-      */
 
       // Filter and deduplicate networks
       const filteredNetworks = networks

src/App.css

@@ -295,9 +295,6 @@ main {
   background-color: rgb(46, 45, 54);
 }
 
-.knob:active {
-}
-
 .knob-indicator {
   width: 2px;
   height: 20px;
@@ -1021,4 +1018,22 @@ button:active {
   bottom: 0;
   z-index: 5000;
   pointer-events: all;
+}
+
+.wifi-settings-button-container button {
+  font-size: 14px; /* Smaller font size */
+  border: 1px solid #ccc; /* Outline */
+  padding: 5px 10px; /* Padding for aesthetic spacing */
+  background-color: transparent; /* Transparent background */
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.wifi-settings-button-container button:hover {
+  border-color: #999; /* Darker outline on hover */
+}
+
+.wifi-settings-button-container button:focus {
+  outline: none;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Glow effect on focus */
 }

src/WifiSettings.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Keyboard from 'react-simple-keyboard';
-import { FaCheck, FaExclamationTriangle } from 'react-icons/fa';
+import { FaCheck, FaExclamationTriangle, FaSync } from 'react-icons/fa';
 import 'react-simple-keyboard/build/css/index.css';
 
 function WifiSettings({ onClose }) {
@@ -97,6 +97,11 @@ function WifiSettings({ onClose }) {
                             <FaCheck className="status-icon" />
                             <span>Connected to {currentNetwork}</span>
                         </div>
+                    ) : isConnecting ? (
+                        <div className="status-checking">
+                            <FaSync className="spin status-icon" />
+                            <span>Checking...</span>
+                        </div>
                     ) : (
                         <div className="status-disconnected">
                             <FaExclamationTriangle className="status-icon" />
@@ -127,7 +132,7 @@ function WifiSettings({ onClose }) {
                             onFocus={() => setShowKeyboard(true)}
                             placeholder="Enter password"
                         />
-                        <div className="button-container">
+                        <div className="wifi-settings-button-container">
                             <button 
                                 onClick={handleConnect}
                                 disabled={isConnecting}