mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web): update logo (#7798)
* feat(web): update logo * favicon * no text logo on small screen * correct break point
This commit is contained in:
parent
29c3a826c5
commit
ff2f4f8ed8
31 changed files with 322 additions and 223 deletions
|
|
@ -34,7 +34,7 @@
|
|||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<ImmichLogo class="m-16 w-48 animate-bounce" />
|
||||
<ImmichLogo noText class="m-16 w-48 animate-bounce" />
|
||||
<div class="text-2xl">Drop files anywhere to upload</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
<script lang="ts">
|
||||
import immichLogoUrl from '$lib/assets/immich-logo.svg';
|
||||
import logoDarkUrl from '$lib/assets/immich-logo-inline-dark.svg';
|
||||
import logoLightUrl from '$lib/assets/immich-logo-inline-light.svg';
|
||||
import logoNoText from '$lib/assets/immich-logo.svg';
|
||||
import { Theme } from '$lib/constants';
|
||||
import { colorTheme } from '$lib/stores/preferences.store';
|
||||
|
||||
export let noText = false;
|
||||
export let draggable = false;
|
||||
</script>
|
||||
|
||||
<img src={immichLogoUrl} alt="Immich Logo" {draggable} {...$$restProps} />
|
||||
<img
|
||||
src={noText ? logoNoText : $colorTheme.value == Theme.LIGHT ? logoLightUrl : logoDarkUrl}
|
||||
alt="Immich Logo"
|
||||
{draggable}
|
||||
{...$$restProps}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
let shouldShowAccountInfo = false;
|
||||
let shouldShowAccountInfoPanel = false;
|
||||
|
||||
let innerWidth: number;
|
||||
const dispatch = createEventDispatcher<{
|
||||
uploadClicked: void;
|
||||
}>();
|
||||
|
|
@ -39,16 +39,15 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<section id="dashboard-navbar" class="fixed z-[900] h-[var(--navbar-height)] w-screen text-sm">
|
||||
<SkipLink>Skip to content</SkipLink>
|
||||
<div
|
||||
class="grid h-full grid-cols-[theme(spacing.18)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
|
||||
>
|
||||
<a data-sveltekit-preload-data="hover" class="mx-4 flex place-items-center gap-2 md:mx-6" href={AppRoute.PHOTOS}>
|
||||
<ImmichLogo height="35" width="35" />
|
||||
<h1 class="hidden font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary md:block">
|
||||
IMMICH
|
||||
</h1>
|
||||
<a data-sveltekit-preload-data="hover" class="ml-4" href={AppRoute.PHOTOS}>
|
||||
<ImmichLogo width="55%" noText={innerWidth < 768} />
|
||||
</a>
|
||||
<div class="flex justify-between gap-16 pr-6">
|
||||
<div class="hidden w-full max-w-5xl flex-1 sm:block">
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<div class="grid grid-cols-[65px_auto_auto]">
|
||||
<div class="relative h-[65px]">
|
||||
<div in:fade={{ duration: 250 }}>
|
||||
<ImmichLogo class="h-[65px] w-[65px] rounded-bl-lg rounded-tl-lg object-cover p-2" />
|
||||
<ImmichLogo noText class="h-[65px] w-[65px] rounded-bl-lg rounded-tl-lg object-cover p-2" />
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 h-[25px] w-full rounded-bl-md bg-immich-primary/30">
|
||||
<p
|
||||
|
|
|
|||
|
|
@ -40,9 +40,7 @@
|
|||
<p class="mb-4 text-2xl">🎉 NEW VERSION AVAILABLE 🎉</p>
|
||||
|
||||
<div>
|
||||
Hi friend, there is a new release of
|
||||
<span class="font-immich-title font-bold text-immich-primary dark:text-immich-dark-primary">IMMICH</span>,
|
||||
please take your time to visit the
|
||||
Hi friend, there is a new version of the application please take your time to visit the
|
||||
<span class="font-medium underline"
|
||||
><a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer"
|
||||
>release notes</a
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue