Updating Branding to IR Engine (#10199)

* update branding part1

* More

* cpal

* remove duplicate svg

* revert

* fix migration

packages/client-core/src/admin/adminRoutes.tsx

@@ -56,7 +56,7 @@ const AdminTopBar = () => {
 
   return (
     <div className="flex h-16 w-full items-center justify-between bg-theme-surface-main px-8 py-4">
-      <img src="static/etherealengine_logo.png" alt="iR Engine Logo" className="h-7 w-7" />
+      <img src="static/ir.svg" alt="iR Engine Logo" className={`h-7 w-7${theme.value === 'light' ? ' invert' : ''}`} />
       <div className="">
         <Button onClick={toggleTheme} className="pointer-events-auto bg-transparent p-0">
           {theme.value === 'light' ? (

packages/client-core/src/admin/components/settings/tabs/client.tsx

@@ -76,6 +76,9 @@ const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRef
         appleTouchIcon: clientSetting?.appleTouchIcon,
         icon192px: clientSetting?.icon192px,
         icon512px: clientSetting?.icon512px,
+        siteManifest: clientSetting?.siteManifest,
+        safariPinnedTab: clientSetting?.safariPinnedTab,
+        favicon: clientSetting?.favicon,
         webmanifestLink: clientSetting?.webmanifestLink,
         swScriptLink: clientSetting?.swScriptLink,
         favicon16px: clientSetting?.favicon16px,

packages/client/index.html

@@ -25,8 +25,13 @@
     <link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
     <link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Lato:300,400,700|PT+Sans:400,400italic,700,700italic|Quicksand:400,300|Raleway:400|Roboto:300,400,700|Source+Sans+Pro:300,400,700|Khula:300,400,700&display=swap" />
     <link rel="apple-touch-icon" sizes="180x180" href="<%- appleTouchIcon %>" />
+    <link rel="manifest" href="<%- siteManifest %>">
+    <link rel="mask-icon" href="<%- safariPinnedTab %>" color="#5bbad5">
     <link rel="icon" type="image/png" sizes="32x32" href="<%- favicon32px %>" />
     <link rel="icon" type="image/png" sizes="16x16" href="<%- favicon16px %>" />
+    <link rel="shortcut icon" href="<%- favicon %>">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#000000">
 
     <script type="text/javascript">
       var global = globalThis

packages/client/src/pages/503.tsx

@@ -23,11 +23,15 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { AdminClientSettingsState } from '@etherealengine/client-core/src/admin/services/Setting/ClientSettingService'
+import { useMutableState } from '@etherealengine/hyperflux'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 export const Custom503 = (): any => {
   const { t } = useTranslation()
+  const clientSettingState = useMutableState(AdminClientSettingsState)
+  const [clientSetting] = clientSettingState?.client?.value || []
   return (
     <>
       <h1 style={{ color: 'black' }}>{t('503.msg')}</h1>
@@ -36,7 +40,7 @@ export const Custom503 = (): any => {
           height: 'auto',
           maxWidth: '100%'
         }}
-        src="/static/etherealengine.png"
+        src={clientSetting.appTitle}
       />
     </>
   )

packages/client/vite.config.ts

@@ -303,6 +303,9 @@ export default defineConfig(async () => {
         icon192px: clientSetting.icon192px || '/android-chrome-192x192.png',
         icon512px: clientSetting.icon512px || '/android-chrome-512x512.png',
         webmanifestLink: clientSetting.webmanifestLink || '/manifest.webmanifest',
+        siteManifest: clientSetting.siteManifest || '/site.webmanifest',
+        safariPinnedTab: clientSetting.safariPinnedTab || '/safari-pinned-tab.svg',
+        favicon: clientSetting.favicon || '/favicon.ico',
         swScriptLink:
           clientSetting.swScriptLink || process.env.VITE_PWA_ENABLED === 'true'
             ? process.env.APP_ENV === 'development'

packages/common/src/schemas/setting/client-setting.schema.ts

@@ -148,6 +148,9 @@ export const clientSettingSchema = Type.Object(
     favicon16px: Type.String(),
     icon192px: Type.String(),
     icon512px: Type.String(),
+    siteManifest: Type.String(),
+    safariPinnedTab: Type.String(),
+    favicon: Type.String(),
     webmanifestLink: Type.String(),
     swScriptLink: Type.String(),
     appBackground: Type.String(),

packages/editor/src/components/panels/ViewportPanel.tsx

@@ -29,9 +29,10 @@ import { useDrop } from 'react-dnd'
 import { useTranslation } from 'react-i18next'
 import { Vector2, Vector3 } from 'three'
 
-import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import { getMutableState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
 import { TransformComponent } from '@etherealengine/spatial/src/transform/components/TransformComponent'
 
+import { AdminClientSettingsState } from '@etherealengine/client-core/src/admin/services/Setting/ClientSettingService'
 import { ItemTypes } from '../../constants/AssetTypes'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
 import { getCursorSpawnPosition } from '../../functions/screenSpaceFunctions'
@@ -74,11 +75,14 @@ const ViewportDnD = () => {
 const ViewPortPanelContent = () => {
   const { t } = useTranslation()
   const sceneName = useHookstate(getMutableState(EditorState).sceneName).value
+  const clientSettingState = useMutableState(AdminClientSettingsState)
+  const [clientSetting] = clientSettingState?.client?.value || []
+
   return sceneName ? (
     <ViewportDnD />
   ) : (
     <div className={styles.bgImageBlock}>
-      <img src="/static/etherealengine.png" alt="" />
+      <img className="scale-[.8]" src={clientSetting.appTitle} alt="" />
       <h2>{t('editor:selectSceneMsg')}</h2>
     </div>
   )

packages/editor/src/components/projects/EditorNavbar.tsx

@@ -27,10 +27,14 @@ import React from 'react'
 
 import { RouterState } from '@etherealengine/client-core/src/common/services/RouterService'
 
+import { AdminClientSettingsState } from '@etherealengine/client-core/src/admin/services/Setting/ClientSettingService'
+import { useMutableState } from '@etherealengine/hyperflux'
 import { EditorNavbarProfile } from './EditorNavbarProfile'
 import styles from './styles.module.scss'
 
 export const EditorNavbar = () => {
+  const clientSettingState = useMutableState(AdminClientSettingsState)
+  const [clientSetting] = clientSettingState?.client?.value || []
   const routeHome = () => {
     RouterState.navigate('/')
   }
@@ -40,7 +44,7 @@ export const EditorNavbar = () => {
       <div className={styles.navContainer}>
         <div
           className={styles.logoBlock}
-          style={{ backgroundImage: 'url(/static/etherealengine.png)' }}
+          style={{ backgroundImage: `url(${clientSetting.appTitle})` }}
           onClick={routeHome}
         ></div>
         <EditorNavbarProfile />