Merge branch 'main' into 69-header-logo-and-background-colorsimage

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/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

@@ -97,10 +97,10 @@
     <input id="providerNameCB" required placeholder="Short name" maxlength="" 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">
+              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/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

@@ -129,12 +129,11 @@
       <label for="stakingInput">Amount to Stake in <span class="units">{token}</span></label>
       <div class="input-container mt-2">
         <input type="number" id="stakingInput" value="1" style="text-align: right;" on:input={handleInput} />
-
       </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/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;
   }
   select {
     @apply text-black px-6 py-2 rounded-md border-0 w-500 h-14 font-medium text-lg;
@@ -24,11 +24,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;
   }
 }
 

tailwind.config.js

@@ -36,6 +36,14 @@ export default {
       backgroundImage: {
         topRight: 'url(/assets/top-right-bars.png)',
       },
+      fontSize: {
+        xs: '10px',
+        sm: '12px',
+        base: '14px',
+        lg: '20px',
+        xl: '25px',
+        '2xl': '30px',
+      },
     },
   },
   plugins: [require('@tailwindcss/forms')],