blackbeard/qapi
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

reduce color set to shadcn themeing

Browse Source
This commit is contained in:
Victor Oliva
2024-11-08 23:17:25 +07:00
parent c1b7a9252a
commit 0bdb3d2bb0
31 changed files with 106 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -13,7 +13,7 @@
rel="stylesheet">
</head>
<body class="dark text-polkadot-100 bg-polkadot-950 karla-400">
<body class="karla-400 dark">
<div id="root" class="flex justify-center"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

1
public/papi_logo-light.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.28 100.28"><defs><style>.b{fill:#e7007b;}.c{fill:#fff;}.d{fill:#3a1a7b;}</style></defs><path class="d" d="M94.37,57.08c-9.1,22.32-35.38-16.93-44.22-4.86h0c-8.84-12.07-35.12,27.18-44.22,4.85,0,0-1.4,7.07,6.58,12.02,.95,.59,3.84,1.71,6.62,1.65,5.2-.11,8.63-4.07,8.63-3.56,0,2.24-4.88,5.18-4.88,5.18,5.15-.07,8.91-.78,12.07-2.68,4.21-2.52,5.81-5.49,5.86-5.02,.25,2.23-3.09,6.03-3.09,6.03,6.27-1,12.43-5.55,12.43-10.19h0c0,4.65,6.16,9.2,12.43,10.2,0,0-3.35-3.79-3.09-6.03,.05-.47,1.65,2.49,5.86,5.02,3.16,1.9,6.93,2.61,12.07,2.68,0,0-4.88-2.94-4.88-5.18,0-.51,3.43,3.44,8.63,3.56,2.78,.06,5.67-1.07,6.62-1.65,7.99-4.95,6.58-12.02,6.58-12.02Z"/><path class="b" d="M27.87,15.01c-8.4,1.13-15.21,9.41-15.21,17.89v41.38h6v-28.57c3.5,3.09,8.22,4.83,13.34,4.34,8.25-.78,14.97-7.41,15.85-15.65,1.21-11.4-8.52-20.94-19.97-19.4Zm4.41,28.96c-7.96,1.32-14.77-5.5-13.46-13.46,.8-4.82,4.69-8.71,9.51-9.51,7.96-1.32,14.77,5.5,13.46,13.46-.8,4.82-4.69,8.71-9.51,9.51Z"/><g><path class="d" d="M30.3,20.83c-6.45,0-11.67,5.23-11.67,11.67,0,2.13,.58,4.12,1.58,5.84l15.93-15.93c-1.72-1-3.71-1.58-5.84-1.58Z"/><path class="d" d="M40.39,26.65l-15.94,15.94c1.72,1,3.72,1.59,5.85,1.59,6.45,0,11.67-5.23,11.67-11.67,0-2.14-.58-4.13-1.59-5.85Z"/><path class="c" d="M36.14,22.41l-15.93,15.93c1.02,1.76,2.48,3.22,4.24,4.25l15.94-15.94c-1.02-1.76-2.49-3.22-4.25-4.24Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

2
src/codec-components/EditCodec/CAccountId.tsx
View File

