refactor: replace purple accent color with light blue theme and beautify Open Project modal

src/components/ChatBox.css

@@ -15,7 +15,8 @@
 .chatbox-header {
   display: flex;
   align-items: center;
-  justify-content: space-between; /* left title, right actions */
+  justify-content: space-between;
+  /* left title, right actions */
   background-color: #3a3a3a;
   height: 40px;
   border-bottom: 1px solid #4a4a4a;
@@ -229,7 +230,7 @@
 .abort-link {
   background: none !important;
   border: none !important;
-  color: #7b68ee !important;
+  color: #5a9fd4 !important;
   text-decoration: underline !important;
   cursor: pointer !important;
   padding: 0 !important;
@@ -288,14 +289,12 @@
 
 /* Processing wave animation */
 .processing-wave {
-  background: linear-gradient(
+  background: linear-gradient(90deg,
-    90deg,
       rgba(135, 206, 250, 0.5) 0%,
       rgba(135, 206, 250, 0.8) 25%,
       rgb(171, 218, 250) 50%,
       rgba(135, 206, 250, 0.8) 75%,
-    rgba(135, 206, 250, 0.5) 100%
+      rgba(135, 206, 250, 0.5) 100%);
-  );
   background-size: 200% 100%;
   background-clip: text;
   -webkit-background-clip: text;
@@ -307,6 +306,7 @@
   0% {
     background-position: 200% 0%;
   }
+
   100% {
     background-position: -200% 0%;
   }

src/components/Toolbar.css

@@ -9,7 +9,9 @@
   border-bottom: 1px solid #3a3a3a;
 }
 
-.toolbar-left, .toolbar-center, .toolbar-right {
+.toolbar-left,
+.toolbar-center,
+.toolbar-right {
   display: flex;
   align-items: center;
 }
@@ -44,7 +46,8 @@
   border: none;
   color: #e0e0e0;
   margin: 0 5px;
-  padding: 5px;
+  width: 28px;
+  height: 28px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -63,6 +66,11 @@
   cursor: not-allowed;
 }
 
+.toolbar button:active {
+  background-color: #5a5a5a;
+  transform: scale(0.95);
+}
+
 .record-btn {
   color: #ff4444;
 }

src/components/common/FileImportModal.css

@@ -30,6 +30,7 @@
     opacity: 0;
     transform: scale(0.95) translateY(-10px);
   }
+
   to {
     opacity: 1;
     transform: scale(1) translateY(0);
@@ -41,6 +42,7 @@
     opacity: 1;
     transform: scale(1) translateY(0);
   }
+
   to {
     opacity: 0;
     transform: scale(0.95) translateY(-10px);
@@ -48,8 +50,13 @@
 }
 
 @keyframes fileImportOverlayFadeOut {
-  from { opacity: 1; }
+  from {
-  to { opacity: 0; }
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
 }
 
 .file-import-overlay-closing {
@@ -106,12 +113,12 @@
 }
 
 .file-import-drop-zone:hover {
-  border-color: #7b68ee;
+  border-color: #5a9fd4;
   background-color: rgba(123, 104, 238, 0.05);
 }
 
 .file-import-drop-zone.drag-over {
-  border-color: #7b68ee;
+  border-color: #5a9fd4;
   background-color: rgba(123, 104, 238, 0.1);
   transform: scale(1.02);
 }

src/components/common/OpenProjectModal.css

@@ -69,7 +69,6 @@
   justify-content: space-between;
   align-items: center;
   padding: 20px;
-  border-bottom: 1px solid #3a3a3a;
   background-color: #252525;
   flex-shrink: 0;
 }
@@ -104,7 +103,6 @@
 .open-project-filter {
   padding: 10px 12px;
   background-color: #252525;
-  border-bottom: 1px solid #3a3a3a;
   flex-shrink: 0;
 }
 
@@ -127,7 +125,7 @@
 }
 
 .open-project-filter input:focus {
-  border-color: #7b68ee;
+  border-color: #5a9fd4;
 }
 
 .open-project-filter input::placeholder {
@@ -137,8 +135,7 @@
 /* View toggle (Projects / Trash) */
 .open-project-view-toggle {
   display: flex;
-  border: 1px solid #3a3a3a;
+  border-radius: 6px;
-  border-radius: 4px;
   overflow: hidden;
   flex-shrink: 0;
 }
@@ -147,14 +144,11 @@
   background-color: #1e1e1e;
   color: #999;
   border: none;
-  padding: 5px 12px;
+  padding: 8px 20px;
-  font-size: 12px;
+  font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
-  transition: background-color 0.1s, color 0.1s;
+  transition: all 0.2s ease;
-}
-
-.open-project-toggle-btn:not(:last-child) {
-  border-right: 1px solid #3a3a3a;
 }
 
 .open-project-toggle-btn:hover {
@@ -162,7 +156,7 @@
 }
 
 .open-project-toggle-btn.active {
-  background-color: #7b68ee;
+  background-color: #5a9fd4;
   color: #fff;
 }
 
