Merge branch 'main' into 66-inputs

src/components/AddControlKey.svelte

@@ -119,8 +119,8 @@
       classOverrides="border-2 rounded-lg"
     />
     <div class="flex w-350 justify-between">
-      <button on:click|preventDefault={addControlKey} class="btn-primary action-btn-l">Add It</button>
-      <button on:click|preventDefault={cancelAction} class="btn-cancel action-btn-r">Cancel Add </button>
+      <button on:click|preventDefault={addControlKey} class="btn-primary">Add It</button>
+      <button on:click|preventDefault={cancelAction} class="btn-no-fill">Cancel Add </button>
     </div>
   </form>
 </div>

src/components/Capacity.svelte

@@ -16,7 +16,7 @@
 
   let signingAddress = ''; // eslint-disable-line no-unused-vars
   let epochNumber = 0n;
-  let connected;
+  let connected: boolean;
   storeConnected.subscribe((val) => (connected = val));
 
   let msaInfo: MsaInfo = { isProvider: false, msaId: 0, providerName: '' };
@@ -74,7 +74,7 @@
   });
 </script>
 
-<div class="p-14 ml-8 w-500 action-card font-semibold tracking-wider bg-gradient-to-br">
+<div class="p-14 ml-8 flex-grow action-card font-semibold tracking-wider bg-bg-black">
   <p class="text-2xl pb-6">Capacity</p>
   {#if !connected}
     <p>Not connected</p>

src/components/ChainStatus.svelte

@@ -5,26 +5,27 @@
   export let epochNumber = 0n;
 </script>
 
-<div id="chain-status"
-   class=" p-8 h-fit shadow-md flex items-stretch rounded-xl font-semibold tracking-wider"
+<div
+  id="chain-status"
+  class="p-8 h-fit shadow-md flex items-stretch bg-bg-black rounded-xl font-semibold tracking-wider"
 >
   <div class="text-3xl self-center text-right border-r-2 pr-10 pl-4">
     <div class="height-fit">Overview:</div>
   </div>
   <div class="border-r-2 px-8 grow shrink-0">
     <p class="text-lg" id="connection-status-title">Connection status:</p>
-    <p class="text-3xl" id="connection-status-value">{connected ? 'Connected' : 'Not connected'}</p>
+    <p class="text-aqua text-3xl" id="connection-status-value">{connected ? 'Connected' : 'Not connected'}</p>
   </div>
   <div class="border-r-2 basis-1/4 px-8">
     <p class="text-lg" id="block-number-title">Current Block:</p>
-    <p class="text-3xl" id="block-number-value">{blockNumber}</p>
+    <p class="text-3xl text-aqua" id="block-number-value">{blockNumber}</p>
   </div>
   <div class="border-r-2 basis-1/6 px-8">
     <p class="text-lg" id="epoch-number-title">Epoch:</p>
-    <p class="text-3xl" id="epoch-number-value">{epochNumber}</p>
+    <p class="text-3xl text-aqua" id="epoch-number-value">{epochNumber}</p>
   </div>
   <div class="basis-1/6 pl-8">
     <p class="text-lg" id="token-title">Token:</p>
-    <p class="text-3xl" id="token-value">{token}</p>
+    <p class="text-3xl text-aqua" id="token-value">{token}</p>
   </div>
 </div>

src/components/ConnectionStatus.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let connected = false;
+</script>
+
+<div class="flex gap-6 items-center">
+  <!-- {#if connected} -->
+  <!-- TODO: ADD REAL DATA WHEN STORE IS CONNECTED -->
+  <div class="flex gap-2 items-center">
+    <div class="bg-green-success h-1 w-1 p-1 rounded-full" />
+    <p class="text-md uppercase">name_OF_NETWORK</p>
+  </div>
+  <p class="text-md">NETWORK_ENDPOINT_URL</p>
+
+  <!-- TODO: CHANGE ICON WHEN APPROVED -->
+  <!-- TODO: ADD ONCLICK WHEN BUILDING SWITCH MODAL -->
+  <button on:click={() => {}}>SWITCH_ICON</button>
+  <!-- {/if} -->
+</div>

src/components/CreateMsa.svelte

@@ -71,10 +71,10 @@
   </p>
   <form class="flex w-350 justify-between">
     <button id="create-msa-btn" on:click|preventDefault={doCreateMsa}
-            class="btn-primary action-btn-l">
+            class="btn-primary">
       Create an MSA
     </button>
-    <button on:click|preventDefault={cancelAction} class="btn-cancel action-btn-r">Cancel</button>
+    <button on:click|preventDefault={cancelAction} class="btn-cancel">Cancel</button>
   </form>
 </div>
 <TransactionStatus bind:showSelf={showTransactionStatus} statuses={txnStatuses} />

src/components/CreateProvider.svelte

@@ -96,10 +96,10 @@
     <label for="providerNameCB">Provider name</label>
     <input id="providerNameCB" required placeholder="Short name" maxlength={100} bind:value={newProviderName} />
     <div class="flex w-350 justify-between">
-      <button id="create-provider-btn" on:click|preventDefault={doCreateProvider} class="btn-primary action-btn-l">
+      <button id="create-provider-btn" on:click|preventDefault={doCreateProvider} class="btn-primary">
         Create Provider
       </button>
-      <button on:click|preventDefault={cancelAction} class="btn-cancel action-btn-r">Cancel</button>
+      <button on:click|preventDefault={cancelAction} class="btn-no-fill">Cancel</button>
     </div>
   </form>
 </div>

src/components/Header.svelte

@@ -0,0 +1,12 @@
+<script>
+  import logo from '$lib/assets/logo.png';
+  import ConnectionStatus from './ConnectionStatus.svelte';
+</script>
+
+<header class="flex items-start justify-between mb-14">
+  <div>
+    <img alt="The project logo" src={logo} class="h-11" />
+    <p class="text-md font-semibold tracking-wider pl-3">Provider Dashboard</p>
+  </div>
+  <ConnectionStatus />
+</header>

src/components/Provider.svelte

@@ -35,7 +35,7 @@
   });
 </script>
 