@@ -107,7 +107,7 @@ export const CAccountId: EditAccountId = ({ value, onValueChanged }) => {
/>
<CommandList>
<CommandEmpty>
<div className="text-slate-400">
<div className="text-foreground/50">
The value is not a valid Account ID
</div>
</CommandEmpty>

2
src/codec-components/EditCodec/CStruct.tsx
View File

@@ -27,7 +27,7 @@ const StructItem: React.FC<{
<li
className={twMerge(
"flex flex-col transition-all duration-300",
isActive && "bg-slate-900 bg-opacity-80",
isActive && "bg-secondary/80",
)}
onMouseEnter={() => setHovered({ id: pathStr, hover: true })}
onMouseLeave={() => setHovered({ id: pathStr, hover: false })}

2
src/codec-components/EditCodec/Tree/codec-components.tsx
View File

@@ -143,7 +143,7 @@ export const ItemTitle: FC<
<div
className={twMerge(
"flex items-center h-8",
isActive && "bg-polkadot-600 bg-opacity-20",
isActive && "bg-secondary/80",
className,
)}
data-marker={`marker-${path}`}

2
src/codec-components/EditCodec/codec-components.tsx
View File

@@ -123,7 +123,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 bg-background",
warn ? "border-yellow-400" : null,
error ? "border-red-500" : null,
className,

2
src/codec-components/ViewCodec/CStruct.tsx
View File

@@ -66,7 +66,7 @@ const StructItem: React.FC<{
<li
className={twMerge(
"flex flex-col transition-all duration-300",
isActive && "bg-slate-900 bg-opacity-80",
isActive && "bg-secondary/80",
)}
onMouseEnter={() => setHovered({ id: pathStr, hover: true })}
onMouseLeave={() => setHovered({ id: pathStr, hover: false })}

2
src/codec-components/ViewCodec/ListComponents.tsx
View File

@@ -71,7 +71,7 @@ const ListComponent: FC<{
</ListItemComponent>
))
) : (
<span className="text-sm text-slate-400">(Empty)</span>
<span className="text-sm text-foreground/60">(Empty)</span>
)}
</ul>
)

4
src/codec-components/ViewCodec/codec-components.tsx
View File

@@ -20,7 +20,9 @@ export const CEthAccount: ViewEthAccount = ({ value }) => <span>{value}</span>
export const COption: ViewOption = ({ value, inner }) => {
const selected = value !== undefined
return (
<div>{selected ? inner : <span className="text-slate-400">None</span>}</div>
<div>
{selected ? inner : <span className="text-foreground/60">None</span>}
</div>
)
}

11
src/codec-components/common/ListItem.tsx
View File

