till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:41:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactor: consolidate app logos into shared-branding package (Tier 4)

Browse source 
- Add pre-configured logo components to @manacore/shared-branding:
  - MemoroLogo, ManaCoreLogo, ManaDeckLogo, StorytellerLogo
- Update all apps to import logos from shared-branding
- Remove redundant local logo wrapper components from each app

This reduces code duplication by centralizing app logos while
maintaining the same API for consumers.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-11-25 00:06:21 +01:00
parent 9449fff6f7
commit 294d1fc5c5
18 changed files with 112 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

26
maerchenzauber/apps/web/src/lib/components/StorytellerLogo.svelte
View file

@ -1,26 +0,0 @@
<script lang="ts">
interface Props {
size?: number;
color?: string;
}
let { size = 55, color = '#6366f1' }: Props = $props();
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
fill={color}
>
<!-- Book/Story icon -->
<path
d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
stroke={color}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
/>
</svg>

2
maerchenzauber/apps/web/src/routes/(auth)/login/+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { LoginPage } from '@manacore/shared-auth-ui';
import StorytellerLogo from '$lib/components/StorytellerLogo.svelte';
import { StorytellerLogo } from '@manacore/shared-branding';
import AppSlider from '$lib/components/AppSlider.svelte';
import { authStore } from '$lib/stores/authStore.svelte';

17
maerchenzauber/apps/web/src/routes/(auth)/register/+page.svelte
View file

