-
You are about to delete a request from
admin
for the following roles:
-
+
dba
@@ -1391,14 +1398,14 @@ exports[`processing state 1`] = `
class="c7"
>
Sam
@@ -598,15 +604,15 @@ exports[`loaded approved role based request state 1`] = `
class="c0"
>
alice
@@ -641,39 +647,39 @@ exports[`loaded approved role based request state 1`] = `
Approving for developer role not admin. Admins access is not needed for this request.
test-long-user-name@testing.com
@@ -711,23 +717,23 @@ exports[`loaded approved role based request state 1`] = `
DENIED
-
- Sam
-
-
- is requesting roles:
-
-
- admin
+ Sam
- ruhh
+ is requesting roles:
+
+
+
+ for
+ 4 days
+ , starting
+ 12/02/2020 at 12:00AM
-
- for
- 4 days
- , starting
- 12/02/2020 at 12:00AM
-
-
+
Sam
@@ -1322,25 +1334,25 @@ exports[`loaded denied role based request state 1`] = `
Some short request reason
@@ -1349,15 +1361,15 @@ exports[`loaded denied role based request state 1`] = `
class="c0"
>
alice
@@ -1392,25 +1404,25 @@ exports[`loaded denied role based request state 1`] = `
Not today
@@ -1420,16 +1432,16 @@ exports[`loaded denied role based request state 1`] = `
PENDING
-
- Sam
-
-
- is requesting roles:
-
-
+
+ Sam
+
- admin
+ is requesting roles:
+
+
+
+ for
+ 1 day
+ , starting
+ 12/05/2020 at 12:00AM
-
- for
- 1 day
- , starting
- 12/05/2020 at 12:00AM
-
-
+
Request expires in
2 hours
@@ -2155,7 +2175,7 @@ exports[`loaded pending role based request state 1`] = `
Sam
@@ -2169,19 +2189,19 @@ exports[`loaded pending role based request state 1`] = `
-
Sam
-
+
1 minute ago
@@ -2197,14 +2217,14 @@ exports[`loaded pending role based request state 1`] = `
style="position: relative;"
>
-
loggedInUsername
- add a review
-
+
Thresholds:
@@ -2381,7 +2401,7 @@ exports[`loaded pending search based request state 1`] = `
border-top-right-radius: 4px;
}
-.c13 {
+.c14 {
box-sizing: border-box;
flex: 1;
}
@@ -2400,14 +2420,14 @@ exports[`loaded pending search based request state 1`] = `
border-radius: 50%;
}
-.c24 {
+.c25 {
box-sizing: border-box;
margin-top: 16px;
border: 1px solid;
border-color: #0C143D;
}
-.c25 {
+.c26 {
box-sizing: border-box;
padding-top: 4px;
padding-bottom: 4px;
@@ -2462,7 +2482,7 @@ exports[`loaded pending search based request state 1`] = `
border-bottom: 1px solid;
}
-.c53 {
+.c52 {
box-sizing: border-box;
padding-left: 16px;
padding-right: 16px;
@@ -2474,7 +2494,7 @@ exports[`loaded pending search based request state 1`] = `
border-radius: 2px;
}
-.c58 {
+.c57 {
box-sizing: border-box;
margin-top: 16px;
margin-left: 4px;
@@ -2612,7 +2632,7 @@ exports[`loaded pending search based request state 1`] = `
color: rgba(255, 255, 255, 0.54);
}
-.c11 {
+.c12 {
box-sizing: border-box;
border-radius: 10px;
display: inline-block;
@@ -2633,6 +2653,10 @@ exports[`loaded pending search based request state 1`] = `
font-size: 12px;
width: 100%;
margin-bottom: 4px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
margin-bottom: 0;
}
@@ -2657,7 +2681,7 @@ exports[`loaded pending search based request state 1`] = `
color: #000000;
}
-.c57 {
+.c56 {
box-sizing: border-box;
border-radius: 100px;
display: inline-flex;
@@ -2675,105 +2699,110 @@ exports[`loaded pending search based request state 1`] = `
width: 10px;
}
-.c9 {
+.c8 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
font-weight: 600;
- font-size: 12px;
- line-height: 16px;
- margin-right: 4px;
+ font-size: 14px;
+ line-height: 20px;
}
.c10 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
- font-weight: 400;
- font-size: 12px;
- line-height: 16px;
- margin-right: 8px;
+ font-weight: 600;
+ margin-right: 4px;
}
-.c12 {
+.c11 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
- font-weight: 400;
font-size: 12px;
- line-height: 16px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
+ margin-right: 8px;
}
-.c15 {
+.c13 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
- font-size: 10px;
- margin-left: 4px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
}
-.c27 {
+.c16 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
- font-weight: 600;
- font-size: 12px;
+ font-size: 10px;
+ font-weight: 400;
line-height: 16px;
- margin-right: 8px;
+ letter-spacing: 0.013px;
+ margin-left: 4px;
}
-.c28 {
+.c24 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
+ font-size: 14px;
font-weight: 300;
- font-size: 12px;
line-height: 24px;
+ letter-spacing: 0.035px;
}
-.c35 {
+.c28 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
font-weight: 600;
font-size: 14px;
- line-height: 24px;
- margin-right: 16px;
+ line-height: 20px;
+ margin-right: 8px;
}
-.c43 {
+.c35 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 20px;
+ margin-right: 16px;
}
-.c52 {
+.c43 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
- font-weight: 600;
- font-size: 14px;
- line-height: 24px;
- margin-right: 8px;
}
-.c56 {
+.c55 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
- font-weight: 600;
font-size: 12px;
- line-height: 16px;
+ font-weight: 600;
+ line-height: 20px;
+ letter-spacing: 0.015px;
margin-right: 16px;
}
-.c59 {
+.c58 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
- font-weight: 400;
font-size: 12px;
- line-height: 16px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
color: rgba(255, 255, 255, 0.72);
}
@@ -2786,21 +2815,21 @@ exports[`loaded pending search based request state 1`] = `
align-items: center;
}
-.c8 {
+.c9 {
display: flex;
- align-items: center;
+ align-items: baseline;
flex-wrap: wrap;
}
-.c14 {
+.c15 {
display: flex;
- align-items: center;
+ align-items: baseline;
justify-content: flex-end;
flex-wrap: wrap-reverse;
gap: 8px;
}
-.c26 {
+.c27 {
display: flex;
align-items: baseline;
}
@@ -2811,7 +2840,7 @@ exports[`loaded pending search based request state 1`] = `
gap: 8px;
}
-.c54 {
+.c53 {
display: flex;
align-items: center;
justify-content: space-between;
@@ -2898,6 +2927,7 @@ exports[`loaded pending search based request state 1`] = `
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
+ line-height: 20px;
line-height: 24px;
cursor: pointer;
padding-bottom: 0;
@@ -3001,12 +3031,8 @@ exports[`loaded pending search based request state 1`] = `
border-bottom-right-radius: 16px;
}
-.c16 {
- font-style: italic;
-}
-
.c17 {
- line-height: normal;
+ font-style: italic;
}
.c3 {
@@ -3021,7 +3047,7 @@ exports[`loaded pending search based request state 1`] = `
margin: 0 auto;
}
-.c55 {
+.c54 {
background: rgba(255,255,255,0.07);
}
@@ -3053,48 +3079,51 @@ exports[`loaded pending search based request state 1`] = `
>
PENDING
-
- Sam
-
-
- is requesting roles:
-
-
+
+ Sam
+
- test
+ is requesting roles:
+
+
+
+ for
+ 2 days
+ , starting
+ 12/04/2020 at 12:00AM
-
- for
- 2 days
- , starting
- 12/04/2020 at 12:00AM
-
-
+
Request expires in
1 hour
@@ -3145,7 +3174,7 @@ exports[`loaded pending search based request state 1`] = `
Sam
@@ -3159,19 +3188,19 @@ exports[`loaded pending search based request state 1`] = `
-
Sam
-
+
1 minute ago
@@ -3293,14 +3322,14 @@ exports[`loaded pending search based request state 1`] = `
style="position: relative;"
>
-
loggedInUsername
- add a review
-
+
Thresholds:
diff --git a/web/packages/shared/components/AdvancedSearchToggle/AdvancedSearchToggle.tsx b/web/packages/shared/components/AdvancedSearchToggle/AdvancedSearchToggle.tsx
index 695840a39a4c5..6800783daba6a 100644
--- a/web/packages/shared/components/AdvancedSearchToggle/AdvancedSearchToggle.tsx
+++ b/web/packages/shared/components/AdvancedSearchToggle/AdvancedSearchToggle.tsx
@@ -20,6 +20,8 @@ import React from 'react';
import { Text, Toggle, Link, Flex, H2 } from 'design';
+import { P } from 'design/Text/Text';
+
import { ToolTipInfo } from 'shared/components/ToolTip';
const GUIDE_URL =
@@ -41,7 +43,7 @@ export function AdvancedSearchToggle(props: {
className={props.className}
>
-
Advanced
+
Advanced
@@ -52,7 +54,7 @@ export function AdvancedSearchToggle(props: {
function PredicateDocumentation() {
return (
<>
-
+
Advanced search allows you to perform more sophisticated searches using
the predicate language. The language supports the basic operators:{' '}
@@ -70,33 +72,33 @@ function PredicateDocumentation() {
||
-
-
- Usage Examples
-
-
+
+ Usage Examples
+
Label Matching:{' '}
labels["key"] == "value" && labels["key2"] != "value2"
{' '}
-
-
+
{' '}
+
+
Fuzzy Searching:{' '}
search("foo", "bar", "some phrase")
-
+
+
Combination:{' '}
labels["key1"] == "value1" && search("foo")
-
-
+
+
Check out our{' '}
predicate language guide
{' '}
for a more in-depth explanation of the language.
-
+
>
);
}
diff --git a/web/packages/shared/components/AwsLaunchButton/AwsLaunchButton.tsx b/web/packages/shared/components/AwsLaunchButton/AwsLaunchButton.tsx
index 864af1f5bd906..3fd51c5b1fe53 100644
--- a/web/packages/shared/components/AwsLaunchButton/AwsLaunchButton.tsx
+++ b/web/packages/shared/components/AwsLaunchButton/AwsLaunchButton.tsx
@@ -141,7 +141,7 @@ function RoleItemList({
props.theme.colors.text.main};
background: ${props => props.theme.colors.spotBackground[2]};
diff --git a/web/packages/shared/components/FieldCheckbox/FieldCheckbox.tsx b/web/packages/shared/components/FieldCheckbox/FieldCheckbox.tsx
index 9d50851841952..55646dcdd55be 100644
--- a/web/packages/shared/components/FieldCheckbox/FieldCheckbox.tsx
+++ b/web/packages/shared/components/FieldCheckbox/FieldCheckbox.tsx
@@ -54,8 +54,8 @@ export const FieldCheckbox = forwardRef(
) => {
const labelColor = disabled ? 'text.disabled' : 'text.main';
const helperColor = disabled ? 'text.disabled' : 'text.slightlyMuted';
- const labelTypography = size === 'small' ? 'newBody2' : 'newBody1';
- const helperTypography = size === 'small' ? 'newBody3' : 'newBody2';
+ const labelTypography = size === 'small' ? 'body2' : 'body1';
+ const helperTypography = size === 'small' ? 'body3' : 'body2';
return (
diff --git a/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap b/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
index 0a73f5ded87e6..52eccd987d6ac 100644
--- a/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
+++ b/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`snapshot tests 1`] = `
display: block;
height: 40px;
font-size: 16px;
+ font-weight: 300;
padding: 0 16px;
outline: none;
width: 100%;
@@ -65,6 +66,10 @@ exports[`snapshot tests 1`] = `
font-size: 12px;
width: 100%;
margin-bottom: 4px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
margin-bottom: 0;
}
diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/FileList/FileListItem.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/FileList/FileListItem.tsx
index a53a42a884e3f..f55a27612a0bd 100644
--- a/web/packages/shared/components/FileTransfer/FileTransferStateless/FileList/FileListItem.tsx
+++ b/web/packages/shared/components/FileTransfer/FileTransferStateless/FileList/FileListItem.tsx
@@ -40,7 +40,7 @@ export function FileListItem(props: FileListItemProps) {
= props => {
return (
-
+
{props.children}
diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/FileTransferStateless.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/FileTransferStateless.tsx
index f0ebfd507e2e0..a67f6ac03de16 100644
--- a/web/packages/shared/components/FileTransfer/FileTransferStateless/FileTransferStateless.tsx
+++ b/web/packages/shared/components/FileTransfer/FileTransferStateless/FileTransferStateless.tsx
@@ -74,7 +74,8 @@ export function FileTransferStateless(props: FileTransferStatelessProps) {
{items.Form}
-
+ {/* TODO(bl-nero): This should be a part of the new input design (in the helper text line). */}
+
{props.errorText}
diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
index 75059d80b2343..46eee6163ccc6 100644
--- a/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
+++ b/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
@@ -111,8 +111,10 @@ export function UploadForm(props: UploadFormProps) {
}}
>
- Drag your files here
-
+
+ Drag your files here
+
+
or Browse your computer to start uploading
diff --git a/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap b/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
index b4bfa9d0349ce..ec0fd0edaa5b8 100644
--- a/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
+++ b/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
@@ -98,6 +98,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
display: block;
height: 40px;
font-size: 16px;
+ font-weight: 300;
padding: 0 16px;
outline: none;
width: 100%;
@@ -136,6 +137,10 @@ exports[`auth2faType "on" should render form with hardware key as first option i
font-size: 12px;
width: 100%;
margin-bottom: 4px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
margin-bottom: 0;
}
@@ -145,6 +150,10 @@ exports[`auth2faType "on" should render form with hardware key as first option i
font-size: 12px;
width: 100%;
margin-bottom: 4px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
}
.c3 {
@@ -559,6 +568,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
display: block;
height: 40px;
font-size: 16px;
+ font-weight: 300;
padding: 0 16px;
outline: none;
width: 100%;
@@ -597,6 +607,10 @@ exports[`auth2faType "optional" should render form with hardware key as first op
font-size: 12px;
width: 100%;
margin-bottom: 4px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
margin-bottom: 0;
}
@@ -606,6 +620,10 @@ exports[`auth2faType "optional" should render form with hardware key as first op
font-size: 12px;
width: 100%;
margin-bottom: 4px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
}
.c3 {
diff --git a/web/packages/shared/components/Notification/Notification.tsx b/web/packages/shared/components/Notification/Notification.tsx
index fe0da9e53eac5..773a3d15848e9 100644
--- a/web/packages/shared/components/Notification/Notification.tsx
+++ b/web/packages/shared/components/Notification/Notification.tsx
@@ -131,7 +131,7 @@ function getRenderedContent(
if (typeof content === 'string') {
return (
-
+
{content}
{removeIcon}
diff --git a/web/packages/shared/components/ToolTip/HoverTooltip.tsx b/web/packages/shared/components/ToolTip/HoverTooltip.tsx
index 21c80025d96a7..58b1604cf7351 100644
--- a/web/packages/shared/components/ToolTip/HoverTooltip.tsx
+++ b/web/packages/shared/components/ToolTip/HoverTooltip.tsx
@@ -96,7 +96,7 @@ export const HoverTooltip: React.FC<
px={2}
py={1}
fontWeight="regular"
- typography="subtitle2"
+ typography="body2"
css={`
word-wrap: break-word;
`}
diff --git a/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx b/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx
index 4d640a059b91e..8268c8b71d599 100644
--- a/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx
+++ b/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx
@@ -216,9 +216,7 @@ export function ResourceCard({
-
- {name}
-
+ {name}
{hovered && }
@@ -230,14 +228,14 @@ export function ResourceCard({
{primaryDesc && (
-
+
{primaryDesc}
)}
{secondaryDesc && (
-
+
{secondaryDesc}
diff --git a/web/packages/teleport/src/AccessRequests/LockedAccessRequests/LockedAccessRequests.tsx b/web/packages/teleport/src/AccessRequests/LockedAccessRequests/LockedAccessRequests.tsx
index 4ae34ae2a95e5..741f3ee5de5b3 100644
--- a/web/packages/teleport/src/AccessRequests/LockedAccessRequests/LockedAccessRequests.tsx
+++ b/web/packages/teleport/src/AccessRequests/LockedAccessRequests/LockedAccessRequests.tsx
@@ -18,7 +18,7 @@
import React from 'react';
import styled from 'styled-components';
-import { Box, Card, Flex, H2, Image, Link, Text } from 'design';
+import { Box, Card, Flex, H2, Image, Link, Subtitle2, Text } from 'design';
import {
FeatureBox,
@@ -55,9 +55,9 @@ export function LockedAccessRequests() {
flexDirection="column"
width="auto"
>
-
+
Access Requests Flow
-
+
To learn more about access requests, take a look at
Teleport Documentation.
-
+
-
@@ -333,7 +334,7 @@ exports[`locked 1`] = `
>
Access Requests Flow
-
To learn more about access requests, take a look at
@@ -346,8 +347,8 @@ exports[`locked 1`] = `
>
Teleport Documentation.
-
-
+
+
Passwordless sign-in using Passkeys
-
Passkeys are a password replacement that validates your identity using
touch, facial recognition, a device password, or a PIN.
-
+
{fetchDevicesAttempt.status === 'processing' && (
// This trick allows us to maintain center alignment of the button
diff --git a/web/packages/teleport/src/Account/Header.tsx b/web/packages/teleport/src/Account/Header.tsx
index 645bb0da51bc0..d41306eaf968b 100644
--- a/web/packages/teleport/src/Account/Header.tsx
+++ b/web/packages/teleport/src/Account/Header.tsx
@@ -23,7 +23,7 @@ import {
Flex,
H2,
Indicator,
- Text,
+ Subtitle2,
} from 'design';
import React from 'react';
import styled, { useTheme, css } from 'styled-components';
@@ -58,9 +58,9 @@ export function Header({
{title}
-
+
{description}
-
+
{/* Indicator is always in the layout so that the description text doesn't
reflow if visibility changes. */}
diff --git a/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx b/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx
index da677293058c4..5676ca343d7b6 100644
--- a/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx
+++ b/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx
@@ -24,7 +24,6 @@ import Image from 'design/Image';
import Indicator from 'design/Indicator';
import { RadioGroup } from 'design/RadioGroup';
import { StepComponentProps, StepSlider } from 'design/StepSlider';
-import Text from 'design/Text';
import React, { useState, useEffect, FormEvent } from 'react';
import FieldInput from 'shared/components/FieldInput';
import Validation, { Validator } from 'shared/components/Validation';
@@ -38,6 +37,8 @@ import Box from 'design/Box';
import { StepHeader } from 'design/StepSlider';
+import { P } from 'design/Text/Text';
+
import auth from 'teleport/services/auth/auth';
import { DeviceUsage } from 'teleport/services/auth';
import useTeleport from 'teleport/useTeleport';
@@ -297,9 +298,9 @@ function QrCodeBox({ privilegeToken }: { privilegeToken: string }) {
/>
)}
-
+
Scan the QR Code with any authenticator app.
-
+
);
}
diff --git a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
index a52707a246350..8aca2cdc95632 100644
--- a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
+++ b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
@@ -168,11 +168,11 @@ exports[`list of all events 1`] = `
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
- font-weight: 400;
font-size: 12px;
- line-height: 16px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
margin-right: 4px;
- font-weight: 500;
}
.c7 {
@@ -229,6 +229,7 @@ exports[`list of all events 1`] = `
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
+ line-height: 20px;
line-height: 24px;
cursor: pointer;
padding-bottom: 0;
@@ -410,8 +411,7 @@ exports[`list of all events 1`] = `
>
Showing
@@ -13381,8 +13381,7 @@ exports[`list of all events 1`] = `
>
Showing
@@ -13795,6 +13794,7 @@ exports[`loaded audit log screen 1`] = `
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
+ line-height: 20px;
line-height: 24px;
cursor: pointer;
padding-bottom: 0;
diff --git a/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx b/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx
index 42a1663449db5..568678cb6bc3f 100644
--- a/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx
+++ b/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx
@@ -17,7 +17,9 @@
*/
import React from 'react';
-import { Alert, Box, Flex, Indicator, Link, Text } from 'design';
+import { Alert, Box, Flex, H3, Indicator, Link } from 'design';
+
+import { P } from 'design/Text/Text';
import { FeatureBox, FeatureHeaderTitle } from 'teleport/components/Layout';
import ResourceEditor from 'teleport/components/ResourceEditor';
@@ -63,9 +65,7 @@ export function AuthConnectors(props: State) {
Auth Connectors
-
- {description}
-
+ {description}
resources.create('github')}>
New GitHub Connector
@@ -90,13 +90,9 @@ export function AuthConnectors(props: State) {
onDelete={resources.remove}
/>
-
- Auth Connectors
-
-
- {description}
-
-
+ Auth Connectors
+ {description}
+
Please{' '}
{' '}
on how to configure a GitHub connector.
-
+
>
diff --git a/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx b/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx
index 22044ede0f03f..c632835672923 100644
--- a/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx
+++ b/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx
@@ -71,7 +71,7 @@ function ConnectorListItem({ name, id, onEdit, onDelete }) {
-
+
{name}
diff --git a/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx b/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx
index 3dacfabe6d9b6..477d1e4a4fa00 100644
--- a/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx
+++ b/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx
@@ -18,7 +18,7 @@
import React from 'react';
import useAttempt from 'shared/hooks/useAttemptNext';
-import { ButtonWarning, ButtonSecondary, Text, Alert } from 'design';
+import { ButtonWarning, ButtonSecondary, Text, Alert, P1 } from 'design';
import Dialog, {
DialogContent,
DialogFooter,
@@ -49,13 +49,13 @@ export default function DeleteConnectorDialog(props: Props) {
{attempt.status === 'failed' && }
-
+
Are you sure you want to delete connector{' '}
{name}
?
-
+
diff --git a/web/packages/teleport/src/AuthConnectors/styles/AuthConnectors.styles.ts b/web/packages/teleport/src/AuthConnectors/styles/AuthConnectors.styles.ts
index 94e79806bf287..343da9e58d440 100644
--- a/web/packages/teleport/src/AuthConnectors/styles/AuthConnectors.styles.ts
+++ b/web/packages/teleport/src/AuthConnectors/styles/AuthConnectors.styles.ts
@@ -17,7 +17,7 @@
*/
import styled from 'styled-components';
-import { Box, ButtonPrimary, Text } from 'design';
+import { Box, ButtonPrimary, Subtitle1 } from 'design';
import { FeatureHeader } from 'teleport/components/Layout';
@@ -34,7 +34,7 @@ export const ResponsiveFeatureHeader = styled(FeatureHeader)`
}
`;
-export const MobileDescription = styled(Text)`
+export const MobileDescription = styled(Subtitle1)`
margin-bottom: ${p => p.theme.space[3]}px;
@media screen and (min-width: ${p => p.theme.breakpoints.tablet}px) {
display: none;
diff --git a/web/packages/teleport/src/Bots/Add/AddBotsPicker.tsx b/web/packages/teleport/src/Bots/Add/AddBotsPicker.tsx
index 2038965f417db..8a1ece089cab9 100644
--- a/web/packages/teleport/src/Bots/Add/AddBotsPicker.tsx
+++ b/web/packages/teleport/src/Bots/Add/AddBotsPicker.tsx
@@ -35,6 +35,8 @@ import {
} from 'design/SVGIcon';
import { Box, Flex, Link as ExternalLink, Text } from 'design';
+import { P } from 'design/Text/Text';
+
import cfg from 'teleport/config';
import {
@@ -146,10 +148,10 @@ export function AddBotsPicker() {
Select Bot Type
-
+
Set up Teleport Machine ID to allow CI/CD workflows and other machines
to access resources protected by Teleport.
-
+
>
diff --git a/web/packages/teleport/src/Bots/DeleteBot.tsx b/web/packages/teleport/src/Bots/DeleteBot.tsx
index f12a6ead41cd5..a73771397305e 100644
--- a/web/packages/teleport/src/Bots/DeleteBot.tsx
+++ b/web/packages/teleport/src/Bots/DeleteBot.tsx
@@ -17,7 +17,7 @@
*/
import React from 'react';
-import { Alert, ButtonSecondary, ButtonWarning, Text } from 'design';
+import { Alert, ButtonSecondary, ButtonWarning, P1, Text } from 'design';
import Dialog, {
DialogContent,
DialogFooter,
@@ -40,13 +40,13 @@ export function DeleteBot({
{attempt.status === 'failed' && }
-
+
Are you sure you want to delete Bot{' '}
{name}
{' '}
?
-
+
Showing
diff --git a/web/packages/teleport/src/Console/Tabs/Tabs.tsx b/web/packages/teleport/src/Console/Tabs/Tabs.tsx
index 531870d858881..485cf9dd43b5d 100644
--- a/web/packages/teleport/src/Console/Tabs/Tabs.tsx
+++ b/web/packages/teleport/src/Console/Tabs/Tabs.tsx
@@ -78,13 +78,7 @@ export function Tabs(props: Props & { parties: stores.Parties }) {
});
return (
-
+
{$items}
{$items.length > 0 && (
-
+
{warnings.length} {warnings.length > 1 ? 'Warnings' : 'Warning'}
-
+
diff --git a/web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx b/web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx
index f775103775c82..9882e15d94e2c 100644
--- a/web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx
+++ b/web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx
@@ -19,7 +19,7 @@
import React from 'react';
import styled from 'styled-components';
-import { Box, Text, Flex, Link } from 'design';
+import { Box, Flex, Link } from 'design';
import { IconCircle } from 'design/Icon/IconCircle';
@@ -29,6 +29,8 @@ import { LockIcon } from 'design/SVGIcon';
import Table, { Cell } from 'design/DataTable';
+import { P } from 'design/Text/Text';
+
import {
DeviceListProps,
TrustedDeviceOSType,
@@ -68,7 +70,7 @@ export function DeviceTrustLocked() {
-
+
Device Trust enables trusted and authenticated device access. When
resources are configured with the Device Trust mode “required”,
Teleport will authenticate the Trusted Device, in addition to
@@ -84,7 +86,7 @@ export function DeviceTrustLocked() {
Device Trust documentation
.
-
+
Unlock Device Trust with Teleport Enterprise
diff --git a/web/packages/teleport/src/Discover/AwsMangementConsole/CreateAppAccess/CreateAppAccess.tsx b/web/packages/teleport/src/Discover/AwsMangementConsole/CreateAppAccess/CreateAppAccess.tsx
index 522fd87a49a2b..672fdd9dd12ba 100644
--- a/web/packages/teleport/src/Discover/AwsMangementConsole/CreateAppAccess/CreateAppAccess.tsx
+++ b/web/packages/teleport/src/Discover/AwsMangementConsole/CreateAppAccess/CreateAppAccess.tsx
@@ -18,12 +18,14 @@
import React from 'react';
import styled from 'styled-components';
-import { Box, Text, Flex, Link, Mark } from 'design';
+import { Box, Flex, Link, Mark, H3 } from 'design';
import TextEditor from 'shared/components/TextEditor';
import { Danger } from 'design/Alert';
import { ToolTipInfo } from 'shared/components/ToolTip';
import { useAsync } from 'shared/hooks/useAsync';
+import { P } from 'design/Text/Text';
+
import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy';
import { useDiscover } from 'teleport/Discover/useDiscover';
import { integrationService } from 'teleport/services/integrations';
@@ -68,17 +70,17 @@ export function CreateAppAccess() {
return (
Enable Access to AWS with Teleport Application Access
-
+
An application will be created that will use the selected AWS OIDC
Integration {agentMeta.awsIntegration.name} for proxying
access to AWS Management Console, AWS CLI, and AWS APIs.
-
+
{attempt.status === 'error' && (
{attempt.statusText}
)}
- First configure your AWS IAM permissions
+ First configure your AWS IAM permissions
The following IAM permissions will be added as an inline policy
named {IAM_POLICY_NAME} to IAM role{' '}
@@ -94,7 +96,7 @@ export function CreateAppAccess() {
-
+
Run the command below on your{' '}
{' '}
to configure your IAM permissions.
-
+
diff --git a/web/packages/teleport/src/Discover/AwsMangementConsole/SetupAccess/SetupAccess.tsx b/web/packages/teleport/src/Discover/AwsMangementConsole/SetupAccess/SetupAccess.tsx
index 0308726d7ecb7..62b81ba28aaec 100644
--- a/web/packages/teleport/src/Discover/AwsMangementConsole/SetupAccess/SetupAccess.tsx
+++ b/web/packages/teleport/src/Discover/AwsMangementConsole/SetupAccess/SetupAccess.tsx
@@ -17,7 +17,7 @@
*/
import React, { useState, useEffect } from 'react';
-import { LabelInput, Text, Link, Mark } from 'design';
+import { LabelInput, Link, Mark } from 'design';
import { useTheme } from 'styled-components';
import { Cross } from 'design/Icon';
@@ -25,6 +25,8 @@ import { OutlineInfo } from 'design/Alert/Alert';
import { FieldSelectCreatable } from 'shared/components/FieldSelect';
import Validation, { Validator } from 'shared/components/Validation';
+import { P } from 'design/Text/Text';
+
import { Option } from 'teleport/Discover/Shared/SelectCreatable';
import { IAM_ROLE_ARN_REGEX } from 'teleport/services/integrations/aws';
import {
@@ -80,14 +82,14 @@ export function SetupAccess() {
const preContent = (
-
+
Only{' '}
IAM roles with tag
{' '}
key teleport.dev/integration and value true{' '}
are allowed to be used by the integration.
-
+
);
diff --git a/web/packages/teleport/src/Discover/AwsMangementConsole/TestConnection/TestConnection.tsx b/web/packages/teleport/src/Discover/AwsMangementConsole/TestConnection/TestConnection.tsx
index 14efaee51a710..32eb32e351979 100644
--- a/web/packages/teleport/src/Discover/AwsMangementConsole/TestConnection/TestConnection.tsx
+++ b/web/packages/teleport/src/Discover/AwsMangementConsole/TestConnection/TestConnection.tsx
@@ -17,11 +17,13 @@
*/
import React, { useState } from 'react';
-import { Text, Box, Link, Mark } from 'design';
+import { Box, Link, Mark, H3 } from 'design';
import Select from 'shared/components/Select';
import { OutlineInfo } from 'design/Alert/Alert';
import { TextSelectCopy } from 'shared/components/TextSelectCopy';
+import { P } from 'design/Text/Text';
+
import cfg from 'teleport/config';
import { generateTshLoginCommand, openNewTab } from 'teleport/lib/util';
import {
@@ -76,17 +78,13 @@ export function TestConnection() {
you just added.
-
- Access the AWS Management Console
-
-
- Select the AWS role ARN to test.
-
-
+ Access the AWS Management Console
+ Select the AWS role ARN to test.
+
AWS Management Console will launch in another tab. You should see your
Teleport user name as a federated login with the selected role in the
top-right corner of the AWS Console.
-
+
-
- Access the AWS CLI
-
-
- Log into your Teleport cluster
-
-
-
- Connect to your application
-
-
+ Access the AWS CLI
+ Log into your Teleport cluster:
+
+ Connect to your application:
+
-
+
If the connection can't be established, ensure the IAM role you are
trying to assume is{' '}
@@ -127,7 +119,7 @@ export function TestConnection() {
{' '}
with key teleport.dev/integration and value{' '}
true.
-
+
diff --git a/web/packages/teleport/src/Discover/ConnectMyComputer/SetupConnect/SetupConnect.tsx b/web/packages/teleport/src/Discover/ConnectMyComputer/SetupConnect/SetupConnect.tsx
index 8d1c2a911027f..6de079f10795b 100644
--- a/web/packages/teleport/src/Discover/ConnectMyComputer/SetupConnect/SetupConnect.tsx
+++ b/web/packages/teleport/src/Discover/ConnectMyComputer/SetupConnect/SetupConnect.tsx
@@ -21,7 +21,7 @@ import { Link } from 'react-router-dom';
import { ButtonSecondary } from 'design/Button';
import { getPlatform } from 'design/platform';
-import { Text, Flex } from 'design';
+import { Text, Flex, H3, Subtitle3 } from 'design';
import * as Icons from 'design/Icon';
import { makeDeepLinkWithSafeInput } from 'shared/deepLinks';
import * as connectMyComputer from 'shared/connectMyComputer';
@@ -30,6 +30,8 @@ import {
getConnectDownloadLinks,
} from 'shared/components/DownloadConnect/DownloadConnect';
+import { P } from 'design/Text/Text';
+
import cfg from 'teleport/config';
import useTeleport from 'teleport/useTeleport';
import { Node } from 'teleport/services/nodes';
@@ -124,10 +126,10 @@ export function SetupConnect(
// Override max-width to match StyledBox's max-width.
-
+
There are a couple of possible reasons for why we haven't been able
to detect your computer.
-
+
-
+
We'll continue to look for the computer whilst you diagnose the
issue.
-
+
);
@@ -196,33 +198,37 @@ export function SetupConnect(
- Step 1: Download and Install Teleport Connect
+
+ Step 1
+ Download and Install Teleport Connect
+
-
+
Teleport Connect is a native desktop application for browsing and
accessing your resources. It can also connect your computer to the
cluster as an SSH resource.
-
-
+
+
Once you’ve downloaded Teleport Connect, run the installer to add it
to your computer’s applications.
-
+
-
- Already have Teleport Connect? Skip to the next step.
-
+ Already have Teleport Connect? Skip to the next step.
- Step 2: Sign In and Connect My Computer
+
+ Step 2
+ Sign In and Connect My Computer
+
-
+
The button below will open Teleport Connect. Once you are logged in,
Teleport Connect will prompt you to connect your computer.
-
+
Sign In & Connect My Computer
diff --git a/web/packages/teleport/src/Discover/ConnectMyComputer/TestConnection/TestConnection.tsx b/web/packages/teleport/src/Discover/ConnectMyComputer/TestConnection/TestConnection.tsx
index c0bb48ea995ed..3c8084966bd5c 100644
--- a/web/packages/teleport/src/Discover/ConnectMyComputer/TestConnection/TestConnection.tsx
+++ b/web/packages/teleport/src/Discover/ConnectMyComputer/TestConnection/TestConnection.tsx
@@ -25,12 +25,16 @@ import {
LabelInput,
Indicator,
Link,
+ H3,
+ Subtitle3,
} from 'design';
import Select from 'shared/components/Select';
import { useAsync } from 'shared/hooks/useAsync';
import * as Icons from 'design/Icon';
import * as connectMyComputer from 'shared/connectMyComputer';
+import { P } from 'design/Text/Text';
+
import cfg from 'teleport/config';
import useTeleport from 'teleport/useTeleport';
import ReAuthenticate from 'teleport/components/ReAuthenticate';
@@ -194,11 +198,12 @@ export function TestConnection(props: AgentStepProps) {
buttonText="Refresh"
buttonOnClick={() => window.location.reload()}
>
- For Connect My Computer to work, the role{' '}
- {connectMyComputer.getRoleNameForUser(storeUser.getUsername())} must
- be assigned to you.
-
- {$restartSetupInstructions}
+
+ For Connect My Computer to work, the role{' '}
+ {connectMyComputer.getRoleNameForUser(storeUser.getUsername())}{' '}
+ must be assigned to you.
+
+ {$restartSetupInstructions}
) : (
(
-
- Step 1: Pick the OS user to test
-
+
+ Step 1
+ Pick the OS user to test
+
{props.children}
);
diff --git a/web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx b/web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx
index ac8486abd2f29..8fad2dc0ae062 100644
--- a/web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx
+++ b/web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx
@@ -24,6 +24,8 @@ import FieldInput from 'shared/components/FieldInput';
import { requiredField } from 'shared/components/Validation/rules';
import TextEditor from 'shared/components/TextEditor';
+import { P } from 'design/Text/Text';
+
import {
ActionButtons,
HeaderSubtitle,
@@ -102,12 +104,11 @@ export function CreateDatabaseView({
{!canCreateDatabase && (
-
- You don't have permission to register a database.
-
+ You don't have permission to register a database.
+
Please ask your Teleport administrator to update your role and
add the db rule:
-
+
@@ -113,9 +115,7 @@ export function CreateDatabaseDialog({
mb={0}
textAlign="center"
>
-
- Database Register
-
+ Database Register
{content}
diff --git a/web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/AutoDeploy.tsx b/web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/AutoDeploy.tsx
index 9c1a3db6b980e..bcd351cfedeaa 100644
--- a/web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/AutoDeploy.tsx
+++ b/web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/AutoDeploy.tsx
@@ -18,13 +18,15 @@
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
-import { Box, ButtonSecondary, Link, Text, Mark } from 'design';
+import { Box, ButtonSecondary, Link, Text, Mark, H3, Subtitle3 } from 'design';
import * as Icons from 'design/Icon';
import FieldInput from 'shared/components/FieldInput';
import Validation, { Validator } from 'shared/components/Validation';
import useAttempt from 'shared/hooks/useAttemptNext';
import { requiredIamRoleName } from 'shared/components/Validation/rules';
+import { P } from 'design/Text/Text';
+
import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy';
import { usePingTeleport } from 'teleport/Discover/Shared/PingTeleportContext';
import {
@@ -217,7 +219,10 @@ export function AutoDeploy({ toggleDeployMethod }: DeployServiceProp) {
{!wantAutoDiscover && (
<>
- Step 2 (Optional)
+
+ Step 2 (Optional)
+ Define Matcher Labels
+
{/* step three */}
- Step 3 (Optional)
+
+ Step 3 (Optional)
+ Select Security Groups
+
- Step {wantAutoDiscover ? 2 : 4}
- Deploy the Teleport Database Service.
+
+ Step {wantAutoDiscover ? 2 : 4}
+
+ Deploy the Teleport Database Service.
+
+
- Step 1
-
+ Step 1
+
Name a Task Role ARN for this Database Service and generate a configure
command. This command will configure the required permissions in your
AWS account.
-
+
- Select Security Groups
-
+
Select security groups to assign to the Fargate service that will be
running the database access agent. The security groups you pick must
allow outbound connectivity to this Teleport cluster. If you don't
select any security groups, the default one for the VPC will be used.
-
+
+ {/* TODO(bl-nero): Convert this to an alert box with embedded retry button */}
{attempt.status === 'failed' && (
<>
diff --git a/web/packages/teleport/src/Discover/Database/DeployService/ManualDeploy/ManualDeploy.tsx b/web/packages/teleport/src/Discover/Database/DeployService/ManualDeploy/ManualDeploy.tsx
index 7dcc1c9424cd5..558cf03a979d3 100644
--- a/web/packages/teleport/src/Discover/Database/DeployService/ManualDeploy/ManualDeploy.tsx
+++ b/web/packages/teleport/src/Discover/Database/DeployService/ManualDeploy/ManualDeploy.tsx
@@ -17,7 +17,7 @@
*/
import React, { Suspense, useState, useEffect } from 'react';
-import { Box, ButtonSecondary, Text, Mark } from 'design';
+import { Box, ButtonSecondary, Text, Mark, H3 } from 'design';
import * as Icons from 'design/Icon';
import Validation, { Validator } from 'shared/components/Validation';
@@ -87,6 +87,7 @@ export default function Container({ toggleDeployMethod }: DeployServiceProp) {
fallbackFn={fbProps => (
{heading}
+ Define Matcher Labels
@@ -107,6 +108,7 @@ export default function Container({ toggleDeployMethod }: DeployServiceProp) {
fallback={
{heading}
+ Define Matcher Labels
null} disableProceed={true} />
@@ -223,6 +225,7 @@ export function ManualDeploy(props: {
return (
+ Define Matcher Labels
+ Define Matcher Labels
-
+
{fetchDbAttempt.status === 'failed' && !hasIamPermError && (
{fetchDbAttempt.statusText}
)}
-
- Select the AWS Region you would like to see databases for:
-
+ Select the AWS Region you would like to see databases for:
)}
{showContent && showAutoEnrollToggle && wantAutoDiscover && (
-
+
Note: Auto-enroll will enroll all database engines
in this region (e.g. PostgreSQL, MySQL, Aurora).
-
+
)}
-
- Run this AWS CLI command to create an IAM policy:
-
+ Run this AWS CLI command to create an IAM policy:
-
- Then attach this policy to your AWS EC2 instance role.
-
-
+ Then attach this policy to your AWS EC2 instance role.
+
See{' '}
Attach an IAM role to an instance
-
+
)}
diff --git a/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.tsx b/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.tsx
index da069a76a5329..04b7341074d6b 100644
--- a/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.tsx
+++ b/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.tsx
@@ -17,7 +17,7 @@
*/
import React, { useState, useEffect } from 'react';
-import { Box, Text, Flex, Link, Mark } from 'design';
+import { Box, Text, Flex, Link, Mark, H3 } from 'design';
import { Info as InfoIcon } from 'design/Icon';
import {
@@ -205,11 +205,11 @@ const Info = (props: {
<>
- To allow access using your Database Users
+ To allow access using your Database Users
- Access Definition
+ Access Definition
- Step 1
-
- Select a user and a database name to test.
-
+
+ Step 1
+
+ Select a user and a database name to test
+
+
Database User
-
+
To Access your Database
-
-
- Log into your Teleport cluster
-
-
-
- Connect to your database
-
-
+
+ Log into your Teleport cluster:
+
+ Connect to your database:
+
0;
return (
- Define Matcher Labels
{!hasDbLabels && (
-
+
Since no labels were defined for the registered database from the
previous step, the matcher labels are defaulted to wildcards which
will allow this database service to match any database.
-
+
)}
{hasDbLabels && (
<>
-
+
The default wildcard label allows this database service to match any
database. If you're unsure about how label matching works in
Teleport, leave this for now.
-
-
+
+
Alternatively, you can define narrower labels for identifying the
databases you register
{region ? (
@@ -79,7 +80,7 @@ export const Labels = ({
In order to identify the database you registered in the previous
step, the labels you define here must match with one of its existing
labels:
-
+
{dbLabels.map((label, index) => {
const labelText = `${label.name}: ${label.value}`;
diff --git a/web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/ManualHelmDialog.tsx b/web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/ManualHelmDialog.tsx
index f77f134f79acc..07d5bc03b83a0 100644
--- a/web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/ManualHelmDialog.tsx
+++ b/web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/ManualHelmDialog.tsx
@@ -22,8 +22,9 @@ import {
Flex,
ButtonPrimary,
ButtonSecondary,
- Text,
Indicator,
+ H2,
+ H3,
} from 'design';
import React, { Suspense, useState, useEffect } from 'react';
@@ -32,6 +33,8 @@ import styled from 'styled-components';
import * as Icons from 'design/Icon';
+import { P } from 'design/Text/Text';
+
import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy';
import { CommandBox } from 'teleport/Discover/Shared/CommandBox';
@@ -80,9 +83,7 @@ const DialogWrapper = ({
return (
-
Teleport can integrate into most, if not all of your infrastructure. Search for what resource you want to add.
-
+
Server
@@ -364,7 +385,6 @@ exports[`render with URL loc state set to "server" 1`] = `
Server
@@ -405,7 +425,6 @@ exports[`render with URL loc state set to "server" 1`] = `
Server
@@ -446,7 +465,6 @@ exports[`render with URL loc state set to "server" 1`] = `
Amazon Web Services (AWS)
@@ -487,7 +505,6 @@ exports[`render with URL loc state set to "server" 1`] = `
Server
@@ -528,7 +545,6 @@ exports[`render with URL loc state set to "server" 1`] = `
Server
@@ -602,7 +618,6 @@ exports[`render with URL loc state set to "server" 1`] = `
Amazon Web Services (AWS)
@@ -643,7 +658,6 @@ exports[`render with URL loc state set to "server" 1`] = `
Amazon Web Services (AWS)
@@ -684,7 +698,6 @@ exports[`render with URL loc state set to "server" 1`] = `
Azure
@@ -725,7 +738,6 @@ exports[`render with URL loc state set to "server" 1`] = `
Microsoft
@@ -739,21 +751,20 @@ exports[`render with URL loc state set to "server" 1`] = `
-
+
`;
@@ -788,7 +799,7 @@ exports[`render with all access 1`] = `
text-transform: none;
}
-.c22 {
+.c24 {
color: #009EFF;
font-weight: normal;
background: none;
@@ -817,6 +828,10 @@ exports[`render with all access 1`] = `
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.024px;
margin-bottom: 32px;
}
@@ -825,6 +840,9 @@ exports[`render with all access 1`] = `
text-overflow: ellipsis;
margin: 0;
font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
color: rgba(255, 255, 255, 0.72);
}
@@ -843,11 +861,26 @@ exports[`render with all access 1`] = `
color: #FFFFFF;
}
-.c21 {
+.c23 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
+ margin-top: 40px;
+}
+
+.c21 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0;
+ margin-top: 40px;
+}
+
+p+.c22 {
+ margin-top: 16px;
margin-top: 40px;
}
@@ -955,11 +988,11 @@ exports[`render with all access 1`] = `
Select Resource To Add
-
Teleport can integrate into most, if not all of your infrastructure. Search for what resource you want to add.
-
+
Server
@@ -1049,7 +1081,6 @@ exports[`render with all access 1`] = `
Server
@@ -1124,7 +1155,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -1165,7 +1195,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -1240,7 +1269,6 @@ exports[`render with all access 1`] = `
Server
@@ -1281,7 +1309,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -1322,7 +1349,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -1363,7 +1389,6 @@ exports[`render with all access 1`] = `
Self-Hosted
@@ -1404,7 +1429,6 @@ exports[`render with all access 1`] = `
Self-Hosted
@@ -1445,7 +1469,6 @@ exports[`render with all access 1`] = `
Self-Hosted
@@ -1486,7 +1509,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -1527,7 +1549,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -1568,7 +1589,6 @@ exports[`render with all access 1`] = `
Server
@@ -1609,7 +1629,6 @@ exports[`render with all access 1`] = `
Server
@@ -1683,7 +1702,6 @@ exports[`render with all access 1`] = `
Windows Desktop
@@ -1724,7 +1742,6 @@ exports[`render with all access 1`] = `
Azure
@@ -1765,7 +1782,6 @@ exports[`render with all access 1`] = `
Self-Hosted
@@ -1806,7 +1822,6 @@ exports[`render with all access 1`] = `
Google Cloud Provider (GCP)
@@ -1847,7 +1862,6 @@ exports[`render with all access 1`] = `
Google Cloud Provider (GCP)
@@ -1888,7 +1902,6 @@ exports[`render with all access 1`] = `
Self-Hosted
@@ -1929,7 +1942,6 @@ exports[`render with all access 1`] = `
Database
@@ -1970,7 +1982,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -2011,7 +2022,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -2052,7 +2062,6 @@ exports[`render with all access 1`] = `
Self-Hosted
@@ -2093,7 +2102,6 @@ exports[`render with all access 1`] = `
Database
@@ -2134,7 +2142,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -2175,7 +2182,6 @@ exports[`render with all access 1`] = `
Windows Desktop
@@ -2216,7 +2222,6 @@ exports[`render with all access 1`] = `
Self-Hosted
@@ -2291,7 +2296,6 @@ exports[`render with all access 1`] = `
Azure
@@ -2332,7 +2336,6 @@ exports[`render with all access 1`] = `
Azure
@@ -2373,7 +2376,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -2414,7 +2416,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -2455,7 +2456,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -2496,7 +2496,6 @@ exports[`render with all access 1`] = `
Self-Hosted
@@ -2537,7 +2536,6 @@ exports[`render with all access 1`] = `
Self-Hosted
@@ -2578,7 +2576,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -2619,7 +2616,6 @@ exports[`render with all access 1`] = `
Amazon Web Services (AWS)
@@ -2694,7 +2690,6 @@ exports[`render with all access 1`] = `
Azure
@@ -2735,7 +2730,6 @@ exports[`render with all access 1`] = `
Microsoft
@@ -2749,21 +2743,20 @@ exports[`render with all access 1`] = `
-
+
`;
@@ -2805,7 +2798,7 @@ exports[`render with no access 1`] = `
text-transform: none;
}
-.c23 {
+.c25 {
color: #009EFF;
font-weight: normal;
background: none;
@@ -2834,6 +2827,10 @@ exports[`render with no access 1`] = `
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.024px;
margin-bottom: 32px;
}
@@ -2842,6 +2839,9 @@ exports[`render with no access 1`] = `
text-overflow: ellipsis;
margin: 0;
font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
color: rgba(255, 255, 255, 0.72);
}
@@ -2860,11 +2860,26 @@ exports[`render with no access 1`] = `
font-weight: 600;
}
-.c22 {
+.c24 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
+ margin-top: 40px;
+}
+
+.c22 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0;
+ margin-top: 40px;
+}
+
+p+.c23 {
+ margin-top: 16px;
margin-top: 40px;
}
@@ -2968,11 +2983,11 @@ exports[`render with no access 1`] = `
Select Resource To Add
-
Teleport can integrate into most, if not all of your infrastructure. Search for what resource you want to add.
-
+
Windows Desktop
@@ -3068,7 +3082,6 @@ exports[`render with no access 1`] = `
Server
@@ -3145,7 +3158,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -3187,7 +3199,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -3267,7 +3278,6 @@ exports[`render with no access 1`] = `
Azure
@@ -3313,7 +3323,6 @@ exports[`render with no access 1`] = `
Self-Hosted
@@ -3359,7 +3368,6 @@ exports[`render with no access 1`] = `
Google Cloud Provider (GCP)
@@ -3405,7 +3413,6 @@ exports[`render with no access 1`] = `
Google Cloud Provider (GCP)
@@ -3451,7 +3458,6 @@ exports[`render with no access 1`] = `
Self-Hosted
@@ -3529,7 +3535,6 @@ exports[`render with no access 1`] = `
Server
@@ -3574,7 +3579,6 @@ exports[`render with no access 1`] = `
Database
@@ -3620,7 +3624,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -3663,7 +3666,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -3705,7 +3707,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -3750,7 +3751,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -3796,7 +3796,6 @@ exports[`render with no access 1`] = `
Self-Hosted
@@ -3842,7 +3841,6 @@ exports[`render with no access 1`] = `
Database
@@ -3888,7 +3886,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -3931,7 +3928,6 @@ exports[`render with no access 1`] = `
Self-Hosted
@@ -3976,7 +3972,6 @@ exports[`render with no access 1`] = `
Windows Desktop
@@ -4019,7 +4014,6 @@ exports[`render with no access 1`] = `
Server
@@ -4064,7 +4058,6 @@ exports[`render with no access 1`] = `
Self-Hosted
@@ -4149,7 +4142,6 @@ exports[`render with no access 1`] = `
Azure
@@ -4192,7 +4184,6 @@ exports[`render with no access 1`] = `
Self-Hosted
@@ -4234,7 +4225,6 @@ exports[`render with no access 1`] = `
Self-Hosted
@@ -4279,7 +4269,6 @@ exports[`render with no access 1`] = `
Azure
@@ -4322,7 +4311,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -4364,7 +4352,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -4409,7 +4396,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -4455,7 +4441,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -4501,7 +4486,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -4547,7 +4531,6 @@ exports[`render with no access 1`] = `
Self-Hosted
@@ -4593,7 +4576,6 @@ exports[`render with no access 1`] = `
Self-Hosted
@@ -4639,7 +4621,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -4685,7 +4666,6 @@ exports[`render with no access 1`] = `
Amazon Web Services (AWS)
@@ -4728,7 +4708,6 @@ exports[`render with no access 1`] = `
Server
@@ -4812,7 +4791,6 @@ exports[`render with no access 1`] = `
Azure
@@ -4858,7 +4836,6 @@ exports[`render with no access 1`] = `
Microsoft
@@ -4901,7 +4878,6 @@ exports[`render with no access 1`] = `
Server
@@ -4914,21 +4890,20 @@ exports[`render with no access 1`] = `
-
+
`;
@@ -4970,7 +4945,7 @@ exports[`render with partial access 1`] = `
text-transform: none;
}
-.c25 {
+.c27 {
color: #009EFF;
font-weight: normal;
background: none;
@@ -4999,6 +4974,10 @@ exports[`render with partial access 1`] = `
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.024px;
margin-bottom: 32px;
}
@@ -5007,6 +4986,9 @@ exports[`render with partial access 1`] = `
text-overflow: ellipsis;
margin: 0;
font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
color: rgba(255, 255, 255, 0.72);
}
@@ -5025,11 +5007,26 @@ exports[`render with partial access 1`] = `
color: #FFFFFF;
}
-.c24 {
+.c26 {
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
font-size: 12px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.015px;
+ margin-top: 40px;
+}
+
+.c24 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0;
+ margin-top: 40px;
+}
+
+p+.c25 {
+ margin-top: 16px;
margin-top: 40px;
}
@@ -5163,11 +5160,11 @@ exports[`render with partial access 1`] = `
Select Resource To Add
-
Teleport can integrate into most, if not all of your infrastructure. Search for what resource you want to add.
-
+
Server
@@ -5257,7 +5253,6 @@ exports[`render with partial access 1`] = `
Server
@@ -5366,7 +5361,6 @@ exports[`render with partial access 1`] = `
Server
@@ -5407,7 +5401,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -5448,7 +5441,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -5489,7 +5481,6 @@ exports[`render with partial access 1`] = `
Self-Hosted
@@ -5530,7 +5521,6 @@ exports[`render with partial access 1`] = `
Server
@@ -5571,7 +5561,6 @@ exports[`render with partial access 1`] = `
Server
@@ -5645,7 +5634,6 @@ exports[`render with partial access 1`] = `
Windows Desktop
@@ -5686,7 +5674,6 @@ exports[`render with partial access 1`] = `
Windows Desktop
@@ -5729,7 +5716,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -5771,7 +5757,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -5816,7 +5801,6 @@ exports[`render with partial access 1`] = `
Azure
@@ -5862,7 +5846,6 @@ exports[`render with partial access 1`] = `
Self-Hosted
@@ -5908,7 +5891,6 @@ exports[`render with partial access 1`] = `
Google Cloud Provider (GCP)
@@ -5954,7 +5936,6 @@ exports[`render with partial access 1`] = `
Google Cloud Provider (GCP)
@@ -6000,7 +5981,6 @@ exports[`render with partial access 1`] = `
Self-Hosted
@@ -6046,7 +6026,6 @@ exports[`render with partial access 1`] = `
Database
@@ -6092,7 +6071,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -6138,7 +6116,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -6184,7 +6161,6 @@ exports[`render with partial access 1`] = `
Self-Hosted
@@ -6230,7 +6206,6 @@ exports[`render with partial access 1`] = `
Database
@@ -6276,7 +6251,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -6322,7 +6296,6 @@ exports[`render with partial access 1`] = `
Self-Hosted
@@ -6407,7 +6380,6 @@ exports[`render with partial access 1`] = `
Azure
@@ -6450,7 +6422,6 @@ exports[`render with partial access 1`] = `
Self-Hosted
@@ -6492,7 +6463,6 @@ exports[`render with partial access 1`] = `
Self-Hosted
@@ -6537,7 +6507,6 @@ exports[`render with partial access 1`] = `
Azure
@@ -6580,7 +6549,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -6622,7 +6590,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -6667,7 +6634,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -6713,7 +6679,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -6759,7 +6724,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -6805,7 +6769,6 @@ exports[`render with partial access 1`] = `
Self-Hosted
@@ -6851,7 +6814,6 @@ exports[`render with partial access 1`] = `
Self-Hosted
@@ -6897,7 +6859,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -6943,7 +6904,6 @@ exports[`render with partial access 1`] = `
Amazon Web Services (AWS)
@@ -7028,7 +6988,6 @@ exports[`render with partial access 1`] = `
Azure
@@ -7074,7 +7033,6 @@ exports[`render with partial access 1`] = `
Microsoft
@@ -7088,20 +7046,19 @@ exports[`render with partial access 1`] = `