Skip to content

Commit 5f51db9

Browse files
committed
fix: overlapping components
1 parent bcc8623 commit 5f51db9

File tree

2 files changed

+56
-46
lines changed

2 files changed

+56
-46
lines changed

src/pages/Home/index.css

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,10 @@ a {
2525
.home {
2626
display: flex;
2727
flex-direction: column;
28-
justify-content: center;
28+
justify-content: space-evenly;
2929
align-items: center;
30-
gap: 20px;
30+
height: 100%;
31+
padding: 45px 0;
3132
}
3233

3334
.menu-icon {
@@ -272,22 +273,28 @@ h1 span {
272273
gap: 16px;
273274
}
274275

275-
.current-wallet {
276+
.wallet-info-container {
277+
display: flex;
278+
flex-direction: column;
279+
gap: 5px;
280+
}
281+
282+
.wallet-info {
276283
display: flex;
277284
align-items: center;
278285
gap: 16px;
279286
}
280287

281-
.current-wallet > p {
288+
.wallet-info > p {
282289
font-weight: 700;
283290
width: initial;
284291
}
285292

286-
.current-wallet p {
293+
.wallet-info p {
287294
margin: 0;
288295
}
289296

290-
.current-wallet button {
297+
.wallet-info button {
291298
background: 0;
292299
border: 0;
293300

@@ -302,7 +309,7 @@ h1 span {
302309
margin-top: 2px;
303310
}
304311

305-
.current-wallet img {
312+
.wallet-info img {
306313
width: 16px;
307314
height: 16px;
308315

@@ -350,7 +357,7 @@ h1 span {
350357
} */
351358

352359
.auto-rs-power {
353-
background: #D7E5F01F;
360+
background: #d7e5f01f;
354361
display: flex;
355362
justify-content: space-between;
356363
align-items: center;
@@ -370,5 +377,5 @@ h1 span {
370377

371378
.auto-rs-power div p:last-child {
372379
font-size: 12px;
373-
color: #B1B1B2;
380+
color: #b1b1b2;
374381
}

src/pages/Home/index.tsx

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -289,44 +289,47 @@ const Home = () => {
289289
<>
290290
{renderButton()}
291291
{renderRegionSelector()}
292-
<div className="current-wallet">
293-
<p>Current Wallet</p>
294-
{
295-
profile?.keyID ? (
296-
<button onClick={copyWallet}>
297-
<p>{profile?.keyID.slice(0, 4)}...{profile?.keyID.slice(-4)}</p>
298-
{
299-
isWalletCopied ? (
300-
<img src="/assets/check.svg" alt="Copy icon" />
301-
) : (
302-
<img src="/assets/copy.svg" alt="Copy icon" />
303-
)
304-
}
305-
</button>
306-
) : (
307-
<Skeleton width="100px" height="24px" />
308-
)
309-
}
310-
</div>
311292

312-
<div className="current-wallet">
313-
<p>Private Key</p>
314-
{
315-
profile?.privateKeyArmor ? (
316-
<button onClick={copyPrivateKey}>
317-
<p>{profile?.privateKeyArmor.slice(0, 4)}...{profile?.privateKeyArmor.slice(-4)}</p>
318-
{
319-
isPrivateKeyCopied ? (
320-
<img src="/assets/check.svg" alt="Copy icon" />
321-
) : (
322-
<img src="/assets/copy.svg" alt="Copy icon" />
323-
)
324-
}
325-
</button>
326-
) : (
327-
<Skeleton width="100px" height="24px" />
328-
)
329-
}
293+
<div className="wallet-info-container">
294+
<div className="wallet-info">
295+
<p>Current Wallet</p>
296+
{
297+
profile?.keyID ? (
298+
<button onClick={copyWallet}>
299+
<p>{profile?.keyID.slice(0, 4)}...{profile?.keyID.slice(-4)}</p>
300+
{
301+
isWalletCopied ? (
302+
<img src="/assets/check.svg" alt="Copy icon" />
303+
) : (
304+
<img src="/assets/copy.svg" alt="Copy icon" />
305+
)
306+
}
307+
</button>
308+
) : (
309+
<Skeleton width="100px" height="24px" />
310+
)
311+
}
312+
</div>
313+
314+
<div className="wallet-info">
315+
<p>Private Key</p>
316+
{
317+
profile?.privateKeyArmor ? (
318+
<button onClick={copyPrivateKey}>
319+
<p>{profile?.privateKeyArmor.slice(0, 4)}...{profile?.privateKeyArmor.slice(-4)}</p>
320+
{
321+
isPrivateKeyCopied ? (
322+
<img src="/assets/check.svg" alt="Copy icon" />
323+
) : (
324+
<img src="/assets/copy.svg" alt="Copy icon" />
325+
)
326+
}
327+
</button>
328+
) : (
329+
<Skeleton width="100px" height="24px" />
330+
)
331+
}
332+
</div>
330333
</div>
331334
</>
332335
)}

0 commit comments

Comments
 (0)