Dashboard Header Section (#96)

closes #83 

Note: going with a lighter weight solution =>
https://unfinished-team.slack.com/archives/C05FC0YUP51/p1705440655948859

<img width="798" alt="Screenshot 2024-01-17 at 9 29 59 AM"
src="https://github.com/LibertyDSNP/provider-dashboard/assets/43625033/b0cef912-ab7c-401e-b054-b362fa046aff">

---------

Co-authored-by: Claire Olmstead <[email protected]>

src/components/ActivityLogPreview.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<!-- TODO: Connect activities -->
+<div class="border-l border-divider pl-5 min-w-[300px]">
+  <div class="label border-divider border-b pb-5">Activity Log</div>
+  <div class="border-divider border-b py-2 text-sm">Activity_Log_Preview</div>
+</div>

src/components/Dashboard.svelte

@@ -4,6 +4,7 @@
   import Provider from '$components/Provider.svelte';
   import KeySelection from '$components/KeySelection.svelte';
   import ProviderActions from '$components/ProviderActions.svelte';
+  import DashboardHeader from '$components/DashboardHeader.svelte';
   import ChainStatus from '$components/ChainStatus.svelte';
   import type { ChainInfo } from '$lib/storeTypes';
 
@@ -38,6 +39,7 @@
   storeChainInfo.subscribe((info: ChainInfo) => (epochNumber = info.epochNumber));
 </script>
 
+<DashboardHeader />
 <ChainStatus {blockNumber} {connected} {token} {epochNumber} />
 <div class="flex justify-center">
   <Provider />

src/components/DashboardHeader.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Profile from '$components/Profile.svelte';
+  import ActivityLogPreview from '$components/ActivityLogPreview.svelte';
+</script>
+
+<div class="content-block flex justify-between mb-5">
+  <Profile />
+  <ActivityLogPreview />
+</div>

src/components/Profile.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { storeMsaInfo } from '$lib/stores';
+</script>
+
+<div class="flex items-center gap-4">
+  <div
+    class="text-2xl text-bold h-[90px] w-[90px] max-w-[90px] rounded-full bg-gradient-to-r to-green from-blue flex items-center justify-center"
+  >
+    {$storeMsaInfo ? $storeMsaInfo?.providerName.substring(0, 1) : ''}
+  </div>
+  <div class="flex flex-col gap-1">
+    <div class="data-value-lg">{$storeMsaInfo?.providerName}</div>
+    <div class="text-sm">{$storeMsaInfo?.msaId}</div>
+  </div>
+</div>

src/lib/stores.ts

@@ -1,5 +1,5 @@
-import { writable } from 'svelte/store';
-import { ActionForms, defaultDotApi } from '$lib/storeTypes';
+import { writable, type Writable } from 'svelte/store';
+import { ActionForms, defaultDotApi, type MsaInfo } from '$lib/storeTypes';
 
 export const storeConnected = writable(false);
 
@@ -10,7 +10,7 @@ export const storeProviderAccounts = writable({});
 
 export const transactionSigningAddress = writable('');
 
-export const storeMsaInfo = writable();
+export const storeMsaInfo: Writable<MsaInfo | undefined> = writable();
 export const dotApi = writable(defaultDotApi);
 
 export const storeBlockNumber = writable(0n);
@@ -22,21 +22,21 @@ export const storeToken = writable('');
 export const storeChainInfo = writable({ connected: false, blockNumber: 0n, epochNumber: 0n, token: '' });
 
 export enum PageContent {
-    Dashboard = 'dashboard',
-    Login = 'login',
-    BecomeProvider = 'becomeProvider'
+  Dashboard = 'dashboard',
+  Login = 'login',
+  BecomeProvider = 'becomeProvider',
 }
 
 const createPageContentStore = () => {
-    const { subscribe, set, update } = writable(PageContent.Login);
-
-    return {
-        subscribe,
-        set,
-        login: () => set(PageContent.Login),
-        becomeProvider: () => set(PageContent.BecomeProvider),
-        dashboard: () => set(PageContent.Dashboard)
-    };
-}
+  const { subscribe, set, update } = writable(PageContent.Login);
+
+  return {
+    subscribe,
+    set,
+    login: () => set(PageContent.Login),
+    becomeProvider: () => set(PageContent.BecomeProvider),
+    dashboard: () => set(PageContent.Dashboard),
+  };
+};
 
 export const pageContent = createPageContentStore();

src/style/app.css

@@ -43,6 +43,11 @@
   .data-value-2xl {
     @apply font-data text-green text-2xl;
   }
+
+  /* layout */
+  .content-block {
+    @apply bg-bg-black rounded-md p-7;
+  }
 }
 
 @layer base {