PR comments'

frequency-chain · Dec 3, 2024 · ad32a79 · ad32a79
1 parent e91b5d3
commit ad32a79
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 76 deletions.
diff --git a/src/components/BecomeAProvider.svelte b/src/components/BecomeAProvider.svelte
@@ -10,35 +10,33 @@
   import BackHomeButton from '$components/BackHomeButton.svelte';
 </script>
 
-<div id="become-a-provider" class="column w-single-block">
-  <BlockSection title="Become a Provider">
-    <form class="">
-      <SelectNetworkAndAccount
-        bind:newUser={$user}
-        accounts={$nonProviderAccountsStore}
-        accountSelectorTitle="Select an Account Id"
-        accountSelectorPlaceholder="Select an Account Id"
-        noAccountsFoundErrorMsg="No accounts found.  Add an Account Id to your wallet."
-      />
-      {#if $user?.network != null && $user.network.id === NetworkType.MAINNET}
-        <EmailProviderRequest />
-      {:else if $user && $user?.address !== ''}
-        {#if $user?.msaId === 0}
-          <CreateMsa />
-        {:else}
-          <CreateProvider />
-        {/if}
+<BlockSection title="Become a Provider">
+  <form class="">
+    <SelectNetworkAndAccount
+      bind:newUser={$user}
+      accounts={$nonProviderAccountsStore}
+      accountSelectorTitle="Select an Account Id"
+      accountSelectorPlaceholder="Select an Account Id"
+      noAccountsFoundErrorMsg="No accounts found.  Add an Account Id to your wallet."
+    />
+    {#if $user?.network != null && $user.network.id === NetworkType.MAINNET}
+      <EmailProviderRequest />
+    {:else if $user && $user?.address !== ''}
+      {#if $user?.msaId === 0}
+        <CreateMsa />
       {:else}
-        <BackHomeButton cancelText="Back" />
+        <CreateProvider />
       {/if}
-    </form>
-  </BlockSection>
-  <BlockSection title="More Info">
-    <div class="text-sm">
-      For developer and testing convenience, on Testnet, anyone with an MSA who wishes to become a Provider may simply
-      submit a createProvider transaction.<br /><br />This action will register the MSA Id that is controlled by the
-      selected Transaction Signing Address above. Any Account Id that has been added to the MSA can submit the
-      transaction.
-    </div>
-  </BlockSection>
-</div>
+    {:else}
+      <BackHomeButton cancelText="Back" />
+    {/if}
+  </form>
+</BlockSection>
+<BlockSection title="More Info">
+  <div class="text-sm">
+    For developer and testing convenience, on Testnet, anyone with an MSA who wishes to become a Provider may simply
+    submit a createProvider transaction.<br /><br />This action will register the MSA Id that is controlled by the
+    selected Transaction Signing Address above. Any Account Id that has been added to the MSA can submit the
+    transaction.
+  </div>
+</BlockSection>
diff --git a/src/components/DropDownMenu.svelte b/src/components/DropDownMenu.svelte
@@ -8,19 +8,46 @@
   export let formatter: (value: T) => string = (value) => value.toString(); // eslint-disable-line no-undef
 </script>
 
-<div class="column mb-f24 w-full max-w-[420px]">
-  <label for={id}>{label}</label>
+<div class="column freq-select my-f24 w-full max-w-[420px]">
+  <label class="font-bold" for={id}>{label}</label>
   <select
     {...$$restProps}
     {id}
     bind:value
     on:change={onChange}
     data-test-id={id}
-    class="mr-f32 max-w-[420px] rounded-xl align-middle text-black"
+    class="freq-select relative m-0 mt-f8 max-w-[420px] cursor-pointer appearance-none rounded-md bg-white p-2 pr-f32 align-middle outline outline-1 outline-gray3 active:shadow-md"
   >
-    <option value="" class="text-black" disabled selected>{placeholder}</option>
+    <option class="text-gray3" value={null} disabled>{placeholder}</option>
     {#each options as option}
       <option value={option}>{formatter(option)}</option>
     {/each}
   </select>
+  <div class="select-arrow"></div>
 </div>
+
+<style lang="postcss">
+  .freq-select {
+    position: relative;
+  }
+  .freq-select::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    top: 72%;
+    right: 10px;
+    transform: translate(0, -50%);
+    width: 12px;
+    height: 12px;
+    background-color: #000000;
+    clip-path: polygon(8% 17%, 0% 25%, 50% 84%, 100% 25%, 92% 17%, 50% 65%);
+  }
+  .freq-select select {
+    -webkit-appearance: none;
+
+    &:focus,
+    &:hover {
+      @apply outline-teal;
+    }
+  }
+</style>
diff --git a/src/components/FAQItem.svelte b/src/components/FAQItem.svelte
@@ -14,7 +14,7 @@
 
 <button
   id="faq-question"
-  class="label border-divider mt-2 flex w-full items-center justify-between border-t p-4 text-left text-md"
+  class="label border-divider mt-2 flex w-full items-center justify-between border-t p-4 text-left text-md font-bold md:text-lg"
   onclick={toggleIsOpen}
 >
   {@render question?.()}
@@ -33,6 +33,6 @@
   </svg>
 </button>
 
-<div id="faq-answer" class={`p-3 ${isOpen ? 'block' : 'hidden'}`}>
+<div id="faq-answer" class="text-md lg:text-[22px] {`p-3 ${isOpen ? 'block' : 'hidden'}`}">
   {@render answer?.()}
 </div>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -7,7 +7,7 @@
 
 <header class="mb-8 flex items-start justify-between gap-3">
   <div>
-    <div class="w-[140px] max-w-48 pb-1 pl-3 md:min-w-40">
+    <div class="w-[180px] max-w-[180px] pb-1 pl-3 md:min-w-40">
       <FrequencyLogo />
     </div>
     <p class="pl-3 text-sm font-semibold md:text-md md:text-normal lg:tracking-wider">Provider Dashboard</p>

diff --git a/src/components/LoginForm.svelte b/src/components/LoginForm.svelte
@@ -35,7 +35,7 @@
   accountSelectorPlaceholder="Select a Provider Account Id"
   noAccountsFoundErrorMsg="No Provider Account Ids found. To become a Provider, see below."
 />
-<div class="flex justify-between align-bottom">
+<div class="mt-f24 flex justify-between align-bottom">
   <Button
     class="hover-teal px-f12 py-f8 disabled:bg-gray3"
     type="primary"

diff --git a/src/components/ProviderLogin.svelte b/src/components/ProviderLogin.svelte
@@ -5,20 +5,18 @@
   import { Button } from '@frequency-chain/style-guide';
 </script>
 
-<div id="provider-login">
-  <BlockSection title="Provider Login">
-    <LoginForm />
-  </BlockSection>
+<BlockSection title="Provider Login">
+  <LoginForm />
+</BlockSection>
 
-  <BlockSection title="Not a Provider?">
-    <div class="text-sm">
-      <a href="https://docs.frequency.xyz/Delegation/Providers.html" target="_blank" rel="no-referrer" class="underline"
-        >Want to learn more about providers?
-      </a>
-    </div>
-    <Button class="px-f12 py-f8" href="/become-a-provider">Become a Provider</Button>
-  </BlockSection>
-  <BlockSection title="Need tokens?">
-    <HowToTransact additionalStyles="text-sm" />
-  </BlockSection>
-</div>
+<BlockSection title="Not a Provider?">
+  <div class="py-f24 text-sm">
+    <a href="https://docs.frequency.xyz/Delegation/Providers.html" target="_blank" rel="no-referrer" class="underline"
+      >Want to learn more about providers?
+    </a>
+  </div>
+  <Button class="px-f12 py-f8" href="/become-a-provider">Become a Provider</Button>
+</BlockSection>
+<BlockSection title="Need tokens?">
+  <HowToTransact additionalStyles="text-sm" />
+</BlockSection>
diff --git a/src/components/SelectNetworkAndAccount.svelte b/src/components/SelectNetworkAndAccount.svelte
@@ -138,7 +138,7 @@
     formatter={formatNetwork}
   />
 {:else}
-  <p class="mb-f24 flex justify-between">
+  <p class="my-f24 flex justify-between">
     <span class="text-teal">Connected to {selectedNetwork?.name || 'Custom'}</span>
     <span onclick={resetState} class="cursor-pointer underline">Change networks</span>
   </p>

diff --git a/src/components/icons/FrequencyLogo.svelte b/src/components/icons/FrequencyLogo.svelte
@@ -7,7 +7,7 @@
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   {width}
-  height="48.256"
+  height="100%"
   viewBox="0 0 461.117 68.256"
 >
   <defs>

diff --git a/src/routes/faq/+page.svelte b/src/routes/faq/+page.svelte
@@ -3,8 +3,8 @@
   import HowToTransact from '$components/HowToTransact.svelte';
 </script>
 
-<div class="content-block w-single-block text-left text-base">
-  <h2 class="section-title">FAQ's</h2>
+<div class="content-block">
+  <h4 class="text-md font-bold md:text-xl">FAQ's</h4>
 
   <FAQItem>
     {#snippet question()}

diff --git a/src/style/app.css b/src/style/app.css
@@ -31,7 +31,7 @@
     @apply ml-6 list-decimal;
   }
   .column {
-    @apply flex flex-col md:gap-4;
+    @apply flex flex-col;
   }
 
   /* typography */
@@ -100,23 +100,6 @@
     footer svg {
       @apply bg-white text-black transition duration-[0.3s] hover:text-teal;
     }
-
-    select {
-      @apply m-0 cursor-pointer overflow-clip bg-transparent p-2 pr-f32 text-black outline-none outline-1 outline-gray3;
-
-      &:focus,
-      &:hover {
-        @apply outline-teal;
-      }
-
-      option:first-child {
-        @apply text-gray3 !important;
-      }
-    }
-
-    ::placeholder {
-      @apply text-gray2 !important;
-    }
   }
 }