mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-16 08:39:40 +02:00
✨ feat(branding): add Calendar and Storage app branding
- Add calendar and storage SVG icons to app-icons.ts - Add CalendarLogo.svelte and StorageLogo.svelte components - Add Calendar and Storage to MANA_APPS with descriptions - Add APP_URLS entries for calendar and storage - Update AppId type to include 'calendar' - Fix Picture port from 5179 to 5185 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Till-JS
parent
fb9945c0f7
commit
2a040102b6
8 changed files with 87 additions and 2 deletions
|
|
@ -48,6 +48,12 @@ const nutriphiSvg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fil
|
|||
// Contacts icon (address book/person with gradient)
|
||||
const contactsSvg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="130" y="130" width="764" height="764" rx="382" fill="url(#contactsGrad)"/><circle cx="512" cy="380" r="100" fill="white"/><path d="M320 620C320 540 408 480 512 480C616 480 704 540 704 620V680C704 702.091 685.091 720 663 720H361C338.909 720 320 702.091 320 680V620Z" fill="white"/><rect x="240" y="300" width="24" height="80" rx="12" fill="white" fill-opacity="0.6"/><rect x="240" y="420" width="24" height="80" rx="12" fill="white" fill-opacity="0.6"/><rect x="240" y="540" width="24" height="80" rx="12" fill="white" fill-opacity="0.6"/><defs><linearGradient id="contactsGrad" x1="130" y1="130" x2="894" y2="894" gradientUnits="userSpaceOnUse"><stop stop-color="#3b82f6"/><stop offset="1" stop-color="#2563eb"/></linearGradient></defs></svg>`;
|
||||
|
||||
// Calendar icon (calendar with gradient)
|
||||
const calendarSvg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="130" y="130" width="764" height="764" rx="382" fill="url(#calendarGrad)"/><rect x="260" y="320" width="504" height="424" rx="24" fill="white"/><rect x="260" y="320" width="504" height="100" rx="24" fill="white"/><rect x="260" y="396" width="504" height="24" fill="#0ea5e9" fill-opacity="0.3"/><rect x="340" y="260" width="24" height="100" rx="12" fill="white"/><rect x="660" y="260" width="24" height="100" rx="12" fill="white"/><rect x="300" y="480" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><rect x="400" y="480" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><rect x="500" y="480" width="80" height="60" rx="8" fill="#0ea5e9"/><rect x="600" y="480" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><rect x="300" y="560" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><rect x="400" y="560" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><rect x="500" y="560" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><rect x="600" y="560" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><rect x="300" y="640" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><rect x="400" y="640" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><rect x="500" y="640" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><rect x="600" y="640" width="80" height="60" rx="8" fill="#0ea5e9" fill-opacity="0.2"/><defs><linearGradient id="calendarGrad" x1="130" y1="130" x2="894" y2="894" gradientUnits="userSpaceOnUse"><stop stop-color="#0ea5e9"/><stop offset="1" stop-color="#0284c7"/></linearGradient></defs></svg>`;
|
||||
|
||||
// Storage icon (cloud storage with gradient)
|
||||
const storageSvg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="130" y="130" width="764" height="764" rx="382" fill="url(#storageGrad)"/><path d="M720 520C720 448.471 662.529 391 591 391C584.614 391 578.337 391.479 572.195 392.404C546.867 332.088 487.173 290 418 290C328.157 290 256 362.157 256 452C256 461.033 256.748 469.887 258.179 478.5C214.762 497.476 184 540.728 184 591C184 658.32 238.68 713 306 713H680C749.32 713 804 658.32 804 591C804 547.831 779.054 510.325 742.5 491.5C734.321 503.137 728 516.893 728 532V536C728 567.48 755.482 593 789 593" stroke="white" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/><path d="M512 500V700M512 700L420 608M512 700L604 608" stroke="white" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="storageGrad" x1="130" y1="130" x2="894" y2="894" gradientUnits="userSpaceOnUse"><stop stop-color="#3b82f6"/><stop offset="1" stop-color="#1d4ed8"/></linearGradient></defs></svg>`;
|
||||
|
||||
/**
|
||||
* App icons as data URLs
|
||||
* Use these directly in <img src={APP_ICONS.memoro}> or CSS background-image
|
||||
|
|
@ -66,6 +72,8 @@ export const APP_ICONS = {
|
|||
moodlit: svgToDataUrl(moodlitSvg),
|
||||
nutriphi: svgToDataUrl(nutriphiSvg),
|
||||
contacts: svgToDataUrl(contactsSvg),
|
||||
calendar: svgToDataUrl(calendarSvg),
|
||||
storage: svgToDataUrl(storageSvg),
|
||||
} as const;
|
||||
|
||||
export type AppIconId = keyof typeof APP_ICONS;
|
||||
|
|
|
|||
|
|
@ -144,6 +144,19 @@ export const APP_BRANDING: Record<AppId, AppBranding> = {
|
|||
logoStroke: true,
|
||||
logoStrokeWidth: 1.5,
|
||||
},
|
||||
calendar: {
|
||||
id: 'calendar',
|
||||
name: 'Kalender',
|
||||
tagline: 'Smart Calendar Management',
|
||||
primaryColor: '#0ea5e9',
|
||||
secondaryColor: '#38bdf8',
|
||||
// Calendar icon
|
||||
logoPath:
|
||||
'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z',
|
||||
logoViewBox: '0 0 24 24',
|
||||
logoStroke: true,
|
||||
logoStrokeWidth: 1.5,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export {
|
|||
NutriPhiLogo,
|
||||
ZitareLogo,
|
||||
ContactsLogo,
|
||||
CalendarLogo,
|
||||
} from './logos';
|
||||
|
||||
// Configuration
|
||||
|
|
|
|||
13
packages/shared-branding/src/logos/CalendarLogo.svelte
Normal file
13
packages/shared-branding/src/logos/CalendarLogo.svelte
Normal 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="calendar" {size} {color} class={className} />
|
||||
13
packages/shared-branding/src/logos/StorageLogo.svelte
Normal file
13
packages/shared-branding/src/logos/StorageLogo.svelte
Normal 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="storage" {size} {color} class={className} />
|
||||
|
|
@ -12,3 +12,5 @@ export { default as PresiLogo } from './PresiLogo.svelte';
|
|||
export { default as NutriPhiLogo } from './NutriPhiLogo.svelte';
|
||||
export { default as ZitareLogo } from './ZitareLogo.svelte';
|
||||
export { default as ContactsLogo } from './ContactsLogo.svelte';
|
||||
export { default as CalendarLogo } from './CalendarLogo.svelte';
|
||||
export { default as StorageLogo } from './StorageLogo.svelte';
|
||||
|
|
|
|||
|
|
@ -196,6 +196,38 @@ export const MANA_APPS: ManaApp[] = [
|
|||
comingSoon: false,
|
||||
status: 'development',
|
||||
},
|
||||
{
|
||||
id: 'calendar',
|
||||
name: 'Kalender',
|
||||
description: {
|
||||
de: 'Smarte Kalenderverwaltung',
|
||||
en: 'Smart Calendar Management',
|
||||
},
|
||||
longDescription: {
|
||||
de: 'Organisiere deine Zeit intelligent mit persönlichen und geteilten Kalendern, wiederkehrenden Terminen und Erinnerungen.',
|
||||
en: 'Organize your time intelligently with personal and shared calendars, recurring events, and reminders.',
|
||||
},
|
||||
icon: APP_ICONS.calendar,
|
||||
color: '#0ea5e9',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
},
|
||||
{
|
||||
id: 'storage',
|
||||
name: 'Storage',
|
||||
description: {
|
||||
de: 'Cloud-Speicherung',
|
||||
en: 'Cloud Storage',
|
||||
},
|
||||
longDescription: {
|
||||
de: 'Sichere Cloud-Speicherung für deine Dateien mit Ordnern, Versionierung, Sharing und mehr.',
|
||||
en: 'Secure cloud storage for your files with folders, versioning, sharing, and more.',
|
||||
},
|
||||
icon: APP_ICONS.storage,
|
||||
color: '#3b82f6',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
|
|
@ -269,7 +301,7 @@ export const APP_URLS: Record<AppIconId, { dev: string; prod: string }> = {
|
|||
presi: { dev: 'http://localhost:5176', prod: 'https://presi.manacore.app' },
|
||||
manadeck: { dev: 'http://localhost:5177', prod: 'https://manadeck.manacore.app' },
|
||||
maerchenzauber: { dev: 'http://localhost:5178', prod: 'https://maerchenzauber.manacore.app' },
|
||||
picture: { dev: 'http://localhost:5179', prod: 'https://picture.manacore.app' },
|
||||
picture: { dev: 'http://localhost:5185', prod: 'https://picture.manacore.app' },
|
||||
zitare: { dev: 'http://localhost:5180', prod: 'https://zitare.manacore.app' },
|
||||
wisekeep: { dev: 'http://localhost:5181', prod: 'https://wisekeep.manacore.app' },
|
||||
nutriphi: { dev: 'http://localhost:5182', prod: 'https://nutriphi.manacore.app' },
|
||||
|
|
@ -277,6 +309,8 @@ export const APP_URLS: Record<AppIconId, { dev: string; prod: string }> = {
|
|||
mana: { dev: 'http://localhost:5173', prod: 'https://manacore.app' },
|
||||
moodlit: { dev: 'http://localhost:5183', prod: 'https://moodlit.manacore.app' },
|
||||
contacts: { dev: 'http://localhost:5184', prod: 'https://contacts.manacore.app' },
|
||||
calendar: { dev: 'http://localhost:5179', prod: 'https://calendar.manacore.app' },
|
||||
storage: { dev: 'http://localhost:5185', prod: 'https://storage.manacore.app' },
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ export type AppId =
|
|||
| 'nutriphi'
|
||||
| 'zitare'
|
||||
| 'picture'
|
||||
| 'contacts';
|
||||
| 'contacts'
|
||||
| 'calendar';
|
||||
|
||||
/**
|
||||
* App branding configuration
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue