chore: fix UI style for responsive (#32)

XDeFi-tech · Apr 10, 2024 · 1eb0c0f · 1eb0c0f
1 parent e7e8cb0
commit 1eb0c0f
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-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/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>
  </>
  );