Enh(viewer): Styling improvements I

Author: klieret

codeclash/viewer/static/css/style.css

@@ -1,39 +1,58 @@
-/* CodeClash Trajectory Viewer - Modern CSS with Dark Mode */
+/* CodeClash Trajectory Viewer - Bootstrap-enhanced Professional Design */
 
 :root {
-  /* Light theme colors */
+  /* Professional color palette - aligned with Bootstrap */
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+
+  /* Custom theme colors */
   --bg-primary: #ffffff;
   --bg-secondary: #f8f9fa;
   --bg-tertiary: #e9ecef;
   --text-primary: #212529;
   --text-secondary: #6c757d;
   --text-muted: #adb5bd;
   --border-color: #dee2e6;
-  --accent-color: #0d6efd;
+  --accent-color: var(--bs-primary);
   --accent-hover: #0b5ed7;
-  --success-color: #198754;
-  --warning-color: #fd7e14;
-  --danger-color: #dc3545;
+  --success-color: var(--bs-success);
+  --warning-color: var(--bs-warning);
+  --danger-color: var(--bs-danger);
   --code-bg: #f8f9fa;
   --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }
 
 [data-theme="dark"] {
-  /* Dark theme colors */
-  --bg-primary: #1a1a1a;
-  --bg-secondary: #2d2d2d;
-  --bg-tertiary: #404040;
+  /* Dark theme colors - Bootstrap compatible */
+  --bs-primary: #6ea8fe;
+  --bs-secondary: #6c757d;
+  --bs-success: #75b798;
+  --bs-info: #6edff6;
+  --bs-warning: #ffda6a;
+  --bs-danger: #ea868f;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+
+  --bg-primary: #212529;
+  --bg-secondary: #343a40;
+  --bg-tertiary: #495057;
   --text-primary: #ffffff;
-  --text-secondary: #b0b0b0;
-  --text-muted: #808080;
-  --border-color: #404040;
-  --accent-color: #4dabf7;
-  --accent-hover: #339af0;
-  --success-color: #51cf66;
-  --warning-color: #ff922b;
-  --danger-color: #ff6b6b;
-  --code-bg: #2d2d2d;
+  --text-secondary: #adb5bd;
+  --text-muted: #6c757d;
+  --border-color: #495057;
+  --accent-color: var(--bs-primary);
+  --accent-hover: #5a9cfc;
+  --success-color: var(--bs-success);
+  --warning-color: var(--bs-warning);
+  --danger-color: var(--bs-danger);
+  --code-bg: #343a40;
   --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
   --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
 }
@@ -46,23 +65,36 @@
 }
 
 body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
-  line-height: 1.6;
+  font-family: var(
+    --bs-font-sans-serif,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Helvetica Neue",
+    Arial,
+    sans-serif
+  );
+  line-height: 1.5;
   color: var(--text-primary);
   background-color: var(--bg-primary);
-  transition: all 0.3s ease;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out;
+  font-size: 1rem;
+  font-weight: 400;
 }
 
