refactor(web): centralize buttons (#2200)

web/src/lib/components/elements/buttons/button.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" context="module">
+	export type Type = 'button' | 'submit' | 'reset';
+	export type Color =
+		| 'primary'
+		| 'secondary'
+		| 'transparent-primary'
+		| 'light-red'
+		| 'red'
+		| 'green'
+		| 'gray'
+		| 'transparent-gray'
+		| 'dark-gray';
+	export type Size = 'icon' | 'link' | 'sm' | 'base' | 'lg';
+	export type Rounded = 'lg' | '3xl' | 'full' | false;
+	export type Shadow = 'md' | false;
+</script>
+
+<script lang="ts">
+	export let type: Type = 'button';
+	export let color: Color = 'primary';
+	export let size: Size = 'base';
+	export let rounded: Rounded = '3xl';
+	export let shadow: Shadow = 'md';
+	export let disabled = false;
+	export let fullwidth = false;
+	export let border = false;
+	export let title: string | undefined = '';
+
+	const colorClasses: Record<Color, string> = {
+		primary:
+			'bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray enabled:dark:hover:bg-immich-dark-primary/80 enabled:hover:bg-immich-primary/90',
+		secondary:
+			'bg-gray-500 dark:bg-gray-200 text-white dark:text-immich-dark-gray enabled:hover:bg-gray-500/90 enabled:dark:hover:bg-gray-200/90',
+		'transparent-primary':
+			'text-gray-500 dark:text-immich-dark-primary enabled:hover:bg-gray-100 enabled:dark:hover:bg-gray-700',
+		'light-red': 'bg-[#F9DEDC] text-[#410E0B] enabled:hover:bg-red-50',
+		red: 'bg-red-500 text-white enabled:hover:bg-red-400',
+		green: 'bg-lime-600 text-white enabled:hover:bg-lime-500',
+		gray: 'bg-gray-500 dark:bg-gray-200 enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 text-white dark:text-immich-dark-gray',
+		'transparent-gray':
+			'dark:text-immich-dark-fg enabled:hover:bg-immich-primary/5 enabled:hover:text-gray-700 enabled:hover:dark:text-immich-dark-fg enabled:dark:hover:bg-immich-dark-primary/25 ',
+		'dark-gray':
+			'dark:border-immich-dark-gray dark:bg-gray-500 enabled:dark:hover:bg-immich-dark-primary/50 enabled:hover:bg-immich-primary/10 dark:text-white'
+	};
+
+	const sizeClasses: Record<Size, string> = {
+		icon: 'p-2.5',
+		link: 'p-2 font-medium',
+		sm: 'px-4 py-2 text-sm font-medium',
+		base: 'px-6 py-3 font-medium',
+		lg: 'px-6 py-4 font-semibold'
+	};
+</script>
+
+<button
+	{type}
+	{disabled}
+	{title}
+	on:click
+	class="inline-flex justify-center items-center transition-colors disabled:cursor-not-allowed disabled:opacity-60 {colorClasses[
+		color
+	]} {sizeClasses[size]}"
+	class:rounded-lg={rounded === 'lg'}
+	class:rounded-3xl={rounded === '3xl'}
+	class:rounded-full={rounded === 'full'}
+	class:shadow-md={shadow === 'md'}
+	class:w-full={fullwidth}
+	class:border
+>
+	<slot />
+</button>

web/src/lib/components/elements/buttons/circle-icon-button.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type Icon from 'svelte-material-icons/AbTesting.svelte';
+
+	export let logo: typeof Icon;
+	export let backgroundColor = 'transparent';
+	export let hoverColor = '#e2e7e9';
+	export let size = '24';
+	export let title = '';
+</script>
+
+<button
+	{title}
+	style:backgroundColor
+	style:--immich-icon-button-hover-color={hoverColor}
+	class="immich-circle-icon-button dark:text-immich-dark-fg hover:dark:text-immich-dark-gray rounded-full p-3 flex place-items-center place-content-center transition-all"
+	on:click
+>
+	<svelte:component this={logo} {size} />
+</button>
+
+<style>
+	:root {
+		--immich-icon-button-hover-color: #d3d3d3;
+	}
+
+	.immich-circle-icon-button:hover {
+		background-color: var(--immich-icon-button-hover-color) !important;
+	}
+</style>

web/src/lib/components/elements/buttons/icon-button.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" context="module">
+	export type Color = 'transparent-primary' | 'transparent-gray';
+</script>
+
+<script lang="ts">
+	import Button from './button.svelte';
+
+	export let color: Color = 'transparent-primary';
+	export let title: string | undefined = undefined;
+</script>
+
+<Button size="icon" {color} {title} shadow={false} rounded="full" on:click>
+	<slot />
+</Button>

web/src/lib/components/elements/buttons/link-button.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" context="module">
+	export type Color = 'transparent-primary' | 'transparent-gray';
+</script>
+
+<script lang="ts">
+	import Button from './button.svelte';
+
+	export let color: Color = 'transparent-gray';
+</script>
+
+<Button size="link" {color} shadow={false} rounded="lg" on:click>
+	<slot />
+</Button>