@ -1,7 +1,8 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { RegisterPage } from '@manacore/shared-auth-ui';
import StorytellerLogo from '$lib/components/StorytellerLogo.svelte';
import { StorytellerLogo } from '@manacore/shared-branding';
import AppSlider from '$lib/components/AppSlider.svelte';
import { authStore } from '$lib/stores/authStore.svelte';
async function handleSignUp(email: string, password: string) {
@ -10,13 +11,17 @@
</script>
<RegisterPage
appName="Storyteller"
appName="Märchenzauber"
logo={StorytellerLogo}
primaryColor="#6366f1"
primaryColor="#FF6B9D"
onSignUp={handleSignUp}
goto={goto}
successRedirect="/dashboard"
loginPath="/login"
lightBackground="#f5f5f5"
darkBackground="#121212"
/>
lightBackground="#fff5f8"
darkBackground="#1a1218"
>
{#snippet appSlider()}
<AppSlider />
{/snippet}
</RegisterPage>

29
manacore/apps/web/src/lib/components/ManaCoreLogo.svelte
View file

@ -1,29 +0,0 @@
<script lang="ts">
interface Props {
size?: number;
color?: string;
}
let { size = 55, color = '#6366f1' }: Props = $props();
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
>
<!-- M letter for ManaCore -->
<text
x="50%"
y="55%"
dominant-baseline="middle"
text-anchor="middle"
font-size="16"
font-weight="bold"
fill={color}
>
M
</text>
</svg>

2
manacore/apps/web/src/routes/(auth)/login/+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { LoginPage } from '@manacore/shared-auth-ui';
import ManaCoreLogo from '$lib/components/ManaCoreLogo.svelte';
import { ManaCoreLogo } from '@manacore/shared-branding';
import AppSlider from '$lib/components/AppSlider.svelte';
import { authStore } from '$lib/stores/authStore.svelte';

9
manacore/apps/web/src/routes/(auth)/register/+page.svelte
View file

@ -1,7 +1,8 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { RegisterPage } from '@manacore/shared-auth-ui';
import ManaCoreLogo from '$lib/components/ManaCoreLogo.svelte';
import { ManaCoreLogo } from '@manacore/shared-branding';
import AppSlider from '$lib/components/AppSlider.svelte';
import { authStore } from '$lib/stores/authStore.svelte';
async function handleSignUp(email: string, password: string) {
@ -19,4 +20,8 @@
loginPath="/login"
lightBackground="#f3f4f6"
darkBackground="#121212"
/>
>
{#snippet appSlider()}
<AppSlider />
{/snippet}
</RegisterPage>

28
manadeck/apps/web/src/lib/components/ManaDeckLogo.svelte
View file

@ -1,28 +0,0 @@
<script lang="ts">
interface Props {
size?: number;
color?: string;
}
let { size = 55, color = '#8b5cf6' }: Props = $props();
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke={color}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<!-- Cards/Deck icon -->
<rect x="2" y="4" width="20" height="16" rx="2" />
<path d="M6 2v2" />
<path d="M18 2v2" />
<path d="M6 20v2" />
<path d="M18 20v2" />
<path d="M2 10h20" />
</svg>

2
manadeck/apps/web/src/routes/(auth)/login/+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { LoginPage } from '@manacore/shared-auth-ui';
import ManaDeckLogo from '$lib/components/ManaDeckLogo.svelte';
import { ManaDeckLogo } from '@manacore/shared-branding';
import AppSlider from '$lib/components/AppSlider.svelte';
import { authStore } from '$lib/stores/authStore.svelte';

9
manadeck/apps/web/src/routes/(auth)/register/+page.svelte
View file

@ -1,7 +1,8 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { RegisterPage } from '@manacore/shared-auth-ui';
import ManaDeckLogo from '$lib/components/ManaDeckLogo.svelte';
import { ManaDeckLogo } from '@manacore/shared-branding';
import AppSlider from '$lib/components/AppSlider.svelte';
import { authStore } from '$lib/stores/authStore.svelte';
async function handleSignUp(email: string, password: string) {
@ -19,4 +20,8 @@
loginPath="/login"
lightBackground="#faf5ff"
darkBackground="#1a1625"
/>
>
{#snippet appSlider()}
<AppSlider />
{/snippet}
</RegisterPage>

20
memoro/apps/web/src/lib/components/MemoroLogo.svelte
View file

@ -1,20 +0,0 @@
<script lang="ts">
interface Props {
color?: string;
size?: number;
class?: string;
}
let { color = '#F7D44C', size = 24, class: className = '' }: Props = $props();
</script>
<div class={className} style="width: {size}px; height: {size}px;">
<svg width={size} height={size} viewBox="0 0 280 280">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M280 140C280 217.32 217.32 280 140 280C62.6801 280 0 217.32 0 140C0 62.6801 62.6801 0 140 0C217.32 0 280 62.6801 280 140ZM247.988 140C247.988 199.64 199.64 241.988 140 241.988C80.3598 241.988 32.0118 199.64 32.0118 140C32.0118 111.918 36.7308 95.3397 54.3005 76.1331C58.5193 71.5212 70.5 63 79.3937 74.511L119.781 131.788C134.5 149 149 147 160.218 131.788L200.605 74.5101C208 64 221.48 71.5203 225.699 76.1321C243.269 95.3388 247.988 111.918 247.988 140Z"
fill={color}
/>
</svg>
</div>

9
memoro/apps/web/src/routes/(public)/login/+page.svelte
View file

@ -1,7 +1,8 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { LoginPage, setGoogleClientId, setAppleConfig } from '@manacore/shared-auth-ui';
import MemoroLogo from '$lib/components/MemoroLogo.svelte';
import { MemoroLogo } from '@manacore/shared-branding';
import AppSlider from '$lib/components/AppSlider.svelte';
import { auth } from '$lib/stores/auth';
import { env } from '$lib/config/env';
import { onMount } from 'svelte';
@ -43,4 +44,8 @@
registerPath="/register"
lightBackground="#dddddd"
darkBackground="#101010"
/>
>
{#snippet appSlider()}
<AppSlider />
{/snippet}
</LoginPage>

9
memoro/apps/web/src/routes/(public)/register/+page.svelte
View file

@ -1,7 +1,8 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { RegisterPage } from '@manacore/shared-auth-ui';
import MemoroLogo from '$lib/components/MemoroLogo.svelte';
import { MemoroLogo } from '@manacore/shared-branding';
import AppSlider from '$lib/components/AppSlider.svelte';
import { auth } from '$lib/stores/auth';
async function handleSignUp(email: string, password: string) {
@ -19,4 +20,8 @@
loginPath="/login"
lightBackground="#dddddd"
darkBackground="#101010"
/>
>
{#snippet appSlider()}
<AppSlider />
{/snippet}
</RegisterPage>

11
packages/shared-branding/src/index.ts
View file

@ -3,15 +3,24 @@
*
* This package provides:
* - App logos (AppLogo, AppLogoWithName)
* - Pre-configured app logos (MemoroLogo, ManaCoreLogo, etc.)
* - Mana icon (ManaIcon)
* - Branding configuration (colors, names, taglines)
*/
// Components
// Generic Components
export { default as AppLogo } from './AppLogo.svelte';
export { default as AppLogoWithName } from './AppLogoWithName.svelte';
export { default as ManaIcon } from './ManaIcon.svelte';
// Pre-configured App Logos
export {
MemoroLogo,
ManaCoreLogo,
ManaDeckLogo,
StorytellerLogo
} from './logos';
// Configuration
export { APP_BRANDING, getAppBranding, getAllAppBrandings } from './config';

13
packages/shared-branding/src/logos/ManaCoreLogo.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import AppLogo from '../AppLogo.svelte';
interface Props {
size?: number;
color?: string;
class?: string;
}
let { size = 55, color, class: className = '' }: Props = $props();
</script>
<AppLogo app="manacore" {size} {color} class={className} />

13
packages/shared-branding/src/logos/ManaDeckLogo.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import AppLogo from '../AppLogo.svelte';
interface Props {
size?: number;
color?: string;
class?: string;
}
let { size = 55, color, class: className = '' }: Props = $props();
</script>
<AppLogo app="manadeck" {size} {color} class={className} />

13
packages/shared-branding/src/logos/MemoroLogo.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import AppLogo from '../AppLogo.svelte';
interface Props {
size?: number;
color?: string;
class?: string;
}
let { size = 55, color, class: className = '' }: Props = $props();
</script>
<AppLogo app="memoro" {size} {color} class={className} />

13
packages/shared-branding/src/logos/StorytellerLogo.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import AppLogo from '../AppLogo.svelte';
interface Props {
size?: number;
color?: string;
class?: string;
}
let { size = 55, color, class: className = '' }: Props = $props();
</script>
<AppLogo app="maerchenzauber" {size} {color} class={className} />

8
packages/shared-branding/src/logos/index.ts Normal file
View file

@ -0,0 +1,8 @@
/**
* Pre-configured app logo components
* These provide convenient shortcuts for each app's logo
*/
export { default as MemoroLogo } from './MemoroLogo.svelte';
export { default as ManaCoreLogo } from './ManaCoreLogo.svelte';
export { default as ManaDeckLogo } from './ManaDeckLogo.svelte';
export { default as StorytellerLogo } from './StorytellerLogo.svelte';