Neo4j Logo updates

scripts/convert-to-canary-manifest.js

@@ -18,7 +18,7 @@ const canaryManifest = {
     short_name: 'Neo4j Browser Canary',
     icons: [
       {
-        src: './assets/images/device-icons/neo4j-desktop-canary.svg',
+        src: './assets/images/device-icons/neo4j-browser-canary.svg',
         type: 'svg'
       }
     ]

src/browser/components/icons/Icons.tsx

@@ -42,7 +42,7 @@ import folderEmpty from 'icons/folder-empty.svg'
 import help from 'icons/help.svg'
 import monitorPlay from 'icons/monitor-play.svg'
 import navigationMenuVertical from 'icons/navigation-menu-vertical.svg'
-import neo4j from 'icons/neo-world.svg'
+import neo4j from 'icons/neo4j-icon.svg'
 import newFolder from 'icons/folder-add.svg'
 import pin from 'icons/pin.svg'
 import ratingStar from 'icons/rating-star.svg'
@@ -84,10 +84,10 @@ const lightBlue = `
 const neo4jPulse = keyframes`
   0%,
   100% {
-    fill: #1bf621;
+    fill: #FFF;
   }
   50% {
-    fill: #00a3ff;
+    fill: #018bff;
   }
 `
 const SMALL_SIZE = 12
@@ -229,7 +229,7 @@ export const AboutIcon = ({ isOpen, title }: SidebarIconProps): JSX.Element => (
     activeStyle={credits}
     inactiveStyle={inactive}
     icon={neo4j}
-    width={32}
+    width={SIDEBAR_SIZE}
     isOpen={isOpen}
     title={title}
   />

src/browser/images/device-icons/browserconfig.xml

@@ -1,12 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-  <msapplication>
-    <tile>
-      <square70x70logo src="/images/device-icons/mstile-70x70.png"/>
-      <square150x150logo src="/images/device-icons/mstile-150x150.png"/>
-      <square310x310logo src="/images/device-icons/mstile-310x310.png"/>
-      <wide310x150logo src="/images/device-icons/mstile-310x150.png"/>
-      <TileColor>#2d89ef</TileColor>
-    </tile>
-  </msapplication>
-</browserconfig>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

src/browser/images/device-icons/manifest.json

@@ -2,37 +2,37 @@
   "name": "Neo4j Browser",
   "icons": [
     {
-      "src": "/images/device-icons/android-chrome-36x36.png",
+      "src": "/android-icon-36x36.png",
       "sizes": "36x36",
       "type": "image/png",
       "density": "0.75"
     },
     {
-      "src": "/images/device-icons/android-chrome-48x48.png",
+      "src": "/android-icon-48x48.png",
       "sizes": "48x48",
       "type": "image/png",
       "density": "1.0"
     },
     {
-      "src": "/images/device-icons/android-chrome-72x72.png",
+      "src": "/android-icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png",
       "density": "1.5"
     },
     {
-      "src": "/images/device-icons/android-chrome-96x96.png",
+      "src": "/android-icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png",
       "density": "2.0"
     },
     {
-      "src": "/images/device-icons/android-chrome-144x144.png",
+      "src": "/android-icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
       "density": "3.0"
     },
     {
-      "src": "/images/device-icons/android-chrome-192x192.png",
+      "src": "/android-icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "density": "4.0"

src/browser/manifest-base.json

@@ -6,7 +6,7 @@
   "background_color": "#fff",
   "icons": [
     {
-      "src": "./assets/images/device-icons/neo4j-desktop.svg",
+      "src": "./assets/images/device-icons/neo4j-browser.svg",
       "type": "svg"
     }
   ]

src/browser/modules/Frame/FrameAside.tsx

@@ -31,23 +31,14 @@ function FrameAside(props: any) {
 
   // Use logo as title if title is only Neo4j
   if (title === 'Neo4j') {
-    if (theme.name === DARK_THEME) {
-      title = (
-        <img
-          src="./assets/images/neo4j-world-inverted.png"
-          alt="Neo4j"
-          className="frame-title-logo"
-        />
-      )
-    } else {
-      title = (
-        <img
-          src="./assets/images/neo4j-world.png"
-          alt="Neo4j"
-          className="frame-title-logo"
-        />
-      )
-    }
+    const isDarkTheme = theme.name === DARK_THEME
+    title = (
+      <img
+        src={`./assets/images/neo4j-logo${isDarkTheme ? '-inverted' : ''}.svg`}
+        alt="Neo4j"
+        className="frame-title-logo"
+      />
+    )
   }
 
   return title ? (