From 4824b186aae66ab655ad1d6b996ede8f5d923eb4 Mon Sep 17 00:00:00 2001
From: ArcherDilunaire <aurelrichard00@gmail.com>
Date: Tue, 5 Nov 2024 13:44:58 +0200
Subject: [PATCH] style changes

---
 index.html                                    | 30 ++++++++++++-------
 public/papi_logo-dark.svg                     |  1 +
 src/App.tsx                                   | 21 ++++++-------
 .../LookupTypeEdit/BinaryDisplay.tsx          |  2 +-
 .../LookupTypeEdit/LookupTypeEdit.tsx         |  2 +-
 src/codec-components/common/ListItem.tsx      |  2 +-
 src/codec-components/common/Markers.tsx       | 24 ++++++---------
 src/components/ActionButton.tsx               |  4 +--
 src/components/ButtonGroup.tsx                | 10 +++----
 src/components/Select.tsx                     |  2 +-
 src/index.css                                 | 19 ++++++++++++
 src/pages/Extrinsics/EditMode.tsx             |  2 +-
 src/pages/Extrinsics/Extrinsics.tsx           |  3 +-
 src/pages/Extrinsics/JsonMode.tsx             |  2 +-
 src/pages/Header.tsx                          | 21 +++++++------
 15 files changed, 84 insertions(+), 61 deletions(-)
 create mode 100644 public/papi_logo-dark.svg

diff --git a/index.html b/index.html
index ea96370..39f7ce8 100644
--- a/index.html
+++ b/index.html
@@ -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>
\ No newline at end of file
diff --git a/public/papi_logo-dark.svg b/public/papi_logo-dark.svg
new file mode 100644
index 0000000..dba3451
--- /dev/null
+++ b/public/papi_logo-dark.svg
@@ -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>
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 28a0928..330abdb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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>
   )
diff --git a/src/codec-components/LookupTypeEdit/BinaryDisplay.tsx b/src/codec-components/LookupTypeEdit/BinaryDisplay.tsx
index 0b3fc29..d4f14aa 100644
--- 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 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(
diff --git a/src/codec-components/LookupTypeEdit/LookupTypeEdit.tsx b/src/codec-components/LookupTypeEdit/LookupTypeEdit.tsx
index 0289b8c..6079d65 100644
--- a/src/codec-components/LookupTypeEdit/LookupTypeEdit.tsx
+++ b/src/codec-components/LookupTypeEdit/LookupTypeEdit.tsx
@@ -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>
diff --git a/src/codec-components/common/ListItem.tsx b/src/codec-components/common/ListItem.tsx
index 3009094..692a16f 100644
--- a/src/codec-components/common/ListItem.tsx
+++ b/src/codec-components/common/ListItem.tsx
@@ -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" : "",
           )}
         >
diff --git a/src/codec-components/common/Markers.tsx b/src/codec-components/common/Markers.tsx
index b0165cd..6a76124 100644
--- a/src/codec-components/common/Markers.tsx
+++ b/src/codec-components/common/Markers.tsx
@@ -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>
   )
 }
diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
index bf7951e..c6e9676 100644
--- a/src/components/ActionButton.tsx
+++ b/src/components/ActionButton.tsx
@@ -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,
     )}
diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
index f05ce3d..60e505f 100644
--- a/src/components/ButtonGroup.tsx
+++ b/src/components/ButtonGroup.tsx
@@ -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}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index cdf6d03..f5ce18c 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -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) =>
diff --git a/src/index.css b/src/index.css
index 2c472b5..890de2c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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;
diff --git a/src/pages/Extrinsics/EditMode.tsx b/src/pages/Extrinsics/EditMode.tsx
index 920ccb4..c45a5b0 100644
--- a/src/pages/Extrinsics/EditMode.tsx
+++ b/src/pages/Extrinsics/EditMode.tsx
@@ -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>
diff --git a/src/pages/Extrinsics/Extrinsics.tsx b/src/pages/Extrinsics/Extrinsics.tsx
index afcdd7a..2486887 100644
--- a/src/pages/Extrinsics/Extrinsics.tsx
+++ b/src/pages/Extrinsics/Extrinsics.tsx
@@ -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}
diff --git a/src/pages/Extrinsics/JsonMode.tsx b/src/pages/Extrinsics/JsonMode.tsx
index 9869d8b..9f14477 100644
--- a/src/pages/Extrinsics/JsonMode.tsx
+++ b/src/pages/Extrinsics/JsonMode.tsx
@@ -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>
   )
diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx
index bb1222c..a6965dd 100644
--- a/src/pages/Header.tsx
+++ b/src/pages/Header.tsx
@@ -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>