UI Improvements

packages/ui/package.json

@@ -50,11 +50,10 @@
 		"@sveltejs/package": "^2.3.2",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@tsconfig/svelte": "^5.0.2",
-		"@types/qrcode": "^1.5.5",
 		"@wagmi/core": "2.0.1",
+		"@castlenine/svelte-qrcode": "^2.2.0",
 		"postcss": "^8.4.40",
 		"postcss-preset-env": "^9.3.0",
-		"qrcode": "^1.5.3",
 		"sass": "^1.77.8",
 		"svelte": "^4.2.9",
 		"svelte-check": "^3.6.3",

packages/ui/src/components/AccountModal.svelte

@@ -71,7 +71,7 @@
 			</svg>
 			</button>
 
-			<span class="fcl__subhead"
+			<span class="fcl__text-secondary"
 				>{balance ? `${balance.substring(0, 7)} ${symbol}` : 0}</span
 			>
 			<!-- <br /> -->

packages/ui/src/components/Common/Modal.svelte

@@ -1,30 +1,27 @@
 <script lang="ts">
-	import { createEventDispatcher, onDestroy } from 'svelte'
+	import { createEventDispatcher, onDestroy, tick } from 'svelte'
+	import type { Action } from 'svelte/action'
 	const dispatch = createEventDispatcher()
 
 	export let titleText = 'Title Text'
 	export let customTrigger = false
 
-	export let inlineSize: number
 	export let triggerText = 'open dialog'
 	let dialog: HTMLDialogElement
 
 	const docOverflow = {
 		x: document.documentElement.style.overflowX,
 		y: document.documentElement.style.overflowY
 	}
-	let isOpen = false
 
