cleaning up

src/components/Hero.jsx

@@ -228,18 +228,20 @@ export function Hero(props) {
     return (
         <div id='hero'>
             <NotificationContainer />
-            <h1>the web3 revolution & its consequences have been a disaster for the human race.</h1>
-            <p>
+            <h1 id='heroTitle'>the web3 revolution & its consequences have been a disaster for the human race.</h1>
+            <p id='heroText'>
                 Technology is advancing at an exponential rate and boomers are being left behind. A.I., Bitcoin, 
                 and expensive JPEGs have made them angry. <br /><br />
-                They've begun to radicalize. {options.unaboomerMaxSupply > 0 ? '35,000': options.unaboomerMaxSupply} Boomers have joined forces 
+                They've begun to radicalize. {options.unaboomerMaxSupply > 0 ? options.unaboomerMaxSupply: '35,000'} Boomers have joined forces 
                 to lash out at the system.<br /><br />
             </p>
             <div id='heroFlex'>
                 <div className='heroFlexItem'>
                     <img src={Unaboomer} width='280px' alt='Pixelated Unaboomer profile picture - a hooded man with dark sunglasses.' />
                     <p>
-                        
+                        Unaboomers are terrorizing the metaverse. 
+                        This gang of deplorables is on a warpath to stress 
+                        the system and spark a revolution against technology.<br /><br />
                     </p>
                     {options.unaboomersMinted > 0 && (
                         <p>
@@ -349,18 +351,22 @@ export function Hero(props) {
                     </>
                 )}
             </div>
-            <StatsPanel 
-                leaderKillCount={options.leaderKillCount}
-                leaderAddress={options.leaderAddress}
-                unaboomersRadicalized={options.unaboomersRadicalized}
-                unaboomersKilled={options.unaboomersKilled}
-                bombsAssembled={options.bombsAssembled}
-                bombsExploded={options.bombsExploded}
-            />
-            <TrollboxPanel 
-                ws={props.ws}
-                address={address} 
-            />
+            {isConnected && address && (
+                <>
+                    <StatsPanel 
+                        leaderKillCount={options.leaderKillCount}
+                        leaderAddress={options.leaderAddress}
+                        unaboomersRadicalized={options.unaboomersRadicalized}
+                        unaboomersKilled={options.unaboomersKilled}
+                        bombsAssembled={options.bombsAssembled}
+                        bombsExploded={options.bombsExploded}
+                    />
+                    <TrollboxPanel 
+                        ws={props.ws}
+                        address={address} 
+                    />
+                </>
+            )}
         </div>
     )
 }

src/styles/hero.css

@@ -8,6 +8,11 @@
     margin: 1em auto;
 }
 
+#heroText {
+    width: 80%;
+    margin: 2em auto;
+}
+
 #heroFlex {
     display: flex;
     flex-wrap: wrap;
@@ -34,6 +39,7 @@ button.doThing {
     margin: 1em;
     cursor: pointer;
     transition: .1s ease all;
+    min-width: 180px;
 }
 
 button.doThing:hover {