Merge branch 'main' into docs(license)/Update-License-Agreement-terms

dfinity · Oct 25, 2024 · 94529c8 · 94529c8
2 parents 4e0170e + 95ede8d
commit 94529c8
Show file tree

Hide file tree

Showing 15 changed files with 43 additions and 44 deletions.
diff --git a/...-snapshots/should-display-homepage-in-logged-in-state-1-Google-Chrome-linux.png b/...-snapshots/should-display-homepage-in-logged-in-state-1-Google-Chrome-linux.png
diff --git a/src/frontend/src/env/dapp-descriptions.json b/src/frontend/src/env/dapp-descriptions.json
@@ -59,5 +59,21 @@
 			"text": "Enjoy a privacy-first way to verify and engage online",
 			"callToAction": "Interested?"
 		}
+	},
+	{
+		"id": "icpswap",
+		"name": "ICPSwap",
+		"oneLiner": "ICPSwap is an AMM DEX built completely onchain that is the premier hub for full-stack financial and DAO services on ICP.",
+		"callToAction": "Meet the future",
+		"website": "https://icpswap.com",
+		"twitter": "https://x.com/ICPSwap",
+		"telegram": "https://t.me/ICPSwap_Official",
+		"github": " https://github.com/ICPSwap-Labs/icpswap-frontend",
+		"tags": ["DEX"],
+		"stats": "",
+		"usesInternetIdentity": true,
+		"description": "The Hub of Future Decentralized Finance!<br/>Reinventing the Exchange as a Hub, ICPSwap provides full-stack financial, market, and DAO services on the Internet Computer. Based on the underlying technology of DFINITY's Internet Computer, ICPSwap establishes an ecosystem of genuinely decentralized finance by refactoring the way users and developers build projects jointly.",
+		"logo": "/images/dapps/icp-swap-logo.svg",
+		"screenshots": ["/images/dapps/icp-swap.webp"]
 	}
 ]
diff --git a/src/frontend/src/lib/components/carousel/Carousel.svelte b/src/frontend/src/lib/components/carousel/Carousel.svelte
@@ -9,6 +9,7 @@
 	export let duration = 300;
 	export let easing = 'ease-out';
 	export let styleClass: string | undefined = undefined;