-/* Header */
+/* Header - Bootstrap enhanced */
 .header {
   background-color: var(--bg-secondary);
   border-bottom: 1px solid var(--border-color);
   padding: 1rem 0;
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: 1000;
   box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
 }
 
 .header-content {
@@ -101,24 +133,12 @@ body {
   font-size: 0.875rem;
 }
 
+/* Override Bootstrap button styles for consistency */
 .pick-game-button {
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: 0.375rem;
-  background-color: var(--accent-color);
-  color: white;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
   min-width: 120px;
 }
 
-.pick-game-button:hover {
-  background-color: var(--accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow);
-}
+/* Let Bootstrap handle hover states */
 
 .pick-game-button kbd {
   background-color: rgba(255, 255, 255, 0.2);
@@ -131,46 +151,24 @@ body {
   color: rgba(255, 255, 255, 0.9);
 }
 
+/* Bootstrap handles most styling */
 .pick-game-new-tab-button {
-  padding: 0.5rem;
-  border: 1px solid var(--border-color);
-  border-radius: 0.375rem;
-  background-color: var(--bg-tertiary);
-  color: var(--accent-color);
-  font-size: 0.9rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
   margin-left: 0.5rem;
   min-width: 40px;
 }
 
-.pick-game-new-tab-button:hover {
-  background-color: var(--accent-color);
-  color: white;
-  transform: translateY(-1px);
-  box-shadow: var(--shadow);
-}
+/* Let Bootstrap handle hover states */
 
+/* Bootstrap handles most styling for theme toggle */
 #theme-toggle {
-  background-color: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.375rem;
-  padding: 0.5rem;
-  cursor: pointer;
   font-size: 1.25rem;
-  color: var(--text-primary);
-  transition: all 0.2s ease;
 }
 
-#theme-toggle:hover {
-  background-color: var(--accent-color);
-  color: white;
-}
+/* Let Bootstrap handle hover states */
 
-/* Main content */
+/* Main content - Bootstrap enhanced */
 .main-content {
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
   padding: 2rem 1rem;
 }
@@ -248,13 +246,10 @@ body {
   margin-bottom: 2rem;
 }
 
+/* Results Table - Bootstrap enhanced */
 .results-table {
-  width: 100%;
-  border-collapse: collapse;
-  background-color: var(--bg-secondary);
   border-radius: 0.5rem;
   overflow: hidden;
-  border: 1px solid var(--border-color);
   box-shadow: var(--shadow);
 }
 
@@ -352,14 +347,15 @@ body {
   line-height: 1.5;
 }
 
-/* Foldouts */
+/* Foldouts - Professional styling */
 .foldout {
   border: 1px solid var(--border-color);
   border-radius: 0.5rem;
   margin-bottom: 1rem;
   background-color: var(--bg-secondary);
   overflow: hidden;
   transition: all 0.2s ease;
+  box-shadow: var(--shadow);
 }
 
 /* Remove any browser default styling that might add blue lines */
@@ -803,12 +799,80 @@ details summary {
   }
 }
 
