Web: Add outline-info Alert.tsx + move navigation code for general use

web/packages/design/src/Alert/Alert.jsx

@@ -21,6 +21,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
 import { space, color, width } from 'design/system';
+import { fade } from 'design/theme/utils/colorManipulator';
 
 const kind = props => {
   const { kind, theme } = props;
@@ -45,6 +46,14 @@ const kind = props => {
         background: theme.colors.success.main,
         color: theme.colors.text.primaryInverse,
       };
+    case 'outline-info':
+      return {
+        background: fade(theme.colors.link, 0.1),
+        border: `${theme.radii[1]}px solid ${theme.colors.link}`,
+        borderRadius: `${theme.radii[3]}px`,
+        boxShadow: 'none',
+        justifyContent: 'normal',
+      };
     default:
       return {
         background: theme.colors.error.main,
@@ -57,7 +66,7 @@ const Alert = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 2px;
+  border-radius: ${p => p.theme.radii[1]}px;
   box-sizing: border-box;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
   margin: 0 0 24px 0;
@@ -76,7 +85,13 @@ const Alert = styled.div`
 `;
 
 Alert.propTypes = {
-  kind: PropTypes.oneOf(['danger', 'info', 'warning', 'success']),
+  kind: PropTypes.oneOf([
+    'danger',
+    'info',
+    'warning',
+    'success',
+    'outline-info',
+  ]),
   ...color.propTypes,
   ...space.propTypes,
   ...width.propTypes,
@@ -93,3 +108,4 @@ export const Danger = props => <Alert kind="danger" {...props} />;
 export const Info = props => <Alert kind="info" {...props} />;
 export const Warning = props => <Alert kind="warning" {...props} />;
 export const Success = props => <Alert kind="success" {...props} />;
+export const OutlineInfo = props => <Alert kind="outline-info" {...props} />;

web/packages/design/src/Alert/Alert.story.js

@@ -32,5 +32,6 @@ export const Alerts = () => (
     <Alert kind="warning">Some warning message</Alert>
     <Alert kind="info">Some informational message</Alert>
     <Alert kind="success">This is success</Alert>
+    <Alert kind="outline-info">Text align it yourself</Alert>
   </Box>
 );

web/packages/teleport/src/Discover/Discover.tsx

@@ -21,16 +21,16 @@ import React from 'react';
 import { Prompt } from 'react-router-dom';
 import { Box } from 'design';
 
+import { Navigation } from 'teleport/components/Wizard/Navigation';
 import { FeatureBox } from 'teleport/components/Layout';
-
-import { Navigation } from 'teleport/Discover/Navigation/Navigation';
 import { SelectResource } from 'teleport/Discover/SelectResource/SelectResource';
 import cfg from 'teleport/config';
+import { findViewAtIndex } from 'teleport/components/Wizard/flow';
 
 import { EViewConfigs } from './types';
-import { findViewAtIndex } from './flow';
 
 import { DiscoverProvider, useDiscover } from './useDiscover';
+import { DiscoverIcon } from './SelectResource/icons';
 
 function DiscoverContent() {
   const {
@@ -63,11 +63,16 @@ function DiscoverContent() {
     <>
       <FeatureBox>
         {hasSelectedResource && (
-          <Navigation
-            currentStep={currentStep}
-            views={indexedViews}
-            selectedResource={agentProps.resourceSpec}
-          />
+          <Box mt={2} mb={7}>
+            <Navigation
+              currentStep={currentStep}
+              views={indexedViews}
+              startWithIcon={{
+                title: agentProps.resourceSpec.name,
+                component: <DiscoverIcon name={agentProps.resourceSpec.icon} />,
+              }}
+            />
+          </Box>
         )}
         <Box>{content}</Box>
       </FeatureBox>