search

Uniswap / widgets

widgets-uniswap.vercel.app
GNU General Public License v3.0
123 stars 175 forks source link

The swap button does not fit the view #623

Open paintoshi opened 10 months ago

paintoshi commented 10 months ago

Bug Description After pressing "review swap", the swap button is too tall for the view.

image

A workaround based on https://github.com/Uniswap/widgets/issues/584#issuecomment-1563399124

Wrap your uniswap widget with <div class="uniswap"> and add next CSS:

.uniswap [color='container'] > div > div:nth-child(3) {
  position: relative;
}

.uniswap [data-testid='swap-button'] {
  margin-bottom: 16px;
}

The first part "position relative" fixes a selection hover bug. The "16px" makes the button fit by making it smaller, as seen here.

image

Or wrap the CSS in a styled div:

import styled from 'styled-components'
const WidgetContainer = styled.div`
  [color='container'] > div > div:nth-child(3) {
    position: relative;
  }

  [data-testid='swap-button'] {
    margin-bottom: 16px;
  }
`
myInstagramAlternative commented 10 months ago

Same here...

Btw. theme colors (container, module, dialog) are not consistent across windows/elements and pracically useless if you want to put opacity.

Example: const theme = { primary: "#311b49", secondary: "#311b49", interactive: "#65de56", container: "rgba(0,180,254, 0.4)", module: "rgba(0,255,254, 0.5)", accent: "#fff", outline: "#65de56", dialog: "rgba(255,255,255, 0.8)", };