Storage view

src/codec-components/EditCodec/CAccountId.tsx

@@ -86,9 +86,9 @@ export const CAccountId: EditAccountId = ({ value, onValueChanged }) => {
     >
       <ComboboxButton
         className={twMerge(
-          "text-sm border rounded p-2 border-polkadot-200 leading-tight text-white focus-within:outline",
-          "flex items-center gap-2 bg-polkadot-900",
-          value === NOTIN ? "border-orange-400" : null,
+          "border px-3 py-2 border-slate-500 leading-tight text-white focus-within:outline",
+          "flex items-center gap-2",
+          value === NOTIN ? "border-yellow-400" : null,
         )}
       >
         {localInput && (

src/codec-components/EditCodec/CTuple.tsx

@@ -11,7 +11,7 @@ export const CTuple: EditTuple = ({ innerComponents, path }) => {
   return (
     <>
       <span>Tuple</span>
-      <ul className="flex flex-col ml-5">
+      <ul className="flex flex-col gap-2">
         {innerComponents.map((jsx, idx) => (
           <li key={idx}>{jsx}</li>
         ))}

src/components/BinaryEditButton.tsx

@@ -30,10 +30,10 @@ export const BinaryEditButton: FC<
   return (
     <>
       <BinaryEdit
-        size={20}
+        size={24}
         {...iconProps}
         className={twMerge(
-          "cursor-pointer hover:text-polkadot-300",
+          "cursor-pointer hover:text-polkadot-500",
           iconProps?.className,
         )}
         onClick={() => setOpen(true)}

src/pages/Storage/StorageQuery.tsx

@@ -59,7 +59,7 @@ export const StorageQuery: FC = () => {
   }
 
   return (
-    <div className="p-2 flex flex-col gap-4 items-start w-full">
+    <div className="flex flex-col gap-4 items-start w-full">
       <KeyDisplay />
       <StorageKeysInput />
       <ActionButton disabled={!isReady} onClick={submit}>
@@ -301,8 +301,8 @@ const KeyDisplay: FC = () => {
   const codec = builder.buildStorage(selectedEntry.pallet, selectedEntry.entry)
 
   return (
-    <div className="flex w-full overflow-hidden bg-polkadot-800 p-2 gap-2 rounded items-center">
-      <div className="flex-shrink-0 text-polkadot-200">Encoded key:</div>
+    <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={twMerge(
           "flex-1 overflow-hidden whitespace-nowrap text-ellipsis text-sm tabular-nums",