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

style changes

Browse Source
This commit is contained in:
ArcherDilunaire
2024-11-05 14:12:35 +02:00
parent 8e953225c0
commit 4824b186aa
15 changed files with 84 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+19 -11
View File
@@ -1,13 +1,21 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PAPI Console</title>
</head>
<body class="text-polkadot-100 bg-black">
<div id="root" class="flex justify-center"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PAPI Console</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Poppins:wght@200;400&display=swap"
rel="stylesheet">
</head>
<body class="text-polkadot-100 bg-black karla-400">
<div id="root" class="flex justify-center"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
public/papi_logo-dark.svg
+1
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="c" 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

src/App.tsx
+11 -10
View File
@@ -12,16 +12,17 @@ export default function App() {
return (
<div className="w-full max-w-screen-lg h-screen bg-polkadot-950 flex flex-col">
<Header />
<Routes>
<Route path="explorer/*" element={<Explorer />} />
<Route path="extrinsics/*" element={<Extrinsics />} />
<Route path="storage/*" element={<Storage />} />
<Route path="constants/*" element={<Constants />} />
<Route path="runtimeCalls/*" element={<RuntimeCalls />} />
<Route path="metadata/*" element={<Metadata />} />
<Route path="*" element={<Navigate to="/extrinsics" replace />} />
</Routes>
<div className="p-4">
<Routes>
<Route path="explorer/*" element={<Explorer />} />
<Route path="extrinsics/*" element={<Extrinsics />} />
<Route path="storage/*" element={<Storage />} />
<Route path="constants/*" element={<Constants />} />
<Route path="runtimeCalls/*" element={<RuntimeCalls />} />
<Route path="metadata/*" element={<Metadata />} />
<Route path="*" element={<Navigate to="/extrinsics" replace />} />
</Routes>
</div>
<Transactions />
</div>
)
src/codec-components/LookupTypeEdit/BinaryDisplay.tsx
+1 -1
View File
@@ -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 rounded flex flex-row bg-polkadot-800 items-start">
<div className="px-3 py-2 gap-2 flex flex-row border-polkadot-600 border items-start">
<CopyText text={hex ?? ""} disabled={!hex} className="h-5" />
<div
className={twMerge(
src/codec-components/LookupTypeEdit/LookupTypeEdit.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ export const LookupTypeEdit: FC<{
</div>
)}
<div className="flex-1">
<div className="p-2 rounded bg-polkadot-900">
<div className="p-2 rounded">
<Marker id={[]} />
<EditCodec {...codecProps} />
</div>
src/codec-components/common/ListItem.tsx
+1 -1
View File
@@ -76,7 +76,7 @@ export const ListItem: React.FC<{
{inline ? null : (
<div
className={clsx(
"flex-row p-2 items-center border border-polkadot-700 rounded ",
"flex-row p-2 items-center border border-polkadot-700",
isCollapsed ? "hidden" : "",
)}
>
src/codec-components/common/Markers.tsx
+9 -15
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)
@@ -108,8 +108,8 @@ export const VisibleWindow = () => {
const transitionEnabled = useWindowTransition(isAllVisible)
if (!ctx) return null
const fade = twMerge(
"absolute left-0 right-0 ease-linear bg-gray-100 bg-opacity-10 backdrop-blur-[0.4px]",
const window = twMerge(
"absolute left-0 right-0 ease-linear bg-polkadot-900 z-[-1]",
transitionEnabled && "transition-all",
)
@@ -117,24 +117,18 @@ export const VisibleWindow = () => {
<div
ref={ref}
className={twMerge(
"absolute top-0 right-0 left-0 bottom-0 pointer-events-none border-x-8 border-y-4 border-gray-100 border-opacity-10 transition-all",
"absolute top-0 right-0 left-0 bottom-0 pointer-events-none transition-all",
isAllVisible && "border-x-0 border-y-0",
)}
>
<div
className={fade}
className={window}
style={{
top: 0,
height: ctx.range[0],
top: ctx.range[0],
height: ctx.range[1],
}}
></div>
<div
className={fade}
style={{
top: ctx.range[1] || "100%",
bottom: 0,
}}
></div>
>
</div>
</div>
)
}
src/components/ActionButton.tsx
+2 -2
View File
@@ -7,8 +7,8 @@ export const ActionButton: FC<ButtonHTMLAttributes<HTMLButtonElement>> = (
<button
{...props}
className={twMerge(
"text-polkadot-500 border rounded border-polkadot-500 px-2 py-1",
"cursor-pointer select-none hover:bg-polkadot-500 hover:text-polkadot-200",
"text-polkadot-0 bg-polkadot-700 px-3 py-1",
"cursor-pointer select-none hover:bg-polkadot-500",
props.disabled && "opacity-50 pointer-events-none",
props.className,
)}
src/components/ButtonGroup.tsx
+4 -6
View File
@@ -17,18 +17,16 @@ export const ButtonGroup: FC<{
type="single"
value={value}
onValueChange={(v) => v && onValueChange(v)}
className="inline-flex bg-polkadot-800 rounded"
className="inline-flex border border-polkadot-700"
>
{items.map(({ value, content, disabled }) => (
<ToggleGroup.Item
value={value}
key={value}
className={twMerge(
"bg-white text-polkadot-500 ml-[1px] px-2",
"first:ml-0 first:rounded-l",
"last:rounded-r",
"hover:bg-polkadot-100",
"data-[state=on]:bg-polkadot-500 data-[state=on]:text-white",
"text-polkadot-600 px-3 py-1",
"hover:text-polkadot-500",
"data-[state=on]:bg-polkadot-700 data-[state=on]:text-white",
disabled && "opacity-50 pointer-events-none",
)}
disabled={disabled}
src/components/Select.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const SearchableSelect = <T,>({
onClose={() => setQuery("")}
immediate
>
<div className="flex flex-row p-2 rounded border border-polkadot-200 text-white bg-black">
<div className="flex flex-row px-4 py-2 border border-polkadot-200 text-white bg-black">
<ComboboxInput
className="text-ellipsis overflow-hidden whitespace-nowrap focus:outline-none"
displayValue={(option: T) =>
src/index.css
+19
View File
@@ -10,6 +10,25 @@ input, dialog {
color-scheme: dark;
}
.karla-400 {
font-family: "Karla", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.poppins-extralight {
font-family: "Poppins", sans-serif;
font-weight: 200;
font-style: normal;
}
.poppins-regular {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
.visible_when_parent_hover {
opacity: 0;
pointer-events: none;
src/pages/Extrinsics/EditMode.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ export const EditMode: React.FC<{
</div>
</div>
<div className="flex-1">
<div className="p-2 rounded bg-polkadot-900">
<div className="p-2 rounded">
<Marker id={[]} />
<EditCodec {...props} />
</div>
src/pages/Extrinsics/Extrinsics.tsx
+1 -2
View File
@@ -55,8 +55,7 @@ export const Extrinsics = withSubscribe(
return (
<div className="flex flex-col overflow-hidden gap-2">
<div>Extrinsics</div>
{/* <div>Extrinsics</div> */}
<BinaryDisplay
{...extrinsicProps}
value={componentValue}
src/pages/Extrinsics/JsonMode.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ export const JsonMode: FC<{
const src = useMemo(() => (value ? decode(value) : null), [value, decode])
return (
<div className="overflow-auto p-2 bg-polkadot-900 text-sm">
<div className="overflow-auto p-2 text-sm">
<JsonDisplay src={src} />
</div>
)
src/pages/Header.tsx
+12 -9
View File
@@ -1,42 +1,45 @@
import { Link } from "react-router-dom"
export const Header = () => (
<div className="flex bg-polkadot-900 p-2 items-center flex-shrink-0">
<h1 className="text-xl flex-1">PAPI Console</h1>
<div className="flex flex-row items-center justify-end gap-2">
<div className="flex p-4 pb-0 items-center flex-shrink-0">
<div className="flex flex-1 items-center flex-row gap-2">
<img className="w-14 min-w-14" src="/papi_logo-dark.svg" alt="papi-logo" />
<h1 className="hidden lg:block poppins-regular text-xl">papi <span className="poppins-extralight">console</span></h1>
</div>
<div className="flex flex-row items-center justify-end bg-polkadot-800 px-1 py-1 rounded-full">
<Link
to="/explorer"
className="text-polkadot-200 border-polkadot-200 cursor-pointer border-b hover:text-polkadot-500 hover:border-polkadot-500"
className="text-polkadot-300 cursor-pointer hover:text-polkadot-0 px-3 py-1 hover:bg-polkadot-500 rounded-full"
>
Explorer
</Link>
<Link
to="/metadata"
className="text-polkadot-200 border-polkadot-200 cursor-pointer border-b hover:text-polkadot-500 hover:border-polkadot-500"
className="text-polkadot-300 cursor-pointer hover:text-polkadot-0 px-3 py-1 hover:bg-polkadot-500 rounded-full"
>
Metadata
</Link>
<Link
to="/storage"
className="text-polkadot-200 border-polkadot-200 cursor-pointer border-b hover:text-polkadot-500 hover:border-polkadot-500"
className="text-polkadot-300 cursor-pointer hover:text-polkadot-0 px-3 py-1 hover:bg-polkadot-500 rounded-full"
>
Storage
</Link>
<Link
to="/constants"
className="text-polkadot-200 border-polkadot-200 cursor-pointer border-b hover:text-polkadot-500 hover:border-polkadot-500"
className="text-polkadot-300 cursor-pointer hover:text-polkadot-0 px-3 py-1 hover:bg-polkadot-500 rounded-full"
>
Constants
</Link>
<Link
to="/runtimeCalls"
className="text-polkadot-200 border-polkadot-200 cursor-pointer border-b hover:text-polkadot-500 hover:border-polkadot-500"
className="text-polkadot-300 cursor-pointer hover:text-polkadot-0 px-3 py-1 hover:bg-polkadot-500 rounded-full"
>
Runtime Calls
</Link>
<Link
to="/extrinsics"
className="text-polkadot-200 border-polkadot-200 cursor-pointer border-b hover:text-polkadot-500 hover:border-polkadot-500"
className="text-polkadot-300 cursor-pointer hover:text-polkadot-0 px-3 py-1 hover:bg-polkadot-500 rounded-full"
>
Extrinsics
</Link>