search

web3ui / web3uikit

Lightweight reusable Web3 UI components for dapps.
https://web3uikit.com
MIT License
1.72k stars 269 forks source link

ConnectButton style override #1028

Closed joseph-allen closed 1 year ago

joseph-allen commented 1 year ago

Is there any way to override the styles of the connectButton?

https://web3ui.github.io/web3uikit/?path=/story/1-web3-parse-connectbutton--default

joseph-allen commented 1 year ago

I found these threads https://web3ui.github.io/web3uikit/?path=/story/1-web3-parse-connectbutton--default https://github.com/web3ui/web3uikit/issues/106

joseph-allen commented 1 year ago

I sort of did this with some CSS changes in global.css

.connectWalletButton > div > button{
  background-color: black;
  border-radius: 0;
  border: 1px solid white;
}

.connectWalletButton > div > button > span{
  color: white;
}
BillyG83 commented 1 year ago

hey @joseph-allen thanks for using the kit... did you manage to make any progress with this? Let me know if you have any further questions amigo

joseph-allen commented 1 year ago

Hey, thanks.

I found the above CSS changes worked okay, though the "connected wallet" state also needs restyling. I did look through the closed issues but didn't find anything that would help so I am happy to close this and hopefully the next group find this :D

BillyG83 commented 1 year ago

nice @joseph-allen we are just about to overhaul the connect button to make it totally flexible to your design and even your stack. Big and amazing coming soon

joseph-allen commented 1 year ago

Awesome, greatly appreciated, we love web3uikit :)

SquanchingInHere commented 1 year ago

nice @joseph-allen we are just about to overhaul the connect button to make it totally flexible to your design and even your stack. Big and amazing coming soon

Is there an update on this? I've been experimenting with web3uikit, and it'd be great if there were more styling options.

On a somewhat related note, is there a trick to force a rerender for the ConnectButton component? I've tried everything I can think of (e.g., wrapping it in another component, adding dummy state variables, etc.), and I can't force it to rerender without a hard refresh of the entire page.

More to the point, I'm just trying to get it to display the correct wallet balance after a successful transaction that changes the balance. Another workaround would be to just hide the wallet balance altogether (any tips on how to do that easily would also be appreciated).

Thanks in advance!