Merge pull request #55 from LayerTwo-Labs/lights-fix

seriouscatsoserious · web-flow · commit e978e75e6234 · 2025-01-31T11:14:13.000-03:00
Lights fix
diff --git a/src/App.css b/src/App.css
@@ -348,6 +348,23 @@ body {
   --current-color: var(--run-btn);
 }
 
+/* Quick Start/Stop Button */
+.quick-start-stop-btn {
+  transition: background-color 0.2s ease !important;
+}
+
+.quick-start-stop-btn:not(:disabled):hover {
+  background-color: var(--stop-btn-hover) !important;
+}
+
+.quick-start-stop-btn[data-state="start"]:not(:disabled):hover {
+  background-color: var(--run-btn-hover) !important;
+}
+
+.quick-start-stop-btn[data-state="download"]:not(:disabled):hover {
+  background-color: var(--download-btn-hover) !important;
+}
+
 /* L1 Chain Layout */
 .l1-chains {
   display: flex;
diff --git a/src/components/ChainSettingsModal.module.css b/src/components/ChainSettingsModal.module.css
@@ -11,6 +11,10 @@
   z-index: 1000;
 }
 
+.dangerOverlay {
+  background-color: rgba(220, 53, 69, 0.2);
+}
+
 .modalContent {
   background-color: var(--background-color);
   border-radius: 8px;
@@ -142,7 +146,13 @@
   padding: 8px 16px;
   border-radius: 4px;
   cursor: pointer;
+  font-weight: 600;
+  font-size: 0.9rem;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
   transition: background-color 0.2s;
+  width: 120px;
 }
 
 .resetBtn:hover {
@@ -156,7 +166,13 @@
   padding: 8px 16px;
   border-radius: 4px;
   cursor: pointer;
+  font-weight: 600;
+  font-size: 0.9rem;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
   transition: background-color 0.2s;
+  width: 120px;
   margin-right: 10px;
 }
 