-/* Smooth transitions */
+/* Bootstrap Integration & Dark Mode Support */
+[data-theme="dark"] .btn {
+  --bs-btn-color: var(--text-primary);
+  --bs-btn-bg: var(--bg-secondary);
+  --bs-btn-border-color: var(--border-color);
+}
+
+[data-theme="dark"] .btn-primary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--bs-primary);
+  --bs-btn-border-color: var(--bs-primary);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--accent-hover);
+  --bs-btn-hover-border-color: var(--accent-hover);
+}
+
+[data-theme="dark"] .btn-outline-primary {
+  --bs-btn-color: var(--bs-primary);
+  --bs-btn-border-color: var(--bs-primary);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-primary);
+  --bs-btn-hover-border-color: var(--bs-primary);
+}
+
+[data-theme="dark"] .btn-outline-secondary {
+  --bs-btn-color: var(--text-secondary);
+  --bs-btn-border-color: var(--border-color);
+  --bs-btn-hover-color: var(--text-primary);
+  --bs-btn-hover-bg: var(--bg-tertiary);
+  --bs-btn-hover-border-color: var(--border-color);
+}
+
+[data-theme="dark"] .table {
+  --bs-table-color: var(--text-primary);
+  --bs-table-bg: var(--bg-primary);
+  --bs-table-border-color: var(--border-color);
+  --bs-table-striped-bg: var(--bg-secondary);
+  --bs-table-hover-bg: var(--bg-tertiary);
+}
+
+[data-theme="dark"] .form-control {
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  border-color: var(--border-color);
+}
+
+[data-theme="dark"] .form-control:focus {
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
+}
+
+/* Professional subtle animations */
+.btn,
+.foldout summary,
+.nav-to-round-btn {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+}
+
+.foldout:hover {
+  transform: translateY(-1px);
+}
+
+/* Smooth transitions for theme changes */
 * {
   transition:
-    color 0.3s ease,
-    background-color 0.3s ease,
-    border-color 0.3s ease;
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Focus styles for accessibility */

codeclash/viewer/static/js/app.js

@@ -16,10 +16,10 @@ function setTheme(theme) {
   const themeIcon = themeToggle.querySelector(".theme-icon");
 
   if (theme === "dark") {
-    themeIcon.textContent = "☀️";
+    themeIcon.innerHTML = '<i class="bi bi-sun"></i>';
     themeToggle.setAttribute("aria-label", "Switch to light mode");
   } else {
-    themeIcon.textContent = "🌙";
+    themeIcon.innerHTML = '<i class="bi bi-moon"></i>';
     themeToggle.setAttribute("aria-label", "Switch to dark mode");
   }
 }

codeclash/viewer/static/js/picker.js

@@ -119,7 +119,7 @@ function toggleFolder(folderPath) {
   if (isCollapsed) {
     // Expand folder - show all children
     folderRow.classList.remove("collapsed");
-    if (collapseIcon) collapseIcon.textContent = "📁";
+    if (collapseIcon) collapseIcon.innerHTML = '<i class="bi bi-folder"></i>';
 
     // Show all descendant rows
     const allRows = document.querySelectorAll(".game-row");
@@ -141,7 +141,8 @@ function toggleFolder(folderPath) {
   } else {
     // Collapse folder - hide all children
     folderRow.classList.add("collapsed");
-    if (collapseIcon) collapseIcon.textContent = "📂";
+    if (collapseIcon)
+      collapseIcon.innerHTML = '<i class="bi bi-folder-open"></i>';
 
     hideChildrenOfFolder(folderPath);
   }

codeclash/viewer/templates/includes/analysis.html

@@ -1,10 +1,10 @@
 <!-- Analysis Section -->
 <section class="analysis-section">
-    <h2>📊 Analysis</h2>
+    <h2><i class="bi bi-graph-up"></i> Analysis</h2>
 
     <!-- Line Counting Analysis -->
     <details class="foldout">
-        <summary>📈 Line Counting Analysis</summary>
+        <summary><i class="bi bi-graph-up-arrow"></i> Line Counting Analysis</summary>
         <div class="log-content">
             {% if analysis_data and analysis_data.all_files %}
                 <div class="line-analysis-container">

codeclash/viewer/templates/includes/folder_path.html

@@ -1,17 +1,17 @@
 <!-- Current Folder Path -->
 <section class="folder-path-section">
     <div class="folder-path-container">
-        <h3>📁 Current Folder:</h3>
+        <h3><i class="bi bi-folder"></i> Current Folder:</h3>
         <div class="path-display">
             <code class="folder-path">{{ selected_folder_path }}</code>
-            <button class="copy-path-btn" data-path="{{ selected_folder_path }}" title="Copy folder path">
-                📋 Copy path
+            <button class="btn btn-outline-primary btn-sm copy-path-btn" data-path="{{ selected_folder_path }}" title="Copy folder path">
+                <i class="bi bi-clipboard"></i> Copy path
             </button>
-            <button class="move-rename-btn" onclick="showMoveDialog('{{ selected_folder_path }}')" title="Move/rename this experiment">
-                📁 Move/Rename
+            <button class="btn btn-outline-warning btn-sm move-rename-btn" onclick="showMoveDialog('{{ selected_folder_path }}')" title="Move/rename this experiment">
+                <i class="bi bi-folder-symlink"></i> Move/Rename
             </button>
-            <button class="delete-experiment-btn" data-folder-path="{{ selected_folder_path }}" title="Delete this experiment">
-                🗑️ Delete
+            <button class="btn btn-outline-danger btn-sm delete-experiment-btn" data-folder-path="{{ selected_folder_path }}" title="Delete this experiment">
+                <i class="bi bi-trash"></i> Delete
             </button>
         </div>
     </div>