Merge pull request #1321 from rainlanguage/2024-02-16-mobile-fixes

mobile styling
rainlanguage · Feb 16, 2025 · 3582bb5 · 3582bb5
2 parents 9b3d64e + 384a4e9
commit 3582bb5
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 25 deletions.
diff --git a/packages/ui-components/src/__tests__/ComposedRainlangModal.test.ts b/packages/ui-components/src/__tests__/ComposedRainlangModal.test.ts
@@ -20,8 +20,7 @@ describe('ComposedRainlangModal', () => {
 	it('should open modal and display rainlang text when button is clicked', async () => {
 		const { getByText, getByTestId } = render(ComposedRainlangModal, {
 			props: {
-				gui: mockGui,
-				codeMirrorStyles: {}
+				gui: mockGui
 			}
 		});
 

diff --git a/packages/ui-components/src/lib/components/deployment/ComposedRainlangModal.svelte b/packages/ui-components/src/lib/components/deployment/ComposedRainlangModal.svelte
@@ -6,7 +6,6 @@
 	import type { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
 
 	export let gui: DotrainOrderGui;
-	export let codeMirrorStyles = {};
 
 	let rainlangText: string | null = null;
 	let open = false;
@@ -23,8 +22,9 @@
 
 <Button color="light" size="lg" on:click={generateRainlang}>Show Rainlang</Button>
 
-<Modal size="xl" class="bg-opacity-90 backdrop-blur-sm" bind:open data-testid="modal">
+<Modal size="xl" class="bg-opacity-90  backdrop-blur-sm" bind:open data-testid="modal">
 	<div data-testid="modal-content">
+		<h3 class="mb-2 text-2xl font-semibold text-gray-900 dark:text-white">Generated Rainlang</h3>
 		<CodeMirror
 			value={rainlangText}
 			extensions={[RainlangLR]}
@@ -33,9 +33,8 @@
 			styles={{
 				'&': {
 					height: '70vh',
-					width: '70vw'
-				},
-				...codeMirrorStyles
+					width: '100%'
+				}
 			}}
 		/>
 	</div>

diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
@@ -274,18 +274,22 @@
 </script>
 
 <div>
-	{#if error}
-		<p class="text-red-500">{error}</p>
-	{/if}
-	{#if errorDetails}
-		<p class="text-red-500">{errorDetails}</p>
+	{#if error || errorDetails}
+		<Alert color="red">
+			{#if error}
+				<p class="text-red-500">{error}</p>
+			{/if}
+			{#if errorDetails}
+				<p class="text-red-500">{errorDetails}</p>
+			{/if}
+		</Alert>
 	{/if}
 	{#if dotrain}
 		{#if gui}
 			<div class="flex max-w-3xl flex-col gap-12" in:fade>
 				{#if deployment}
-					<div class="mt-8 flex max-w-2xl flex-col gap-4 text-start">
-						<h1 class=" text-3xl font-semibold text-gray-900 lg:text-6xl dark:text-white">
+					<div class="flex max-w-2xl flex-col gap-4 text-start">
+						<h1 class=" text-4xl font-semibold text-gray-900 lg:text-6xl dark:text-white">
 							{strategyDetail.name}
 						</h1>
 						<p class="text-xl text-gray-600 lg:text-2xl dark:text-gray-400">
@@ -324,7 +328,7 @@
 						</Alert>
 					{/if}
 
-					<div class="flex items-start justify-start gap-2">
+					<div class="flex flex-wrap items-start justify-start gap-2">
 						{#if $wagmiConnected}
 							<Button
 								size="lg"

diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentsSection.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentsSection.svelte
@@ -27,7 +27,9 @@
 </script>
 
 {#if deployments.length > 0}
-	<div class="mr-auto grid grid-cols-1 justify-items-start gap-4 md:grid-cols-2 lg:grid-cols-3">
+	<div
+		class="mr-auto grid w-full grid-cols-1 justify-items-start gap-4 md:grid-cols-2 lg:w-auto lg:grid-cols-3"
+	>
 		{#each deployments as { key, name, description }}
 			<DeploymentTile {name} {description} {key} {strategyName} />
 		{/each}

diff --git a/packages/ui-components/src/lib/components/deployment/DisclaimerModal.svelte b/packages/ui-components/src/lib/components/deployment/DisclaimerModal.svelte
@@ -10,7 +10,11 @@
 	}
 </script>
 
-<Modal bind:open class="dark:border dark:border-gray-700 dark:bg-gray-900">
+<Modal
+	bind:open
+	class="max-h-full dark:border dark:border-gray-700 dark:bg-gray-900"
+	dialogClass="fixed top-0 start-0 end-1 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex justify-center items-center h-full"
+>
 	<div class="flex flex-col items-start gap-y-8 p-4">
 		<div class="space-y-4">
 			<Alert color="red" class="text-base">

diff --git a/packages/ui-components/src/lib/components/deployment/SelectToken.svelte b/packages/ui-components/src/lib/components/deployment/SelectToken.svelte
@@ -64,7 +64,7 @@
 
 <div class="flex w-full flex-col">
 	<div class="flex flex-col gap-2">
-		<div class="flex flex-row items-center gap-4">
+		<div class="flex flex-col justify-start gap-4 lg:flex-row lg:items-center lg:justify-between">
 			{#if token.name || token.description}
 				<div class="flex flex-col">
 					{#if token.name}

diff --git a/packages/ui-components/src/lib/components/deployment/StrategyPage.svelte b/packages/ui-components/src/lib/components/deployment/StrategyPage.svelte
@@ -48,8 +48,8 @@
 
 {#if dotrain && strategyDetails}
 	<div>
-		<div in:fade class="flex flex-col gap-12">
-			<div class="flex max-w-2xl flex-col gap-0 text-start lg:gap-6">
+		<div in:fade class="flex flex-col gap-8">
+			<div class="flex max-w-2xl flex-col gap-3 text-start lg:gap-6">
 				<h1 class="text-4xl font-semibold text-gray-900 lg:text-6xl dark:text-white">
 					{strategyDetails.name}
 				</h1>
@@ -66,7 +66,7 @@
 					</p>
 				{/if}
 			</div>
-			<div class="flex flex-col gap-4">
+			<div class="u flex flex-col gap-4">
 				<h2 class="text-3xl font-semibold text-gray-900 dark:text-white">Deployments</h2>
 				<DeploymentsSection {dotrain} {strategyName} />
 			</div>

diff --git a/packages/webapp/src/lib/components/Homepage.svelte b/packages/webapp/src/lib/components/Homepage.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { WalletConnect, logoDark, logoLight } from '@rainlanguage/ui-components';
+	import { logoDark, logoLight } from '@rainlanguage/ui-components';
 	import { Button } from 'flowbite-svelte';
-	import { appKitModal, connected } from '$lib/stores/wagmi';
 	import { goto } from '$app/navigation';
 
 	export let colorTheme;
@@ -16,7 +15,6 @@
 			<div class="flex h-full flex-row items-center gap-x-2 dark:text-gray-100 md:gap-x-6">
 				<a href="https://docs.rainlang.xyz/raindex/overview">Docs</a>
 				<a href="/deploy">Dashboard</a>
-				<WalletConnect {appKitModal} {connected} />
 			</div>
 		</div>
 	</div>

diff --git a/packages/webapp/src/routes/deploy/+page.svelte b/packages/webapp/src/routes/deploy/+page.svelte
@@ -19,7 +19,7 @@
 <PageHeader title={$page.data.name || 'Deploy'} pathname={$page.url.pathname}>
 	<svelte:fragment slot="actions">
 		<Toggle on:change={() => (advancedMode = !advancedMode)}>
-			{'Advanced Mode'}
+			<span class="whitespace-nowrap">Advanced mode</span>
 		</Toggle></svelte:fragment
 	>
 </PageHeader>