Dashboard

styles/base.css

@@ -100,6 +100,29 @@ body > .errorbox {
     font-weight: 400;
 }
 
+.id-card {
+    display: inline-flex;
+    gap: 1rem;
+}
+
+.id-card > img {
+    height: 128px;
+}
+
+.id-card > .info {
+    margin: auto 0;
+}
+
+.id-card .display_name {
+    font-weight: bold;
+    font-size: 2rem;
+}
+
+.id-card .id {
+    font-size: 1.2rem;
+    font-family: 'Grotesk Mono', monospace;
+}
+
 .center {
     text-align: center;
 }

styles/colours.css

@@ -12,6 +12,7 @@
     --mindaro: #f4fdaf;
 
     --gray-0: #f8f9fa;
+    --gray-1: #f1f3f5;
     --grey-5: #adb5bd;
     --gray-9: #212529;
 

styles/dashboard.css

@@ -19,3 +19,20 @@ ul > li > a {
 ul > li:hover {
     background: var(--hover-bg);
 }
+
+.grid {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: 1fr 2fr;
+}
+
+.id-card {
+    align-self: center;
+    background: var(--hover-bg);
+    padding: 1rem;
+    border-radius: 1.5rem;
+}
+
+.id-card > img {
+    border-radius: 0.5rem;
+}

views/dashboard.php

@@ -10,6 +10,14 @@
         <main>
             <h1><?= get_string('page.dashboard') ?></h1>
             <div class="grid">
+                <div class="id-card">
+                    <img src="https://cdn.id.byecorps.com/profile/281G3NV" alt="" />
+                    <div class="info">
+                        <div class="display_name"><?= get_user_display_name($_SESSION['id']) ?></div>
+                        <div class="id"><?= format_bcid($_SESSION['id']) ?></div>
+                        <div class="join-date"><?= get_string('idcard.joined', ['date' => $user['created_date']]) ?></div>
+                    </div>
+                </div>
                 <ul>
                     <li>
                         <a href="/profile" class="item">
@@ -23,6 +31,12 @@
                             <div class="label"><?= get_string('page.settings') ?></div>
                         </a>
                     </li>
+                    <li>
+                        <a href="/settings/apps" class="item">
+                            <div class="icon"><span class="fa-fw fa-solid fa-lock"></span></div>
+                            <div class="label"><?= get_string('page.manageAppAccess') ?></div>
+                        </a>
+                    </li>
                     <li>
                         <a href="/auth/signout" class="item">
                             <div class="icon"><span class="fa-fw fa-solid fa-right-to-bracket"></span></div>