[bug] (ConnectButton) Wallet providers icons are centered instead of left-aligned

0xpolarzero commented 2 years ago

Is there an existing issue for this?

[X] I have searched the existing issues

RainbowKit Version

0.7.1

wagmi Version

0.6.7

Current Behavior

On the 'Connect a Wallet' window, the wallet providers are centered, which is not very elegant. In all demos (and documentation) it is aligned to the left, so the icons are vertically aligned. I've just installed rainbowkit with the dependencies, and updated my code according to the 'Installation' documentation. Here is how it looks like:

It happens with Chrome, Firefox, Safari. When catching the responsible CSS element with the debugger, here is what it says:

A quick way to get it back to left-align, is by just typing the following in the custom CSS file to override that weird behavior:

div.iekbcc0.ju367va.ju367v10.ju367v1i {
  align-items: baseline;
}

And it indeed gets it back to 'normal'.

Expected Behavior

The wallet providers icons should be aligned to the left, just as in the documentation. Or just like what's been achieved in the last picture of the previous section.

Steps To Reproduce

I don't know if this will do the same, since I've not managed to see this issue anywhere.

Install next-app:
```
yarn create next-app
```

Just keep the following in the return statement of index.js:

<div className={styles.container}>
  <Head>
    <title>NFT Marketplace - Moralis</title>
    <meta name='description' content='Generated by create next app' />
    <link rel='icon' href='/favicon.ico' />
  </Head>

  <header className={styles.header}>
    <Header />
  </header>
</div>

(The header style in the CSS module is empty).

Create a Header.js component, and import it in that index.js

Install rainbowkit, ethers, wagmi:

yarn add @rainbow-me/rainbowkit
yarn add --dev ethers wagmi

... which should install

"@rainbow-me/rainbowkit": "^0.7.1",
"ethers": "^5.7.1",
"wagmi": "^0.6.7",

Paste the following in that Header.js:


import { ConnectButton } from '@rainbow-me/rainbowkit';

export default function Header() { return ; }


6. And paste the following in `_app.js`:
```javascript
import '../styles/globals.css';
import '@rainbow-me/rainbowkit/styles.css';

import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.arbitrum, chain.goerli],
  [alchemyProvider({ apiKey: process.env.ALCHEMY_API_KEY }), publicProvider()],
);

const { connectors } = getDefaultWallets({
  appName: 'NFT Marketplace - Moralis',
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

function MyApp({ Component, pageProps }) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

export default MyApp;

Add your ALCHEMY_API_KEY in a .env file.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/p/github/polar0/full-blockchain-solidity-course-js/csb-37q6ef/tree/main/999-nextjs-rainbowkit-bug?file=%2FREADME.md

Anything else?

You can just go to the codesandbox & run a new task:

cd 999-nextjs-rainbowkit-bug && yarn dev

I hope this will help to solve the issue. I guess it just needs vertical-align: baseline to be replaced with align-items: baseline at div.iekbcc0.ju367va.ju367v10.ju367v1i.

adbario commented 2 years ago

@polar0 This is not a bug in RainbowKit; the alignment comes from your global.css file where you set all buttons as flex and align items to center along the cross axis.

0xpolarzero commented 2 years ago

@polar0 This is not a bug in RainbowKit; the alignment comes from your global.css file where you set all buttons as flex and align items to center along the cross axis.

Oh yes... Thank you for your answer, and sorry for the wrong notice. I should have checked my own code before crying wolf 😅

rainbow-me / rainbowkit