From 4af67997f8a61c22a0ed412cbf99ac507b282c2a Mon Sep 17 00:00:00 2001
From: Victor Oliva <olivarra1@gmail.com>
Date: Sat, 9 Nov 2024 11:52:51 +0700
Subject: [PATCH] open select on key down, tone down primary color usage

---
 src/codec-components/EditCodec/CAccountId.tsx |  8 +++++++-
 src/components/ActionButton.tsx               |  4 ++--
 src/components/BinaryEditButton.tsx           |  9 +++------
 src/components/ButtonGroup.tsx                |  4 ++--
 src/components/Select.tsx                     | 10 ++++++++--
 src/index.css                                 |  4 ++--
 src/pages/Explorer/FinalizingTable.tsx        |  2 +-
 src/pages/Extrinsics/EditMode.tsx             |  2 +-
 src/pages/Extrinsics/SubmitTx/SubmitTx.tsx    |  2 +-
 src/pages/Header.tsx                          |  3 ++-
 10 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/codec-components/EditCodec/CAccountId.tsx b/src/codec-components/EditCodec/CAccountId.tsx
index b288ebf..ae5fbf3 100644
--- a/src/codec-components/EditCodec/CAccountId.tsx
+++ b/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"
diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
index dfad5aa..bb81449 100644
--- a/src/components/ActionButton.tsx
+++ b/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,
     )}
diff --git a/src/components/BinaryEditButton.tsx b/src/components/BinaryEditButton.tsx
index 7248bac..37692ba 100644
--- a/src/components/BinaryEditButton.tsx
+++ b/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>}
     </>
   )
diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
index 6a047b9..0754970 100644
--- a/src/components/ButtonGroup.tsx
+++ b/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}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 993cef9..c341911 100644
--- a/src/components/Select.tsx
+++ b/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"
diff --git a/src/index.css b/src/index.css
index 2629dff..6b0a42a 100644
--- a/src/index.css
+++ b/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%;
diff --git a/src/pages/Explorer/FinalizingTable.tsx b/src/pages/Explorer/FinalizingTable.tsx
index 550eb1c..99b20cc 100644
--- a/src/pages/Explorer/FinalizingTable.tsx
+++ b/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>
   )
diff --git a/src/pages/Extrinsics/EditMode.tsx b/src/pages/Extrinsics/EditMode.tsx
index 59eaae8..b22117d 100644
--- a/src/pages/Extrinsics/EditMode.tsx
+++ b/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} />
                 )}
diff --git a/src/pages/Extrinsics/SubmitTx/SubmitTx.tsx b/src/pages/Extrinsics/SubmitTx/SubmitTx.tsx
index 22e8118..239b863 100644
--- a/src/pages/Extrinsics/SubmitTx/SubmitTx.tsx
+++ b/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>
diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx
index 347c9b6..868177d 100644
--- a/src/pages/Header.tsx
+++ b/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",
       )}
     >