-<div class="p-14 action-card w-500 min-w-fit font-semibold tracking-wider bg-gradient-to-br align-top">
+<div class="p-14 action-card flex-grow min-w-fit font-semibold tracking-wider bg-bg-black align-top">
   <table>
     <tr>
       <td colspan="2" class="text-2xl pb-6">Provider</td>

src/components/RequestToBeProvider.svelte

@@ -112,10 +112,10 @@
     <div class="flex w-350 justify-between">
 
       <button on:click|preventDefault={doProposeToBeProvider} id="request-2b-provider-btn"
-              class="btn-primary action-btn-l">
+              class="btn-primary">
         Submit Request To Be Provider</button
       >
-      <button on:click|preventDefault={cancelAction} class="btn-cancel action-btn-r">Cancel</button>
+      <button on:click|preventDefault={cancelAction} class="btn-cancel">Cancel</button>
     </div>
   </form>
 </div>

src/components/Stake.svelte

@@ -132,8 +132,8 @@
       </div>
     </div>
     <div class="flex w-350 justify-between">
-      <button on:click|preventDefault={stake} class="btn-primary action-btn-l">Stake</button>
-      <button on:click|preventDefault={cancelAction} class="btn-cancel action-btn-r">Cancel</button>
+      <button on:click|preventDefault={stake} class="btn-primary">Stake</button>
+      <button on:click|preventDefault={cancelAction} class="btn-no-fill">Cancel</button>
     </div>
   </form>
 </div>

src/routes/+layout.svelte

@@ -0,0 +1,11 @@
+<script>
+  import Header from '../components/Header.svelte';
+  import wave from '$lib/assets/bg-wave.png';
+</script>
+
+<div>
+  <img alt="The project logo" src={wave} class="fixed w-[100%] top-0 right-0 z-[-1]" />
+  <Header />
+  <slot class="z-10" />
+</div>
+;

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
-    storeBlockNumber, storeChainInfo,
+    storeBlockNumber,
+    storeChainInfo,
     storeConnected,
     storeMsaInfo,
     storeToken,
@@ -13,11 +14,8 @@
   import KeySelection from '$components/KeySelection.svelte';
   import ProviderActions from '$components/ProviderActions.svelte';
   import ChainStatus from '$components/ChainStatus.svelte';
