diff --git a/packages/create-app/templates/default-app/packages/app/public/android-chrome-192x192.png b/packages/create-app/templates/default-app/packages/app/public/android-chrome-192x192.png
index 3d56edbb0d..4660f988c1 100644
Binary files a/packages/create-app/templates/default-app/packages/app/public/android-chrome-192x192.png and b/packages/create-app/templates/default-app/packages/app/public/android-chrome-192x192.png differ
diff --git a/packages/create-app/templates/default-app/packages/app/public/apple-touch-icon.png b/packages/create-app/templates/default-app/packages/app/public/apple-touch-icon.png
index 0977175f6f..57c05cfc9a 100644
Binary files a/packages/create-app/templates/default-app/packages/app/public/apple-touch-icon.png and b/packages/create-app/templates/default-app/packages/app/public/apple-touch-icon.png differ
diff --git a/packages/create-app/templates/default-app/packages/app/public/favicon-16x16.png b/packages/create-app/templates/default-app/packages/app/public/favicon-16x16.png
index a455ffac7b..58cf61a35e 100644
Binary files a/packages/create-app/templates/default-app/packages/app/public/favicon-16x16.png and b/packages/create-app/templates/default-app/packages/app/public/favicon-16x16.png differ
diff --git a/packages/create-app/templates/default-app/packages/app/public/favicon-32x32.png b/packages/create-app/templates/default-app/packages/app/public/favicon-32x32.png
index e2707f2d1e..c0915ece75 100644
Binary files a/packages/create-app/templates/default-app/packages/app/public/favicon-32x32.png and b/packages/create-app/templates/default-app/packages/app/public/favicon-32x32.png differ
diff --git a/packages/create-app/templates/default-app/packages/app/public/favicon.ico b/packages/create-app/templates/default-app/packages/app/public/favicon.ico
index 5b582704a1..5e45e5dfbd 100644
Binary files a/packages/create-app/templates/default-app/packages/app/public/favicon.ico and b/packages/create-app/templates/default-app/packages/app/public/favicon.ico differ
diff --git a/packages/create-app/templates/default-app/packages/app/src/LogoFull.tsx b/packages/create-app/templates/default-app/packages/app/src/LogoFull.tsx
new file mode 100644
index 0000000000..d2b1bf1080
--- /dev/null
+++ b/packages/create-app/templates/default-app/packages/app/src/LogoFull.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+ svg: {
+ width: 'auto',
+ height: 30,
+ },
+ path: {
+ fill: '#7df3e1',
+ },
+});
+const LogoFull: FC<{}> = () => {
+ const classes = useStyles();
+
+ return (
+
+ );
+};
+
+export default LogoFull;
diff --git a/packages/create-app/templates/default-app/packages/app/src/LogoIcon.tsx b/packages/create-app/templates/default-app/packages/app/src/LogoIcon.tsx
new file mode 100644
index 0000000000..d70be3dd32
--- /dev/null
+++ b/packages/create-app/templates/default-app/packages/app/src/LogoIcon.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+ svg: {
+ width: 'auto',
+ height: 28,
+ },
+ path: {
+ fill: '#7df3e1',
+ },
+});
+
+const LogoIcon: FC<{}> = () => {
+ const classes = useStyles();
+
+ return (
+
+ );
+};
+
+export default LogoIcon;
diff --git a/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx b/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx
index 9e343b86ac..96d18965ec 100644
--- a/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx
@@ -1,15 +1,21 @@
-import React from 'react';
+import React, { FC, useContext } from 'react';
import HomeIcon from '@material-ui/icons/Home';
import LibraryBooks from '@material-ui/icons/LibraryBooks';
import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
import BuildIcon from '@material-ui/icons/BuildRounded';
import RuleIcon from '@material-ui/icons/AssignmentTurnedIn';
import MapIcon from '@material-ui/icons/MyLocation';
+import { Link, makeStyles } from '@material-ui/core';
+import { NavLink } from 'react-router-dom';
+import LogoFull from './LogoFull';
+import LogoIcon from './LogoIcon';
import {
Sidebar,
SidebarItem,
SidebarDivider,
+ sidebarConfig,
+ SidebarContext,
SidebarSpace,
SidebarUserSettings,
SidebarThemeToggle,
@@ -19,6 +25,7 @@ import {
export const AppSidebar = () => (
+
{/* Global nav, not org-specific */}
@@ -37,3 +44,36 @@ export const AppSidebar = () => (
);
+
+const useSidebarLogoStyles = makeStyles({
+ root: {
+ width: sidebarConfig.drawerWidthClosed,
+ height: 3 * sidebarConfig.logoHeight,
+ display: 'flex',
+ flexFlow: 'row nowrap',
+ alignItems: 'center',
+ marginBottom: -14,
+ },
+ link: {
+ width: sidebarConfig.drawerWidthClosed,
+ marginLeft: 24,
+ },
+});
+
+const SidebarLogo: FC<{}> = () => {
+ const classes = useSidebarLogoStyles();
+ const { isOpen } = useContext(SidebarContext);
+
+ return (
+
+
+ {isOpen ? : }
+
+
+ );
+};