212 bug misc button bugs (#236)

## Goal

The goal of this PR is streamline our buttons to use SG.

Closes #212 

## Discussion

- Use SG as much as possible
- Remove unused code
- Improve button components and custom styles where possible

## How To Test the Changes

1. Clone the pr branch
2. Delete node modules and package lock as there may be caching issues
3. `npm i`
4. `npm run dev` -> See buttons looking and functioning as expected.

Author: claireclark1

package-lock.json

@@ -63,7 +63,7 @@
   "type": "module",
   "dependencies": {
     "@frequency-chain/api-augment": "^1.13.2",
-    "@frequency-chain/style-guide": "^0.1.30",
+    "@frequency-chain/style-guide": "^0.1.32",
     "@polkadot/api": "^15.9.2",
     "@polkadot/extension-dapp": "^0.58.8",
     "@polkadot/extension-inject": "^0.58.8",

package.json

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { logout } from '$lib/stores';
+  import ButtonNoFill from './ButtonNoFill.svelte';
   let { cancelText = 'Cancel' } = $props();
 </script>
 
-<a href="/" class="btn-no-fill text-sm" data-testid="back-home" onclick={logout}>{cancelText}</a>
+<ButtonNoFill href="/" data-testid="back-home" onclick={logout}>{cancelText}</ButtonNoFill>

src/components/atoms/BackHomeButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+    href?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { href, children, ...rest }: Props = $props();
+</script>
+
+{#if href}
+  <a {...rest} {href} class={cn('hover:text-teal underline; cursor-pointer text-sm', rest.class)}>
+    {@render children?.()}
+  </a>
+{:else}
+  <button {...rest} class={cn('hover:text-teal underline; cursor-pointer text-sm', rest.class)}>
+    {@render children?.()}
+  </button>
+{/if}

src/components/atoms/Button.svelte

@@ -56,7 +56,7 @@
     controlled by the selected Transaction Signing Address above.
   </p>
   <div class="flex w-[350px] items-end justify-between">
-    <Button type="primary" onclick={doCreateMsa} disabled={isInProgress}>
+    <Button onclick={doCreateMsa} disabled={isInProgress}>
       {#if isInProgress}
         <LoadingIcon />
       {:else}

src/components/atoms/ButtonNoFill.svelte

@@ -80,13 +80,7 @@
     />
   </div>
   <div class="flex items-end justify-between">
-    <Button
-      type="primary"
-      id="create-provider-btn"
-      class="disabled:bg-gray3 disabled:text-white disabled:hover:shadow-none"
-      onclick={doCreateProvider}
-      disabled={isInProgress}
-    >
+    <Button id="create-provider-btn" onclick={doCreateProvider} disabled={isInProgress}>
       {#if isInProgress}
         <LoadingIcon />
       {:else}

src/components/features/BecomeProviderNextSteps/CreateMsa.svelte

@@ -10,6 +10,7 @@
   import LoadingIcon from '$lib/assets/LoadingIcon.svelte';
   import { getMsaInfo } from '$lib/polkadotApi';
   import ActivityLogPreviewItem from '$features/ActivityLogItem/ActivityLogItem.svelte';
+  import { Button } from '@frequency-chain/style-guide';
 
   let { hasRequestedToBeProvider = $bindable(), ...props } = $props();
 
@@ -69,18 +70,17 @@
         />
       </div>
       <div class="flex w-[350px] justify-between">
-        <button
+        <Button
           onclick={doProposeToBeProvider}
           disabled={newProviderName === '' || isInProgress}
           id="request-2b-provider-btn"
-          class="btn-primary"
         >
           {#if isInProgress}
             <LoadingIcon />
           {:else}
             Request To Be Provider
           {/if}
-        </button>
+        </Button>
         <BackHomeButton />
       </div>
     </form>

src/components/features/BecomeProviderNextSteps/CreateProvider.svelte

@@ -41,8 +41,6 @@
 </script>
 
 <ListCard title="Capacity" list={capacityList} errorMessage={errMsg}>
-  <Button size="sm" type="primary" class="btn-primary" onClick={() => (showStakeToProvider = true)}
-    >Stake to Provider</Button
-  >
+  <Button size="sm" onclick={() => (showStakeToProvider = true)}>Stake to Provider</Button>
   <Stake isOpen={showStakeToProvider} close={() => (showStakeToProvider = false)} />
 </ListCard>

src/components/features/BecomeProviderNextSteps/RequestToBeProvider.svelte

@@ -8,6 +8,7 @@
   import DropDownMenu from '../../atoms/DropDownMenu.svelte';
   import { type Account, allAccountsStore } from '$lib/stores/accountsStore';
   import { Button } from '@frequency-chain/style-guide';
+  import ButtonNoFill from '$atoms/ButtonNoFill.svelte';
 
   interface Props {
     close: () => void;
@@ -66,14 +67,7 @@
   </div>
 
   <div class="flex items-end justify-between">
-    <Button
-      type="primary"
-      onclick={stake}
-      disabled={isLoading}
-      class="disabled:bg-gray3 disabled:text-white disabled:hover:shadow-none"
-    >
-      Stake</Button
-    >
-    <button class="btn-no-fill" onclick={close}>Cancel</button>
+    <Button onclick={stake} disabled={isLoading}>Stake</Button>
+    <ButtonNoFill onclick={close}>Cancel</ButtonNoFill>
   </div>
 </form>

src/components/features/Capacity/Capacity.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
+  import { Button } from '@frequency-chain/style-guide';
+
   interface Props {
     additionalStyles?: string;
   }
 
   let { additionalStyles = '' }: Props = $props();
 </script>
 
-<div class={`column ${additionalStyles}`}>
+<div class={`column gap-f16 ${additionalStyles}`}>
   <p>
     To transact on Frequency as a Provider you will need Frequency utility tokens. On Frequency Testnet, you can get
     tokens from the Testnet Faucet sent to the Account Id that you want to use.
   </p>
 
-  <a href="https://faucet.testnet.frequency.xyz" target="_blank" class="btn-primary">Testnet Faucet</a>
+  <Button href="https://faucet.testnet.frequency.xyz" target="_blank">Testnet Faucet</Button>
 
   <ol class="ordered-list">
     <li>

src/components/features/Capacity/StakeForm.svelte

@@ -4,6 +4,7 @@
   import { user } from '$lib/stores/userStore';
   import { Button } from '@frequency-chain/style-guide';
   import SelectNetworkAndAccount from '../SelectNetworkAndAccount/SelectNetworkAndAccount.svelte';
+  import ButtonNoFill from '$atoms/ButtonNoFill.svelte';
 
   // Props
   interface Props {
@@ -44,10 +45,10 @@
   />
 
   <div class="flex items-end justify-between">
-    <Button type="primary" disabled={!canConnect} onclick={connect}>Connect to Account</Button>
+    <Button disabled={!canConnect} onclick={connect}>Connect to Account</Button>
 
     {#if onCancel}
-      <button type="button" class="btn-no-fill hover:text-teal text-sm underline" onclick={onCancel}>Cancel</button>
+      <ButtonNoFill onclick={onCancel}>Cancel</ButtonNoFill>
     {/if}
   </div>
 </form>

src/components/features/HowToTransact/HowToTransact.svelte

@@ -2,6 +2,7 @@
   import ActivityLogPreviewItem from '../ActivityLogItem/ActivityLogItem.svelte';
   import { activityLog } from '$lib/stores/activityLogStore';
   import type { Activity } from '$lib/storeTypes';
+  import { Button } from '@frequency-chain/style-guide';
 
   let recentActivityItem: Activity = $derived($activityLog[0]);
 </script>
@@ -12,9 +13,7 @@
 
   {#if recentActivityItem}
     <ActivityLogPreviewItem activity={recentActivityItem} />
-    <a href="/activity-log" class="mt-4 self-end">
-      <button class="btn-primary">See all activity</button>
-    </a>
+    <Button href="/activity-log" class="mt-4 self-end">See all activity</Button>
   {:else}
     <div class="py-2 text-sm">No activity.</div>
   {/if}

src/components/features/LoginForm/LoginForm.svelte

@@ -8,6 +8,7 @@
   import { dotApi } from '$lib/stores.js';
   import { ApiPromise } from '@polkadot/api';
   import { preventDefault } from 'svelte/legacy';
+  import ButtonNoFill from '$atoms/ButtonNoFill.svelte';
 
   interface Props {
     onCancel: () => void;
@@ -53,12 +54,7 @@
   {/if}
 
   <div class="flex items-end justify-between">
-    <Button
-      type="primary"
-      onclick={addAccountId}
-      disabled={isSubmitDisabled}
-      class="disabled:bg-gray3 disabled:text-white disabled:hover:shadow-none">Add Account Id</Button
-    >
-    <button class="btn-no-fill hover:text-teal text-sm underline" onclick={preventDefault(onCancel)}>Cancel</button>
+    <Button onclick={addAccountId} disabled={isSubmitDisabled}>Add Account Id</Button>
+    <ButtonNoFill onclick={onCancel}>Cancel</ButtonNoFill>
   </div>
 </form>

src/components/features/ProfileOverview/ActivityLogPreview.svelte

@@ -41,6 +41,6 @@
 </script>
 
 <ListCard title="Provider" list={providerList} errorMessage={errMsg}>
-  <Button size="sm" class="btn-primary" onclick={() => (isAddAccountIdOpen = true)}>Add Account Id</Button>
+  <Button size="sm" onclick={() => (isAddAccountIdOpen = true)}>Add Account Id</Button>
   <AddAccountId isOpen={isAddAccountIdOpen} close={() => (isAddAccountIdOpen = false)} />
 </ListCard>

src/components/features/Provider/AddAccountIdForm.svelte

@@ -9,6 +9,7 @@
   import DropDownMenu from '$atoms/DropDownMenu.svelte';
   import { formatNetwork, formatAccount, isValidURL } from '$lib/utils';
   import { createApi } from '$lib/polkadotApi';
+  import ButtonNoFill from '$atoms/ButtonNoFill.svelte';
 
   interface Props {
     newUser: Account | null;
@@ -152,7 +153,7 @@
 {:else}
   <p class="my-f24 flex justify-between">
     <span class="text-teal">Connected to {selectedNetwork?.name || 'Custom'}</span>
-    <button onclick={resetState} class="hover:text-teal cursor-pointer text-sm underline">Change networks</button>
+    <ButtonNoFill onclick={resetState}>Change networks</ButtonNoFill>
   </p>
 {/if}
 {#if isCustomNetwork}

src/components/features/Provider/Provider.svelte

@@ -21,7 +21,7 @@
     </a>
     <!-- TODO: remove div on button width fix -->
     <div>
-      <Button type="primary" onclick={() => goto('/become-a-provider')}>Become a Provider</Button>
+      <Button onclick={() => goto('/become-a-provider')}>Become a Provider</Button>
     </div>
   </div></BlockSection
 >

src/components/features/SelectNetworkAndAccount/SelectNetworkAndAccount.svelte

@@ -8,9 +8,7 @@ export function storable<T>(key: string, data?: T) {
 
   if (storage) {
     const storageValue = storage.getItem(key);
-    if (storageValue) {
-      set(storageValue ? JSON.parse(storageValue) : data);
-    }
+    set(storageValue ? JSON.parse(storageValue) : data);
   }
 
   function toJson(value: unknown) {

src/components/pages/ProviderLogin.svelte

@@ -1,7 +1,12 @@
 import { formatBalance, hexToString, isFunction } from '@polkadot/util';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import type { Account } from './stores/accountsStore';
 import { NetworkType, type NetworkInfo } from './stores/networksStore';
 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
 export async function sleep(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }

src/lib/stores/storable.ts

@@ -4,7 +4,7 @@
 
 @config '../../tailwind.config.ts';
 
-/*  */
+/* layout */
 @utility title-h2 {
   @apply font-title text-[50px] leading-[1] tracking-wider md:text-[60px] lg:text-[64px];
 }
@@ -15,7 +15,6 @@
   @apply font-title text-[18px] leading-[1] tracking-wider sm:text-[20px] md:text-[22px] lg:text-[26px];
 }
 @utility unordered-list {
-  /* layout */
   @apply ml-6 list-disc text-wrap;
 }
 @utility ordered-list {
@@ -24,9 +23,11 @@
 @utility column {
   @apply flex flex-col;
 }
+
+/* typography */
+/* headers */
+
 @utility section-title {
-  /* typography */
-  /* headers */
   @apply text-xl font-bold;
 }
 @utility section-title-underlined {
@@ -35,8 +36,9 @@
 @utility label {
   @apply md:text-normal text-sm font-bold lg:tracking-wide;
 }
+
+/* data */
 @utility data-value-sm {
-  /* data */
   @apply font-data text-teal text-sm;
 }
 @utility data-value-md {
@@ -51,13 +53,14 @@
 @utility data-value-2xl {
   @apply font-data text-h3 text-teal;
 }
+
+/* layout */
 @utility content-block {
-  /* layout */
   @apply mb-f24 box-border rounded-md p-7;
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
 }
+/* right side sizing */
 @utility main-section {
-  /* right side sizing */
   @apply ml-f80 px-f16 md:ml-f128;
   a {
     @apply hover:text-teal underline transition duration-[0.3s];
@@ -67,10 +70,6 @@
   overflow-wrap: anywhere;
 }
 
-@utility btn-no-fill {
-  @apply hover:text-teal cursor-pointer text-sm underline;
-}
-
 :root {
   --select-border: none;
   --select-arrow: var(--select-border);
@@ -81,10 +80,6 @@
     min-height: 100vh;
   }
 
-  button.btn-primary {
-    @apply bg-teal p-f12 rounded-full text-center font-bold text-black transition-all hover:text-black hover:shadow-md;
-  }
-
   html {
     font-synthesis: none;
     text-rendering: optimizeLegibility;
@@ -97,6 +92,6 @@
   input,
   [type='text'],
   [type='number'] {
-    @apply h-f40 text-normal border-gray3 hover:border-teal relative flex w-full max-w-[420px] cursor-pointer items-center justify-between rounded-md border bg-white p-2 px-3 py-2 align-middle text-[16px] overflow-ellipsis text-black outline-none disabled:cursor-not-allowed disabled:opacity-50;
+    @apply h-f40 text-normal border-gray3 hover:border-teal relative flex w-full max-w-[420px] cursor-pointer items-center justify-between rounded-md border bg-white p-2 px-3 py-2 align-middle overflow-ellipsis text-black outline-none disabled:cursor-not-allowed disabled:opacity-50;
   }
 }