Add dark mode colors

web/components/widgets/hide-profile-button.tsx

@@ -77,7 +77,7 @@ export function HideProfileButton(props: HideProfileButtonProps) {
     >
       <button
         className={clsx(
-          'rounded-full p-1 hover:bg-canvas-200 shadow focus:outline-none',
+          'border border-canvas-200 rounded-md p-1 hover:bg-canvas-200 focus:outline-none',
           className,
         )}
         disabled={submitting}

web/components/widgets/input.tsx

@@ -7,10 +7,11 @@ export const Input = forwardRef(
   (
     props: {
       error?: boolean
+      searchIcon?: boolean
     } & ComponentPropsWithoutRef<'input'>,
     ref: Ref<HTMLInputElement>,
   ) => {
-    const {error, className, ...rest} = props
+    const {error, searchIcon, className, ...rest} = props
 
     return (
       <Row
@@ -22,7 +23,7 @@ export const Input = forwardRef(
           className,
         )}
       >
-        <span className="search-icon">🔍</span>
+        {searchIcon && <span className="search-icon">🔍</span>}
         <input
           ref={ref}
           step={0.001} // default to 3 decimal places
@@ -30,7 +31,7 @@ export const Input = forwardRef(
             'bg-canvas-50 invalid:border-error invalid:text-error  invalid:placeholder-rose-700 focus:outline-none focus:ring-1 disabled:cursor-not-allowed md:text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0',
             error
               ? 'border-error text-error focus:border-error focus:ring-error placeholder-rose-700' // matches invalid: styles
-              : '',
+              : 'border-transparent focus:border-transparent focus:ring-transparent',
             className,
           )}
           {...rest}

web/components/widgets/searchable-select.tsx

@@ -64,6 +64,7 @@ export function SearchableSelect(props: {
                 onChange={(e: any) => setQuery(e.target.value)}
                 placeholder="Search..."
                 className="mb-2 w-full"
+                searchIcon
               />
               <div className="max-h-48 space-y-1 overflow-auto">
                 {filteredSuggestions.map((suggestion) => (

web/components/widgets/stat-box.tsx

@@ -39,7 +39,11 @@ export function StatBox(props: StatBoxProps) {
         className,
       )}
     >
-      <div className={clsx('font-semibold leading-none tracking-tight', sizeClass)}>{value}</div>
+      <div
+        className={clsx('font-semibold leading-none tracking-tight text-primary-800', sizeClass)}
+      >
+        {value}
+      </div>
       {label && <div className="text-ink-700 text-sm">{label}</div>}
       {children}
     </Card>