@@ -170,7 +164,6 @@
 .open-project-trash-hint {
   padding: 6px 12px;
   background-color: #3a2a1a;
-  border-bottom: 1px solid #5a3a1a;
   color: #d4a054;
   font-size: 11px;
   flex-shrink: 0;
@@ -182,7 +175,6 @@
   align-items: center;
   padding: 6px 12px;
   background-color: #252525;
-  border-bottom: 1px solid #3a3a3a;
   font-size: 11px;
   color: #999;
   text-transform: uppercase;
@@ -205,7 +197,7 @@
 }
 
 .open-project-sort-col.active {
-  color: #7b68ee;
+  color: #5a9fd4;
 }
 
 .open-project-sort-col-name {
@@ -230,7 +222,6 @@
   display: flex;
   align-items: center;
   padding: 10px 12px;
-  border-bottom: 1px solid #333;
   cursor: pointer;
   transition: background-color 0.1s;
 }
@@ -272,32 +263,37 @@
 
 /* Open button */
 .open-project-item-open-btn {
-  background-color: #7b68ee;
+  background-color: #5a9fd4;
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
-  padding: 5px 14px;
+  padding: 8px 20px;
-  font-size: 12px;
+  font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 .open-project-item-open-btn:hover {
-  background-color: #6a58d6;
+  background-color: #4a8fc4;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(90, 159, 212, 0.3);
 }
 
 /* Icon action buttons (duplicate, delete, restore, perm-delete) */
 .open-project-item-action-btn {
   background: transparent;
   border: 1px solid #555;
-  border-radius: 4px;
+  border-radius: 6px;
   color: #bbb;
-  padding: 5px 8px;
+  padding: 8px 12px;
-  font-size: 12px;
+  font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.1s, color 0.1s, border-color 0.1s;
+  transition: all 0.2s ease;
 }
 
 .open-project-item-action-btn:hover {
@@ -306,12 +302,18 @@
   border-color: #777;
 }
 
-.open-project-item-permdelete-btn:hover {
+.open-project-item-delete-btn:hover {
   background-color: #5a2020;
   color: #ff6666;
   border-color: #ff4444;
 }
 
+.open-project-item-permdelete-btn:hover {
+  background-color: #7a1010;
+  color: #ff4444;
+  border-color: #ff2222;
+}
+
 .open-project-item-restore-btn:hover {
   background-color: #1a3a2a;
   color: #66cc88;

src/components/piano-roll/PianoRoll.css

@@ -1,6 +1,6 @@
 /* For the piano roll (to be implemented later) */
 .piano-roll {
-  background-color: #7b68ee;
+  background-color: #5a9fd4;
   height: 100%;
 }
 
@@ -18,7 +18,8 @@
 /* Piano notes */
 .piano-note {
   position: absolute;
-  background-color: #ff5555; /* Red color */
+  background-color: #ff5555;
+  /* Red color */
   border: 1px solid #999;
   border-radius: 2px;
   z-index: 10;
@@ -72,7 +73,8 @@
   padding: 0 10px;
   user-select: none;
   position: relative;
-  z-index: 100; /* Ensure toolbar and its dropdowns appear above piano roll content */
+  z-index: 100;
+  /* Ensure toolbar and its dropdowns appear above piano roll content */
 }
 
 /* Override pointer-events for piano roll toolbar sections */
@@ -138,7 +140,8 @@
   position: sticky;
   top: 0;
   z-index: 20;
-  cursor: pointer; /* Show pointer cursor on hover to indicate interactivity */
+  cursor: pointer;
+  /* Show pointer cursor on hover to indicate interactivity */
 }
 
 .piano-grid-header:hover {
@@ -153,8 +156,10 @@
 
 .piano-roll-body {
   display: flex;
-  min-height: calc(8 * 12 * var(--region-piano-key-height)); /* 8 octaves * 12 notes * piano key height */
+  min-height: calc(8 * 12 * var(--region-piano-key-height));
-  width: calc(var(--max-number-of-bars) * var(--region-grid-bar-width) + var(--region-piano-key-width)); /* 32 bars * 160px width + piano keys width */
+  /* 8 octaves * 12 notes * piano key height */
+  width: calc(var(--max-number-of-bars) * var(--region-grid-bar-width) + var(--region-piano-key-width));
+  /* 32 bars * 160px width + piano keys width */
 }
 
 .piano-keys-container {

src/components/track/Track.css

@@ -2,13 +2,13 @@
 .track-grid {
   display: block;
   height: 120px;
-  min-width: calc(var(--max-number-of-bars) * var(--track-grid-bar-width)); /* 32 bars * --track-grid-bar-width */
+  min-width: calc(var(--max-number-of-bars) * var(--track-grid-bar-width));
+  /* 32 bars * --track-grid-bar-width */
   background-size: var(--track-grid-bar-width) 120px;
   background-image:
     /* Vertical lines for bars */
     linear-gradient(to right,
-      transparent calc(var(--track-grid-bar-width) - 1px), #3a3a3a calc(var(--track-grid-bar-width) - 1px), #3a3a3a var(--track-grid-bar-width)
+      transparent calc(var(--track-grid-bar-width) - 1px), #3a3a3a calc(var(--track-grid-bar-width) - 1px), #3a3a3a var(--track-grid-bar-width));
-    );
   position: relative;
   border-bottom: 1px solid #3a3a3a;
 }
@@ -73,11 +73,11 @@
 
 /* Drag and drop styles */
 .track-info.drag-over {
-  border-top: 2px solid #7b68ee;
+  border-top: 2px solid #5a9fd4;
 }
 
 .track-grid.drag-over {
-  border-top: 2px solid #7b68ee;
+  border-top: 2px solid #5a9fd4;
 }
 
 /* Dragging state */
@@ -103,7 +103,7 @@
 }
 
 .track-name:hover {
-  color: #7b68ee;
+  color: #5a9fd4;
 }
 
 .track-name:hover::before {
@@ -200,11 +200,13 @@
 }
 
 .pan-controls button.solo.active {
-  background: #c8a400; /* yellow */
+  background: #c8a400;
+  /* yellow */
   color: #101010;
 }
 
 .pan-controls button.mute.active {
-  background: #d32f2f; /* red */
+  background: #d32f2f;
+  /* red */
   color: #ffffff;
 }

src/index.css

@@ -19,7 +19,8 @@
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   height: 100%;
   width: 100%;
   overflow: hidden;
@@ -49,15 +50,6 @@ button {
   transition: border-color 0.25s;
 }
 
-button:hover {
-  border-color: #646cff;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 2px auto rgba(100, 108, 255, 0.5);
-}
-
 textarea {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 12px;
@@ -71,7 +63,7 @@ input[type="range"] {
   height: 4px;
   border-radius: 2px;
   outline: none;
-  }
+}
 
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;

src/styles/shared.css

@@ -1,6 +1,7 @@
 /* Shared toolbar layout classes (used by Toolbar and PianoRollToolbar) */
 
-.toolbar-left, .toolbar-right {
+.toolbar-left,
+.toolbar-right {
   display: flex;
   align-items: center;
   z-index: 1;
@@ -119,7 +120,15 @@
 }
 
 @keyframes buttonBlink {
-  0% { background-color: #333; }
+  0% {
-  50% { background-color: #555; }
+    background-color: #333;
-  100% { background-color: #333; }
+  }
+
+  50% {
+    background-color: #555;
+  }
+
+  100% {
+    background-color: #333;
+  }
 }