+	export let controlsWidthStyleClass: string | undefined = undefined;
 
 	/**
 	 * Carousel container element variables
@@ -243,14 +244,16 @@
 <svelte:window on:resize={onResize} />
 
 <div
-	class={`${styleClass ?? ''} relative overflow-hidden rounded-3xl bg-white px-3 pb-14 pt-3 shadow`}
+	class={`${styleClass ?? ''} relative overflow-hidden rounded-3xl bg-white px-3 pb-10 pt-3 shadow`}
 >
 	<div class="w-full overflow-hidden" bind:this={container}>
 		<div class="flex" bind:this={sliderFrame}>
 			<slot />
 		</div>
 	</div>
-	<div class="absolute bottom-3 left-0 flex w-full justify-center">
+	<div
+		class={`absolute bottom-2 right-0 flex justify-between px-3 ${controlsWidthStyleClass ?? 'w-full'}`}
+	>
 		<Indicators {onIndicatorClick} {totalSlides} {currentSlide} />
 		<Controls {onNext} {onPrevious} />
 	</div>

diff --git a/src/frontend/src/lib/components/carousel/Controls.svelte b/src/frontend/src/lib/components/carousel/Controls.svelte
@@ -7,7 +7,7 @@
 	export let onPrevious: () => void;
 </script>
 
-<div class="flex w-[25%] items-center justify-center">
+<div class="mr-3 flex items-center">
 	<ButtonControl ariaLabel={$i18n.carousel.text.prev_slide} styleClass="mr-1" on:click={onPrevious}>
 		<IconWest />
 	</ButtonControl>

diff --git a/src/frontend/src/lib/components/carousel/Indicators.svelte b/src/frontend/src/lib/components/carousel/Indicators.svelte
@@ -7,7 +7,7 @@
 	export let onIndicatorClick: (index: number) => void;
 </script>
 
-<div class="flex w-[75%] items-center justify-center">
+<div class="flex items-center">
 	{#each { length: totalSlides } as _, index}
 		<Indicator on:click={() => onIndicatorClick(index)} {index} {currentSlide} {totalSlides} />
 	{/each}

diff --git a/src/frontend/src/lib/components/dapps/DappModal.svelte b/src/frontend/src/lib/components/dapps/DappModal.svelte
@@ -45,7 +45,7 @@
 		<span class="text-center text-xl">{name}</span>
 	</svelte:fragment>
 
-	<div class="stretch flex flex-col gap-4 pt-4">
+	<div class="stretch flex flex-col gap-4">
 		{#if nonNullish(screenshots) && screenshots.length > 0}
 			<div class="overflow-hidden rounded-3xl">
 				<ImgBanner

diff --git a/src/frontend/src/lib/components/dapps/DappsCarousel.svelte b/src/frontend/src/lib/components/dapps/DappsCarousel.svelte
@@ -15,7 +15,8 @@
 </script>
 
 {#if nonNullish(dappsCarouselSlides)}
-	<Carousel styleClass={`w-full ${styleClass}`}>
+	<!-- To align controls section with slide text - 100% - logo width (4rem) - margin logo-text (1rem) -->
+	<Carousel controlsWidthStyleClass="w-[calc(100%-5rem)]" styleClass={`w-full ${styleClass ?? ''}`}>
 		{#each dappsCarouselSlides as dappsCarouselSlide}
 			<DappsCarouselSlide {dappsCarouselSlide} />
 		{/each}

diff --git a/src/frontend/src/lib/components/dapps/DappsCarouselSlide.svelte b/src/frontend/src/lib/components/dapps/DappsCarouselSlide.svelte
@@ -13,7 +13,7 @@
 	} = dappsCarouselSlide);
 </script>
 
-<div class="flex">
+<div class="flex h-full items-center">
 	<div class="mr-4 shrink-0">
 		<Img
 			height="64"

diff --git a/src/frontend/src/lib/components/hero/Header.svelte b/src/frontend/src/lib/components/hero/Header.svelte
@@ -3,7 +3,7 @@
 	import Alpha from '$lib/components/core/Alpha.svelte';
 	import Menu from '$lib/components/core/Menu.svelte';
 	import OisyWalletLogoLink from '$lib/components/core/OisyWalletLogoLink.svelte';
-	import AboutMenu from '$lib/components/hero/about/AboutMenu.svelte';
+	import AboutWhyOisy from '$lib/components/hero/about/AboutWhyOisy.svelte';
 	import AboutWhyOisyModal from '$lib/components/hero/about/AboutWhyOisyModal.svelte';
 	import { authNotSignedIn, authSignedIn } from '$lib/derived/auth.derived';
 	import { modalAboutWhyOisy } from '$lib/derived/modal.derived';
@@ -41,7 +41,9 @@
 		{#if $authSignedIn}
 			<Menu />
 		{:else}
-			<AboutMenu />
+			<div class="mr-2 md:mr-0">
+				<AboutWhyOisy />
+			</div>
 		{/if}
 	</div>
 </header>

diff --git a/src/frontend/src/lib/components/hero/about/AboutMenu.svelte b/src/frontend/src/lib/components/hero/about/AboutMenu.svelte
diff --git a/src/frontend/src/lib/components/ui/SplitPane.svelte b/src/frontend/src/lib/components/ui/SplitPane.svelte
@@ -2,7 +2,7 @@
 	class="relative mx-auto max-w-screen-2.5xl pt-8 md:flex md:w-full md:flex-row lg:w-auto lg:pt-0"
 >
 	<div
-		class="invisible absolute -translate-x-full transition-all duration-200 ease-in-out md:visible md:fixed md:inset-y-0 md:my-24 md:block md:min-w-36 md:translate-x-0 md:transition-none lg:min-w-44 xl:min-w-72"
+		class="invisible absolute -translate-x-full transition-all duration-200 ease-in-out md:visible md:fixed md:inset-y-0 md:my-24 md:block md:min-w-36 md:translate-x-0 md:transition-none lg:min-w-44 xl:w-80 1.5xl:w-[22rem]"
 	>
 		<slot name="menu" />
 	</div>

diff --git a/src/frontend/src/routes/(app)/+layout.svelte b/src/frontend/src/routes/(app)/+layout.svelte
@@ -45,7 +45,7 @@
 		<SplitPane>
 			<NavigationMenu slot="menu">
 				{#if route === 'tokens'}
-					<div in:fade class="hidden w-80 xl:block">
+					<div in:fade class="hidden xl:block">
 						<DappsCarousel />
 					</div>
 				{/if}