Skip to content

Commit 1eb0c0f

Browse files
HoangVD2HoangVD2
authored
chore: fix UI style for responsive (#32)
1 parent e7e8cb0 commit 1eb0c0f

36 files changed

+212
-162
lines changed

‎.vitepress/config.ts

-1
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,6 @@ function nav() {
235235
text: "Gas Tank API",
236236
link: "/gas-tank/gas-tank-api",
237237
},
238-
{ text: "Swap Widget", link: "/swap-widget/widget-integration" },
239238
{
240239
text: "Chains Lib",
241240
link: "/chains-lib/chains-lib",

‎campaigns/campaigns-service-api.md

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
---
2-
prev:
3-
text: Routing API
4-
link: /routing/introduction
5-
next: false
2+
next:
3+
text: 📒 Chains Lib
4+
link: /chains-lib/chains-lib
65
---
76

87
# Campaigns Service API

‎components/AddressCheckV2.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,15 @@ export default function AddressCheckV2() {
7171
)}
7272
</button>
7373
</div>
74-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
74+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
7575
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
7676
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
7777
Response
7878
</span>
7979
</div>
80-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
80+
<pre className="p-5 max-h-[600px] overflow-auto">
81+
{JSON.stringify(response, null, 2)}
82+
</pre>
8183
</div>
8284
</>
8385
);

‎components/AssetsCryptoCurrencies.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -103,13 +103,15 @@ const CryptoCurrencies = () => {
103103
)}
104104
</button>
105105
</div>
106-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
106+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
107107
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
108108
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
109109
Response
110110
</span>
111111
</div>
112-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
112+
<pre className="p-5 max-h-[600px] overflow-auto">
113+
{JSON.stringify(response, null, 2)}
114+
</pre>
113115
</div>
114116
</>
115117
);

‎components/AssetsFiatCurrencies.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,15 @@ const FiatCurrencies = () => {
9797
)}
9898
</button>
9999
</div>
100-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
100+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
101101
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
102102
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
103103
Response
104104
</span>
105105
</div>
106-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
106+
<pre className="p-5 max-h-[600px] overflow-auto">
107+
{JSON.stringify(response, null, 2)}
108+
</pre>
107109
</div>
108110
</>
109111
);

‎components/AssetsLPTokens.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -119,13 +119,15 @@ const AssetsLPTokens = () => {
119119
)}
120120
</button>
121121
</div>
122-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
122+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
123123
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
124124
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
125125
Response
126126
</span>
127127
</div>
128-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
128+
<pre className="p-5 max-h-[600px] overflow-auto">
129+
{JSON.stringify(response, null, 2)}
130+
</pre>
129131
</div>
130132
</>
131133
);

‎components/AssetsTokens.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -110,13 +110,13 @@ const AssetsTokens = () => {
110110
)}
111111
</button>
112112
</div>
113-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
113+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
114114
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
115115
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
116116
Response
117117
</span>
118118
</div>
119-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
119+
<pre className="p-5 ">{JSON.stringify(response, null, 2)}</pre>
120120
</div>
121121
</>
122122
);

‎components/BridgeableTokens.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,15 @@ export default function BridgeableTokens() {
7373
)}
7474
</button>
7575
</div>
76-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
76+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
7777
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
7878
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
7979
Response
8080
</span>
8181
</div>
82-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
82+
<pre className="p-5 max-h-[600px] overflow-auto">
83+
{JSON.stringify(response, null, 2)}
84+
</pre>
8385
</div>
8486
</>
8587
);

‎components/BroadcastTransaction.jsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const BroadcastTransaction = () => {
7777

7878
return (
7979
<>
80-
<div className="flex items-center gap-4">
80+
<div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start">
8181
<div className="flex items-center gap-4">
8282
<span>Chain:</span>
8383
<div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
@@ -97,15 +97,15 @@ const BroadcastTransaction = () => {
9797
</select>
9898
</div>
9999
</div>
100-
<div className="flex items-center gap-4">
100+
<div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start">
101101
<span>Raw Transaction Hex:</span>
102102
<div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
103103
<input
104104
type="text"
105105
id="raw-hex"
106106
name="Raw Hex"
107107
value={rawHex}
108-
className="bg-gray-50 text-gray-900 px-2 py-1 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white"
108+
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"
109109
placeholder="Enter an raw transaction hex"
110110
onChange={(e) => setRawHex(e.target.value)}
111111
/>
@@ -131,13 +131,15 @@ const BroadcastTransaction = () => {
131131
)}
132132
</button>
133133
</div>
134-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
134+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
135135
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
136136
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
137137
Response
138138
</span>
139139
</div>
140-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
140+
<pre className="p-5 max-h-[600px] overflow-auto">
141+
{JSON.stringify(response, null, 2)}
142+
</pre>
141143
</div>
142144
</>
143145
);

‎components/ChainV2GraphQL.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,15 @@ export default function ChainV2GraphQL() {
7171
)}
7272
</button>
7373
</div>
74-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
74+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
7575
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
7676
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
7777
Response
7878
</span>
7979
</div>
80-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
80+
<pre className="p-5 max-h-[600px] overflow-auto">
81+
{JSON.stringify(response, null, 2)}
82+
</pre>
8183
</div>
8284
</>
8385
);

