Merge pull request #15 from Rexogamer/web-improvements

feat: web improvements

web/src/pages/DashboardHome.tsx

@@ -37,10 +37,10 @@ const Dashboard: FunctionComponent = () => {
     useEffect(() => { loadServers() }, []);
 
     return (
-        <div>
-            <H1>dashbord</H1>
+        <div style={{ marginLeft: '12px', padding: '16px 0' }}>
+            <H1>Dashboard</H1>
             <br/>
-            <p hidden={!loading}>loading</p>
+            <p hidden={!loading}>Loading...</p>
             {
                 servers.map(server => <div className="server-card" style={{ paddingTop: '10px' }} key={server.id}>
                     <img

web/src/pages/Home.tsx

@@ -14,10 +14,17 @@ const Home: FunctionComponent = () => {
                 This is a <b>work-in-progress</b> Web UI for the Automod Revolt bot.
                 <br />
                 <Link to='/dashboard'>
-                    Open Dashboard
+                    Open the dashboard
                 </Link> or <a href="https://app.revolt.chat/bot/01FHGJ3NPP7XANQQH8C2BE44ZY" target='_blank'>
                     add the bot to your server.
                 </a>
+                <br />
+                <br />
+                You can also view usage stats and metrics for the bot <a href="https://grafana.janderedev.xyz/d/lC_-g_-nz/automod" target='_blank'>
+                    here
+                </a>, or check out <a href="https://github.com/janderedev/automod" target='_blank'>
+                    its GitHub repository.
+                </a>
             </span>
         </div>
     );

web/src/pages/Login.tsx

@@ -48,8 +48,8 @@ const Login: FunctionComponent = () => {
     }, [ nonce, code, username ]);
 
     return (
-        <div>
-            <H1>log in</H1>
+        <div style={{ marginLeft: '12px', padding: '16px 0' }}>
+            <H1>Log in</H1>
             {statusMsg.length ? <a>{statusMsg}</a> : <br/>}
             <div hidden={!showInitial}>
                 <InputBox