diff --git a/.changeset/add_maskable_icons_for_pwas.md b/.changeset/add_maskable_icons_for_pwas.md new file mode 100644 index 000000000..31a141083 --- /dev/null +++ b/.changeset/add_maskable_icons_for_pwas.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +Add Android/iOS PWA-specific icon variants. diff --git a/index.html b/index.html index 62ce1dabb..c22ea4274 100644 --- a/index.html +++ b/index.html @@ -35,55 +35,86 @@ + + + + + + + diff --git a/public/manifest.json b/public/manifest.json index 696b875ee..134a5eb4b 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -11,49 +11,166 @@ "theme_color": "#1b1a21", "icons": [ { - "src": "./public/android/android-chrome-36x36.png", - "sizes": "36x36", - "type": "image/png" + "src": "./public/svg/cinny-logo-maskable.svg", + "sizes": "any", + "type": "image/svg+xml", + "purpose": "maskable" }, { - "src": "./public/android/android-chrome-48x48.png", - "sizes": "48x48", - "type": "image/png" + "src": "./public/logo-maskable/cinny-logo-maskable-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" }, { - "src": "./public/android/android-chrome-72x72.png", - "sizes": "72x72", - "type": "image/png" + "src": "./public/logo-maskable/cinny-logo-maskable-384x384.png", + "sizes": "384x384", + "type": "image/png", + "purpose": "maskable" }, { - "src": "./public/android/android-chrome-96x96.png", - "sizes": "96x96", - "type": "image/png" + "src": "./public/logo-maskable/cinny-logo-maskable-256x256.png", + "sizes": "256x256", + "type": "image/png", + "purpose": "maskable" }, { - "src": "./public/android/android-chrome-144x144.png", + "src": "./public/logo-maskable/cinny-logo-maskable-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./public/logo-maskable/cinny-logo-maskable-180x180.png", + "sizes": "180x180", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./public/logo-maskable/cinny-logo-maskable-167x167.png", + "sizes": "167x167", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./public/logo-maskable/cinny-logo-maskable-152x152.png", + "sizes": "152x152", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./public/logo-maskable/cinny-logo-maskable-144x144.png", "sizes": "144x144", - "type": "image/png" + "type": "image/png", + "purpose": "maskable" }, { - "src": "./public/android/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" + "src": "./public/logo-maskable/cinny-logo-maskable-120x120.png", + "sizes": "120x120", + "type": "image/png", + "purpose": "maskable" }, { - "src": "./public/android/android-chrome-256x256.png", - "sizes": "256x256", - "type": "image/png" + "src": "./public/logo-maskable/cinny-logo-maskable-114x114.png", + "sizes": "114x114", + "type": "image/png", + "purpose": "maskable" }, { - "src": "./public/android/android-chrome-384x384.png", - "sizes": "384x384", - "type": "image/png" + "src": "./public/logo-maskable/cinny-logo-maskable-96x96.png", + "sizes": "96x96", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./public/logo-maskable/cinny-logo-maskable-76x76.png", + "sizes": "76x76", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./public/logo-maskable/cinny-logo-maskable-72x72.png", + "sizes": "72x72", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./public/logo-maskable/cinny-logo-maskable-60x60.png", + "sizes": "60x60", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./public/logo-maskable/cinny-logo-maskable-57x57.png", + "sizes": "57x57", + "type": "image/png", + "purpose": "maskable" }, { - "src": "./public/android/android-chrome-512x512.png", + "src": "./public/logo-maskable/cinny-logo-maskable-48x48.png", + "sizes": "48x48", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./public/logo-maskable/cinny-logo-maskable-36x36.png", + "sizes": "36x36", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./public/svg/cinny-logo.svg", + "sizes": "any", + "type": "image/svg+xml", + "purpose": "any" + }, + { + "src": "./public/logo/cinny-logo-512x512.png", "sizes": "512x512", - "type": "image/png" + "type": "image/png", + "purpose": "any" + }, + { + "src": "./public/logo/cinny-logo-384x384.png", + "sizes": "384x384", + "type": "image/png", + "purpose": "any" + }, + { + "src": "./public/logo/cinny-logo-256x256.png", + "sizes": "256x256", + "type": "image/png", + "purpose": "any" + }, + { + "src": "./public/logo/cinny-logo-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any" + }, + { + "src": "./public/logo/cinny-logo-144x144.png", + "sizes": "144x144", + "type": "image/png", + "purpose": "any" + }, + { + "src": "./public/logo/cinny-logo-96x96.png", + "sizes": "96x96", + "type": "image/png", + "purpose": "any" + }, + { + "src": "./public/logo/cinny-logo-72x72.png", + "sizes": "72x72", + "type": "image/png", + "purpose": "any" + }, + { + "src": "./public/logo/cinny-logo-48x48.png", + "sizes": "48x48", + "type": "image/png", + "purpose": "any" } ] } diff --git a/public/res/apple/apple-touch-icon-114x114.png b/public/res/apple/apple-touch-icon-114x114.png deleted file mode 100644 index 6b9654552..000000000 Binary files a/public/res/apple/apple-touch-icon-114x114.png and /dev/null differ diff --git a/public/res/apple/apple-touch-icon-120x120.png b/public/res/apple/apple-touch-icon-120x120.png deleted file mode 100644 index 657e436e9..000000000 Binary files a/public/res/apple/apple-touch-icon-120x120.png and /dev/null differ diff --git a/public/res/apple/apple-touch-icon-144x144.png b/public/res/apple/apple-touch-icon-144x144.png deleted file mode 100644 index a2d3a55eb..000000000 Binary files a/public/res/apple/apple-touch-icon-144x144.png and /dev/null differ diff --git a/public/res/apple/apple-touch-icon-152x152.png b/public/res/apple/apple-touch-icon-152x152.png deleted file mode 100644 index 2088a7384..000000000 Binary files a/public/res/apple/apple-touch-icon-152x152.png and /dev/null differ diff --git a/public/res/apple/apple-touch-icon-167x167.png b/public/res/apple/apple-touch-icon-167x167.png deleted file mode 100644 index 0f1a60a66..000000000 Binary files a/public/res/apple/apple-touch-icon-167x167.png and /dev/null differ diff --git a/public/res/apple/apple-touch-icon-180x180.png b/public/res/apple/apple-touch-icon-180x180.png deleted file mode 100644 index 9d863d8d8..000000000 Binary files a/public/res/apple/apple-touch-icon-180x180.png and /dev/null differ diff --git a/public/res/apple/apple-touch-icon-57x57.png b/public/res/apple/apple-touch-icon-57x57.png deleted file mode 100644 index 12dd241f6..000000000 Binary files a/public/res/apple/apple-touch-icon-57x57.png and /dev/null differ diff --git a/public/res/apple/apple-touch-icon-60x60.png b/public/res/apple/apple-touch-icon-60x60.png deleted file mode 100644 index 9992a65db..000000000 Binary files a/public/res/apple/apple-touch-icon-60x60.png and /dev/null differ diff --git a/public/res/apple/apple-touch-icon-72x72.png b/public/res/apple/apple-touch-icon-72x72.png deleted file mode 100644 index 5b12fd929..000000000 Binary files a/public/res/apple/apple-touch-icon-72x72.png and /dev/null differ diff --git a/public/res/apple/apple-touch-icon-76x76.png b/public/res/apple/apple-touch-icon-76x76.png deleted file mode 100644 index 522d74c13..000000000 Binary files a/public/res/apple/apple-touch-icon-76x76.png and /dev/null differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-114x114.png b/public/res/logo-maskable/cinny-logo-maskable-114x114.png new file mode 100644 index 000000000..59463adb8 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-114x114.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-120x120.png b/public/res/logo-maskable/cinny-logo-maskable-120x120.png new file mode 100644 index 000000000..4e185fba3 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-120x120.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-144x144.png b/public/res/logo-maskable/cinny-logo-maskable-144x144.png new file mode 100644 index 000000000..f674110ff Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-144x144.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-152x152.png b/public/res/logo-maskable/cinny-logo-maskable-152x152.png new file mode 100644 index 000000000..8de192a1e Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-152x152.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-167x167.png b/public/res/logo-maskable/cinny-logo-maskable-167x167.png new file mode 100644 index 000000000..146db2de3 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-167x167.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-180x180.png b/public/res/logo-maskable/cinny-logo-maskable-180x180.png new file mode 100644 index 000000000..14e2764bd Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-180x180.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-192x192.png b/public/res/logo-maskable/cinny-logo-maskable-192x192.png new file mode 100644 index 000000000..45b3f74d4 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-192x192.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-256x256.png b/public/res/logo-maskable/cinny-logo-maskable-256x256.png new file mode 100644 index 000000000..ebfadb35b Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-256x256.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-36x36.png b/public/res/logo-maskable/cinny-logo-maskable-36x36.png new file mode 100644 index 000000000..f80ba44c3 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-36x36.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-384x384.png b/public/res/logo-maskable/cinny-logo-maskable-384x384.png new file mode 100644 index 000000000..e6fbb3dc0 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-384x384.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-48x48.png b/public/res/logo-maskable/cinny-logo-maskable-48x48.png new file mode 100644 index 000000000..4dd14e8f8 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-48x48.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-512x512.png b/public/res/logo-maskable/cinny-logo-maskable-512x512.png new file mode 100644 index 000000000..e4e31a720 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-512x512.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-57x57.png b/public/res/logo-maskable/cinny-logo-maskable-57x57.png new file mode 100644 index 000000000..cc23be00a Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-57x57.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-60x60.png b/public/res/logo-maskable/cinny-logo-maskable-60x60.png new file mode 100644 index 000000000..6a11f2073 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-60x60.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-72x72.png b/public/res/logo-maskable/cinny-logo-maskable-72x72.png new file mode 100644 index 000000000..35e533ec3 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-72x72.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-76x76.png b/public/res/logo-maskable/cinny-logo-maskable-76x76.png new file mode 100644 index 000000000..197658153 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-76x76.png differ diff --git a/public/res/logo-maskable/cinny-logo-maskable-96x96.png b/public/res/logo-maskable/cinny-logo-maskable-96x96.png new file mode 100644 index 000000000..0cd72dbf2 Binary files /dev/null and b/public/res/logo-maskable/cinny-logo-maskable-96x96.png differ diff --git a/public/res/android/android-chrome-144x144.png b/public/res/logo/cinny-logo-144x144.png similarity index 100% rename from public/res/android/android-chrome-144x144.png rename to public/res/logo/cinny-logo-144x144.png diff --git a/public/res/android/android-chrome-192x192.png b/public/res/logo/cinny-logo-192x192.png similarity index 100% rename from public/res/android/android-chrome-192x192.png rename to public/res/logo/cinny-logo-192x192.png diff --git a/public/res/android/android-chrome-256x256.png b/public/res/logo/cinny-logo-256x256.png similarity index 100% rename from public/res/android/android-chrome-256x256.png rename to public/res/logo/cinny-logo-256x256.png diff --git a/public/res/android/android-chrome-36x36.png b/public/res/logo/cinny-logo-36x36.png similarity index 100% rename from public/res/android/android-chrome-36x36.png rename to public/res/logo/cinny-logo-36x36.png diff --git a/public/res/android/android-chrome-384x384.png b/public/res/logo/cinny-logo-384x384.png similarity index 100% rename from public/res/android/android-chrome-384x384.png rename to public/res/logo/cinny-logo-384x384.png diff --git a/public/res/android/android-chrome-48x48.png b/public/res/logo/cinny-logo-48x48.png similarity index 100% rename from public/res/android/android-chrome-48x48.png rename to public/res/logo/cinny-logo-48x48.png diff --git a/public/res/android/android-chrome-512x512.png b/public/res/logo/cinny-logo-512x512.png similarity index 100% rename from public/res/android/android-chrome-512x512.png rename to public/res/logo/cinny-logo-512x512.png diff --git a/public/res/android/android-chrome-72x72.png b/public/res/logo/cinny-logo-72x72.png similarity index 100% rename from public/res/android/android-chrome-72x72.png rename to public/res/logo/cinny-logo-72x72.png diff --git a/public/res/android/android-chrome-96x96.png b/public/res/logo/cinny-logo-96x96.png similarity index 100% rename from public/res/android/android-chrome-96x96.png rename to public/res/logo/cinny-logo-96x96.png diff --git a/public/res/svg/cinny-logo-maskable.svg b/public/res/svg/cinny-logo-maskable.svg new file mode 100644 index 000000000..1b3b15eb3 --- /dev/null +++ b/public/res/svg/cinny-logo-maskable.svg @@ -0,0 +1,60 @@ + + + + + + + + + diff --git a/public/res/svg/cinny.svg b/public/res/svg/cinny-logo.svg similarity index 100% rename from public/res/svg/cinny.svg rename to public/res/svg/cinny-logo.svg diff --git a/src/app/features/settings/about/About.tsx b/src/app/features/settings/about/About.tsx index 1f399991c..44f42c8f6 100644 --- a/src/app/features/settings/about/About.tsx +++ b/src/app/features/settings/about/About.tsx @@ -3,7 +3,7 @@ import { Box, Text, IconButton, Icon, Icons, Scroll, Button, config, toRem, Spin import { Page, PageContent, PageHeader } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; -import CinnySVG from '$public/res/svg/cinny.svg'; +import CinnySVG from '$public/res/svg/cinny-logo.svg'; import { clearCacheAndReload } from '$client/initMatrix'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { SequenceCardStyle } from '$features/settings/styles.css'; diff --git a/src/app/pages/client/BackgroundNotifications.tsx b/src/app/pages/client/BackgroundNotifications.tsx index 2d382fcc7..395718223 100644 --- a/src/app/pages/client/BackgroundNotifications.tsx +++ b/src/app/pages/client/BackgroundNotifications.tsx @@ -33,7 +33,7 @@ import { import { NotificationType, StateEvent } from '$types/matrix/room'; import { createLogger } from '$utils/debug'; import { createDebugLogger } from '$utils/debugLogger'; -import LogoSVG from '$public/res/svg/cinny.svg'; +import LogoSVG from '$public/res/svg/cinny-logo.svg'; import { nicknamesAtom } from '$state/nicknames'; import { buildRoomMessageNotification, diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index d8228ccdd..d9d78772d 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -14,7 +14,7 @@ import parse from 'html-react-parser'; import { getReactCustomHtmlParser, LINKIFY_OPTS } from '$plugins/react-custom-html-parser'; import { sanitizeCustomHtml } from '$utils/sanitize'; import { roomToUnreadAtom } from '$state/room/roomToUnread'; -import LogoSVG from '$public/res/svg/cinny.svg'; +import LogoSVG from '$public/res/svg/cinny-logo.svg'; import LogoUnreadSVG from '$public/res/svg/cinny-unread.svg'; import LogoHighlightSVG from '$public/res/svg/cinny-highlight.svg'; import NotificationSound from '$public/sound/notification.ogg'; diff --git a/src/app/pages/client/WelcomePage.tsx b/src/app/pages/client/WelcomePage.tsx index 4b605e59e..91d1d9d5e 100644 --- a/src/app/pages/client/WelcomePage.tsx +++ b/src/app/pages/client/WelcomePage.tsx @@ -1,6 +1,6 @@ import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds'; import { Page, PageHero, PageHeroSection } from '$components/page'; -import CinnySVG from '$public/res/svg/cinny.svg'; +import CinnySVG from '$public/res/svg/cinny-logo.svg'; export function WelcomePage() { return ( diff --git a/src/app/utils/notificationStyle.ts b/src/app/utils/notificationStyle.ts index 6a616b448..1a0f2fa17 100644 --- a/src/app/utils/notificationStyle.ts +++ b/src/app/utils/notificationStyle.ts @@ -1,5 +1,6 @@ -export const DEFAULT_NOTIFICATION_ICON = '/public/res/apple/apple-touch-icon-180x180.png'; -export const DEFAULT_NOTIFICATION_BADGE = '/public/res/apple/apple-touch-icon-72x72.png'; +export const DEFAULT_NOTIFICATION_ICON = + '/public/res/logo-maskable/cinny-logo-maskable-180x180.png'; +export const DEFAULT_NOTIFICATION_BADGE = '/public/res/logo-maskable/cinny-logo-maskable-72x72.png'; export const DEFAULT_MESSAGE_PREVIEW = 'new message'; export const ENCRYPTED_MESSAGE_PREVIEW = 'Encrypted message'; diff --git a/src/sw.ts b/src/sw.ts index 064b293fc..627081914 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -366,8 +366,8 @@ async function handleMinimalPushPayload( console.debug('[SW push] minimal payload: no session, showing generic notification'); await self.registration.showNotification('New Message', { body: undefined, - icon: '/public/res/apple/apple-touch-icon-180x180.png', - badge: '/public/res/apple/apple-touch-icon-72x72.png', + icon: '/public/res/logo-maskable/cinny-logo-maskable-180x180.png', + badge: '/public/res/logo-maskable/cinny-logo-maskable-72x72.png', tag: `room-${roomId}`, renotify: true, data: { room_id: roomId, event_id: eventId }, @@ -384,8 +384,8 @@ async function handleMinimalPushPayload( if (!rawEvent) { await self.registration.showNotification('New Message', { body: undefined, - icon: '/public/res/apple/apple-touch-icon-180x180.png', - badge: '/public/res/apple/apple-touch-icon-72x72.png', + icon: '/public/res/logo-maskable/cinny-logo-maskable-180x180.png', + badge: '/public/res/logo-maskable/cinny-logo-maskable-72x72.png', tag: `room-${roomId}`, renotify: true, data: { room_id: roomId, event_id: eventId, user_id: session.userId }, diff --git a/vite.config.ts b/vite.config.ts index a66f458a8..6f6c7d58d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -81,7 +81,15 @@ const copyFiles = { dest: '', }, { - src: 'public/res/android', + src: 'public/res/logo-maskable', + dest: 'public/', + }, + { + src: 'public/res/logo', + dest: 'public/', + }, + { + src: 'public/res/svg', dest: 'public/', }, {