diff --git a/public/icons/.gitkeep b/public/icons/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/public/imgs/favicon.png b/public/imgs/favicon.png deleted file mode 100644 index cb0dc4489..000000000 Binary files a/public/imgs/favicon.png and /dev/null differ diff --git a/public/favicon-squared.png b/public/imgs/favicon/favicon-squared.png similarity index 100% rename from public/favicon-squared.png rename to public/imgs/favicon/favicon-squared.png diff --git a/public/favicon.png b/public/imgs/favicon/favicon.png similarity index 100% rename from public/favicon.png rename to public/imgs/favicon/favicon.png diff --git a/public/favicon.svg b/public/imgs/favicon/favicon.svg similarity index 100% rename from public/favicon.svg rename to public/imgs/favicon/favicon.svg diff --git a/public/imgs/logo-color.svg b/public/imgs/logo/logo-color.svg similarity index 100% rename from public/imgs/logo-color.svg rename to public/imgs/logo/logo-color.svg diff --git a/public/imgs/logo.png b/public/imgs/logo/logo.png similarity index 100% rename from public/imgs/logo.png rename to public/imgs/logo/logo.png diff --git a/public/imgs/logo.svg b/public/imgs/logo/logo.svg similarity index 100% rename from public/imgs/logo.svg rename to public/imgs/logo/logo.svg diff --git a/public/imgs/pwa/apple-icon-180.png b/public/imgs/pwa/apple-icon-180.png new file mode 100644 index 000000000..c153ef522 Binary files /dev/null and b/public/imgs/pwa/apple-icon-180.png differ diff --git a/public/imgs/pwa/favicon-196.png b/public/imgs/pwa/favicon-196.png new file mode 100644 index 000000000..cf8d74e6c Binary files /dev/null and b/public/imgs/pwa/favicon-196.png differ diff --git a/public/imgs/pwa/manifest/manifest-icon-192.maskable.png b/public/imgs/pwa/manifest/manifest-icon-192.maskable.png new file mode 100644 index 000000000..0783e1c6e Binary files /dev/null and b/public/imgs/pwa/manifest/manifest-icon-192.maskable.png differ diff --git a/public/imgs/pwa/manifest/manifest-icon-512.maskable.png b/public/imgs/pwa/manifest/manifest-icon-512.maskable.png new file mode 100644 index 000000000..d6366700a Binary files /dev/null and b/public/imgs/pwa/manifest/manifest-icon-512.maskable.png differ diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 000000000..96dae66d5 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,29 @@ +{ + "display": "standalone", + "icons": [ + { + "src": "/imgs/pwa/manifest/manifest-icon-192.maskable.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/imgs/pwa/manifest/manifest-icon-192.maskable.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "/imgs/pwa/manifest/manifest-icon-512.maskable.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/imgs/pwa/manifest/manifest-icon-512.maskable.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" + } + ] +} \ No newline at end of file diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index d762c2cb0..f010f5724 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -1,14 +1,22 @@ import { AppShell, createStyles } from '@mantine/core'; -import { Header } from './Header'; +import { Header } from './header/Header'; import { Footer } from './Footer'; import Aside from './Aside'; import Navbar from './Navbar'; -import { HeaderConfig } from './HeaderConfig'; +import { HeaderConfig } from './header/HeaderConfig'; import { Background } from './Background'; import { useConfig } from '../../tools/state'; const useStyles = createStyles((theme) => ({ main: {}, + appShell: { + // eslint-disable-next-line no-useless-computed-key + ['@media screen and (display-mode: standalone)']: { + '&': { + paddingTop: '88px !important', + }, + }, + }, })); export default function Layout({ children, style }: any) { diff --git a/src/components/layout/Logo.tsx b/src/components/layout/Logo.tsx index a4530a1de..530314b57 100644 --- a/src/components/layout/Logo.tsx +++ b/src/components/layout/Logo.tsx @@ -12,7 +12,7 @@ export function Logo({ style, withoutText }: any) { ({ hide: { @@ -23,7 +21,7 @@ const useStyles = createStyles((theme) => ({ })); export function Header(props: any) { - const { classes, cx } = useStyles(); + const { classes } = useStyles(); const { config } = useConfig(); const { colorScheme } = useMantineColorScheme(); diff --git a/src/components/layout/HeaderConfig.tsx b/src/components/layout/header/HeaderConfig.tsx similarity index 56% rename from src/components/layout/HeaderConfig.tsx rename to src/components/layout/header/HeaderConfig.tsx index bf746e855..8f873a9f0 100644 --- a/src/components/layout/HeaderConfig.tsx +++ b/src/components/layout/header/HeaderConfig.tsx @@ -1,7 +1,8 @@ /* eslint-disable react/no-invalid-html-attribute */ import React from 'react'; import Head from 'next/head'; -import { useConfig } from '../../tools/state'; +import { useConfig } from '../../../tools/state'; +import { SafariStatusBarStyle } from './safariStatusBarStyle'; export function HeaderConfig(props: any) { const { config } = useConfig(); @@ -9,15 +10,19 @@ export function HeaderConfig(props: any) { return ( {config.settings.title || 'Homarr 🦞'} - + + + {/* configure apple splash screen & touch icon */} - + + + ); } diff --git a/src/components/layout/header/safariStatusBarStyle.tsx b/src/components/layout/header/safariStatusBarStyle.tsx new file mode 100644 index 000000000..b7100ced0 --- /dev/null +++ b/src/components/layout/header/safariStatusBarStyle.tsx @@ -0,0 +1,13 @@ +import { useMantineTheme } from '@mantine/core'; + +export const SafariStatusBarStyle = () => { + const colorScheme = useMantineTheme(); + + const isDark = colorScheme.colorScheme === 'dark'; + + if (isDark) { + return ; + } + + return ; +};