chore: style updates for connect-wallet
73c54d34
1 file(s) · +9 −10
| 344 | 344 | .profile-container { |
|
| 345 | 345 | position: relative; |
|
| 346 | 346 | display: inline-block; |
|
| 347 | + | font-family: sans-serif; |
|
| 347 | 348 | } |
|
| 348 | 349 | ||
| 349 | 350 | .profile { |
|
| 353 | 354 | padding: 10px 20px; |
|
| 354 | 355 | background: var(--bg-color); |
|
| 355 | 356 | border-radius: var(--border-radius); |
|
| 356 | - | border: 1px solid rgba(255, 255, 255, 0.1); |
|
| 357 | 357 | color: var(--color-foreground); |
|
| 358 | 358 | min-width: auto; |
|
| 359 | 359 | transition: background-color 0.3s ease; |
|
| 405 | 405 | } |
|
| 406 | 406 | ||
| 407 | 407 | .avatar { |
|
| 408 | - | width: 24px; |
|
| 409 | - | height: 24px; |
|
| 408 | + | width: 32px; |
|
| 409 | + | height: 32px; |
|
| 410 | 410 | border-radius: 50%; |
|
| 411 | 411 | object-fit: cover; |
|
| 412 | - | border: 1px solid rgba(255, 255, 255, 0.2); |
|
| 413 | 412 | } |
|
| 414 | 413 | ||
| 415 | 414 | .avatar-placeholder { |
|
| 416 | - | width: 24px; |
|
| 417 | - | height: 24px; |
|
| 415 | + | width: 32px; |
|
| 416 | + | height: 32px; |
|
| 418 | 417 | border-radius: 50%; |
|
| 419 | 418 | background: linear-gradient(45deg, var(--color-primary), var(--color-secondary)); |
|
| 420 | 419 | display: flex; |
|
| 430 | 429 | min-width: 0; |
|
| 431 | 430 | } |
|
| 432 | 431 | ||
| 433 | - | .profile-info h3 { |
|
| 432 | + | .profile-info h4 { |
|
| 434 | 433 | margin: 0 0 2px 0; |
|
| 435 | - | font-size: 16px; |
|
| 434 | + | font-size: 14px; |
|
| 436 | 435 | font-weight: 600; |
|
| 437 | 436 | white-space: nowrap; |
|
| 438 | 437 | overflow: hidden; |
|
| 441 | 440 | ||
| 442 | 441 | .profile-info p { |
|
| 443 | 442 | margin: 0; |
|
| 444 | - | font-size: 14px; |
|
| 443 | + | font-size: 12px; |
|
| 445 | 444 | opacity: 0.8; |
|
| 446 | 445 | white-space: nowrap; |
|
| 447 | 446 | overflow: hidden; |
|
| 499 | 498 | profileDiv.innerHTML = ` |
|
| 500 | 499 | ${avatarElement} |
|
| 501 | 500 | <div class="profile-info"> |
|
| 502 | - | <h3>${displayName}</h3> |
|
| 501 | + | <h4>${displayName}</h4> |
|
| 503 | 502 | <p>${this.balance} ETH</p> |
|
| 504 | 503 | </div> |
|
| 505 | 504 | `; |
|