self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-27 05:11:11 +02:00
Code Issues Releases Activity

feat(web): standardize CircleIconButton colors (#9127)

Browse Source 
* feat(web): standardize CircleIconButton colors

* fix: memory lane close button color
This commit is contained in:
Ben
2024-04-27 22:29:43 +00:00
committed by GitHub
parent 034c928d9e
commit 19aa97da02
9 changed files with 71 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,42 +1,42 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
type Color = 'transparent' | 'light' | 'dark' | 'gray' | 'primary' | 'opaque';
export let icon: string;
export let color: Color = 'transparent';
export let title: string;
export let backgroundColor = '';
export let hoverColor = '#e2e7e9';
export let padding = '3';
export let size = '24';
export let isOpacity = false;
export let forceDark = false;
export let hideMobile = false;
export let iconColor = 'currentColor';
export let buttonSize: string | undefined = undefined;
/**
* Override the default styling of the button for specific use cases, such as the icon color.
*/
let className = '';
export { className as class };
const colorClasses: Record<Color, string> = {
transparent: 'bg-transparent hover:bg-[#d3d3d3] dark:text-immich-dark-fg',
opaque: 'bg-transparent hover:bg-immich-bg/30 text-white hover:dark:text-white',
light: 'bg-white hover:bg-[#d3d3d3]',
dark: 'bg-[#202123] hover:bg-[#d3d3d3]',
gray: 'bg-[#d3d3d3] hover:bg-[#e2e7e9] text-immich-dark-gray hover:text-black',
primary:
'bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 hover:dark:bg-immich-dark-primary/80 text-white dark:text-immich-dark-gray',
};
$: colorClass = colorClasses[color];
$: mobileClass = hideMobile ? 'hidden sm:flex' : '';
</script>
<button
{title}
style:width={buttonSize ? buttonSize + 'px' : ''}
style:height={buttonSize ? buttonSize + 'px' : ''}
style:background-color={backgroundColor}
style:--immich-icon-button-hover-color={hoverColor}
class:dark:text-immich-dark-fg={!forceDark}
class="flex place-content-center place-items-center rounded-full p-{padding} transition-all
{isOpacity ? 'hover:bg-immich-bg/30' : 'immich-circle-icon-button hover:dark:text-immich-dark-gray'}
{forceDark && 'hover:text-black'}
{hideMobile && 'hidden sm:flex'}"
class="flex place-content-center place-items-center rounded-full {colorClass} p-{padding} transition-all hover:dark:text-immich-dark-gray {className} {mobileClass}"
on:click
>
<Icon path={icon} {size} ariaLabel={title} color={iconColor} />
<Icon path={icon} {size} ariaLabel={title} color="currentColor" />
<slot />
</button>
<style>
:root {
--immich-icon-button-hover-color: #d3d3d3;
}
.immich-circle-icon-button:hover {
background-color: var(--immich-icon-button-hover-color) !important;
}
</style>