diff --git a/example/components/Button.tsx b/example/components/Button.tsx new file mode 100644 index 0000000..699d083 --- /dev/null +++ b/example/components/Button.tsx @@ -0,0 +1,17 @@ +import styled from "styled-components"; + +export const Button = styled.button` + font-family: 'Montserrat', sans-serif; + font-weight: bold; + transition: all 0.3s ease-in; + color: white; + border-radius: 10px; + padding: 10px 25px; + border: none; + background-color: rgb(88, 152, 218); + + &:hover { + background: rgb(42, 196, 231); + cursor: pointer; + } +` diff --git a/example/components/Card.tsx b/example/components/Card.tsx index e34af74..d9f52b9 100644 --- a/example/components/Card.tsx +++ b/example/components/Card.tsx @@ -6,6 +6,7 @@ import { Accounts } from "./Accounts"; import { ConnectWithSelect } from "./ConnectWithSelect"; import { Status } from "./Status"; import styled from "styled-components"; +import {BoldText} from "./Text"; interface Props { connector: MetaMask; @@ -30,7 +31,7 @@ export function Card({ }: Props) { return ( - {getName(connector)} + {getName(connector)} {isActive ? ( error ? ( - + ) : ( - + ) ) : ( - + )} ); diff --git a/example/components/Decrypt.tsx b/example/components/Decrypt.tsx index 169e865..c7b4332 100644 --- a/example/components/Decrypt.tsx +++ b/example/components/Decrypt.tsx @@ -1,8 +1,10 @@ import { useWeb3React } from "@web3-react/core"; import { useState } from "react"; -import styled from "styled-components"; import { Tab } from "./Tab"; +import {Text, TextRed} from "./Text"; +import {Button} from "./Button"; +import {TextArea} from "./TextArea"; export function Decrypt({ isActive }: { isActive: boolean }) { const { account, provider } = useWeb3React(); @@ -35,7 +37,7 @@ export function Decrypt({ isActive }: { isActive: boolean }) { {message ? ( <> - + This is your decrypted message