Add a bit of a design

src/App.css

@@ -1,18 +1,54 @@
+html {
+    height: 100%;
+}
+
+body {
+    height: 100%;
+    font-family: Lato, "Helvetica Neue", sans-serif;
+}
+
+div#root {
+    height: 100%;
+    color: white;
+}
+
 .App {
-  text-align: center;
+  display: grid;
+  grid-template-columns: 20% auto;
+  height: 100%;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.sidebar {
+    grid-column: 1;
+    background-color: #5a6066;
+    text-align: center;
+    border-right: #8b8b8a;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.connectorButton {
+
+}
+
+main.main {
+  background-color: black;
+  grid-column: 2;
+  padding: 10px;
+}
+
+.airdropPanel {
+    display: grid;
+    grid-template-columns: 30% auto;
+}
+
+.airdropSettings {
+    grid-column: 1;
 }
 
+.addressList {
+    grid-column: 2;
+}
+
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -38,6 +74,5 @@
 }
 
 div.addressError {
-    background-color: #ff9191;
-
+    background-color: #c52121;
 }

src/App.tsx

@@ -31,7 +31,7 @@ const wagmiClient = createClient({
 })
 
 
-function Profile() {
+function Connector() {
     const { connect, connectors, error, isLoading, pendingConnector } =
     useConnect()
 
@@ -42,17 +42,19 @@ function Profile() {
         const connectorName = connector?.name || "unknown connector";
         return (
             <div>
-                <div>Connected to {connectorName} address: {address}</div>
+                <div>Connected to {connectorName}!</div>
+                <div>Connected account: <b>{address}</b></div>
                 <button onClick={(_evt) => disconnect() }>Disconnect</button>
             </div>
         )
     }
 
     return (
-        <div>
-            <div>Connect to Airdrop App</div>
+        <div className="connector">
+            <div>Not currently connected to a wallet. Connect to...</div>
             {connectors.map((connector) => (
                 <button
+                    className="connectorButton"
                     disabled={!connector.ready}
                     key={connector.id}
                     onClick={() => connect({ connector })}
@@ -73,6 +75,8 @@ function Profile() {
 
 
 interface AddressesProps {
+    airdropButtonDisabled: boolean;
+    performAirdrop: any;
     addressList: string[];
     setAddressListFn: any;
     numTokens: number;
@@ -82,7 +86,7 @@ interface AddressesProps {
 function Addresses(props: AddressesProps) {
     const [inputState, setInputState] = useState("");
     const [errorText, setErrorText] = useState("");
-    const { setAddressListFn, addressList, numTokens, setNumTokens } = props;
+    const { airdropButtonDisabled, performAirdrop, setAddressListFn, addressList, numTokens, setNumTokens } = props;
 
     const save = () => {
         if (!web3.utils.isAddress(inputState)) {
@@ -109,17 +113,21 @@ function Addresses(props: AddressesProps) {
     }
 
     return (
-        <div>
+        <section className="airdropSettings">
+            <p>Add an address to airdrop to:</p>
             <div>
                 <input id="address" value={inputState} onChange={ (evt) => setInputState(evt.target.value) } ></input>
                 <div className="addressError">{errorText}</div>
                 <button onClick={save}>Add address</button>
             </div>
             <div>
-            Number of tokens:
+                <div>Number of tokens:</div>
                 <input type="numeric" value={num} onChange={ (evt) => setNumTokens(parseInt(evt.target.value)) }></input>
             </div>
-        </div>
+            <div>
+                <button disabled={airdropButtonDisabled} onClick={performAirdrop} >Perform Airdrop!</button>
+            </div>
+        </section>
     );
 }
 
@@ -133,7 +141,7 @@ function AddressList({addressList}: AddressListProps) {
         <p>No addresses specified yet</p> :
         addressList.map((addr: string) => <div key={addr} className="addressItem">{addr}</div>);
     return (
-        <div>
+        <div className="addressList">
             <h2>Addresses to airdrop to: </h2>
             { addresses }
         </div>
@@ -177,14 +185,17 @@ function App() {
     return (
         <WagmiConfig client={wagmiClient}>
             <div className="App">
-                <Profile/>
-
-                <h1>Airdrop App</h1>
-
-                <p>Add an address to airdrop to:</p>
-                <Addresses addressList={addressList} setAddressListFn={setAddressList} numTokens={numTokens} setNumTokens={setNumTokens}/>
-                <button disabled={airdropButtonDisabled} onClick={performAirdrop} >Perform Airdrop!</button>
-                <AddressList addressList={addressList} />
+                <div className="sidebar">
+                    <h1>Airdrop App</h1>
+                    <Connector/>
+                </div>
+                <main className="main">
+                    <p>Enter your airdropping settings:</p>
+                    <section className="airdropPanel">
+                        <Addresses airdropButtonDisabled={airdropButtonDisabled} performAirdrop={() => performAirdrop()} addressList={addressList} setAddressListFn={setAddressList} numTokens={numTokens} setNumTokens={setNumTokens}/>
+                        <AddressList addressList={addressList} />
+                    </section>
+                </main>
 
             </div>
         </WagmiConfig>