@@ -176,6 +192,18 @@
 
 .modalBody li {
   margin: 5px 0;
+  text-align: left;
+}
+
+.modalBody ul {
+  list-style: disc;
+  padding-left: 20px;
+  margin: 10px 0;
+}
+
+.warningText {
+  color: var(--danger-color);
+  font-weight: bold;
 }
 
 .dark {
diff --git a/src/components/Nodes.js b/src/components/Nodes.js
@@ -364,7 +364,7 @@ function Nodes() {
               <button
                 onClick={handleQuickStartStop}
                 disabled={isProcessing || isAnyL1ChainDownloading()}
-                className={`btn ${(!isProcessing && !isAnyL1ChainDownloading() && (!areAllL1ChainsDownloaded() || (!areAllChainsRunning() && areAllL1ChainsDownloaded()))) ? 'btn-shimmer' : ''}`}
+                className={`btn quick-start-stop-btn ${(!isProcessing && !isAnyL1ChainDownloading() && (!areAllL1ChainsDownloaded() || (!areAllChainsRunning() && areAllL1ChainsDownloaded()))) ? 'btn-shimmer' : ''}`}
                 data-state={!isProcessing && !isAnyL1ChainDownloading() && (!areAllL1ChainsDownloaded() ? 'download' : !areAllChainsRunning() ? 'start' : '')}
                 style={{
                   padding: '8px 16px',
@@ -377,7 +377,17 @@ function Nodes() {
                         : 'var(--run-btn)', // Green for start
                   cursor: (isProcessing || isAnyL1ChainDownloading()) ? 'wait' : 'pointer',
                   opacity: (isProcessing || isAnyL1ChainDownloading()) ? 0.8 : 1,
-                  width: 'auto'  // Override fixed width from btn class
+                  width: 'auto',  // Override fixed width from btn class
+                  transition: 'background-color 0.2s ease',
+                  ':hover': {
+                    backgroundColor: isProcessing || isAnyL1ChainDownloading()
+                      ? 'var(--downloading-btn-hover)'  // Darker orange for processing/downloading
+                      : !areAllL1ChainsDownloaded()
+                        ? 'var(--download-btn-hover)'  // Darker blue for download
+                        : areAllChainsRunning()
+                          ? 'var(--stop-btn-hover)'  // Darker red for stop
+                          : 'var(--run-btn-hover)'  // Darker green for start
+                  }
                 }}
               >
                 {isProcessing
diff --git a/src/components/ResetAllModal.js b/src/components/ResetAllModal.js
@@ -1,64 +1,49 @@
 import React from 'react';
 import { X } from 'lucide-react';
-import styles from './SettingsModal.module.css'; // Reuse settings modal styles
+import { useTheme } from '../contexts/ThemeContext';
+import styles from './ChainSettingsModal.module.css';
 
 const ResetAllModal = ({ onConfirm, onClose }) => {
+  const { isDarkMode } = useTheme();
+  
   const handleOverlayClick = (e) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   };
 
   return (
-    <div className={styles.modalOverlay} onClick={handleOverlayClick}>
+    <div 
+      className={`${styles.modalOverlay} ${styles.dangerOverlay} ${isDarkMode ? styles.dark : styles.light}`} 
+      onClick={handleOverlayClick}
+      style={{ position: 'absolute' }}
+    >
       <div className={styles.modalContent}>
         <div className={styles.modalHeader}>
           <h2 className={styles.modalTitle}>Reset All Chains</h2>
           <button className={styles.closeButton} onClick={onClose}>
             <X size={20} />
           </button>
         </div>
-        <div className={styles.settingGroup}>
-          <p style={{ marginBottom: '20px', color: 'var(--text-color)' }}>
-            Warning: This will reset all chains to their default state and delete ALL data, including:
-          </p>
-          <ul style={{ marginBottom: '20px', color: 'var(--text-color)', listStyle: 'disc', paddingLeft: '40px' }}>
+        <div className={styles.modalBody}>
+          <p>Warning: This will reset all chains to their default state and delete ALL data, including:</p>
+          <ul className={styles.modalBody}>
             <li>All blockchain data</li>
             <li>All wallet data and private keys</li>
             <li>All transaction history</li>
             <li>All custom chain configurations</li>
           </ul>
-          <p style={{ marginBottom: '20px', color: '#dc3545', fontWeight: 'bold' }}>
+          <p className={styles.warningText}>
             This action cannot be undone. Make sure you have backed up any important data.
           </p>
-          <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end' }}>
-            <button
-              onClick={onClose}
-              style={{
-                padding: '8px 16px',
-                borderRadius: '4px',
-                border: 'none',
-                background: 'rgba(128, 128, 128, 0.2)',
-                color: 'var(--text-color)',
-                cursor: 'pointer',
-              }}
-            >
-              Cancel
-            </button>
-            <button
-              onClick={onConfirm}
-              style={{
-                padding: '8px 16px',
-                borderRadius: '4px',
-                border: 'none',
-                background: '#dc3545',
-                color: 'white',
-                cursor: 'pointer',
-              }}
-            >
-              Reset All
-            </button>
-          </div>
+        </div>
+        <div className={styles.buttonContainer}>
+          <button onClick={onClose} className={styles.cancelBtn}>
+            Cancel
+          </button>
+          <button onClick={onConfirm} className={styles.resetBtn}>
+            Reset All
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/components/ResetConfirmModal.js b/src/components/ResetConfirmModal.js
@@ -14,7 +14,7 @@ const ResetConfirmModal = ({ chainName, onConfirm, onClose }) => {
 
   return (
     <div
-      className={`${styles.modalOverlay} ${isDarkMode ? styles.dark : styles.light}`}
+      className={`${styles.modalOverlay} ${styles.dangerOverlay} ${isDarkMode ? styles.dark : styles.light}`}
       onClick={handleOverlayClick}
     >
       <div className={styles.modalContent}>
diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js
@@ -7,9 +7,11 @@ import styles from './SettingsModal.module.css';
 import { X } from 'lucide-react';
 import ResetAllModal from './ResetAllModal';
 import UpdateConfirmModal from './UpdateConfirmModal';
+import WalletWarningModal from './WalletWarningModal';
 
 const SettingsModal = ({ onResetComplete }) => {
   const [showResetModal, setShowResetModal] = useState(false);
+  const [showWalletWarning, setShowWalletWarning] = useState(false);
   const [updateStatus, setUpdateStatus] = useState(null);
   const [isCheckingUpdates, setIsCheckingUpdates] = useState(false);
   const [availableUpdates, setAvailableUpdates] = useState([]);
@@ -19,6 +21,12 @@ const SettingsModal = ({ onResetComplete }) => {
   const { showQuotes } = useSelector((state) => state.settings);
   const { isDarkMode, toggleTheme } = useTheme();
   const handleClose = () => {
+    setShowResetModal(false);
+    setShowWalletWarning(false);
+    setUpdateStatus(null);
+    setIsCheckingUpdates(false);
+    setAvailableUpdates([]);
+    setShowUpdateConfirm(false);
     dispatch(hideSettingsModal());
   };
 
@@ -64,7 +72,10 @@ const SettingsModal = ({ onResetComplete }) => {
   if (!isVisible) return null;
 
   return (
-    <div className={styles.modalOverlay} onClick={handleOverlayClick}>
+    <div 
+      className={`${styles.modalOverlay} ${isDarkMode ? styles.dark : styles.light}`} 
+      onClick={handleOverlayClick}
+    >
       <div className={styles.modalContent}>
         <div className={styles.modalHeader}>
           <h2 className={styles.modalTitle}>Settings</h2>
@@ -104,16 +115,7 @@ const SettingsModal = ({ onResetComplete }) => {
             <span className={styles.settingLabel}>Master Wallet Directory</span>
             <button 
               className={styles.updateButton}
-              onClick={async () => {
-                try {
-                  const result = await window.electronAPI.invoke('open-wallet-starters-dir');
-                  if (!result.success) {
-                    throw new Error(result.error);
-                  }
-                } catch (error) {
-                  console.error('Error opening master wallet directory:', error);
-                }
-              }}
+              onClick={() => setShowWalletWarning(true)}
             >
               Open
             </button>
@@ -164,9 +166,11 @@ const SettingsModal = ({ onResetComplete }) => {
           )}
         </div>
 
-        <button className={styles.resetButton} onClick={handleReset}>
-          Reset Everything
-        </button>
+        <div className={styles.buttonContainer}>
+          <button className={styles.resetButton} onClick={handleReset}>
+            Reset Everything
+          </button>
+        </div>
       </div>
       {showResetModal && (
         <ResetAllModal
@@ -203,6 +207,23 @@ const SettingsModal = ({ onResetComplete }) => {
           onClose={() => setShowUpdateConfirm(false)}
         />
       )}
+      {showWalletWarning && (
+        <WalletWarningModal
+          onConfirm={async () => {
+            try {
+              const result = await window.electronAPI.invoke('open-wallet-starters-dir');
+              if (!result.success) {
+                throw new Error(result.error);
+              }
+            } catch (error) {
+              console.error('Error opening master wallet directory:', error);
+            } finally {
+              setShowWalletWarning(false);
+            }
+          }}
+          onClose={() => setShowWalletWarning(false)}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/components/SettingsModal.module.css b/src/components/SettingsModal.module.css
diff --git a/src/components/WalletWarningModal.js b/src/components/WalletWarningModal.js

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ const ResetConfirmModal = ({ chainName, onConfirm, onClose }) => {`
`14`	`14`
`15`	`15`	`return (`
`16`	`16`	`<div`
`17`		- className={`${styles.modalOverlay} ${isDarkMode ? styles.dark : styles.light}`}
	`17`	+ className={`${styles.modalOverlay} ${styles.dangerOverlay} ${isDarkMode ? styles.dark : styles.light}`}
`18`	`18`	`onClick={handleOverlayClick}`
`19`	`19`	`>`
`20`	`20`	`<div className={styles.modalContent}>`