Improve styles.

Comfy-Org · Oct 14, 2024 · 7203535 · 7203535
1 parent fd17b83
commit 7203535
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 15 deletions.
diff --git a/src/renderer/screens/FirstTimeSetup.tsx b/src/renderer/screens/FirstTimeSetup.tsx
@@ -38,25 +38,38 @@ const FirstTimeSetup: React.FC<FirstTimeSetupProps> = ({ onComplete }) => {
   return (
     <div style={styles.container}>
       <h1 style={styles.title}>Install ComfyUI</h1>
-      <p style={styles.description}>
+      {!selectedPath && <p style={styles.description}>
         Please select a directory for where ComfyUI will store models, outputs, etc. If you already have a ComfyUI
         setup, you can select that to reuse the model files.
-      </p>
-      <button onClick={handleDirectorySelect} style={styles.selectButton}>
+      </p>}
+      {!selectedPath && <button onClick={handleDirectorySelect} style={styles.selectButton}>
         Select Directory
-      </button>
+      </button>}
       {selectedPath && (
         <div style={styles.pathDisplay}>
-          <p>{selectedPath}</p>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6" style={styles.folderIcon}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
+          </svg>
+
+          <p style={styles.pathText}>{selectedPath}</p>
+        </div>
+      )}
+      {selectedPath && (
+        <div style={styles.buttonContainer}>
+          <button
+            onClick={() => setSelectedPath('')}
+            style={styles.changePathButton}
+          >
+            Back
+          </button>
+          <button
+            onClick={handleInstall}
+            style={styles.installButton}
+          >
+            Install
+          </button>
         </div>
       )}
-      <button
-        onClick={handleInstall}
-        disabled={!selectedPath}
-        style={{ ...styles.button, ...(selectedPath ? styles.installButton : styles.disabledButton) }}
-      >
-        Install
-      </button>
     </div>
   );
 };
@@ -98,7 +111,7 @@ const styles = {
     borderRadius: '3px',
     border: 'none',
     fontWeight: 'bold',
-    backgroundColor: '#0078d4',
+    backgroundColor: '#60a5fa',
     color: '#ffffff',
   },
   pathDisplay: {
@@ -109,9 +122,29 @@ const styles = {
     borderRadius: '3px',
     width: '100%',
     color: '#d4d4d4',
-    textAlign: 'center'
+    textAlign: 'center' as const,
+    display: 'flex',
+    alignItems: 'center' as const,
+  },
+  folderIcon: {
+    width: '24px',
+    height: '24px',
+    marginRight: '10px',
+    flexShrink: 0,
+  },
+  pathText: {
+    margin: 0,
+    whiteSpace: 'nowrap' as const,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
   },
   installButton: {
+    padding: '10px 20px',
+    fontSize: '14px',
+    cursor: 'pointer',
+    borderRadius: '3px',
+    border: 'none',
+    fontWeight: 'bold',
     backgroundColor: '#4CAF50',
     color: '#ffffff',
   },
@@ -120,6 +153,21 @@ const styles = {
     color: '#a0a0a0',
     cursor: 'not-allowed',
   },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    gap: '10px',
+  },
+  changePathButton: {
+    backgroundColor: '#4d4d4d',
+    color: '#ffffff',
+    cursor: 'pointer',
+    padding: '10px 20px',
+    fontSize: '14px',
+    borderRadius: '3px',
+    border: 'none',
+    fontWeight: 'bold',
+  },
 };
 
 export default FirstTimeSetup;
diff --git a/src/renderer/screens/ProgressOverlay.tsx b/src/renderer/screens/ProgressOverlay.tsx
@@ -45,7 +45,7 @@ const logContainerStyle: React.CSSProperties = {
   fontFamily: "'Roboto Mono', monospace",
   fontSize: '14px',
   lineHeight: '1.5',
-  color: '#e0e0e0',
+  color: '#9198a1',
   boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
 };