‎components/ChainsV2.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,15 @@ export default function ChainsV2() {
4444
)}
4545
</button>
4646
</div>
47-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
47+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
4848
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
4949
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
5050
Response
5151
</span>
5252
</div>
53-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
53+
<pre className="p-5 max-h-[600px] overflow-auto">
54+
{JSON.stringify(response, null, 2)}
55+
</pre>
5456
</div>
5557
</>
5658
);

‎components/ChainsV2GraphQL.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,15 @@ export default function ChainsV2GraphQL() {
6161
)}
6262
</button>
6363
</div>
64-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
64+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
6565
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
6666
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
6767
Response
6868
</span>
6969
</div>
70-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
70+
<pre className="p-5 max-h-[600px] overflow-auto">
71+
{JSON.stringify(response, null, 2)}
72+
</pre>
7173
</div>
7274
</>
7375
);

‎components/DailyVolume.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,15 @@ export default function DailyVolume() {
6868
)}
6969
</button>
7070
</div>
71-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
71+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
7272
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
7373
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
7474
Response
7575
</span>
7676
</div>
77-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
77+
<pre className="p-5 max-h-[600px] overflow-auto">
78+
{JSON.stringify(response, null, 2)}
79+
</pre>
7880
</div>
7981
</>
8082
);

‎components/DetectWallet.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@ const DetectWallet = ({ chainId, subChainId }) => {
4444
</button>
4545
</div>
4646
{address && (
47-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
47+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
4848
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
4949
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
5050
Address
5151
</span>
5252
</div>
53-
<pre className="p-5">{address}</pre>
53+
<pre className="p-5 max-h-[600px] overflow-auto">{address}</pre>
5454
</div>
5555
)}
5656
</>

‎components/GetBalance.jsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ const GetBalance = () => {
174174

175175
return (
176176
<>
177-
<div className="flex items-center gap-4">
177+
<div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start">
178178
<div className="flex items-center gap-4">
179179
<span>Chain:</span>
180180
<div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
@@ -194,15 +194,15 @@ const GetBalance = () => {
194194
</select>
195195
</div>
196196
</div>
197-
<div className="flex items-center gap-4">
197+
<div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start max-sm:gap-2">
198198
<span>Address:</span>
199199
<div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
200200
<input
201201
type="text"
202202
id="address"
203203
name="Address"
204204
value={address}
205-
className="bg-gray-50 text-gray-900 px-2 py-1 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white"
205+
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"
206206
placeholder="Enter an address"
207207
onChange={(e) => setAddress(e.target.value)}
208208
/>
@@ -228,13 +228,15 @@ const GetBalance = () => {
228228
)}
229229
</button>
230230
</div>
231-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
231+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
232232
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
233233
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
234234
Response
235235
</span>
236236
</div>
237-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
237+
<pre className="p-5 max-h-[600px] overflow-auto">
238+
{JSON.stringify(response, null, 2)}
239+
</pre>
238240
</div>
239241
</>
240242
);

‎components/GetGasFee.jsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const GetGasFee = () => {
101101

102102
return (
103103
<>
104-
<div className="flex items-center gap-4">
104+
<div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start">
105105
<div className="flex items-center gap-4">
106106
<span>Chain:</span>
107107
<div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
@@ -141,13 +141,15 @@ const GetGasFee = () => {
141141
)}
142142
</button>
143143
</div>
144-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
144+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
145145
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
146146
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
147147
Response
148148
</span>
149149
</div>
150-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
150+
<pre className="p-5 max-h-[600px] overflow-auto">
151+
{JSON.stringify(response, null, 2)}
152+
</pre>
151153
</div>
152154
</>
153155
);

‎components/GetTransactions.jsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ const GetTransactions = () => {
227227

228228
return (
229229
<>
230-
<div className="flex items-center gap-4">
230+
<div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start">
231231
<div className="flex items-center gap-4">
232232
<span>Chain:</span>
233233
<div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
@@ -247,15 +247,15 @@ const GetTransactions = () => {
247247
</select>
248248
</div>
249249
</div>
250-
<div className="flex items-center gap-4">
250+
<div className="flex items-center gap-4 max-sm:flex-col max-sm:items-start max-sm:gap-2">
251251
<span>Address:</span>
252252
<div className="border border-[#e2e2e3] dark:border-[#2e2e32] hover:border-[#3451b2] rounded-lg overflow-hidden w-fit">
253253
<input
254254
type="text"
255255
id="address"
256256
name="Address"
257257
value={address}
258-
className="bg-gray-50 text-gray-900 px-2 py-1 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white"
258+
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"
259259
placeholder="Enter an address"
260260
onChange={(e) => setAddress(e.target.value)}
261261
/>
@@ -281,13 +281,15 @@ const GetTransactions = () => {
281281
)}
282282
</button>
283283
</div>
284-
<div className="my-4 rounded-lg max-h-[600px] overflow-auto bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
284+
<div className="my-4 rounded-lg bg-[#F6F6F7] text-[#24292E] dark:bg-[#161618] dark:text-[#E1E4E8]">
285285
<div className="px-5 border-b border-[#e2e2e3] dark:border-black">
286286
<span className="inline-block border-b-2 border-[#3451b2] dark:border-[#a8b1ff] text-[14px] leading-[48px]">
287287
Response
288288
</span>
289289
</div>
290-
<pre className="p-5">{JSON.stringify(response, null, 2)}</pre>
290+
<pre className="p-5 max-h-[600px] overflow-auto">
291+
{JSON.stringify(response, null, 2)}
292+
</pre>
291293
</div>
292294
</>
293295
);

0 commit comments

Comments
 (0)