ui work

src/App.css

@@ -797,17 +797,46 @@ button:active {
   transform: translateX(-50%);
   z-index: 2000;
   background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(198, 202, 224, 0.3);
   padding: 12px 30px;
   cursor: pointer;
   transition: all 0.3s ease;
+  outline: none;
 }
 
 .select-screen-button:hover {
   background: rgba(198, 202, 224, 0.1);
   color: white;
 }
 
+.select-screen-button .effect-name {
+  outline: none;
+}
+
+.select-screen-button:focus {
+  outline: none;
+}
+
+.select-screen-button .effect-name:focus {
+  outline: none;
+}
+
+.select-screen-button .chevron {
+  display: inline-block;
+  margin-left: 8px;
+  font-size: 14px;
+  opacity: 0.7;
+  vertical-align: middle;
+  line-height: 1;
+  position: relative;
+  top: -2px; /* Adjusted for better vertical centering */
+  transform: translateY(-1px); /* Added transform for fine-tuned centering */
+  transition: opacity 0.3s ease;
+}
+
+.select-screen-button:hover .chevron {
+  opacity: 1;
+}
+
 * {
   cursor: none !important;
 }

src/ParamFader.js

@@ -10,6 +10,14 @@ const ParamFader = ({ synthName, param, faderId, gestureState }) => {
   const currentValueRef = useRef(value);
   const initialValueRef = useRef(null);
 
+  // Helper function to convert camelCase to Title Case
+  const toTitleCase = (str) => {
+    // First split the camelCase string into words
+    const result = str.replace(/([A-Z])/g, ' $1');
+    // Convert first character to uppercase and trim any extra spaces
+    return result.charAt(0).toUpperCase() + result.slice(1).trim();
+  };
+
   // Handle initial value and external value changes
   useEffect(() => {
     if (value !== currentValueRef.current) {
@@ -75,7 +83,9 @@ const ParamFader = ({ synthName, param, faderId, gestureState }) => {
           style={{ '--fader-scale': `${faderPosition / 100}` }}
         />
       </div>
-      <div className={`fader-label ${isDragging ? 'dragging' : ''}`}>{name}</div>
+      <div className={`fader-label ${isDragging ? 'dragging' : ''}`}>
+        {toTitleCase(name)}
+      </div>
     </div>
   );
 };

src/VisualizationMode.js

@@ -55,6 +55,7 @@ function VisualizationMode({ synths, currentSynth, switchSynth, nextSynth, previ
       <button className="select-screen-button" onClick={onOpenEffectSelect}>
         <div className="effect-name">
           {currentSynth ? prettifySynthName(currentSynth.name) : 'No Effect Selected'}
+          <span className="chevron">⌵</span>
         </div>
       </button>