feat(web): update logo (#7798)

* feat(web): update logo

* favicon

* no text logo on small screen

* correct break point
This commit is contained in:
Alex 2024-03-13 12:14:45 -05:00 committed by GitHub
parent 29c3a826c5
commit ff2f4f8ed8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 322 additions and 223 deletions

View file

@ -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}

View file

@ -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}
/>

View file

@ -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">

View file

@ -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

View file

@ -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