-	const restoreStyles = (el: HTMLDialogElement) => {
+	const restoreStyles: Action<HTMLDialogElement> = (el) => {
 		el.addEventListener('close', () => {
-			isOpen = false
 			document.documentElement.style.overflowY = docOverflow.x
 			document.documentElement.style.overflowX = docOverflow.y
 		})
 		return {
 			destroy() {
 				el.removeEventListener('close', () => {
-					isOpen = false
 					document.documentElement.style.overflowY = docOverflow.x
 					document.documentElement.style.overflowX = docOverflow.y
 				})
@@ -33,7 +30,6 @@
 	}
 
 	export function open() {
-		isOpen = true
 		dialog.showModal()
 
 		/* Get the overflow at the point when dialog is being opened */
@@ -50,6 +46,32 @@
 	onDestroy(() => {
 		dispatch('close')
 	})
+
+	const resize = async () => {
+		const reducedMotion = window.matchMedia(
+			'(prefers-reduced-motion: reduce)'
+		).matches
+		if (!dialog || reducedMotion) return
+
+		let firstHeight = dialog.getBoundingClientRect().height
+		await tick()
+		const lastHeight = dialog.getBoundingClientRect().height
+		dialog.animate(
+			[{ height: `${firstHeight}px` }, { height: `${lastHeight}px` }],
+			{
+				duration: 200,
+				fill: 'none',
+				easing: 'ease-out',
+				composite: 'accumulate'
+			}
+		)
+	}
+	// onMount(resize)
+	$: {
+		// console.log('contentHeight:', contentHeight)
+		titleText
+		resize()
+	}
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
@@ -61,8 +83,7 @@
 	aria-labelledby="fcl__dialog-title"
 	on:click|self={close}
 	use:restoreStyles
-	inert={isOpen ? undefined : true}
-	style:inline-size={`min(${inlineSize || 240}px, 100%)`}
+	class="fcl__el"
 >
 	<!-- transition:fade={{ duration: 500, easing: quadInOut }} -->
 	<header>
@@ -95,6 +116,11 @@
 	<div class="fcl__dialog-content">
 		<slot />
 	</div>
+	<footer class="fcl__dialog-footer">
+		<slot name="footer">
+			<!--<div class="spacer"></div>-->
+		</slot>
+	</footer>
 </dialog>
 
 {#if !customTrigger}
@@ -103,33 +129,27 @@
 
 <style>
 	dialog:not([open]) {
-		pointer-events: none;
+		display: none;
 		opacity: 0;
 	}
 
 	dialog[open] {
+		display: flex;
+		flex-direction: column;
 		opacity: 1;
+		height: fit-content;
 	}
 
 	dialog {
-		/* Managing transition */
-		transition:
-			width 128ms,
-			opacity 128ms ease-in,
-			position 128ms ease-in;
-
-		/* Position at center */
-		display: block;
-		position: fixed;
-		margin: auto;
+		overflow: hidden;
 		padding: 0;
-		inset: 0;
+		margin-block-start: 25svh;
 
 		&::backdrop {
 			background: var(--fcl-overlay-background, hsla(0, 0%, 0%, 0.4));
 			backdrop-filter: var(--fcl-overlay-backdrop-filter, none);
 		}
-		/* max-inline-size: 336px; */
+		inline-size: 300px;
 		background: var(--fcl-body-background, hsl(228, 11%, 9%));
 		color: var(--fcl-text-color, #f1f1f1);
 		--fcl-sc: hsla(228, 11%, 9%, 0.08);
@@ -163,7 +183,7 @@
 			font-family: inherit;
 		}
 
-		/* Targetting Dialog Head Slot */
+		/* Targets Dialog Head Slot */
 		--inner-padding: var(--fcl-modal-padding, 1em);
 		& > header {
 			display: grid;
@@ -180,45 +200,32 @@
 				font-weight: var(--fcl-modal-heading-font-weight, 700);
 			}
 		}
-		& .fcl__dialog-content {
+		& .fcl__dialog-content > *,
+		& .fcl__dialog-footer {
 			padding: var(--inner-padding);
+			padding-block-start: 0;
+			box-sizing: border-box;
+		}
+
+		& .fcl__dialog-content > * {
+			padding-block-end: 0;
 		}
 	}
-	/* 	@media (max-width: 500px) {
+	@media (max-width: 500px) {
 		dialog {
+			margin-block-start: auto;
 			margin-block-end: 0;
 			border-end-end-radius: 0;
 			border-end-start-radius: 0;
-			/* inline-size: 100%; *
+			inline-size: 100vw;
+			inline-size: 100svw;
 		}
-	} */
+	}
 	.fcl__dialog-content {
-		display: grid;
-		grid-template-rows: 1fr;
-		transition: 250ms grid-template-rows ease;
-		max-block-size: 300px;
-		overscroll-behavior: contain;
-		overflow-y: auto;
-		padding-block-start: 0;
-
-		&::-webkit-scrollbar {
-			inline-size: 0.5em;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: var(--fcl-body-background);
-		}
-		&::-webkit-scrollbar-thumb {
-			background: var(--fcl-text-color, #222429);
-			border: 0.2em solid transparent;
-			border-radius: calc(var(--fcl-border-radius, 50em) / 8);
-			&:hover {
-				background-color: var(--fcl-btn-hover-background, #2f3139);
-			}
-		}
-		&::-webkit-scrollbar-button {
-			background: var(--fcl-body-background);
-		}
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		padding: 0;
 	}
 	.fcl__header-icon {
 		height: 30px;

packages/ui/src/components/ConnectModal/ConnectModal.svelte

@@ -5,13 +5,14 @@
 	import Scannable from './Scannable.svelte'
 	import type { Config, Connector, StateDisconnected } from '@fractl-ui/types'
 	import type { Readable } from 'svelte/store'
+	import { slide } from 'svelte/transition'
 
 	export let config: Config<Connector>
 	export let state: Readable<StateDisconnected<Connector>>
 	export let btnClass = ''
 	export let triggerText = 'Connect Wallet'
 	export let onConnect: (fractl: Config<Connector>) => void
 	export let onConnectFail: (error: unknown) => void
 
 	let open: () => void
 	let close: () => void
@@ -39,7 +40,7 @@
 			await config.connect(connector)
 			onConnect(config)
 		} catch (error) {
-			onConnectFail(error)
+			// onConnectFail(error)
 			// console.error('caught: ', error)
 		}
 
@@ -58,13 +59,7 @@
 	{triggerText}
 </button>
 
-<Modal
-	titleText={title}
-	bind:open
-	bind:close
-	inlineSize={activeRequest ? 260 : 240}
-	customTrigger
->
+<Modal titleText={title} bind:open bind:close customTrigger>
 	<svelte:fragment slot="icon-left">
 		<button
 			class:hide={!activeRequest}
@@ -91,10 +86,10 @@
 		</button>
 	</svelte:fragment>
 
-	<div id="fractl-connect" class="fcl__layout-1col fcl__el">
-		{#if activeRequest}
-			{#if activeRequest.type === 'injected'}
-				<!-- <Injected connector={activeRequest}></Injected> -->
+	{#if activeRequest}
+		{#if activeRequest.type === 'injected'}
+			<!-- <Injected connector={activeRequest}></Injected> -->
+			<div id="fractl-injected" class="fcl__layout-1col fcl__el">
 				<div class="fcl__graphic-primary">
 					<!-- prettier-ignore -->
 					<svg class:hide={$state.status !== 'connecting' && $state.status !== 'reconnecting'} class="spin" width="108" height="108" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" > 
@@ -113,23 +108,26 @@
 
 				{#if $state.status === 'connecting' || $state.status === 'reconnecting'}
 					<h3 class="fcl__text-primary">Requesting Connection</h3>
-					<p class="fcl__subhead">
+					<p class="fcl__text-secondary">
 						{copyEN(activeRequest.name).connecting[activeRequest.type]}
 					</p>
 				{:else}
 					<h3 class="fcl__text-primary error">Connection Declined</h3>
-					<p class="fcl__subhead">
+					<p class="fcl__text-secondary">
 						{copyEN(activeRequest.name).rejected[activeRequest.type]}
 					</p>
 					<button
 						on:click={() => handleConnect(activeRequest)}
-						class="fcl__btn-primary justify-center mt-1">Retry</button
+						class="fcl__btn-primary justify-center mt-1"
+						in:slide>Retry</button
 					>
 				{/if}
-			{:else if activeRequest.type === 'walletConnect'}
-				<Scannable connector={activeRequest} />
-			{/if}
-		{:else}
+			</div>
+		{:else if activeRequest.type === 'walletConnect'}
+			<Scannable connector={activeRequest} />
+		{/if}
+	{:else}
+		<div id="fractl-connect" class="fcl__layout-1col fcl__el">
 			<div class="connectors">
 				{#each config.connectors.toReversed() as connector}
 					<button
@@ -147,13 +145,19 @@
 					</button>
 				{/each}
 			</div>
-
 			<slot name="footer" />
-		{/if}
-	</div>
+		</div>
+	{/if}
 </Modal>
 
 <style>
+	#fractl-connect {
+		/* scroll through connector over max height */
+		max-block-size: 300px;
+		overscroll-behavior: contain;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
 	.hide {
 		display: none;
 		opacity: 0;