From b286a4118f8ade64a6c37e4ff7676f3f723ec581 Mon Sep 17 00:00:00 2001
From: CJ Pais <cj@cjpais.com>
Date: Thu, 7 Aug 2025 17:03:25 -0700
Subject: [PATCH] tweak language slightly.

---
 src/components/settings/ShowOverlay.tsx | 17 ++++++-----
 src/components/ui/Dropdown.tsx          | 39 ++++++++++++++++++++-----
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/components/settings/ShowOverlay.tsx b/src/components/settings/ShowOverlay.tsx
index 3810852..e177e6d 100644
--- a/src/components/settings/ShowOverlay.tsx
+++ b/src/components/settings/ShowOverlay.tsx
@@ -10,22 +10,23 @@ interface ShowOverlayProps {
 }
 
 const overlayOptions = [
-  { value: "none", label: "Do not show" },
-  { value: "bottom", label: "On bottom" },
-  { value: "top", label: "On top" }
+  { value: "none", label: "None" },
+  { value: "bottom", label: "Bottom" },
+  { value: "top", label: "Top" },
 ];
 
 export const ShowOverlay: React.FC<ShowOverlayProps> = ({
   descriptionMode = "tooltip",
-  grouped = false
+  grouped = false,
 }) => {
   const { getSetting, updateSetting, isUpdating } = useSettings();
 
-  const selectedPosition = (getSetting("overlay_position") || "bottom") as OverlayPosition;
+  const selectedPosition = (getSetting("overlay_position") ||
+    "bottom") as OverlayPosition;
 
   return (
     <SettingContainer
-      title="Show Overlay"
+      title="Overlay Position"
       description="Display visual feedback overlay during recording and transcription"
       descriptionMode={descriptionMode}
       grouped={grouped}
@@ -33,7 +34,9 @@ export const ShowOverlay: React.FC<ShowOverlayProps> = ({
       <Dropdown
         options={overlayOptions}
         selectedValue={selectedPosition}
-        onSelect={(value) => updateSetting("overlay_position", value as OverlayPosition)}
+        onSelect={(value) =>
+          updateSetting("overlay_position", value as OverlayPosition)
+        }
         disabled={isUpdating("overlay_position")}
       />
     </SettingContainer>
diff --git a/src/components/ui/Dropdown.tsx b/src/components/ui/Dropdown.tsx
index 857d69e..5ffb010 100644
--- a/src/components/ui/Dropdown.tsx
+++ b/src/components/ui/Dropdown.tsx
@@ -7,6 +7,7 @@ export interface DropdownOption {
 
 interface DropdownProps {
   options: DropdownOption[];
+  className?: string;
   selectedValue: string | null;
   onSelect: (value: string) => void;
   placeholder?: string;
@@ -18,6 +19,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
   options,
   selectedValue,
   onSelect,
+  className = "",
   placeholder = "Select an option...",
   disabled = false,
   onRefresh,
@@ -27,7 +29,10 @@ export const Dropdown: React.FC<DropdownProps> = ({
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
         setIsOpen(false);
       }
     };
@@ -35,7 +40,9 @@ export const Dropdown: React.FC<DropdownProps> = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  const selectedOption = options.find(option => option.value === selectedValue);
+  const selectedOption = options.find(
+    (option) => option.value === selectedValue,
+  );
 
   const handleSelect = (value: string) => {
     onSelect(value);
@@ -49,31 +56,47 @@ export const Dropdown: React.FC<DropdownProps> = ({
   };
 
   return (
-    <div className="relative" ref={dropdownRef}>
+    <div className={`relative ${className}`} ref={dropdownRef}>
       <button
         type="button"
         className={`px-2 py-1 text-sm font-semibold bg-mid-gray/10 border border-mid-gray/80 rounded min-w-[200px] text-left flex items-center justify-between transition-all duration-150 ${
-          disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-logo-primary/10 cursor-pointer hover:border-logo-primary"
+          disabled
+            ? "opacity-50 cursor-not-allowed"
+            : "hover:bg-logo-primary/10 cursor-pointer hover:border-logo-primary"
         }`}
         onClick={handleToggle}
         disabled={disabled}
       >
         <span className="truncate">{selectedOption?.label || placeholder}</span>
-        <svg className={`w-4 h-4 ml-2 transition-transform duration-200 ${isOpen ? "transform rotate-180" : ""}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        <svg
+          className={`w-4 h-4 ml-2 transition-transform duration-200 ${isOpen ? "transform rotate-180" : ""}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
         </svg>
       </button>
       {isOpen && !disabled && (
         <div className="absolute top-full left-0 right-0 mt-1 bg-background border border-mid-gray/80 rounded shadow-lg z-50 max-h-60 overflow-y-auto">
           {options.length === 0 ? (
-            <div className="px-2 py-1 text-sm text-mid-gray">No options found</div>
+            <div className="px-2 py-1 text-sm text-mid-gray">
+              No options found
+            </div>
           ) : (
             options.map((option) => (
               <button
                 key={option.value}
                 type="button"
                 className={`w-full px-2 py-1 text-sm text-left hover:bg-logo-primary/10 transition-colors duration-150 ${
-                  selectedValue === option.value ? "bg-logo-primary/20 text-logo-primary font-semibold" : ""
+                  selectedValue === option.value
+                    ? "bg-logo-primary/20 text-logo-primary font-semibold"
+                    : ""
                 }`}
                 onClick={() => handleSelect(option.value)}
               >