chore: fix UI style for responsive

XDeFi-tech · Apr 10, 2024 · 08d9e4e · 08d9e4e
1 parent e7e8cb0
commit 08d9e4e
Show file tree

Hide file tree

Showing 36 changed files with 212 additions and 162 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -235,7 +235,6 @@ function nav() {
           text: "Gas Tank API",
           link: "/gas-tank/gas-tank-api",
         },
-        { text: "Swap Widget", link: "/swap-widget/widget-integration" },
         {
           text: "Chains Lib",
           link: "/chains-lib/chains-lib",

diff --git a/campaigns/campaigns-service-api.md b/campaigns/campaigns-service-api.md
@@ -1,8 +1,7 @@
 ---
-prev:
-  text: Routing API
-  link: /routing/introduction
-next: false
+next:
+  text: 📒 Chains Lib
+  link: /chains-lib/chains-lib
 ---
 
 # Campaigns Service API

diff --git a/components/AddressCheckV2.jsx b/components/AddressCheckV2.jsx
@@ -71,13 +71,15 @@ export default function AddressCheckV2() {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lgbg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/AssetsCryptoCurrencies.jsx b/components/AssetsCryptoCurrencies.jsx
@@ -103,13 +103,15 @@ const CryptoCurrencies = () => {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/AssetsFiatCurrencies.jsx b/components/AssetsFiatCurrencies.jsx
@@ -97,13 +97,15 @@ const FiatCurrencies = () => {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/AssetsLPTokens.jsx b/components/AssetsLPTokens.jsx
@@ -119,13 +119,15 @@ const AssetsLPTokens = () => {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/AssetsTokens.jsx b/components/AssetsTokens.jsx
@@ -110,13 +110,13 @@ const AssetsTokens = () => {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 ">{JSON.stringify(response, null, 2)}</pre>
       </div>
     </>
   );

diff --git a/components/BridgeableTokens.jsx b/components/BridgeableTokens.jsx
@@ -73,13 +73,15 @@ export default function BridgeableTokens() {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/BroadcastTransaction.jsx b/components/BroadcastTransaction.jsx
@@ -77,7 +77,7 @@ const BroadcastTransaction = () => {
 
   return (
     <>
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start">
         <div className="flex items-center gap-4">
           <span>Chain:</span>
           <div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
@@ -97,15 +97,15 @@ const BroadcastTransaction = () => {
             </select>
           </div>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start">
           <span>Raw Transaction Hex:</span>
           <div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
             <input
               type="text"
               id="raw-hex"
               name="Raw Hex"
               value={rawHex}
-              className="bg-gray-50 text-gray-900 px-2 py-1 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white"
+              className="max-sm:w-[300px] bg-gray-50 text-gray-900 px-2 py-1 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white"
               placeholder="Enter an raw transaction hex"
               onChange={(e) => setRawHex(e.target.value)}
             />
@@ -131,13 +131,15 @@ const BroadcastTransaction = () => {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/ChainV2GraphQL.jsx b/components/ChainV2GraphQL.jsx
@@ -71,13 +71,15 @@ export default function ChainV2GraphQL() {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/ChainsV2.jsx b/components/ChainsV2.jsx
@@ -44,13 +44,15 @@ export default function ChainsV2() {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/ChainsV2GraphQL.jsx b/components/ChainsV2GraphQL.jsx
@@ -61,13 +61,15 @@ export default function ChainsV2GraphQL() {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/DailyVolume.jsx b/components/DailyVolume.jsx
@@ -68,13 +68,15 @@ export default function DailyVolume() {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/DetectWallet.jsx b/components/DetectWallet.jsx
@@ -44,13 +44,13 @@ const DetectWallet = ({ chainId, subChainId }) => {
         </button>
       </div>
       {address && (
-        <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+        <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
           <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
             <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
               Address
             </span>
           </div>
-          <pre className="p-5">{address}</pre>
+          <pre className="p-5 max-h-[600px] overflow-auto">{address}</pre>
         </div>
       )}
     </>

diff --git a/components/GetBalance.jsx b/components/GetBalance.jsx
@@ -174,7 +174,7 @@ const GetBalance = () => {
 
   return (
     <>
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start">
         <div className="flex items-center gap-4">
           <span>Chain:</span>
           <div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
@@ -194,15 +194,15 @@ const GetBalance = () => {
             </select>
           </div>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start max-sm:gap-2">
           <span>Address:</span>
           <div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
             <input
               type="text"
               id="address"
               name="Address"
               value={address}
-              className="bg-gray-50 text-gray-900 px-2 py-1 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white"
+              className="max-sm:w-300px] bg-gray-50 text-gray-900 px-2 py-1 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white"
               placeholder="Enter an address"
               onChange={(e) => setAddress(e.target.value)}
             />
@@ -228,13 +228,15 @@ const GetBalance = () => {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/GetGasFee.jsx b/components/GetGasFee.jsx
@@ -101,7 +101,7 @@ const GetGasFee = () => {
 
   return (
     <>
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start">
         <div className="flex items-center gap-4">
           <span>Chain:</span>
           <div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
@@ -141,13 +141,15 @@ const GetGasFee = () => {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );

diff --git a/components/GetTransactions.jsx b/components/GetTransactions.jsx
@@ -227,7 +227,7 @@ const GetTransactions = () => {
 
   return (
     <>
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start">
         <div className="flex items-center gap-4">
           <span>Chain:</span>
           <div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
@@ -247,15 +247,15 @@ const GetTransactions = () => {
             </select>
           </div>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start max-sm:gap-2">
           <span>Address:</span>
           <div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
             <input
               type="text"
               id="address"
               name="Address"
               value={address}
-              className="bg-gray-50 text-gray-900 px-2 py-1 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white"
+              className="max-sm:w-[300px] bg-gray-50 text-gray-900 px-2 py-1 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white"
               placeholder="Enter an address"
               onChange={(e) => setAddress(e.target.value)}
             />
@@ -281,13 +281,15 @@ const GetTransactions = () => {
           )}
         </button>
       </div>
-      <div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
+      <div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
         <div className="px-5 border-b border-[#e2e2e3] dark:border-black">
           <span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
             Response
           </span>
         </div>
-        <pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
+        <pre className="p-5 max-h-[600px] overflow-auto">
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </div>
     </>
   );