improve contrast of inputs

2024-11-08 23:33:45 +07:00
parent 0bdb3d2bb0
commit af376fca84
10 changed files with 113 additions and 112 deletions
--- a/src/codec-components/EditCodec/CAccountId.tsx
+++ b/src/codec-components/EditCodec/CAccountId.tsx
@@ -87,7 +87,7 @@ export const CAccountId: EditAccountId = ({ value, onValueChanged }) => {
          variant="outline"
          role="combobox"
          aria-expanded={open}
-          className="flex w-64 justify-between overflow-hidden px-2"
+          className="flex w-64 justify-between overflow-hidden px-2 border border-border bg-input"
          forceSvgSize={false}
        >
          {value !== NOTIN ? (
--- a/src/codec-components/EditCodec/CStruct.tsx
+++ b/src/codec-components/EditCodec/CStruct.tsx
@@ -27,7 +27,7 @@ const StructItem: React.FC<{
    <li
      className={twMerge(
        "flex flex-col transition-all duration-300",
-        isActive && "bg-secondary/80",
+        isActive && "bg-secondary/20",
      )}
      onMouseEnter={() => setHovered({ id: pathStr, hover: true })}
      onMouseLeave={() => setHovered({ id: pathStr, hover: false })}
--- a/src/codec-components/EditCodec/Tree/ListComponents.tsx
+++ b/src/codec-components/EditCodec/Tree/ListComponents.tsx
@@ -103,7 +103,7 @@ export const ListDisplay: React.FC<
  )
 }

-const noop = () => { }
+const noop = () => {}
 const ListItem: FC<
  PropsWithChildren<{
    idx: number
@@ -124,106 +124,107 @@ const ListItem: FC<
  onZoom,
  onNavigate,
 }) => {
-    const [titleElement, setTitleElement] = useState<HTMLElement | null>(null)
-    const [binaryStatus, setBinaryStatus] = useState<BinaryStatus>()
-    const ref = useHeightObserver(drag?.onMeasure ?? noop)
-    const [isDragging, setIsDragging] = useState(false)
-    const isCollapsed = useStateObservable(isCollapsedRoot$(path))
+  const [titleElement, setTitleElement] = useState<HTMLElement | null>(null)
+  const [binaryStatus, setBinaryStatus] = useState<BinaryStatus>()
+  const ref = useHeightObserver(drag?.onMeasure ?? noop)
+  const [isDragging, setIsDragging] = useState(false)
+  const isCollapsed = useStateObservable(isCollapsedRoot$(path))

-    const startDrag = (evt: React.MouseEvent) => {
-      if (!drag || isDragging) return
+  const startDrag = (evt: React.MouseEvent) => {
+    if (!drag || isDragging) return

-      setIsDragging(true)
-      drag.onDragStart()
+    setIsDragging(true)
+    drag.onDragStart()

-      const start = evt.pageY
-      const mouseMoveHandler = (evt: MouseEvent) => {
-        drag.onDragMove(evt.pageY - start)
-      }
-      const mouseUpHandler = (evt: MouseEvent) => {
-        document.removeEventListener("mouseup", mouseUpHandler)
-        document.removeEventListener("mousemove", mouseMoveHandler)
-        drag.onDragEnd(evt.pageY - start)
-        setIsDragging(false)
-      }
-      document.addEventListener("mousemove", mouseMoveHandler)
-      document.addEventListener("mouseup", mouseUpHandler)
+    const start = evt.pageY
+    const mouseMoveHandler = (evt: MouseEvent) => {
+      drag.onDragMove(evt.pageY - start)
    }
-
-    return (
-      <div
-        ref={drag ? ref : undefined}
-        className={twMerge(
-          "hover:bg-polkadot-800 hover:bg-opacity-60 border-l border-polkadot-700 last:border-0 last:before:block last:before:absolute last:before:border-l last:before:h-4 last:before:border-polkadot-700",
-          drag?.rearranging && "relative",
-          isDragging && "none select-none z-10 bg-polkadot-800 bg-opacity-70 last:border-l last:before:border-0",
-          !isDragging && drag?.rearranging && "transition-transform",
-        )}
-        style={{
-          transform: drag?.translation
-            ? `translateY(${drag.translation}px)`
-            : undefined,
-        }}
-      >
-        <ItemTitle
-          path={path}
-          icon={TypeIcons.list}
-          titleRef={setTitleElement}
-          onZoom={onZoom}
-          onNavigate={onNavigate}
-          binaryStatus={binaryStatus}
-          className={isCollapsed ? "opacity-65" : ""}
-          actions={
-            <>
-              {onDelete && (
-                <button
-                  className={twMerge(
-                    "hover:text-polkadot-500",
-                    editable ? "cursor-pointer" : "opacity-50"
-                  )}
-                  disabled={!editable}
-                  onClick={onDelete}
-                >
-                  <Trash2 size={15} />
-                </button>
-              )}
-              {drag && (
-                <div
-                  className={twMerge(
-                    "hover:text-polkadot-500 -ml-1",
-                    editable
-                      ? isDragging
-                        ? "cursor-grabbing"
-                        : "cursor-grab"
-                      : "opacity-50"
-                  )}
-                  onMouseDown={startDrag}
-                >
-                  <GripVertical size={15} />
-                </div>
-              )}
-            </>
-          }
-        >
-          {idx + 1}
-        </ItemTitle>
-        <div
-          className={twMerge(
-            "pl-6 pb-1 transition-opacity",
-            isCollapsed && "opacity-65",
-          )}
-        >
-          <ChildrenProviders
-            titleElement={titleElement}
-            onValueChange={setBinaryStatus}
-          >
-            {children}
-          </ChildrenProviders>
-        </div>
-      </div>
-    )
+    const mouseUpHandler = (evt: MouseEvent) => {
+      document.removeEventListener("mouseup", mouseUpHandler)
+      document.removeEventListener("mousemove", mouseMoveHandler)
+      drag.onDragEnd(evt.pageY - start)
+      setIsDragging(false)
+    }
+    document.addEventListener("mousemove", mouseMoveHandler)
+    document.addEventListener("mouseup", mouseUpHandler)
  }

+  return (
+    <div
+      ref={drag ? ref : undefined}
+      className={twMerge(
+        "hover:bg-secondary/80 hover:bg-opacity-60 border-l border-polkadot-700 last:border-0 last:before:block last:before:absolute last:before:border-l last:before:h-4 last:before:border-polkadot-700",
+        drag?.rearranging && "relative",
+        isDragging &&
+          "none select-none z-10 bg-secondary/80 bg-opacity-70 last:border-l last:before:border-0",
+        !isDragging && drag?.rearranging && "transition-transform",
+      )}
+      style={{
+        transform: drag?.translation
+          ? `translateY(${drag.translation}px)`
+          : undefined,
+      }}
+    >
+      <ItemTitle
+        path={path}
+        icon={TypeIcons.list}
+        titleRef={setTitleElement}
+        onZoom={onZoom}
+        onNavigate={onNavigate}
+        binaryStatus={binaryStatus}
+        className={isCollapsed ? "opacity-65" : ""}
+        actions={
+          <>
+            {onDelete && (
+              <button
+                className={twMerge(
+                  "hover:text-primary",
+                  editable ? "cursor-pointer" : "opacity-50",
+                )}
+                disabled={!editable}
+                onClick={onDelete}
+              >
+                <Trash2 size={15} />
+              </button>
+            )}
+            {drag && (
+              <div
+                className={twMerge(
+                  "hover:text-primary -ml-1",
+                  editable
+                    ? isDragging
+                      ? "cursor-grabbing"
+                      : "cursor-grab"
+                    : "opacity-50",
+                )}
+                onMouseDown={startDrag}
+              >
+                <GripVertical size={15} />
+              </div>
+            )}
+          </>
+        }
+      >
+        {idx + 1}
+      </ItemTitle>
+      <div
+        className={twMerge(
+          "pl-6 pb-1 transition-opacity",
+          isCollapsed && "opacity-65",
+        )}
+      >
+        <ChildrenProviders
+          titleElement={titleElement}
+          onValueChange={setBinaryStatus}
+        >
+          {children}
+        </ChildrenProviders>
+      </div>
+    </div>
+  )
+}
+
 const useDrag = (
  rearrange: boolean,
  props: EditComplexCodecComponentProps<unknown[]>,
@@ -234,8 +235,8 @@ const useDrag = (
  // react stuff... We don't want to keep recreating ResizeObservers on each render, so we prefer having a stable reference.
  const measureCallbacks = useRef<Array<(height: number) => void>>([])
  const onMeasure = (idx: number) =>
-  (measureCallbacks.current[idx] ??= (height) =>
-    (itemHeights.current[idx] = height))
+    (measureCallbacks.current[idx] ??= (height) =>
+      (itemHeights.current[idx] = height))

  if (!rearrange) {
    return undefined
@@ -245,9 +246,9 @@ const useDrag = (
    // if we return undefined, then we will miss the "onMeasure" callback of when
    // each item is initialized, so we just return the function to capture measurements
    return (idx: number) => ({
-      onDragEnd() { },
-      onDragMove() { },
-      onDragStart() { },
+      onDragEnd() {},
+      onDragMove() {},
+      onDragStart() {},
      onMeasure: onMeasure(idx),
      translation: translations[idx] ?? 0,
      rearranging: translations.some((t) => t !== 0),
@@ -313,7 +314,7 @@ const useDrag = (
      })
      setTranslations(translations)
    },
-    onDragStart() { },
+    onDragStart() {},
    onMeasure: onMeasure(idx),
    translation: translations[idx] ?? 0,
    rearranging: translations.some((t) => t !== 0),
--- a/src/codec-components/EditCodec/codec-components.tsx
+++ b/src/codec-components/EditCodec/codec-components.tsx
@@ -123,7 +123,7 @@ export const TextInputField: FC<{
      {children(
        <input
          className={twMerge(
-            "px-4 py-2 border border-border leading-tight text-foreground bg-background",
+            "px-4 py-2 border border-border leading-tight text-foreground rounded bg-input",
            warn ? "border-yellow-400" : null,
            error ? "border-red-500" : null,
            className,
--- a/src/components/BinaryInput.tsx
+++ b/src/components/BinaryInput.tsx
@@ -71,13 +71,13 @@ export const BinaryInput: React.FC<{
      {(input) => (
        <div
          className={twMerge(
-            "px-4 py-2 border border-slate-500 leading-tight text-white focus-within:outline focus-within:outline-1 flex items-center gap-2",
+            "px-4 py-2 border border-border rounded leading-tight focus-within:outline focus-within:outline-1 flex items-center gap-2 bg-input",
            warn ? "border-orange-400" : null,
            uploadError ? "border-red-600" : null,
          )}
        >
          {input}
-          <label title="Load from file" className="text-slate-200">
+          <label title="Load from file" className="text-foreground/80">
            <FileUp size={16} />
            <BinaryFileInput
              validate={validateFile}
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -29,7 +29,7 @@ export const SearchableSelect = <T,>({
          variant="outline"
          role="combobox"
          aria-expanded={open}
-          className="flex w-52 justify-between overflow-hidden"
+          className="flex w-52 justify-between overflow-hidden bg-input border border-border"
        >
          {value ? (
            <span className="text-ellipsis overflow-hidden">
--- a/src/components/TextInputField.tsx
+++ b/src/components/TextInputField.tsx
@@ -27,7 +27,7 @@ export const TextInputField: FC<{
      {children(
        <input
          className={twMerge(
-            "px-4 py-2 border border-slate-500 leading-tight text-white",
+            "px-4 py-2 border border-border leading-tight text-foreground",
            warn ? "border-orange-400" : null,
            error ? "border-red-600" : null,
            className,
--- a/src/index.css
+++ b/src/index.css
@@ -59,7 +59,7 @@ dialog {
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
+    --input: 240 5.9% 95%;
    --ring: 328 100% 45%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
@@ -87,7 +87,7 @@ dialog {
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
+    --input: 240 3.7% 6.9%;
    --ring: 328 100% 45%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
--- a/src/pages/Header.tsx
+++ b/src/pages/Header.tsx
@@ -4,7 +4,7 @@ import { FC, PropsWithChildren } from "react"
 import { twMerge } from "tailwind-merge"

 export const Header = () => (
-  <div className="flex p-4 pb-2 items-center flex-shrink-0 gap-2">
+  <div className="flex p-4 pb-2 items-center flex-shrink-0 gap-2 border-b">
    <div className="flex flex-1 items-center flex-row gap-2">
      <img
        className="w-14 min-w-14 hidden dark:inline-block"
--- a/src/pages/Network/Network.tsx
+++ b/src/pages/Network/Network.tsx
@@ -66,7 +66,7 @@ export function NetworkSwitcher() {
      <DialogTrigger asChild>
        <Button
          variant="outline"
-          className="w-[200px] gap-0 justify-between text-base px-3"
+          className="w-[200px] gap-0 justify-between text-base px-3 border border-border bg-input"
        >
          {selectedNetwork.display}
          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />