Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mobile styling #1321

Merged
merged 2 commits into from
Feb 16, 2025
Merged

mobile styling #1321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48e4be4
mobile styling
hardyjosh Feb 16, 2025
384a4e9
Update Homepage.svelte
hardyjosh Feb 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/ui-components/src/__tests__/ComposedRainlangModal.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
});

Expand Down
9 changes: 4 additions & 5 deletions packages/ui-components/src/lib/components/deployment/ComposedRainlangModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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]}
Expand All @@ -33,9 +33,8 @@
styles={{
'&': {
height: '70vh',
width: '70vw'
},
...codeMirrorStyles
width: '100%'
}
}}
/>
</div>
Expand Down
20 changes: 12 additions & 8 deletions packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 3 additions & 1 deletion packages/ui-components/src/lib/components/deployment/DeploymentsSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
6 changes: 5 additions & 1 deletion packages/ui-components/src/lib/components/deployment/DisclaimerModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-components/src/lib/components/deployment/SelectToken.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions packages/ui-components/src/lib/components/deployment/StrategyPage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 1 addition & 3 deletions packages/webapp/src/lib/components/Homepage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/webapp/src/routes/deploy/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down