@@ -33,7 +33,7 @@ export const ListItem: React.FC<{
<div className="flex-1">{children}</div>
{onDelete ? (
<button
className="cursor-pointer text-gray-200 ml-2 hover:text-polkadot-500"
className="cursor-pointer text-foreground/80 ml-2 hover:text-primary"
onClick={() => onDelete()}
>
<Trash2 size={16} />
@@ -53,7 +53,7 @@ export const ListItem: React.FC<{
</span>
{onDelete ? (
<button
className="cursor-pointer text-gray-200 ml-2 hover:text-polkadot-400"
className="cursor-pointer text-foreground/80 ml-2 hover:text-primary"
onClick={() => onDelete()}
>
<Trash2 size={16} />
@@ -65,10 +65,7 @@ export const ListItem: React.FC<{
return (
<li
className={twMerge(
"flex flex-col mb-1",
isActive && "bg-slate-900 bg-opacity-50",
)}
className={twMerge("flex flex-col mb-1", isActive && "bg-secondary/80")}
onMouseEnter={() => setHovered({ id: pathStr, hover: true })}
onMouseLeave={() => setHovered({ id: pathStr, hover: false })}
>
@@ -76,7 +73,7 @@ export const ListItem: React.FC<{
{inline ? null : (
<div
className={clsx(
"flex-row p-2 items-center border border-slate-500",
"flex-row p-2 items-center border border-border",
isCollapsed ? "hidden" : "",
)}
>

7
src/codec-components/common/Markers.tsx
View File

@@ -21,7 +21,7 @@ export const Marker: FC<{ id: string[] }> = ({ id }) => {
const ctx = useContext(MarkersContext)
const ref = useRefEffect<HTMLElement>(
(element) => {
if (!ctx) return () => { }
if (!ctx) return () => {}
ctx.observer.observe(element)
return () => {
ctx.onMarkerRemoved(id)
@@ -109,7 +109,7 @@ export const VisibleWindow = () => {
if (!ctx) return null
const window = twMerge(
"absolute left-0 right-0 ease-linear bg-polkadot-800 opacity-35 z-[-1]",
"absolute left-0 right-0 ease-linear bg-foreground/5",
transitionEnabled && "transition-all",
)
@@ -127,8 +127,7 @@ export const VisibleWindow = () => {
top: ctx.range[0],
height: ctx.range[1] - ctx.range[0],
}}
>
</div>
></div>
</div>
)
}

9
src/components/AccountIdDisplay.tsx
View File

@@ -23,16 +23,19 @@ export const AccountIdDisplay: FC<{
publicKey={getPublicKey(value)}
size={28}
/>
<div className="flex flex-col justify-center text-white leading-tight overflow-hidden">
<div className="flex flex-col justify-center text-foreground leading-tight overflow-hidden">
{name && (
<span className="inline-flex items-center gap-1">
{name}
{isVerified(identity) && (
<CheckCircle size={16} className="text-green-400" />
<CheckCircle
size={16}
className="text-green-500 dark:text-green-400"
/>
)}
</span>
)}
<span className="text-slate-300 text-ellipsis overflow-hidden">
<span className="text-foreground/50 text-ellipsis overflow-hidden">
{value}
</span>
</div>

4
src/components/ActionButton.tsx
View File

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

13
src/components/BinaryEditButton.tsx
View File

@@ -136,12 +136,12 @@ const BinaryEditModalContent: FC<
return (
<>
<div className="flex gap-4 text-white">
<div className="flex gap-4">
<div className="flex-1 flex gap-2">
<button
disabled={downloadDisabled}
className={twMerge(
"flex items-center gap-1 hover:text-polkadot-300",
"flex items-center gap-1 hover:text-primary/80 border rounded py-1 px-2",
downloadDisabled && "opacity-50 pointer-events-none",
)}
onClick={download}
@@ -151,7 +151,7 @@ const BinaryEditModalContent: FC<
</button>
</div>
<div>
<label className="flex items-center gap-1 hover:text-polkadot-300 cursor-pointer">
<label className="flex items-center gap-1 hover:text-primary/80 cursor-pointer border rounded py-1 px-2">
Load file
<FileUp size={16} />
<BinaryFileInput
@@ -166,7 +166,7 @@ const BinaryEditModalContent: FC<
<div className="text-slate-400">Hex data</div>
<textarea
className={twMerge(
"bg-white rounded w-full min-h-20 text-slate-950 p-1 tabular-nums border-2 border-transparent",
"bg-white rounded w-full min-h-20 text-slate-950 p-1 tabular-nums border-2",
!isValid && "border-red-600 outline-none",
)}
value={textareaValue}
@@ -175,10 +175,7 @@ const BinaryEditModalContent: FC<
/>
</div>
<button
className={twMerge(
"border rounded p-1 text-white",
!isValid && "opacity-50",
)}
className={twMerge("border rounded p-1", !isValid && "opacity-50")}
onClick={submit}
disabled={!isValid}
>

6
src/components/ButtonGroup.tsx
View File

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

2
src/components/Copy.tsx
View File

@@ -31,7 +31,7 @@ export const CopyText: React.FC<{
onClick={copy}
>
{copied ? (
<CheckCircle size={16} className="text-green-300" />
<CheckCircle size={16} className="text-green-500 dark:text-green-300" />
) : binary ? (
<CopyBinaryIcon size={16} />
) : (

4
src/components/DocsRenderer.tsx
View File

@@ -8,7 +8,7 @@ export const DocsRenderer: FC<{ docs: string[]; className?: string }> = ({
if (!docs.length) return null
if (docs.length === 1) {
return (
<div className={twMerge("text-sm text-slate-400", className)}>
<div className={twMerge("text-sm text-foreground/60", className)}>
<p>{docs[0]}</p>
</div>
)
@@ -19,7 +19,7 @@ export const DocsRenderer: FC<{ docs: string[]; className?: string }> = ({
return (
<div
className={twMerge(
"text-slate-400 max-h-20 overflow-auto",
"text-foreground/60 max-h-20 overflow-auto",
normalizedDocs.length > 1 && "text-xs font-mono whitespace-pre",
className,
)}

8
src/components/Modal.tsx
View File

@@ -73,7 +73,7 @@ export const Modal: FC<ModalProps> = ({
if (isDialogCompatible) {
return (
<dialog
className="modal rounded backdrop:backdrop-blur-[2px] backdrop:backdrop-contrast-75 flex flex-col overflow-hidden text-polkadot-100 border-polkadot-100"
className="modal rounded backdrop:backdrop-blur-[2px] backdrop:backdrop-contrast-75 flex flex-col overflow-hidden border-popover-foreground bg-popover text-popover-foreground"
ref={setRef}
onClose={onClose}
>
@@ -106,13 +106,13 @@ const ModalPolyfill: FC<ModalProps> = ({ open, children, onClose }) => {
return (
<div
className="z-50 fixed left-0 top-0 w-full h-full backdrop-blur-[1px] bg-opacity-10 bg-slate-950 flex items-center justify-center overflow-hidden"
className="z-50 fixed left-0 top-0 w-full h-full backdrop-blur-[1px] bg-background/10 flex items-center justify-center overflow-hidden"
onScroll={(evt) => {
evt.stopPropagation()
evt.preventDefault()
}}
>
<div className="modal rounded bg-polkadot-900 flex flex-col overflow-hidden">
<div className="modal rounded bg-popover text-popover-foreground flex flex-col overflow-hidden">
{children}
</div>
</div>
@@ -131,7 +131,7 @@ const ModalContent: FC<
<div className="flex-1 flex font-bold">{title}</div>
<button
type="button"
className="flex-shrink-0 text-white hover:text-polkadot-300"
className="flex-shrink-0 text-card-foreground/70 "
onClick={onClose}
>
<XSquare />

10
src/components/Toggle.tsx
View File

@@ -8,13 +8,15 @@ const SliderToggle: React.FC<{
<Toggle.Root
pressed={isToggled}
onPressedChange={() => toggle()}
className={`relative w-8 h-5 rounded-full p-0.5 transition-colors border
${isToggled ? "border-slate-500" : "border-slate-500"}`}
className={
"relative w-8 h-5 rounded-full p-0.5 transition-colors border border-foreground/20" +
(isToggled ? " bg-primary" : " bg-primary/20")
}
aria-label="Toggle"
>
<span
className={`block w-3 h-3 border rounded-full shadow-md transform transition-transform
${isToggled ? "translate-x-3 bg-white border-white" : "translate-x-0 border-slate-500"}`}
className={`block w-3 h-3 border rounded-full shadow-md transform transition-transform bg-foreground/70
${isToggled ? "translate-x-3 " : "translate-x-0"}`}
/>
</Toggle.Root>
)

4
src/components/Tooltip.tsx
View File

@@ -21,9 +21,9 @@ export const Tooltip: FC<
<Root {...props}>
<Trigger asChild>{children}</Trigger>
<Portal>
<Content className="bg-white rounded py-1 px-2 shadow">
<Content className="bg-white border rounded py-1 px-2 shadow">
{content}
<Arrow className="fill-white stroke-white" />
<Arrow className="fill-border" />
</Content>
</Portal>
</Root>

4
src/pages/Constants.tsx
View File

@@ -115,12 +115,12 @@ const ConstantEntry: FC<{
<Tooltip
content={
docs.length ? (
<DocsRenderer docs={docs} className="text-slate-700 max-h-none" />
<DocsRenderer docs={docs} className="max-h-none" />
) : null
}
disableHoverableContent
>
<div className={isInline ? "text-slate-400" : ""}>
<div className={isInline ? "text-foreground/60" : ""}>
{name + (isInline ? ":" : "")}
</div>
</Tooltip>

43
src/pages/Explorer/Detail/BlockDetail.tsx
View File

@@ -26,6 +26,7 @@ import { twMerge } from "tailwind-merge"
import { blockInfoState$, blocksByHeight$, BlockState } from "../block.state"
import { BlockStatusIcon, statusText } from "./BlockState"
import { createExtrinsicCodec, DecodedExtrinsic } from "./extrinsicDecoder"
import { CopyText } from "@/components/Copy"
const blockExtrinsics$ = state((hash: string) => {
const decoder$ = runtimeCtx$.pipe(
@@ -118,10 +119,26 @@ export const BlockDetail = () => {
<BlockChildren hash={block.hash} />
</div>
</div>
<div className="text-slate-200 py-2">
<p>State root: {block.header?.stateRoot}</p>
<p>Extrinsic root: {block.header?.extrinsicRoot}</p>
</div>
{block.header && (
<div className="text-foreground/80 py-2">
<p>
State root: {block.header.stateRoot.slice(0, 18)}{" "}
<CopyText
className="align-middle"
text={block.header.stateRoot}
binary
/>
</p>
<p>
Extrinsic root: {block.header.extrinsicRoot.slice(0, 18)}{" "}
<CopyText
className="align-middle"
text={block.header.extrinsicRoot}
binary
/>
</p>
</div>
)}
</div>
<div className="p-2">
<Tabs.Root
@@ -132,8 +149,9 @@ export const BlockDetail = () => {
<Tabs.List className="flex-shrink-0 flex border-b border-polkadot-200">
<Tabs.Trigger
className={twMerge(
"bg-polkadot-950 px-4 py-2 text-polkadot-400 hover:text-polkadot-500 border-t border-x rounded-tl border-polkadot-200",
"disabled:text-opacity-50 disabled:pointer-events-none data-[state=active]:font-bold",
"bg-secondary text-secondary-foreground/80 px-4 py-2 hover:text-polkadot-500 border-t border-x rounded-tl border-polkadot-200",
"disabled:text-secondary-foreground/50 disabled:bg-secondary/50 disabled:pointer-events-none",
"data-[state=active]:font-bold data-[state=active]:text-secondary-foreground",
)}
value="signed"
disabled={!groupedExtrinsics.signed?.length}
@@ -142,8 +160,9 @@ export const BlockDetail = () => {
</Tabs.Trigger>
<Tabs.Trigger
className={twMerge(
"bg-polkadot-950 px-4 py-2 text-polkadot-400 hover:text-polkadot-500 border-t border-r rounded-tr border-polkadot-200",
"disabled:text-opacity-50 disabled:pointer-events-none data-[state=active]:font-bold",
"bg-secondary text-secondary-foreground/80 px-4 py-2 hover:text-polkadot-500 border-t border-r rounded-tr border-polkadot-200",
"disabled:text-secondary-foreground/50 disabled:pointer-events-none",
"data-[state=active]:font-bold data-[state=active]:text-secondary-foreground",
)}
value="unsigned"
disabled={!groupedExtrinsics.unsigned?.length}
@@ -151,7 +170,7 @@ export const BlockDetail = () => {
Unsigned
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="signed" className="p-2">
<Tabs.Content value="signed" className="py-2">
<ol>
{groupedExtrinsics.signed?.map((extrinsic) => (
<Extrinsic
@@ -163,7 +182,7 @@ export const BlockDetail = () => {
))}
</ol>
</Tabs.Content>
<Tabs.Content value="unsigned" className="p-2">
<Tabs.Content value="unsigned" className="py-2">
<ol>
{groupedExtrinsics.unsigned?.map((extrinsic) => (
<Extrinsic
@@ -247,7 +266,7 @@ const BlockLink: FC<{ hash: string }> = ({ hash }) => {
return (
<Link
className="text-polkadot-200 hover:text-polkadot-300 align-middle inline-flex items-center gap-1"
className="text-primary/70 hover:text-primary align-middle inline-flex items-center gap-1"
to={`../${hash}`}
>
{<BlockStatusIcon state={block.status} size={20} />}
@@ -266,7 +285,7 @@ const Extrinsic: FC<{
)
return (
<li className="p-2 border rounded border-polkadot-700 mb-2">
<li className="p-2 border rounded mb-2 bg-card text-card-foreground">
<div className="flex justify-between items-center">
<button
onClick={() => setExpanded((e) => !e)}

2
src/pages/Explorer/Events.tsx
View File

@@ -73,7 +73,7 @@ export const Events = () => {
<td className="p-1 w-full">
{"event" in evt ? (
<Popover content={<EventPopover event={evt} />}>
<button className="w-full p-1 text-left hover:text-polkadot-200">{`${evt.event.type}.${evt.event.value.type}`}</button>
<button className="w-full p-1 text-left text-card-foreground/80 hover:text-card-foreground/100">{`${evt.event.type}.${evt.event.value.type}`}</button>
</Popover>
) : (
`… ${evt.length} more`

7
src/pages/Header.tsx
View File

@@ -7,10 +7,15 @@ export const Header = () => (
<div className="flex p-4 pb-2 items-center flex-shrink-0 gap-2">
<div className="flex flex-1 items-center flex-row gap-2">
<img
className="w-14 min-w-14"
className="w-14 min-w-14 hidden dark:inline-block"
src="/papi_logo-dark.svg"
alt="papi-logo"
/>
<img
className="w-14 min-w-14 dark:hidden"
src="/papi_logo-light.svg"
alt="papi-logo"
/>
<h1 className="hidden lg:block poppins-regular text-lg">
papi <span className="poppins-extralight">console</span>
</h1>

1
src/pages/Metadata/Extrinsic.tsx
View File

@@ -9,7 +9,6 @@ export const Extrinsic: FC<{ extrinsic: ExtrinsicDescriptor }> = ({
}) => {
return (
<div className="border rounded p-2 flex flex-col gap-2">
<h3 className="font-bold text-xl">Extrinsic</h3>
<p>Version: {extrinsic.version}</p>
{"type" in extrinsic && (
<div>

3
src/pages/Metadata/Lookup.tsx
View File

@@ -16,7 +16,6 @@ export const Lookup: FC = () => {
return (
<div className="border rounded p-2 flex flex-col gap-2">
<h3 className="font-bold text-xl">Lookup</h3>
<label>
Id:{" "}
<input
@@ -75,7 +74,7 @@ export const LookupLink: FC<{ id: number }> = ({ id }) => {
<div
className={twMerge(
"border rounded p-2",
expanded && "bg-slate-500 bg-opacity-10",
expanded && "bg-slate-400 bg-opacity-10",
)}
>
<button

1
src/pages/Metadata/RuntimeApis.tsx
View File

@@ -16,7 +16,6 @@ export const RuntimeApis: FC<{ apis: Array<Api> }> = ({ apis }) => {
return (
<div className="border rounded p-2 flex flex-col gap-2">
<h3 className="font-bold text-xl">Runtime APIs</h3>
<label className="self-start">
API:{" "}
<SearchableSelect

2
src/pages/RuntimeCalls/RuntimeCallQuery.tsx
View File

@@ -152,7 +152,7 @@ const RuntimeValueInput: FC<{ idx: number; name: string; type: number }> = ({
: "text-green-600",
)}
/>
<div className="text-polkadot-200">{name}</div>
<div className="text-foreground/80">{name}</div>
{complexity === "inline" ? (
<div className="px-2">
<InlineLookupTypeEdit

12
src/pages/RuntimeCalls/RuntimeCallResults.tsx
View File

@@ -16,8 +16,8 @@ export const RuntimeCallResults: FC = () => {
if (!keys.length) return null
return (
<div className="p-2 w-full border-t border-slate-400">
<h2 className="text-lg text-polkadot-200 mb-2">Results</h2>
<div className="p-2 w-full border-t border-border">
<h2 className="text-lg text-foreground mb-2">Results</h2>
<ul className="flex flex-col gap-2">
{keys.map((key) => (
<RuntimeCallResultBox key={key} subscription={key} />
@@ -35,9 +35,9 @@ const RuntimeCallResultBox: FC<{ subscription: string }> = ({
if (!runtimeCallResult) return null
return (
<li className="border rounded border-polkadot-200 p-2">
<li className="border rounded bg-card text-card-foreground p-2">
<div className="flex justify-between items-center pb-1 overflow-hidden">
<h3 className="text-polkadot-200 overflow-hidden text-ellipsis whitespace-nowrap">
<h3 className="overflow-hidden text-ellipsis whitespace-nowrap">
{runtimeCallResult.name}
</h3>
<div className="flex items-center flex-shrink-0 gap-2">
@@ -58,7 +58,7 @@ const RuntimeCallResultBox: FC<{ subscription: string }> = ({
<button onClick={() => removeRuntimeCallResult(subscription)}>
<Trash2
size={20}
className="text-polkadot-400 cursor-pointer hover:text-polkadot-500"
className="text-destructive cursor-pointer hover:text-polkadot-500"
/>
</button>
</div>
@@ -73,7 +73,7 @@ const ResultDisplay: FC<{
mode: "json" | "decoded"
}> = ({ runtimeCallResult, mode }) => {
if (!("result" in runtimeCallResult)) {
return <div className="text-sm text-slate-400">Loading…</div>
return <div className="text-sm text-foreground/50">Loading…</div>
}
return (

6
src/pages/Storage/StorageQuery.tsx
View File

@@ -301,12 +301,12 @@ const KeyDisplay: FC = () => {
const codec = builder.buildStorage(selectedEntry.pallet, selectedEntry.entry)
return (
<div className="flex w-full overflow-hidden border border-polkadot-700 px-3 p-2 gap-2 items-center">
<div className="flex-shrink-0 text-polkadot-0 text-sm font-bold">Encoded key:</div>
<div className="flex w-full overflow-hidden border border-card-foreground/60 px-3 p-2 gap-2 items-center bg-card text-card-foreground">
<div className="flex-shrink-0 text-sm font-bold">Encoded key:</div>
<div
className={twMerge(
"flex-1 overflow-hidden whitespace-nowrap text-ellipsis text-sm tabular-nums",
key === null ? "text-slate-400" : null,
key === null ? "text-card-foreground/60" : null,
)}
>
{key ?? "Fill in all the storage keys to calculate the encoded key"}

12
src/pages/Storage/StorageSubscriptions.tsx
View File

@@ -23,8 +23,8 @@ export const StorageSubscriptions: FC = () => {
if (!keys.length) return null
return (
<div className="p-2 w-full border-t border-slate-400">
<h2 className="text-lg text-polkadot-200 mb-2">Results</h2>
<div className="p-2 w-full border-t border-border">
<h2 className="text-lg text-foreground mb-2">Results</h2>
<ul className="flex flex-col gap-2">
{keys.map((key) => (
<StorageSubscriptionBox key={key} subscription={key} />
@@ -49,9 +49,9 @@ const StorageSubscriptionBox: FC<{ subscription: string }> = ({
}
return (
<li className="border rounded border-polkadot-200 p-2">
<li className="border rounded bg-card text-card-foreground p-2">
<div className="flex justify-between items-center pb-1 overflow-hidden">
<h3 className="text-polkadot-200 overflow-hidden text-ellipsis whitespace-nowrap">
<h3 className="overflow-hidden text-ellipsis whitespace-nowrap">
{storageSubscription.name}
</h3>
<div className="flex items-center flex-shrink-0 gap-2">
@@ -91,7 +91,7 @@ const ResultDisplay: FC<{
mode: "json" | "decoded"
}> = ({ storageSubscription, mode }) => {
if (!("result" in storageSubscription)) {
return <div className="text-sm text-slate-400">Loading…</div>
return <div className="text-sm text-foreground/50">Loading…</div>
}
if (storageSubscription.single) {
@@ -177,7 +177,7 @@ export const ValueDisplay: FC<{
if (!metadata || !builder) return null
if (!encodedValue) {
return <div className="text-slate-400">Empty</div>
return <div className="text-foreground/60">Empty</div>
}
return (