simplify colors of tree view

2024-11-09 10:09:51 +07:00
parent f585308e64
commit 4cfd64939c
10 changed files with 19 additions and 26 deletions
--- a/src/codec-components/EditCodec/Tree/CEnum.tsx
+++ b/src/codec-components/EditCodec/Tree/CEnum.tsx
@@ -70,7 +70,7 @@ export const CEnum: EditEnum = ({
    innerShape.type === "lookupEntry" ? innerShape.value : innerShape
  const innerIsComplex = isComplex(innerEntry.type)
  return (
-    <div className="before:absolute before:border-l before:h-4 before:border-polkadot-700">
+    <div className="before:absolute before:border-l before:h-4 before:border-treeBorder">
      <ItemTitle
        icon={Enum}
        path={path.join(".")}
--- a/src/codec-components/EditCodec/Tree/CStruct.tsx
+++ b/src/codec-components/EditCodec/Tree/CStruct.tsx
@@ -28,7 +28,7 @@ const StructField: FC<
  const isCollapsed = useStateObservable(isCollapsedRoot$(path))

  return (
-    <div className="flex flex-col text-left 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">
+    <div className="flex flex-col text-left border-l border-treeBorder last:border-0 last:before:block last:before:absolute last:before:border-l last:before:h-4 last:before:border-treeBorder">
      <ItemTitle
        icon={Icon}
        path={path}
--- a/src/codec-components/EditCodec/Tree/ListComponents.tsx
+++ b/src/codec-components/EditCodec/Tree/ListComponents.tsx
@@ -154,7 +154,7 @@ const ListItem: FC<
    <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",
+        "hover:bg-secondary/80 hover:bg-opacity-60 border-l border-treeBorder last:border-0 last:before:block last:before:absolute last:before:border-l last:before:h-4 last:before:border-treeBorder",
        drag?.rearranging && "relative",
        isDragging &&
          "none select-none z-10 bg-secondary/80 bg-opacity-70 last:border-l last:before:border-0",
--- a/src/codec-components/EditCodec/Tree/codec-components.tsx
+++ b/src/codec-components/EditCodec/Tree/codec-components.tsx
@@ -72,7 +72,7 @@ export const CResult: EditResult = ({ value, inner }) => (
 )

 export const ItemMarker = () => (
-  <span className="w-[0.77rem] border-t border-polkadot-700"></span>
+  <span className="w-[0.77rem] border-t border-treeBorder"></span>
 )

 export const TitleContext = createContext<HTMLElement | null>(null)
@@ -152,7 +152,7 @@ export const ItemTitle: FC<
      >
        <span
          className={twMerge(
-            "hover:text-polkadot-500 flex-shrink-0 flex items-center",
+            "hover:text-primary flex-shrink-0 flex items-center",
            onNavigate && "cursor-pointer",
          )}
          onClick={onNavigate}
@@ -169,7 +169,7 @@ export const ItemTitle: FC<
              binaryStatus === undefined && "text-slate-600",
            )}
          />
-          <Icon size={15} className="text-polkadot-600 mr-2" />
+          <Icon size={15} className="text-primary mr-2" />
          {children}
        </span>
        <div
--- a/src/codec-components/LookupTypeEdit/BinaryDisplay.tsx
+++ b/src/codec-components/LookupTypeEdit/BinaryDisplay.tsx
@@ -37,7 +37,7 @@ export const BinaryDisplay: FC<

  return (
    <div className={twMerge("px-2 w-full", className)}>
-      <div className="px-3 py-2 gap-2 flex flex-row border-polkadot-600 border items-start">
+      <div className="px-3 py-2 gap-2 flex flex-row border-border border items-start">
        <CopyText text={hex ?? ""} disabled={!hex} className="h-5" />
        <div
          className={twMerge(
--- a/src/codec-components/LookupTypeEdit/FocusPath.tsx
+++ b/src/codec-components/LookupTypeEdit/FocusPath.tsx
@@ -14,10 +14,10 @@ export const FocusPath: FC<{

  return (
    <div className="flex-shrink-0 px-2">
-      <div className="flex max-w-full flex-wrap gap-1 items-center border border-polkadot-700 text-sm px-2 py-1">
+      <div className="flex max-w-full flex-wrap gap-1 items-center border border-treeBorder text-sm px-2 py-1">
        {breadcrumbs.map((v, i) => (
          <span key={i} className="whitespace-nowrap flex gap-1 items-center">
-            {i > 0 && <span className="text-slate-500 mx-2">&gt;</span>}
+            {i > 0 && <span className="text-foreground/50 mx-2">&gt;</span>}
            {v.icon}
            {v.label}
          </span>
@@ -56,12 +56,14 @@ function getBreadcrumbs(
    })

    switch (lookupType.type) {
-      case "option":
-        throw new Error("TODO Option breadcrumb not implemented")
      case "result":
-        throw new Error("TODO Result breadcrumb not implemented")
+        lookupType = path[i].includes("Success")
+          ? lookupType.value.ok
+          : lookupType.value.ko
+        break
      case "array":
      case "sequence":
+      case "option":
        lookupType = lookupType.value
        break
      case "tuple":
@@ -87,7 +89,7 @@ function getBreadcrumbs(
      ) : (
        <a
          href="#"
-          className={clsx("hover:text-polkadot-500", i === 0 && "font-bold")}
+          className={clsx("hover:text-primary", i === 0 && "font-bold")}
          onClick={(evt) => {
            evt.preventDefault()
            onFocus(i === 0 ? null : path.slice(0, i))
@@ -103,14 +105,14 @@ function getBreadcrumbs(
      previousBreadcrumb.label = (
        <>
          {previousLabel}
-          <span className="text-slate-500">/</span>
+          <span className="text-foreground/50">/</span>
          {label}
        </>
      )
    } else {
      const Icon = node.type && TypeIcons[node.type]
      breadcrumbs.push({
-        icon: Icon ? <Icon size={15} className="text-polkadot-600 mr-1" /> : null,
+        icon: Icon ? <Icon size={15} className="text-primary mr-1" /> : null,
        label,
      })
    }
--- a/src/codec-components/LookupTypeEdit/LookupTypeEdit.tsx
+++ b/src/codec-components/LookupTypeEdit/LookupTypeEdit.tsx
@@ -57,12 +57,6 @@ export const LookupTypeEdit: FC<{
          onFocus={setFocusingSubtree}
        />
      )}
-      {tree && (
-        <div className="px-2">
-          {/* This element is presentational only: Adds a connecting border between the FocusPath and the tree below */}
-          <div className="border-l border-polkadot-700 h-2 max-sm:border-none" />
-        </div>
-      )}
      <SubtreeFocus
        value={{ callback: setFocusingSubtree, path: focusingSubtree }}
      >
--- a/src/codec-components/ViewCodec/CStruct.tsx
+++ b/src/codec-components/ViewCodec/CStruct.tsx
@@ -110,7 +110,7 @@ export const CStruct: ViewStruct = ({
    <ul
      className={twMerge(
        "flex flex-col w-full",
-        hasParentTitle && "border-l border-polkadot-700",
+        hasParentTitle && "border-l border-primary",
      )}
    >
      {Object.entries(innerComponents).map(([name, jsx]) => (
--- a/src/pages/Extrinsics/EditMode.tsx
+++ b/src/pages/Extrinsics/EditMode.tsx
@@ -40,10 +40,6 @@ export const EditMode: React.FC<{
        value={focusingSubtree}
        onFocus={setFocusingSubtree}
      />
-      {/* <div className="px-2">
-        // This element is presentational only: Adds a connecting border between the FocusPath and the tree below
-        <div className="border-l border-polkadot-700 h-2 max-sm:border-none" />
-      </div> */}
      <SubtreeFocus
        value={{ callback: setFocusingSubtree, path: focusingSubtree }}
      >
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,6 +21,7 @@ export default {
          900: "#0C052C",
          950: "#030110",
        },
+        treeBorder: "hsl(var(--border))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        card: {