• 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 {
  PrimaryButton,
  SectionTitle,
  Section,
  AccentSection,
} from "components";
import { QUERIES } from "utils";

export const Wrapper = styled.div`
  padding-top: 50px;
`;

export const Header = styled(Section)`
  display: grid;
  place-items: center;
  border-bottom: none;
`;

export const Heading = styled(SectionTitle)`
  font-weight: 700;
  font-size: ${30 / 16}rem;
`;

export const SubHeading = styled(SectionTitle)`
  font-weight: 100;
  margin-bottom: 20px;
`;

export const SuccessIcon = styled.div`
  background-color: var(--color-primary);
  color: var(--color-gray);
  border-radius: 9999px;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
`;

export const Link = styled.a`
  color: var(--color-primary);
  cursor: pointer;
  display: block;
  width: fit-content;
  margin: auto;
  transition: opacity 100ms linear;
  &:hover {
    text-decoration: underline;
    opacity: 0.8;
  }
`;

export const SecondaryLink = styled(Link)`
  color: inherit;
  & > span:first-of-type {
    display: none;
    @media ${QUERIES.tabletAndUp} {
      display: revert;
    }
  }
  & > span {
    @media ${QUERIES.tabletAndUp} {
      display: none;
    }
  }
`;

export const InfoSection = styled(AccentSection)`
  --horizontalPadding: 25px;
  padding: 30px var(--horizontalPadding);
  border-top: none;
  @media ${QUERIES.tabletAndUp} {
    --horizontalPadding: 40px;
  }
`;

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

export const Info = styled.article`
  border-bottom: 1px solid var(--color-primary-dark);
  margin: 0 calc(-1 * var(--horizontalPadding));
  padding: 15px var(--horizontalPadding);

  & > h3 {
    line-height: 1;
  }

  & > div {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
`;

export const Button = styled(PrimaryButton)`
  width: 100%;
  margin-top: 24px;
`;

export const Logo = styled.img`
  width: 30px;
  height: 30px;
  border-radius: 99px;
  margin-right: 10px;
`;