css styles and made pretty

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;
+  }
+`

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 (
     <CardWrapper>
-      <b>{getName(connector)}</b>
+      <BoldText>{getName(connector)}</BoldText>
       <Status isActivating={isActivating} isActive={isActive} error={error} />
       <Accounts accounts={accounts} provider={provider} ENSNames={ENSNames} />
       <ConnectWithSelect
@@ -50,9 +51,9 @@ const CardWrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   width: 20rem;
-  padding: 1rem;
+  padding: 0.5rem 2rem;
   margin: 1rem;
   overflow: auto;
-  border: 1px solid;
+  border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 1rem;
 `

example/components/ConnectWithSelect.tsx

@@ -1,6 +1,7 @@
 import type { Web3ReactHooks } from "@web3-react/core";
 import type { MetaMask } from "@web3-react/metamask";
 import { useCallback } from "react";
+import {Button} from "./Button";
 
 export function ConnectWithSelect({
   connector,
@@ -28,9 +29,9 @@ export function ConnectWithSelect({
     <div style={{ display: "flex", flexDirection: "column" }}>
       {isActive ? (
         error ? (
-          <button onClick={() => handleConnect()}>Try again?</button>
+          <Button onClick={() => handleConnect()}>Try again?</Button>
         ) : (
-          <button
+          <Button
             onClick={() => {
               if (connector?.deactivate) {
                 void connector.deactivate();
@@ -40,12 +41,12 @@ export function ConnectWithSelect({
             }}
           >
             Disconnect
-          </button>
+          </Button>
         )
       ) : (
-        <button onClick={() => handleConnect()} disabled={isActivating}>
+        <Button onClick={() => handleConnect()} disabled={isActivating}>
           {error ? "Try again?" : "Connect"}
-        </button>
+        </Button>
       )}
     </div>
   );

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,43 +37,32 @@ export function Decrypt({ isActive }: { isActive: boolean }) {
     <Tab isActive={isActive}>
       {message ? (
         <>
-          <label htmlFor="message">This is your decrypted message</label>
+          <Text>This is your decrypted message</Text>
           <TextArea
             id="message"
             autoComplete="off"
             disabled={true}
             placeholder="Lorem impsum ..."
             value={message}
           />
-          <button onClick={handleClear}>Clear</button>
+          <Button onClick={handleClear}>Clear</Button>
         </>
       ) : (
         <>
-          <label htmlFor="encrypted-message">Enter an encrypted message</label>
+          <Text>Enter an encrypted message</Text>
           <TextArea
             id="encrypted-message"
             autoComplete="off"
             placeholder="Lorem impsum ..."
             value={encryptedMessage}
             onChange={(e) => setEncryptedMessage(e.target.value)}
           />
-          <button onClick={handleDecrypt}>Decrypt</button>
+          <Button onClick={handleDecrypt}>Decrypt</Button>
         </>
       )}
       {error && <TextRed>{error}</TextRed>}
     </Tab>
   );
 }
 
-const TextArea = styled.textarea`
-  width: 100%;
-  height: 150px;
-`;
 
-const Input = styled.input`
-  width: 100%;
-`;
-
-const TextRed = styled.p`
-  color: red;
-`;

example/components/Encrypt.tsx

@@ -1,9 +1,12 @@
 import { encrypt } from "@metamask/eth-sig-util";
 import { bufferToHex } from "ethereumjs-util";
 import { useState } from "react";
-import styled from "styled-components";
 
 import { Tab } from "./Tab";
+import {Button} from "./Button";
+import {Text, TextRed} from "./Text";
+import {Input} from "./Input";
+import {TextArea} from "./TextArea";
 
 export function Encrypt({ isActive }: { isActive: boolean }) {
   const [publicKey, setPublicKey] = useState<string | null>(null);
@@ -45,7 +48,7 @@ export function Encrypt({ isActive }: { isActive: boolean }) {
     <Tab isActive={isActive}>
       {encryptedMessage ? (
         <>
-          <label htmlFor="encrypted-message">Encrypted message</label>
+          <Text>Encrypted message</Text>
           <TextArea
             id="encrypted-message"
             autoComplete="off"
@@ -54,13 +57,13 @@ export function Encrypt({ isActive }: { isActive: boolean }) {
             value={encryptedMessage}
             onChange={(e) => setMessage(e.target.value)}
           />
-          <button onClick={handleClear}>Clear</button>
+          <Button onClick={handleClear}>Clear</Button>
         </>
       ) : (
         <>
-          <label htmlFor="public-key">
+          <Text>
             Enter the public key of the destination user
-          </label>
+          </Text>
           <Input
             type={"text"}
             id="public-key"
@@ -69,31 +72,19 @@ export function Encrypt({ isActive }: { isActive: boolean }) {
             value={publicKey}
             onChange={(e) => setPublicKey(e.target.value)}
           />
-          <label htmlFor="message">Enter a message</label>
+          <Text>Enter a message</Text>
           <TextArea
             id="message"
             autoComplete="off"
             placeholder="Lorem impsum ..."
             value={message}
             onChange={(e) => setMessage(e.target.value)}
           />
-          <button onClick={handleEncrypt}>Encrypt</button>
+          <Button onClick={handleEncrypt}>Encrypt</Button>
         </>
       )}
       {error && <TextRed>{error}</TextRed>}
     </Tab>
   );
 }
 
-const TextArea = styled.textarea`
-  width: 100%;
-  height: 150px;
-`;
-
-const Input = styled.input`
-  width: 100%;
-`;
-
-const TextRed = styled.p`
-  color: red;
-`;

example/components/Footer.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import {Text} from "./Text";
+import {BoldText, Text} from "./Text";
 
 export const Footer = () => {
     return (
@@ -8,15 +8,17 @@ export const Footer = () => {
                 <Text>
                     This project was built by a developer to contribute to the amazing web3 community with no direct affiliation with https://metamask.io/. If you found this helpful in any way, feel free to share the ❤️.
                 </Text>
-                <Text>
+                <BoldText>
                     ETH: 0xFd072083887bFcF8aEb8F37991c11c7743113374
-                </Text>
+                </BoldText>
             </FooterWrapper>
         </FooterContainer>
     )
 }
 
 const FooterContainer = styled.div`
+  position: absolute;
+  bottom: 0;
   width: 100%;
   display: flex;
   justify-content: center;
@@ -29,8 +31,6 @@ const FooterWrapper = styled.div`
   justify-content: center;
   flex-direction: column;
   align-items: center;
-  gap: 10px;
   max-width: 800px;
-  position: absolute;
-  bottom: 0;
+  padding-bottom: 20px;
 `

example/components/Header.tsx

@@ -4,6 +4,7 @@ import {MainHeading} from "./Heading";
 import MetaMaskCard from "./MetaMaskCard";
 import React from "react";
 import {useWeb3React} from "@web3-react/core";
+import {shortenAddress} from "../utils";
 
 export const Header = () => {
     const { account } = useWeb3React();
@@ -15,11 +16,11 @@ export const Header = () => {
                 </MainHeading>
                 {!account ? (
                     <ConnectSection>
-                        <p>Use the section below to connect to MetaMask wallet provider</p>
+                        <Text>Use the section below to connect to MetaMask wallet provider</Text>
                         <MetaMaskCard />
                     </ConnectSection>
                 ) : (
-                    <Text>Connected with account: {account}</Text>
+                    <Text>Connected with account: {shortenAddress(account)}</Text>
                 )}
             </HeaderWrapper>
         </HeaderContainer>

example/components/Heading.tsx

@@ -2,4 +2,10 @@ import styled from "styled-components";
 
 export const MainHeading = styled.h1`
      text-align: center;
+    color:white;
+`
+
+export const Heading = styled.h2`
+     text-align: center;
+    color:white;
 `

example/components/Input.tsx

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const Input = styled.input`
+  width: 100%;
+  background: rgba(255, 255, 255, 0.09);
+  padding: 5px 10px;
+  color: white;
+  border-radius: 5px;
+  max-width: 400px;
+  text-align: center;
+  border: solid 1px transparent;
+  
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.58);
+  }
+
+  &:hover {
+    border: inset 1px rgba(255, 255, 255, 0.53);
+  }
+`;

example/components/RequestPublicKey.tsx

@@ -1,11 +1,16 @@
 import { useWeb3React } from "@web3-react/core";
 import { useEffect, useState } from "react";
+import {CopyToClipboard} from 'react-copy-to-clipboard';
 
 import { Tab } from "./Tab";
+import {Text} from "./Text";
+import {Heading} from "./Heading";
+import {Button} from "./Button";
 
 export function RequestPublicKey({ isActive }: { isActive: boolean }) {
   const { account, provider } = useWeb3React();
   const [publicKey, setPublicKey] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false)
 
   useEffect(() => {
     setPublicKey(null);
@@ -18,16 +23,23 @@ export function RequestPublicKey({ isActive }: { isActive: boolean }) {
     <Tab isActive={isActive}>
       {publicKey ? (
         <>
-          <p>This is your public key</p>
-          <h4>{publicKey}</h4>
+          <Text>This is your public key</Text>
+          <Heading>{publicKey}</Heading>
+          <CopyToClipboard text={publicKey} onCopy={() => {
+            setCopied(true)
+            setTimeout(() => setCopied(false), 3000)
+          }}>
+            <Button>Copy</Button>
+          </CopyToClipboard>
+          {copied && <Text>Copied!</Text>}
         </>
       ) : (
         <>
-          <p>
+          <Text>
             Press on the button below to trigger the public key request. It will
             prompt your wallet provider to get your PUBLIC key information.
-          </p>
-          <button onClick={handleRequestPublicKey}>Request Public Key</button>
+          </Text>
+          <Button onClick={handleRequestPublicKey}>Request Public Key</Button>
         </>
       )}
     </Tab>

example/components/Tab.tsx

@@ -17,7 +17,7 @@ const TabWrapper = styled.div`
   padding: 5vh 5vw;
   justify-content: center;
   align-items: center;
-  gap: 20px;
+  gap: 10px;
   p {
     text-align: center;
     max-width: 500px;

example/components/Text.tsx

@@ -2,4 +2,16 @@ import styled from "styled-components";
 
 export const Text = styled.p`
      text-align: center;
+  line-height: 1.4;
+  color:white;
 `
+
+export const BoldText = styled.p`
+     text-align: center;
+    font-weight: 900;
+  color:white;
+`
+
+export const TextRed = styled.p`
+  color: red;
+`;