Theme update

package.json

@@ -63,6 +63,7 @@
   "type": "module",
   "dependencies": {
     "@frequency-chain/api-augment": "^1.13.2",
+    "@frequency-chain/style-guide": "^0.1.24",
     "@polkadot/api": "^13.2.1",
     "@polkadot/extension-dapp": "^0.53.1",
     "@polkadot/extension-inject": "^0.53.1",

src/components/ActivityLogPreview.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <div class="flex flex-col">
-  <div class="min-w-[300px] border-l border-divider pl-5"></div>
-  <div class="label border-b border-divider pb-3">Activity Log</div>
+  <div class="border-divider border-l pl-5 md:min-w-[300px]"></div>
+  <div class="label border-divider border-b pb-3">Activity Log</div>
 
   {#if recentActivityItem}
     <ActivityLogPreviewItem activity={recentActivityItem} />

src/components/ActivityLogPreviewItem.svelte

@@ -11,7 +11,7 @@
   let { activity }: Props = $props();
 </script>
 
-<div class="break-anywhere flex gap-2 text-wrap border-b border-divider py-2 text-sm">
+<div class="break-anywhere border-divider flex gap-2 text-wrap border-b py-2 text-sm">
   {#if activity.txnStatus === TxnStatus.LOADING}
     <LoadingIcon />
   {:else if activity.txnStatus === TxnStatus.SUCCESS}

src/components/AddAccountId.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
-
   import { dotApi } from '$lib/stores';
   import type { ApiPromise } from '@polkadot/api';
   import { submitAddAccountId } from '$lib/connections';
@@ -11,6 +9,7 @@
   import { user } from '$lib/stores/userStore';
   import { type Account, unusedKeyAccountsStore } from '$lib/stores/accountsStore';
   import { formatAccount } from '$lib/utils';
+  import { Button } from '@frequency-chain/style-guide';
 
   interface Props {
     isOpen: boolean;
@@ -68,14 +67,12 @@
         </div>
       {/if}
       <div class="flex w-[350px] justify-between">
-        <button onclick={preventDefault(addAccountId)} class="btn-primary" disabled={isSubmitDisabled}
-          >Add Account Id</button
-        >
-        <button onclick={preventDefault(onCancel)} class="btn-no-fill">Cancel</button>
+        <Button class="btn-primary" onClick={addAccountId} disabled={isSubmitDisabled}>Add Account Id</Button>
+        <button class="underline transition hover:text-teal" onclick={onCancel}>Cancel</button>
       </div>
     </form>
 
-    <span class="border-1 border-b border-divider"></span>
+    <span class="border-1 border-divider border-b"></span>
 
     <AddKeyRequirements />
   </div>

src/components/AddToClipboard.svelte

@@ -1,24 +1,27 @@
 <script lang="ts">
   import CopyIcon from '../lib/assets/CopyIcon.svelte';
 
-  let fillColor = $state('#000');
+  let origFill = '#fff';
+
+  let fill = $state(origFill);
   let isClicked = $state(false);
 
-  let { copyValue = '' } = $props();
+  let { copyValue = '', classes = '' } = $props();
 
   function handleMouseEnter() {
-    fillColor = '#5E69FF';
+    fill = '#55B1AB';
   }
 
   function handleMouseLeave() {
-    if (!isClicked) fillColor = '#000';
+    if (!isClicked) fill = origFill;
   }
 
   function handleClick() {
-    fillColor = '#7CFA4D';
+    copyText();
+    fill = '#2F80ED';
     isClicked = true;
     setTimeout(() => {
-      fillColor = '#000';
+      fill = origFill;
       isClicked = false;
     }, 2000);
   }
@@ -32,6 +35,7 @@
   }
 </script>
 
-<button onclick={copyText} class="ml-2 flex h-[30px] items-center justify-center">
-  <CopyIcon {fillColor} {handleClick} {handleMouseEnter} {handleMouseLeave} />
-</button>
+<div class="{classes} flex min-w-f48 flex-col">
+  <CopyIcon {fill} {handleClick} {handleMouseEnter} {handleMouseLeave} />
+  <span class="absolute top-[28px] text-xs {!isClicked && 'hidden'}">Copied</span>
+</div>

src/components/BackHomeButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  let { cancelText = 'Cancel' } = $props();
+  let { cancelText = 'Cancel', classes = '' } = $props();
 </script>
 
-<a href="/" class="btn-no-fill" data-testid="back-home">{cancelText}</a>
+<a href="/" class={classes} data-testid="back-home">{cancelText}</a>

src/components/BecomeAProvider.svelte

@@ -10,35 +10,33 @@
   import BackHomeButton from '$components/BackHomeButton.svelte';
 </script>
 
-<div id="become-a-provider" class="content-block column w-single-block">
-  <BlockSection title="Become a Provider">
-    <form class="column w-[320px]">
-      <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>

src/components/Capacity.svelte

@@ -6,6 +6,7 @@
   import { balanceToHuman } from '$lib/utils.js';
   import ListCard from './ListCard.svelte';
   import Stake from './Stake.svelte';
+  import { Button } from '@frequency-chain/style-guide';
 
   let capacityDetails: CapacityDetails;
 
@@ -40,6 +41,8 @@
 </script>
 
 <ListCard title="Capacity" list={capacityList} errorMessage={errMsg}>
-  <button on:click|preventDefault={() => (showStakeToProvider = true)} class="btn-primary">Stake to Provider</button>
+  <Button size="md" type="primary" class="btn-primary" onClick={() => (showStakeToProvider = true)}
+    >Stake to Provider</Button
+  >
   <Stake isOpen={showStakeToProvider} close={() => (showStakeToProvider = false)} />
 </ListCard>

src/components/ChainStatus.svelte

@@ -8,13 +8,15 @@
   ]);
 </script>
 
-<div id="chain-status" class="content-block">
+<div id="chain-status" class="content-block border-gray3">
   <h3 class="section-title-underlined">Overview</h3>
-  <div class="flex justify-around">
+  <div class="flex flex-col md:flex-row md:justify-between">
     {#each chainStatus as status, index}
-      <div class={`flex min-w-[30%] flex-col gap-6 p-5 ${index > 0 && 'border-l border-divider'}`}>
+      <div
+        class={`flex flex-col gap-1 p-2 md:min-w-[30%] md:gap-6 md:p-5 ${index > 0 && 'md:border-divider md:border-l'}`}
+      >
         <p class="label" id={`${status.id}-title`}>{status.label}:</p>
-        <p class="data-value-2xl" id={`${status.id}-value`}>{status.value}</p>
+        <p class="data-value-md lg:data-value-2xl" id={`${status.id}-value`}>{status.value}</p>
       </div>
     {/each}
   </div>

src/components/ConnectionStatus.svelte

@@ -10,25 +10,29 @@
 </script>
 
 {#if $isLoggedIn}
-  <div class="flex items-center gap-6">
-    <div class="flex items-center gap-2">
+  <div class="flex flex-col gap-2 md:flex-row md:gap-6">
+    <div class="flex items-center gap-2 md:ml-2 lg:ml-0">
       {#if $storeChainInfo.connected}
         <div class="w-1 h-1 rounded-full bg-success p-1"></div>
       {:else}
         <div class="w-1 bg-red-error h-1 rounded-full p-1"></div>
       {/if}
-      <p id="connected-network" class="text-md uppercase">{$user.network?.name}</p>
+      <p id="connected-network" class="text-sm uppercase md:text-normal lg:text-md">{$user.network?.name}</p>
+    </div>
+    <div class="flex items-center justify-between gap-2">
+      <p class="text-sm md:text-normal lg:text-md">
+        {#if $user?.network}{$user.network.endpoint?.toString().replace(/\/$/, '')}{/if}
+      </p>
+      <div class="rounded-md transition hover:shadow-md">
+        <button
+          onclick={preventDefault(() => {
+            showConnectProvider = true;
+          })}
+          class="w-f32 flex h-f32 min-h-f32 min-w-f32 items-end justify-center rounded-md bg-teal p-1 lg:min-h-f40 lg:min-w-f40"
+          ><Switch />
+        </button>
+      </div>
+      <ConnectProvider close={() => (showConnectProvider = false)} isOpen={showConnectProvider} />
     </div>
-    <p class="text-md">
-      {#if $user?.network}{$user.network.endpoint?.toString().replace(/\/$/, '')}{/if}
-    </p>
-    <button
-      onclick={preventDefault(() => {
-        showConnectProvider = true;
-      })}
-      class="flex h-[40px] w-[40px] items-center justify-center rounded-md bg-bright-blue drop-shadow hover:opacity-[75%]"
-      ><Switch class="w-[24px]" />
-    </button>
-    <ConnectProvider close={() => (showConnectProvider = false)} isOpen={showConnectProvider} />
   </div>
 {/if}

src/components/Dashboard.svelte

@@ -33,7 +33,7 @@
 
   <ChainStatus />
 
-  <div class="flex justify-center gap-4">
+  <div class="mx-f8 flex flex-col justify-center gap-4 md:flex-row">
     <Provider />
     <Capacity />
   </div>

src/components/DashboardHeader.svelte

@@ -3,7 +3,7 @@
   import ActivityLogPreview from '$components/ActivityLogPreview.svelte';
 </script>
 
-<div class="content-block flex justify-between gap-16 break-all">
+<div class="content-block flex flex-col justify-between gap-2 break-all md:gap-16 lg:flex-row">
   <Profile />
   <ActivityLogPreview />
 </div>

src/components/DropDownMenu.svelte

@@ -8,14 +8,46 @@
   export let formatter: (value: T) => string = (value) => value.toString(); // eslint-disable-line no-undef
 </script>
 
-<div>
-  <label class="label mb-3.5 block" for={id}>{label}</label>
-  <select {...$$restProps} {id} bind:value on:change={onChange} data-test-id={id}>
-    {#if placeholder !== ''}
-      <option class="text-disabled" value={null} disabled selected>{placeholder}</option>
-    {/if}
+<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="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 class="text-gray3" value={null} disabled>{placeholder}</option>
     {#each options as option}
-      <option value={option} class="bg-white">{formatter(option)}</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>

src/components/EmailProviderRequest.svelte

@@ -15,8 +15,12 @@
     For use on Mainnet, anyone with an MSA who wishes to become a Provider needs to send an email request to the
     Frequency Foundation.
   </p>
-  <form class="flex w-[350px] items-end justify-between">
-    <button id="email-request-btn" onclick={preventDefault(composeEmail)} class="btn-primary">Email Request</button>
-    <BackHomeButton />
-  </form>
+  <div class="flex items-end justify-between">
+    <button
+      id="email-request"
+      onclick={preventDefault(composeEmail)}
+      class="md: border-3xl hover-teal rounded-3xl border p-f4 py-f8 md:px-f12">Email Request</button
+    >
+    <BackHomeButton classes="text-sm px-f4 md:px-f12" />
+  </div>
 </div>

src/components/FAQItem.svelte

@@ -14,7 +14,7 @@
 
 <button
   id="faq-question"
-  class="label text-md mt-2 flex w-full items-center justify-between border-t border-divider p-4 text-left"
+  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>