66 inputs & selects (#79)

closes #66 --------- Co-authored-by: Claire Olmstead <[email protected]>
frequency-chain · Jan 12, 2024 · 7c422db · 7c422db
1 parent eb256cd
commit 7c422db
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/src/components/Connect.svelte b/src/components/Connect.svelte
@@ -74,12 +74,7 @@
 
 <div class="pt-8">
   <p class="text-2xl"><label for="provider-list">Select a Network</label></p>
-  <select
-    id="provider-list"
-    required
-    bind:value={selectedProvider}
-    class="text-left bg-green5 pr-8 pl-4 py-2 rounded-md border-0"
-  >
+  <select id="provider-list" required bind:value={selectedProvider}>
     {#each Object.keys(ProviderMap) as providerName}
       <option value={providerName} class="bg-base">{providerName}: {ProviderMap[providerName]}</option>
     {/each}
@@ -91,7 +86,6 @@
     bind:value={otherProvider}
     disabled={selectedProvider.toString() != 'Other'}
     class:hidden={selectedProvider.toString() != 'Other'}
-    class="w-500 rounded text-white"
   />
   <button
     on:click|preventDefault={async () => await connect()}

diff --git a/src/components/CreateProvider.svelte b/src/components/CreateProvider.svelte
@@ -19,7 +19,7 @@
   export let validAccounts = {};
   export let signingAddress = '';
   // a callback for when the user cancels this action
-  export let cancelAction;
+  export let cancelAction = () => {};
   // a callback for when a transaction hits a final state
   export let txnFinished = () => {
     console.log('default txnFinished callback');
@@ -94,10 +94,9 @@
   </p>
   <form>
     <label for="providerNameCB">Provider name</label>
-    <input id="providerNameCB" required placeholder="Short name" maxlength="" bind:value={newProviderName} />
+    <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">
+      <button id="create-provider-btn" on:click|preventDefault={doCreateProvider} class="btn-primary">
         Create Provider
       </button>
       <button on:click|preventDefault={cancelAction} class="btn-no-fill">Cancel</button>

diff --git a/src/components/Stake.svelte b/src/components/Stake.svelte
@@ -128,7 +128,7 @@
     <div class="mt-6">
       <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} />
+        <input type="number" id="stakingInput" value="1" on:input={handleInput} />
       </div>
     </div>
     <div class="flex w-350 justify-between">

diff --git a/src/style/app.css b/src/style/app.css
@@ -12,13 +12,10 @@
   .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;
-  }
   .action-card {
     @apply mt-8 p-8 shrink-0 rounded-lg text-white shadow-md;
   }
-  .action-card input {
+  .action-card {
     @apply rounded text-white;
   }
   .action-card-title {
@@ -59,4 +56,14 @@
   button {
     @apply select-none;
   }
+
+  input,
+  [type='text'],
+  select {
+    @apply w-[320px] h-[30px] text-black rounded-md text-sm py-0 px-2 border-none outline-none disabled:opacity-85 disabled:text-disabled;
+  }
+
+  ::placeholder {
+    @apply text-disabled !important;
+  }
 }