feat: use Card to be more UX consistent with the rest of the site

src/pages/status.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Container } from 'sveltestrap';
+    import { Container, Row, Col, Card, CardHeader, CardTitle, CardBody, Input, Button } from 'sveltestrap';
+    import FaInfoCircle from 'svelte-icons/fa/FaInfoCircle.svelte'
     import ShardItem from '../lib/shard.svelte';
 
     let hover = null;
@@ -82,8 +83,19 @@
     
 </script>
 
-<Container>
-    <h1>Bot status</h1>
+<Container fluid>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaInfoCircle />
+                        </div>
+                        Bot status
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
                     <span>{@html currentCommitMsg}</span>
                     <br>
                     <noscript>Please enable JavaScript to view this page!</noscript>
@@ -111,12 +123,20 @@
                             <span>Last heartbeat: { foundShard.last_heartbeat }</span><br>
                         {/if}
                     </details>
-    <br><br>
-    <h2>Shard status</h2>
-
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <Card class="mb-4">
+                <CardBody>
                     <span>{ message }</span>
-
                     {#each shards as shard}
                         <ShardItem shard={shard} bind:hover={hover} />
                     {/each}
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
 </Container>