style: Redesign manage media ui

src/lib/components/HeroCarousel/HeroBackground.svelte

@@ -7,6 +7,7 @@
 	export let urls: Promise<string[]>;
 	export let index: number;
 	export let hasFocus = true;
+	export let hideInterface = false;
 	let visibleIndex = -2;
 	let visibleIndexTimeout: ReturnType<typeof setTimeout>;
 
@@ -75,7 +76,11 @@
 		</div>
 	{/if}
 </div>
-<div class="absolute inset-0 flex flex-col -z-10">
-	<div class="h-screen bg-gradient-to-t from-secondary-500 to-transparent" />
-	<div class="flex-1 bg-secondary-500" />
+<div
+	class={classNames('absolute inset-0 flex flex-col -z-10 transition-opacity', {
+		'opacity-0': hideInterface
+	})}
+>
+	<div class="h-screen bg-gradient-to-b from-transparent to-secondary-900" />
+	<div class="flex-1 bg-secondary-900" />
 </div>

src/lib/components/HeroCarousel/HeroCarousel.svelte

@@ -6,12 +6,14 @@
 	import PageDots from '../HeroShowcase/PageDots.svelte';
 	import type { Readable, Writable } from 'svelte/store';
 	import { createEventDispatcher } from 'svelte';
+	import classNames from 'classnames';
 
 	const dispatch = createEventDispatcher();
 
 	export let urls: Promise<string[]>;
-
 	export let index = 0;
+	export let hideInterface = false;
+
 	let length = 0;
 
 	$: urls.then((urls) => (length = urls.length));
@@ -68,8 +70,12 @@
 	bind:hasFocusWithin
 	bind:focusIndex
 >
-	<HeroShowcaseBackground {urls} {index} hasFocus={backgroundHasFocus} />
-	<div class="flex flex-1 z-10">
+	<HeroShowcaseBackground {urls} {index} hasFocus={backgroundHasFocus} {hideInterface} />
+	<div
+		class={classNames('flex flex-1 z-10 transition-opacity', {
+			'opacity-0': hideInterface
+		})}
+	>
 		<slot />
 		<div class="flex flex-col justify-end ml-4">
 			<div class="flex flex-1 justify-end items-center">