open select on key down, tone down primary color usage

src/components/ActionButton.tsx

@@ -9,8 +9,8 @@ export const ActionButton = forwardRef<
     {...props}
     ref={ref}
     className={twMerge(
-      "text-primary-foreground bg-primary/90 px-3 py-1",
-      "cursor-pointer select-none hover:bg-primary/100",
+      "text-accent-foreground bg-accent/90 px-3 py-1",
+      "cursor-pointer select-none hover:bg-accent/100",
       props.disabled && "opacity-50 pointer-events-none",
       props.className,
     )}

src/components/BinaryEditButton.tsx

@@ -12,6 +12,7 @@ import { twMerge } from "tailwind-merge"
 // @ts-expect-error save-as typings not available
 import { saveAs } from "save-as"
 import { BinaryEdit } from "./Icons"
+import { ActionButton } from "./ActionButton"
 
 export interface BinaryEditProps {
   initialValue?: Uint8Array
@@ -174,13 +175,9 @@ const BinaryEditModalContent: FC<
           placeholder={placeholder}
         />
       </div>
-      <button
-        className={twMerge("border rounded p-1", !isValid && "opacity-50")}
-        onClick={submit}
-        disabled={!isValid}
-      >
+      <ActionButton onClick={submit} disabled={!isValid}>
         OK
-      </button>
+      </ActionButton>
       {error && <p className="text-red-600">{error}</p>}
     </>
   )

src/components/ButtonGroup.tsx

@@ -17,7 +17,7 @@ export const ButtonGroup: FC<{
       type="single"
       value={value}
       onValueChange={(v) => v && onValueChange(v)}
-      className="inline-flex border border-primary bg-background text-foreground"
+      className="inline-flex border border-accent bg-background text-foreground"
     >
       {items.map(({ value, content, disabled }) => (
         <ToggleGroup.Item
@@ -26,7 +26,7 @@ export const ButtonGroup: FC<{
           className={twMerge(
             "text-secondary-foreground px-3 py-1",
             "hover:text-polkadot-500",
-            "data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+            "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
             disabled && "opacity-50 pointer-events-none",
           )}
           disabled={disabled}

src/components/Select.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/utils/cn"
 import { Check, ChevronsUpDown } from "lucide-react"
-import { useState } from "react"
+import React, { useState } from "react"
 import { Button } from "./ui/button"
 import {
   Command,
@@ -22,9 +22,15 @@ export const SearchableSelect = <T,>({
 }) => {
   const [open, setOpen] = useState(false)
 
+  const onTriggerKeyDown = (evt: React.KeyboardEvent) => {
+    if (evt.key.length === 1) {
+      setOpen(true)
+    }
+  }
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
+      <PopoverTrigger asChild onKeyDown={onTriggerKeyDown}>
         <Button
           variant="outline"
           role="combobox"