diff --git a/web/packages/design/src/Image/Image.story.js b/web/packages/design/src/Image/Image.story.js index 1a63b1201f936..36b97ed49bfd4 100644 --- a/web/packages/design/src/Image/Image.story.js +++ b/web/packages/design/src/Image/Image.story.js @@ -18,7 +18,7 @@ import React from 'react'; import Image from '../Image'; -import teleportSvg from './../assets/images/teleport-medallion.svg'; +import teleportSvg from './../assets/images/enterprise-dark.svg'; export default { title: 'Design/Image', diff --git a/web/packages/design/src/assets/images/Assets.story.tsx b/web/packages/design/src/assets/images/Assets.story.tsx index 3af7d4e6a8a5b..937301ba752a5 100644 --- a/web/packages/design/src/assets/images/Assets.story.tsx +++ b/web/packages/design/src/assets/images/Assets.story.tsx @@ -22,8 +22,7 @@ import kubeLogo from "design/assets/images/kube-logo.svg"; import sampleLogoLong from "design/assets/images/sample-logo-long.svg"; import sampleLogoSquire from "design/assets/images/sample-logo-squire.svg"; import secKeyGraphic from "design/assets/images/sec-key-graphic.svg"; -import teleportLogo from "design/assets/images/teleport-logo.svg"; -import teleportMedallion from "design/assets/images/teleport-medallion.svg"; +import teleportLogo from "design/assets/images/enterprise-light.svg"; import {TeleportLogoII} from "design/assets/images/TeleportLogoII"; import cloudCity from "design/assets/images/backgrounds/cloud-city.png" @@ -48,7 +47,6 @@ export const ImageSVG = () => ( - ); diff --git a/web/packages/design/src/assets/images/enterprise-dark.svg b/web/packages/design/src/assets/images/enterprise-dark.svg new file mode 100644 index 0000000000000..672f87a7e5f51 --- /dev/null +++ b/web/packages/design/src/assets/images/enterprise-dark.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/web/packages/design/src/assets/images/enterprise-light.svg b/web/packages/design/src/assets/images/enterprise-light.svg new file mode 100644 index 0000000000000..6b2c1b9de133f --- /dev/null +++ b/web/packages/design/src/assets/images/enterprise-light.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/web/packages/design/src/assets/images/teleport-logo.svg b/web/packages/design/src/assets/images/teleport-logo.svg deleted file mode 100644 index c6f480018efee..0000000000000 --- a/web/packages/design/src/assets/images/teleport-logo.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - gravity/logo/teleport - with text - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/web/packages/design/src/assets/images/teleport-medallion.svg b/web/packages/design/src/assets/images/teleport-medallion.svg deleted file mode 100644 index 045f91fb9f9a4..0000000000000 --- a/web/packages/design/src/assets/images/teleport-medallion.svg +++ /dev/null @@ -1,74 +0,0 @@ - - - - teleport medallion - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/web/packages/teleport/index.html b/web/packages/teleport/index.html index 192d614ccc2bb..f6c081bbe15bc 100644 --- a/web/packages/teleport/index.html +++ b/web/packages/teleport/index.html @@ -8,7 +8,18 @@ - + + diff --git a/web/packages/teleport/public/app/favicon-dark.png b/web/packages/teleport/public/app/favicon-dark.png new file mode 100644 index 0000000000000..c252b2b9994c9 Binary files /dev/null and b/web/packages/teleport/public/app/favicon-dark.png differ diff --git a/web/packages/teleport/public/app/favicon-light.png b/web/packages/teleport/public/app/favicon-light.png new file mode 100644 index 0000000000000..29f34f2ed1e85 Binary files /dev/null and b/web/packages/teleport/public/app/favicon-light.png differ diff --git a/web/packages/teleport/public/app/favicon.ico b/web/packages/teleport/public/app/favicon.ico deleted file mode 100644 index 909c94fcbbe10..0000000000000 Binary files a/web/packages/teleport/public/app/favicon.ico and /dev/null differ diff --git a/web/packages/teleport/src/Assist/Settings/DisplaySettings.tsx b/web/packages/teleport/src/Assist/Settings/DisplaySettings.tsx index 26dd9a4b1f066..3c4bc02f03bdc 100644 --- a/web/packages/teleport/src/Assist/Settings/DisplaySettings.tsx +++ b/web/packages/teleport/src/Assist/Settings/DisplaySettings.tsx @@ -17,8 +17,9 @@ import React from 'react'; import styled from 'styled-components'; -import logoLight from 'teleport/Navigation/logoLight.svg'; -import logoDark from 'teleport/Navigation/logoDark.svg'; +import logoDark from 'design/assets/images/enterprise-dark.svg'; +import logoLight from 'design/assets/images/enterprise-light.svg'; + import { ViewMode } from 'teleport/Assist/types'; import { Description, Title } from 'teleport/Assist/Settings/shared'; diff --git a/web/packages/teleport/src/Discover/Desktop/ConnectTeleport/StartTeleport.tsx b/web/packages/teleport/src/Discover/Desktop/ConnectTeleport/StartTeleport.tsx index 0a204d4977efc..c5526314a95be 100644 --- a/web/packages/teleport/src/Discover/Desktop/ConnectTeleport/StartTeleport.tsx +++ b/web/packages/teleport/src/Discover/Desktop/ConnectTeleport/StartTeleport.tsx @@ -15,10 +15,6 @@ */ import React from 'react'; -import styled from 'styled-components'; - -import logoSrc from 'design/assets/images/teleport-medallion.svg'; - import { Box, Text } from 'design'; import { ButtonPrimary } from 'design/Button'; @@ -34,6 +30,7 @@ import { usePingTeleport } from 'teleport/Discover/Shared/PingTeleportContext'; import { HintBox } from 'teleport/Discover/Shared/HintBox'; import { Mark, ResourceKind, useShowHint } from 'teleport/Discover/Shared'; import { useJoinTokenSuspender } from 'teleport/Discover/Shared/useJoinTokenSuspender'; +import LogoHero from 'teleport/components/LogoHero'; interface StartTeleportProps { onNext: () => void; @@ -48,7 +45,7 @@ function StepWrapper(props: StepWrapperProps) { - + 4. Start Teleport @@ -123,12 +120,3 @@ export function StartTeleport( ); } - -const TeleportIcon = styled.div` - width: 30px; - height: 30px; - background: url(${logoSrc}) no-repeat; - background-size: contain; - top: 1px; - position: relative; -`; diff --git a/web/packages/teleport/src/Login/Login.tsx b/web/packages/teleport/src/Login/Login.tsx index e4df4e9212564..1e57d7fea2752 100644 --- a/web/packages/teleport/src/Login/Login.tsx +++ b/web/packages/teleport/src/Login/Login.tsx @@ -16,10 +16,8 @@ limitations under the License. import React from 'react'; -import logoSrc from 'design/assets/images/teleport-medallion.svg'; - import FormLogin from 'teleport/components/FormLogin'; -import Logo from 'teleport/components/LogoHero'; +import LogoHero from 'teleport/components/LogoHero'; import useLogin, { State } from './useLogin'; import Motd from './Motd'; @@ -54,7 +52,7 @@ export function Login({ } return ( <> - + {showMotd ? ( ) : ( diff --git a/web/packages/teleport/src/Navigation/Navigation.tsx b/web/packages/teleport/src/Navigation/Navigation.tsx index a35139f7fcec0..8a02a76eef910 100644 --- a/web/packages/teleport/src/Navigation/Navigation.tsx +++ b/web/packages/teleport/src/Navigation/Navigation.tsx @@ -15,12 +15,13 @@ limitations under the License. */ import React, { useCallback, useEffect, useState } from 'react'; -import styled, { useTheme } from 'styled-components'; +import styled from 'styled-components'; import { matchPath, useHistory, useLocation } from 'react-router'; import { Image } from 'design'; import { NavigationSwitcher } from 'teleport/Navigation/NavigationSwitcher'; import cfg from 'teleport/config'; +import LogoHero from 'teleport/components/LogoHero'; import { NAVIGATION_CATEGORIES, NavigationCategory, @@ -31,8 +32,6 @@ import { NotificationKind } from 'teleport/stores/storeNotifications'; import { useTeleport } from '..'; -import logoLight from './logoLight.svg'; -import logoDark from './logoDark.svg'; import logoPoweredBy from './logoPoweredBy.svg'; import type * as history from 'history'; @@ -189,7 +188,17 @@ export function Navigation({ return ( - {CustomLogo ? : } + {CustomLogo ? ( + + ) : ( + + )} {ctx.getFeatureFlags().managementSection && ( { - const theme = useTheme(); - - return ( - teleport logo - ); -}; - const PoweredByLogo = () => { return ( - - diff --git a/web/packages/teleport/src/Navigation/logoLight.svg b/web/packages/teleport/src/Navigation/logoLight.svg deleted file mode 100644 index 70dac68db813b..0000000000000 --- a/web/packages/teleport/src/Navigation/logoLight.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/packages/teleport/src/components/LogoHero/LogoHero.jsx b/web/packages/teleport/src/components/LogoHero/LogoHero.jsx index 5356a3eb56314..9544a452042c9 100644 --- a/web/packages/teleport/src/components/LogoHero/LogoHero.jsx +++ b/web/packages/teleport/src/components/LogoHero/LogoHero.jsx @@ -17,9 +17,8 @@ limitations under the License. import React from 'react'; import { useTheme } from 'styled-components'; import Image from 'design/Image'; - -import LogoHeroLight from './LogoHeroLight.svg'; -import LogoHeroDark from './LogoHeroDark.svg'; +import LogoHeroLight from 'design/assets/images/enterprise-light.svg'; +import LogoHeroDark from 'design/assets/images/enterprise-dark.svg'; const LogoHero = ({ ...rest }) => { const theme = useTheme(); diff --git a/web/packages/teleport/webpack.dev.config.js b/web/packages/teleport/webpack.dev.config.js index 267709805099a..17b8e43e538d4 100644 --- a/web/packages/teleport/webpack.dev.config.js +++ b/web/packages/teleport/webpack.dev.config.js @@ -11,7 +11,7 @@ module.exports = { plugins: [ ...defaultDevConfig.plugins, configFactory.plugins.indexHtml({ - favicon: path.join(__dirname, '/src/favicon.ico'), + favicon: path.join(__dirname, '/src/favicon-light.png'), }), ], }; diff --git a/web/packages/teleport/webpack.prod.config.js b/web/packages/teleport/webpack.prod.config.js index 46aeb2a7d0afe..346dc67c3df9b 100644 --- a/web/packages/teleport/webpack.prod.config.js +++ b/web/packages/teleport/webpack.prod.config.js @@ -17,7 +17,7 @@ module.exports = { ...defaultProdConfig.plugins, new CleanWebpackPlugin(), configFactory.plugins.indexHtml({ - favicon: path.join(__dirname, '/src/favicon.ico'), + favicon: path.join(__dirname, '/src/favicon-light.png'), }), ], };