• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• frontend-v1-master
  • src
    • App.tsx
    • utils
      • errors.ts
      • math.ts
      • bridge.ts
      • chains.ts
      • index.ts
      • address.ts
      • onboard.ts
      • pool.ts
      • notify.ts
      • format.ts
      • weiMath.ts
      • constants.ts
    • views
      • Send.tsx
      • About.tsx
      • Confirmation
        • Confirmation.tsx
        • NewConfirmation.tsx
        • NewConfirmation.styles.ts
        • index.ts
        • Confirmation.styles.ts
      • index.ts
      • Pool.tsx
    • onboard-override.css
    • index.tsx
    • state
      • send.ts
      • transactions.ts
      • hooks.ts
      • index.ts
      • poolsApi.ts
      • blocks.ts
      • connection.ts
      • pools.ts
      • deposits.ts
      • chainApi.ts
    • hooks
      • useClickOutsideModal.ts
      • index.ts
      • useERC20.ts
      • usePrevious.ts
    • context
      • ErrorContext.tsx
    • components
      • Layout
        • index.ts
        • Layout.tsx
      • SuperHeader
        • SuperHeader.tsx
        • index.ts
      • Section
        • index.ts
        • Section.tsx
      • ChainSelection
        • ChainSelection.tsx
        • ChainSelection.styles.tsx
        • index.ts
      • Dialog
        • Dialog.tsx
        • index.ts
        • Dialog.styles.tsx
      • index.ts
      • PoolSelection
        • PoolSelection.tsx
        • PoolSelection.styles.ts
        • index.ts
      • Wallet
        • index.ts
        • Wallet.tsx
        • Wallet.styles.ts
      • Header
        • MobileMenu.tsx
        • Header.styles.tsx
        • index.ts
        • MenuToggle.tsx
        • Header.tsx
      • AddressSelection
        • index.ts
        • AddressSelection.styles.ts
        • AddressSelection.tsx
      • SendAction
        • SendAction.styles.ts
        • index.ts
        • SendAction.tsx
      • Buttons
        • index.ts
        • BaseButton.tsx
      • Box
        • index.ts
        • Box.tsx
      • GlobalStyles
        • GlobalStyles.tsx
        • reset.ts
        • index.ts
      • Tabs
        • index.ts
        • Tab.tsx
        • Tabs.styled.tsx
        • Tabs.tsx
      • InformationDialog
        • index.ts
        • InformationDialog.tsx
      • PoolForm
        • DepositSuccess.tsx
        • AddLiquidityForm.tsx
        • PoolForm.styles.ts
        • index.ts
        • UserBalance.tsx
        • PoolFormSlider.tsx
        • PoolForm.tsx
        • AddLiquidityForm.styles.ts
        • RemoveLiquidityForm.tsx
        • RemoveLiquidityForm.styles.ts
      • CoinSelection
        • CoinSelection.styles.ts
        • index.ts
        • CoinSelection.tsx
      • BouncingDotsLoader
        • index.ts
        • BouncingDotsLoader.tsx
    • Routes.tsx
    • sitemap-generator.js
    • sitemap-routes.js
    • react-app-env.d.ts
    • assets
  • public
    • robots.txt
    • sitemap.xml
    • fonts
    • index.html
  • LICENSE
  • api
    • suggested-fees.js
    • limits.js
    • utils.js
  • README.md
  • package.json
  • vercel.json
  • tsconfig.json
  • .gitignore

import styled from "@emotion/styled";
import { BaseButton } from "components/Buttons";
import { COLORS, QUERIES } from "utils";
import { AccentSection as UnstyledAccentSection } from "../Section";

export const AccentSection = styled(UnstyledAccentSection)`
  position: relative;
  padding: 0 15px;

  @media ${QUERIES.tabletAndUp} {
    padding: 0 30px;
  }
`;

export const Wrapper = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 0 65px;
`;

export const InfoHeadlineContainer = styled.div`
  padding: 0 15px 0 0;
  margin: 0 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  font-size: ${14 / 16}rem;
  line-height: ${17 / 16}rem;
  font-weight: 400;
  color: var(--color-white);
`;

export const SlippageDisclaimer = styled.div`
  display: flex;
  align-items: center;

  svg {
    margin-right: 15px;
    width: 26px;
  }

  @media ${QUERIES.tabletAndUp} {
    svg {
      width: 32px;
    }
  }
`;

export const InfoContainer = styled.div`
  padding: 10px 15px;
  background-color: hsla(${COLORS.gray[500]} / 0.75);
  border-radius: 5px;
  font-size: ${14 / 16}rem;
  line-height: ${17 / 16}rem;
  font-weight: 400;
  color: var(--color-white-transparent);
`;

export const Info = styled.div`
  display: flex;
  justify-content: space-between;

  &:not(:last-of-type) {
    margin-bottom: 6px;
  }
`;

export const AmountToReceive = styled.div`
  padding: 0 15px;
  margin: 10px 0 25px;
  display: flex;
  justify-content: space-between;
  font-size: ${16 / 16}rem;
  line-height: ${20 / 16}rem;
  font-weight: 600;
  color: var(--color-white);

  span {
    font: inherit;
  }
`;

export const L1Info = styled(Info)`
  justify-content: space-around;
  margin-top: 1rem;
  text-align: center;
`;

export const FeesButton = styled(BaseButton)`
  padding: 0;
  font: inherit;
  color: var(--color-primary);
`;

export const WalletConnectWarning = styled.div`
  text-align: center;
  font-size: ${12 / 16}rem;
  margin-top: 0.5rem;
`;