Skip to content

Commit

Permalink
Project theme should also apply to embed configuration modal; run format
Browse files Browse the repository at this point in the history
  • Loading branch information
Morgan Brown committed Nov 6, 2024
1 parent f293639 commit 5343610
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 67 deletions.
2 changes: 1 addition & 1 deletion src/lib/components/collect-button/collect-button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
loading ||
amountToShow?.fiatEstimateCents === 0 ||
amountToShow?.includesUnknownPrice === true;
const newWidth = shouldHide ? 0 : amountElem?.getBoundingClientRect().width ?? 0;
const newWidth = shouldHide ? 0 : (amountElem?.getBoundingClientRect().width ?? 0);
if (newWidth === 24) {
amountElemWidth.set(0);
Expand Down
131 changes: 69 additions & 62 deletions src/lib/flows/configure-project-support-button/steps/configure-project-support-button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,17 @@
import ProjectSupportButton from '$lib/components/project-support-button/project-support-button.svelte';
import CopyLinkButton from '$lib/components/copy-link-button/copy-link-button.svelte';
import CheckCircleIcon from '$lib/components/icons/CheckCircle.svelte';
import PrimaryColorThemer from '$lib/components/primary-color-themer/primary-color-themer.svelte';
import isClaimed from '$lib/utils/project/is-claimed';
export let supportButtonData: SupportButtonData;
export let projectSourceUrl: string;
const headline = 'Configure your embed code';
const description = 'Choose how you want your support button to be displayed.';
const projectColor = isClaimed(supportButtonData.projectData)
? supportButtonData.projectData.color
: undefined;
type Options<T> = Array<{ title: string; value: T[keyof T] }>;
function createOptions<T extends { [key: string]: string }>(
Expand Down Expand Up @@ -87,71 +92,73 @@
$: embedCode = generateEmbedCode(selection, projectSourceUrl, supportButtonData);
</script>

<StepLayout>
<div class="configure-project-support-button">
<div class="icon">
<Pencil size={48} />
</div>
<StepHeader {headline} {description} />
<Divider />
<div class="configure-project-support-button__section section">
<h4 class="typo-all-caps">Style</h4>
<Setting title="Style" subtitle="The general styling">
<SegmentedControl
active={selection.style}
on:select={makeOnSelect('style')}
options={styles}
/>
</Setting>
<Setting disabled={backgroundDisabled} title="Background" subtitle="The background">
<SegmentedControl
disabled={backgroundDisabled}
active={selection.background}
on:select={makeOnSelect('background')}
options={backgrounds}
/>
</Setting>
<Setting title="Button text" subtitle="Show project, me, or us">
<SegmentedControl
active={selection.text}
on:select={makeOnSelect('text')}
options={texts}
/>
</Setting>
<Setting title="Stat" subtitle="The live-updated stat">
<SegmentedControl
active={selection.stat}
on:select={makeOnSelect('stat')}
options={stats}
/>
</Setting>
<PrimaryColorThemer colorHex={projectColor}>
<StepLayout>
<div class="configure-project-support-button">
<div class="icon">
<Pencil size={48} />
</div>
<StepHeader {headline} {description} />
<Divider />
</div>
<div class="configure-project-support-button__section section">
<h4 class="typo-all-caps">Preview</h4>
<div class="configure-project-support-button_preview">
<ProjectSupportButton data={supportButtonData} options={selection} />
<div class="configure-project-support-button__section section">
<h4 class="typo-all-caps">Style</h4>
<Setting title="Style" subtitle="The general styling">
<SegmentedControl
active={selection.style}
on:select={makeOnSelect('style')}
options={styles}
/>
</Setting>
<Setting disabled={backgroundDisabled} title="Background" subtitle="The background">
<SegmentedControl
disabled={backgroundDisabled}
active={selection.background}
on:select={makeOnSelect('background')}
options={backgrounds}
/>
</Setting>
<Setting title="Button text" subtitle="Show project, me, or us">
<SegmentedControl
active={selection.text}
on:select={makeOnSelect('text')}
options={texts}
/>
</Setting>
<Setting title="Stat" subtitle="The live-updated stat">
<SegmentedControl
active={selection.stat}
on:select={makeOnSelect('stat')}
options={stats}
/>
</Setting>
<Divider />
</div>
<div class="configure-project-support-button__section section">
<h4 class="typo-all-caps">Preview</h4>
<div class="configure-project-support-button_preview">
<ProjectSupportButton data={supportButtonData} options={selection} />
</div>
</div>
</div>
</div>

<svelte:fragment slot="left-actions">
<Button on:click={onClickCancel}>Never mind</Button>
</svelte:fragment>

<svelte:fragment slot="actions">
<CopyLinkButton url={embedCode} variant="primary">
Copy embed code
<svelte:fragment slot="idle">
<CopyIcon style="fill: currentColor" />
</svelte:fragment>
<!-- hover is the same as idle in this case -->
<svelte:fragment slot="success">
<CheckCircleIcon style="fill: currentColor" />
</svelte:fragment>
</CopyLinkButton>
</svelte:fragment>
</StepLayout>

<svelte:fragment slot="left-actions">
<Button on:click={onClickCancel}>Never mind</Button>
</svelte:fragment>

<svelte:fragment slot="actions">
<CopyLinkButton url={embedCode} variant="primary">
Copy embed code
<svelte:fragment slot="idle">
<CopyIcon style="fill: currentColor" />
</svelte:fragment>
<!-- hover is the same as idle in this case -->
<svelte:fragment slot="success">
<CheckCircleIcon style="fill: currentColor" />
</svelte:fragment>
</CopyLinkButton>
</svelte:fragment>
</StepLayout>
</PrimaryColorThemer>

<style>
.configure-project-support-button {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/flows/top-up-flow/enter-amount.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
export let backButton: boolean;
$: tokenAddress = $context.tokenAddress;
$: tokenInfo = tokenAddress ? tokens.getByAddress(tokenAddress) ?? unreachable() : undefined;
$: tokenInfo = tokenAddress ? (tokens.getByAddress(tokenAddress) ?? unreachable()) : undefined;
let amount: bigint | undefined = undefined;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/utils/base-url.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ import getOptionalEnvVar from './get-optional-env-var/public';

const envBaseUrl = getOptionalEnvVar('PUBLIC_BASE_URL');

export const BASE_URL = browser ? window.location.origin : envBaseUrl ?? 'http://localhost:5173';
export const BASE_URL = browser ? window.location.origin : (envBaseUrl ?? 'http://localhost:5173');
2 changes: 1 addition & 1 deletion src/lib/utils/get-connected-address.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ export default function getConnectedAddress() {

return isTest()
? // eslint-disable-next-line @typescript-eslint/no-explicit-any
(window as any).playwrightAddress ?? '0x433220a86126eFe2b8C98a723E73eBAd2D0CbaDc'
((window as any).playwrightAddress ?? '0x433220a86126eFe2b8C98a723E73eBAd2D0CbaDc')
: get(walletStore).address;
}
2 changes: 1 addition & 1 deletion ...tes/(pages)/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,7 +428,7 @@
<AnnotationBox type="info">
Embed a support button on your website.
<svelte:fragment slot="actions">
<Button icon={Settings} on:click={handleClick}>Configure</Button>
<Button variant="primary" icon={Settings} on:click={handleClick}>Configure</Button>
</svelte:fragment>
</AnnotationBox>
{/if}
Expand Down

0 comments on commit 5343610

Please sign in to comment.