diff --git a/superset-frontend/packages/superset-ui-core/src/style/index.tsx b/superset-frontend/packages/superset-ui-core/src/style/index.tsx index d448b81e7..e71960bf2 100644 --- a/superset-frontend/packages/superset-ui-core/src/style/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/style/index.tsx @@ -156,6 +156,7 @@ const defaultTheme = { transitionTiming: 0.3, gridUnit: 4, brandIconMaxWidth: 37, + brandIconExploreMaxWidth: 150, }; export type SupersetTheme = typeof defaultTheme; diff --git a/superset-frontend/src/assets/images/explore-logo.png b/superset-frontend/src/assets/images/explore-logo.png new file mode 100644 index 000000000..bda0edfcd Binary files /dev/null and b/superset-frontend/src/assets/images/explore-logo.png differ diff --git a/superset-frontend/src/constants.ts b/superset-frontend/src/constants.ts index c4fd0e94f..0a22ea4fc 100644 --- a/superset-frontend/src/constants.ts +++ b/superset-frontend/src/constants.ts @@ -167,6 +167,7 @@ export const DEFAULT_COMMON_BOOTSTRAP_DATA: CommonBootstrapData = { brand: { path: '', icon: '', + explore_icon: '', alt: '', tooltip: '', text: '', diff --git a/superset-frontend/src/features/home/Menu.test.tsx b/superset-frontend/src/features/home/Menu.test.tsx index 4a095472d..21901ef7c 100644 --- a/superset-frontend/src/features/home/Menu.test.tsx +++ b/superset-frontend/src/features/home/Menu.test.tsx @@ -172,6 +172,7 @@ const mockedProps = { brand: { path: '/superset/welcome/', icon: '/static/assets/images/superset-logo-horiz.png', + explore_icon: '/static/assets/images/explore-logo.png', alt: 'Superset', width: '126', tooltip: '', diff --git a/superset-frontend/src/features/home/Menu.tsx b/superset-frontend/src/features/home/Menu.tsx index ebcff4a02..d2b6a81df 100644 --- a/superset-frontend/src/features/home/Menu.tsx +++ b/superset-frontend/src/features/home/Menu.tsx @@ -52,6 +52,33 @@ const StyledHeader = styled.header` .caret { display: none; } + .navbar-brand-explore-container { + display: flex; + flex-direction: column; + justify-content: center; + } + .navbar-brand-explore { + display: flex; + flex-direction: column; + justify-content: center; + /* must be exactly the height of the Antd navbar */ + min-height: 50px; + padding: ${theme.gridUnit}px + ${theme.gridUnit * 2}px + ${theme.gridUnit}px + ${theme.gridUnit * 4}px; + max-width: ${theme.gridUnit * theme.brandIconExploreMaxWidth}px; + img { + height: 100%; + object-fit: contain; + } + &:focus { + border-color: transparent; + } + &:focus-visible { + border-color: ${theme.colors.primary.dark1}; + } + } .navbar-brand { display: flex; flex-direction: column; @@ -242,6 +269,11 @@ export function Menu({ }; return ( + + + {brand.alt} + + dict[str, Any]: "brand": { "path": appbuilder.app.config["LOGO_TARGET_PATH"] or "/superset/welcome/", "icon": appbuilder.app_icon, + "explore_icon": appbuilder.app.config["EXPLORE_ICON"], "alt": appbuilder.app_name, "tooltip": appbuilder.app.config["LOGO_TOOLTIP"], "text": brand_text,