-  import Banner from '$components/Banner.svelte';
-  import logo from '$lib/assets/logo.png';
-  import topright from '$lib/assets/top-right-bars.png';
-  import bottomleft from '$lib/assets/bottom-left-bars.png';
-  import type {ChainInfo, MsaInfo} from "$lib/storeTypes";
+
+  import type { ChainInfo, MsaInfo } from '$lib/storeTypes';
 
   let token = '';
   let blockNumber = 0n;
@@ -34,21 +32,19 @@
 
   const onChangeTxnSigningAddress = (evt: Event) => {
     let option = evt.target as HTMLOptionElement;
-    storeMsaInfo.set({isProvider: false, msaId: 0, providerName: ''});
+    storeMsaInfo.set({ isProvider: false, msaId: 0, providerName: '' });
     transactionSigningAddress.set(option.value);
   };
 </script>
-<img alt="decoration-top-left" src={topright} class="mt-0 absolute top right-8 -z-40"/>
 
-<Banner />
-<ChainStatus {blockNumber} {connected} {token} {epochNumber}/>
+<ChainStatus {blockNumber} {connected} {token} {epochNumber} />
 <div class="flex justify-center">
-  <Provider/>
-  <Capacity bind:token/>
+  <Provider />
+  <Capacity bind:token />
 </div>
 <div class="mt-8 text-white">
   <form id="setupForm">
-    <Connect/>
+    <Connect />
     <div class:hidden={!connected} class="mt-8">
       <KeySelection
         component="TransactionSigningKey"
@@ -59,7 +55,5 @@
       />
     </div>
   </form>
-  <ProviderActions {validAccounts}/>
+  <ProviderActions {validAccounts} />
 </div>
-<Banner />
-<img alt="decoration-bottom-left" src={bottomleft} class="mt-20 fixed bottom-0 left-8 -z-40"/>

src/style/app.css

@@ -7,10 +7,10 @@
 /*  */
 @layer components {
   .btn-primary {
-    @apply mt-6 px-8 p-3 h-14 rounded-full text-white text-lg bg-blue border-black shadow-md;
+    @apply w-[225px] h-10 rounded-full text-white bg-blue disabled:bg-disabled text-base font-bold;
   }
-  .btn-cancel {
-    @apply mt-6 px-8 p-3 rounded-full text-white text-lg border-black shadow-md;
+  .btn-no-fill {
+    @apply text-white underline text-sm;
   }
   .action-card {
     @apply mt-8 p-8 shrink-0 rounded-lg text-white shadow-md;
@@ -21,11 +21,27 @@
   .action-card-title {
     @apply font-semibold text-2xl;
   }
-  .action-btn-l {
-    @apply grow mr-3;
+
+  /* typeography */
+  /* headers */
+  .section-title {
+    @apply font-bold text-xl;
   }
-  .action-btn-r {
-    @apply grow ml-3;
+  .label {
+    @apply font-bold text-base tracking-wide;
+  }
+  /* data */
+  .data-value-sm {
+    @apply font-data text-green text-sm;
+  }
+  .data-value-base {
+    @apply font-data text-green text-base;
+  }
+  .data-value-lg {
+    @apply font-data text-green text-lg;
+  }
+  .data-value-2xl {
+    @apply font-data text-green text-2xl;
   }
 }
 
@@ -34,7 +50,7 @@
     color: white;
     min-height: 100vh;
     margin: 2em;
-    background: linear-gradient(to bottom right, #293b59, #007da1);
+    background: linear-gradient(to top, #2c333d, #007da1);
   }
 
   button {

test/e2e/page.test.ts

@@ -20,12 +20,6 @@ describe('End to End Tests', () => {
   // TODO: @testing-library/svelte claims to add this automatically but it doesn't work without explicit afterEach
   afterEach(() => cleanup());
 
-  test('check connection status: not connected', async () => {
-    const { container } = render(Page);
-    expect(container.querySelector('#connection-status-title')).toHaveTextContent('Connection status:');
-    expect(container.querySelector('#connection-status-value')).toHaveTextContent('Not connected');
-  });
-
   test('connect to localhost', async () => {
     const { container, getByLabelText } = render(Page);
     const statusBar = container.querySelector('#chain-status');