open select on key down, tone down primary color usage

src/codec-components/EditCodec/CAccountId.tsx

@@ -80,9 +80,15 @@ export const CAccountId: EditAccountId = ({ value, onValueChanged }) => {
     )
   }
 
+  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"

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"

src/index.css

@@ -56,7 +56,7 @@ dialog {
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 95%;
-    --ring: 328 100% 45%;
+    --ring: 240 3.8% 46.1%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -85,7 +85,7 @@ dialog {
     --destructive-foreground: 0 85.7% 97.3%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 6.9%;
-    --ring: 328 100% 45%;
+    --ring: 240 5% 64.9%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

src/pages/Explorer/FinalizingTable.tsx

@@ -34,7 +34,7 @@ export const Row: FC<
 
 export const Root: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="w-full px-3 py-2 border bg-card text-card-foreground">
+    <div className="w-full px-3 py-2 border bg-card text-card-foreground rounded">
       {children}
     </div>
   )

src/pages/Extrinsics/EditMode.tsx

@@ -54,7 +54,7 @@ export const EditMode: React.FC<{
             >
               <div className="relative">
                 {!value.value ? (
-                  <div className="text-sm text-polkadot-500">(Empty)</div>
+                  <div className="text-sm text-foreground/50 py-1">(Empty)</div>
                 ) : (
                   <TreeCodec {...props} />
                 )}

src/pages/Extrinsics/SubmitTx/SubmitTx.tsx

@@ -20,7 +20,7 @@ export const ExtrinsicModal: React.FC<{
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <ActionButton disabled={callData == null}>
+        <ActionButton disabled={callData == null || callData.length === 0}>
           Submit extrinsic
         </ActionButton>
       </DialogTrigger>

src/pages/Header.tsx

@@ -40,7 +40,8 @@ const NavLink: FC<PropsWithChildren<{ to: string }>> = ({ to, children }) => {
     <Link
       to={to}
       className={twMerge(
-        "transition-colors text-foreground/75 hover:text-foreground cursor-pointer px-3 py-1",
+        "transition-colors text-foreground/75 hover:text-foreground cursor-pointer px-3 py-1 rounded",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         active && "text-foreground font-bold",
       )}
     >