From ef971c93e6c7d35d13e214f16e7222e14286396c Mon Sep 17 00:00:00 2001
From: "V. Claire Olmstead" <43625033+claireolmstead@users.noreply.github.com>
Date: Fri, 12 Jan 2024 15:32:38 -0800
Subject: [PATCH 1/2] redefine button classes (#75)

closes #65

- redefines button classes
- needed to update typography sizes to get this right so added that even
though jumping ahead
- remove unused code

Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>
---
 src/components/AddControlKey.svelte       |  4 ++--
 src/components/CreateMsa.svelte           |  4 ++--
 src/components/CreateProvider.svelte      |  4 ++--
 src/components/RequestToBeProvider.svelte |  4 ++--
 src/components/Stake.svelte               |  5 ++---
 src/style/app.css                         | 12 +++---------
 tailwind.config.js                        |  8 ++++++++
 7 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/components/AddControlKey.svelte b/src/components/AddControlKey.svelte
index 10bc02c8..11c9921d 100644
--- a/src/components/AddControlKey.svelte
+++ b/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>
diff --git a/src/components/CreateMsa.svelte b/src/components/CreateMsa.svelte
index 213167e8..f1b945d5 100644
--- a/src/components/CreateMsa.svelte
+++ b/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} />
diff --git a/src/components/CreateProvider.svelte b/src/components/CreateProvider.svelte
index 32bd5792..5287cd9c 100644
--- a/src/components/CreateProvider.svelte
+++ b/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>
diff --git a/src/components/RequestToBeProvider.svelte b/src/components/RequestToBeProvider.svelte
index ac1b29ff..9fec3494 100644
--- a/src/components/RequestToBeProvider.svelte
+++ b/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>
diff --git a/src/components/Stake.svelte b/src/components/Stake.svelte
index 7a701647..3677bcd5 100644
--- a/src/components/Stake.svelte
+++ b/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>
diff --git a/src/style/app.css b/src/style/app.css
index 6c3b9586..8edb4953 100644
--- a/src/style/app.css
+++ b/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,12 +24,6 @@
   .action-card-title {
     @apply font-semibold text-2xl;
   }
-  .action-btn-l {
-    @apply grow mr-3;
-  }
-  .action-btn-r {
-    @apply grow ml-3;
-  }
 }
 
 @layer base {
diff --git a/tailwind.config.js b/tailwind.config.js
index 2e845832..6037bb88 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -36,6 +36,14 @@ export default {
       backgroundImage: {
         topRight: 'url(/assets/top-right-bars.png)',
       },
+      fontSize: {
+        xs: '10px',
+        sm: '12px',
+        base: '14px',
+        l: '20px',
+        xl: '25px',
+        '2xl': '30px',
+      },
     },
   },
   plugins: [require('@tailwindcss/forms')],

From 86f7a31e1285172a52ce315b7b157fc40d4b4b00 Mon Sep 17 00:00:00 2001
From: "V. Claire Olmstead" <43625033+claireolmstead@users.noreply.github.com>
Date: Fri, 12 Jan 2024 15:34:52 -0800
Subject: [PATCH 2/2] defined typeography (#76)

closes #67

Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>
---
 src/style/app.css  | 22 ++++++++++++++++++++++
 tailwind.config.js |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/style/app.css b/src/style/app.css
index 8edb4953..eda4da21 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -24,6 +24,28 @@
   .action-card-title {
     @apply font-semibold text-2xl;
   }
+  
+  /* typeography */
+  /* headers */
+  .section-title {
+    @apply font-bold text-xl;
+  }
+  .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;
+  }
 }
 
 @layer base {
diff --git a/tailwind.config.js b/tailwind.config.js
index 6037bb88..7206076e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,7 +40,7 @@ export default {
         xs: '10px',
         sm: '12px',
         base: '14px',
-        l: '20px',
+        lg: '20px',
         xl: '25px',
         '2xl': '30px',
       },