diff --git a/web/packages/design/src/Button/__snapshots__/buttons.story.test.tsx.snap b/web/packages/design/src/Button/__snapshots__/buttons.story.test.tsx.snap index 89716c2077cf5..20695cb3da103 100644 --- a/web/packages/design/src/Button/__snapshots__/buttons.story.test.tsx.snap +++ b/web/packages/design/src/Button/__snapshots__/buttons.story.test.tsx.snap @@ -935,7 +935,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c21 { +.c22 { line-height: 1.5; margin: 0; display: inline-flex; @@ -965,8 +965,8 @@ exports[`buttons 1`] = ` letter-spacing: 0.2px; } -.c21:focus-visible, -.teleport-button__force-focus-visible .c21 { +.c22:focus-visible, +.teleport-button__force-focus-visible .c22 { background-color: #9F85FF; color: #000000; border-color: #000000; @@ -974,22 +974,22 @@ exports[`buttons 1`] = ` outline: 2px solid #9F85FF; } -.c21:hover, -.teleport-button__force-hover .c21 { +.c22:hover, +.teleport-button__force-hover .c22 { background-color: #B29DFF; border-color: transparent; color: #000000; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12); } -.c21:active, -.teleport-button__force-active .c21 { +.c22:active, +.teleport-button__force-active .c22 { background-color: #C5B6FF; border-color: transparent; color: #000000; } -.c21:disabled { +.c22:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -997,7 +997,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c22 { +.c23 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1027,8 +1027,8 @@ exports[`buttons 1`] = ` letter-spacing: 0.175px; } -.c22:focus-visible, -.teleport-button__force-focus-visible .c22 { +.c23:focus-visible, +.teleport-button__force-focus-visible .c23 { background-color: #9F85FF; color: #000000; border-color: #000000; @@ -1036,22 +1036,22 @@ exports[`buttons 1`] = ` outline: 2px solid #9F85FF; } -.c22:hover, -.teleport-button__force-hover .c22 { +.c23:hover, +.teleport-button__force-hover .c23 { background-color: #B29DFF; border-color: transparent; color: #000000; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12); } -.c22:active, -.teleport-button__force-active .c22 { +.c23:active, +.teleport-button__force-active .c23 { background-color: #C5B6FF; border-color: transparent; color: #000000; } -.c22:disabled { +.c23:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1059,7 +1059,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c23 { +.c24 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1089,8 +1089,8 @@ exports[`buttons 1`] = ` letter-spacing: 0.15px; } -.c23:focus-visible, -.teleport-button__force-focus-visible .c23 { +.c24:focus-visible, +.teleport-button__force-focus-visible .c24 { background-color: #9F85FF; color: #000000; border-color: #000000; @@ -1098,22 +1098,22 @@ exports[`buttons 1`] = ` outline: 2px solid #9F85FF; } -.c23:hover, -.teleport-button__force-hover .c23 { +.c24:hover, +.teleport-button__force-hover .c24 { background-color: #B29DFF; border-color: transparent; color: #000000; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12); } -.c23:active, -.teleport-button__force-active .c23 { +.c24:active, +.teleport-button__force-active .c24 { background-color: #C5B6FF; border-color: transparent; color: #000000; } -.c23:disabled { +.c24:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1121,7 +1121,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c24 { +.c25 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1151,8 +1151,8 @@ exports[`buttons 1`] = ` letter-spacing: 0.15px; } -.c24:focus-visible, -.teleport-button__force-focus-visible .c24 { +.c25:focus-visible, +.teleport-button__force-focus-visible .c25 { background-color: #9F85FF; color: #000000; border-color: #000000; @@ -1160,22 +1160,22 @@ exports[`buttons 1`] = ` outline: 2px solid #9F85FF; } -.c24:hover, -.teleport-button__force-hover .c24 { +.c25:hover, +.teleport-button__force-hover .c25 { background-color: #B29DFF; border-color: transparent; color: #000000; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12); } -.c24:active, -.teleport-button__force-active .c24 { +.c25:active, +.teleport-button__force-active .c25 { background-color: #C5B6FF; border-color: transparent; color: #000000; } -.c24:disabled { +.c25:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1183,7 +1183,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c25 { +.c26 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1214,8 +1214,8 @@ exports[`buttons 1`] = ` width: 100%; } -.c25:focus-visible, -.teleport-button__force-focus-visible .c25 { +.c26:focus-visible, +.teleport-button__force-focus-visible .c26 { background-color: #9F85FF; color: #000000; border-color: #000000; @@ -1223,22 +1223,22 @@ exports[`buttons 1`] = ` outline: 2px solid #9F85FF; } -.c25:hover, -.teleport-button__force-hover .c25 { +.c26:hover, +.teleport-button__force-hover .c26 { background-color: #B29DFF; border-color: transparent; color: #000000; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12); } -.c25:active, -.teleport-button__force-active .c25 { +.c26:active, +.teleport-button__force-active .c26 { background-color: #C5B6FF; border-color: transparent; color: #000000; } -.c25:disabled { +.c26:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1246,7 +1246,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c26 { +.c27 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1277,8 +1277,8 @@ exports[`buttons 1`] = ` gap: 8px; } -.c26:focus-visible, -.teleport-button__force-focus-visible .c26 { +.c27:focus-visible, +.teleport-button__force-focus-visible .c27 { background-color: #9F85FF; color: #000000; border-color: #000000; @@ -1286,22 +1286,22 @@ exports[`buttons 1`] = ` outline: 2px solid #9F85FF; } -.c26:hover, -.teleport-button__force-hover .c26 { +.c27:hover, +.teleport-button__force-hover .c27 { background-color: #B29DFF; border-color: transparent; color: #000000; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12); } -.c26:active, -.teleport-button__force-active .c26 { +.c27:active, +.teleport-button__force-active .c27 { background-color: #C5B6FF; border-color: transparent; color: #000000; } -.c26:disabled { +.c27:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1309,7 +1309,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c30 { +.c31 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1341,8 +1341,8 @@ exports[`buttons 1`] = ` padding-right: 4px; } -.c30:focus-visible, -.teleport-button__force-focus-visible .c30 { +.c31:focus-visible, +.teleport-button__force-focus-visible .c31 { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.72); @@ -1350,22 +1350,22 @@ exports[`buttons 1`] = ` outline: none; } -.c30:hover, -.teleport-button__force-hover .c30 { +.c31:hover, +.teleport-button__force-hover .c31 { background-color: rgba(255,255,255,0.13); border-color: transparent; color: #FFFFFF; box-shadow: none; } -.c30:active, -.teleport-button__force-active .c30 { +.c31:active, +.teleport-button__force-active .c31 { background-color: rgba(255,255,255,0.18); border-color: transparent; color: #FFFFFF; } -.c30:disabled { +.c31:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1373,7 +1373,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c33 { +.c34 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1403,8 +1403,8 @@ exports[`buttons 1`] = ` letter-spacing: 0.175px; } -.c33:focus-visible, -.teleport-button__force-focus-visible .c33 { +.c34:focus-visible, +.teleport-button__force-focus-visible .c34 { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.72); @@ -1412,22 +1412,22 @@ exports[`buttons 1`] = ` outline: none; } -.c33:hover, -.teleport-button__force-hover .c33 { +.c34:hover, +.teleport-button__force-hover .c34 { background-color: rgba(255,255,255,0.13); border-color: transparent; color: #FFFFFF; box-shadow: none; } -.c33:active, -.teleport-button__force-active .c33 { +.c34:active, +.teleport-button__force-active .c34 { background-color: rgba(255,255,255,0.18); border-color: transparent; color: #FFFFFF; } -.c33:disabled { +.c34:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1435,7 +1435,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c34 { +.c35 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1467,8 +1467,8 @@ exports[`buttons 1`] = ` padding-right: 4px; } -.c34:focus-visible, -.teleport-button__force-focus-visible .c34 { +.c35:focus-visible, +.teleport-button__force-focus-visible .c35 { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.72); @@ -1476,22 +1476,22 @@ exports[`buttons 1`] = ` outline: none; } -.c34:hover, -.teleport-button__force-hover .c34 { +.c35:hover, +.teleport-button__force-hover .c35 { background-color: rgba(255,255,255,0.13); border-color: transparent; color: #FFFFFF; box-shadow: none; } -.c34:active, -.teleport-button__force-active .c34 { +.c35:active, +.teleport-button__force-active .c35 { background-color: rgba(255,255,255,0.18); border-color: transparent; color: #FFFFFF; } -.c34:disabled { +.c35:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1499,7 +1499,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c35 { +.c36 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1529,8 +1529,8 @@ exports[`buttons 1`] = ` letter-spacing: 0.15px; } -.c35:focus-visible, -.teleport-button__force-focus-visible .c35 { +.c36:focus-visible, +.teleport-button__force-focus-visible .c36 { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.72); @@ -1538,22 +1538,22 @@ exports[`buttons 1`] = ` outline: none; } -.c35:hover, -.teleport-button__force-hover .c35 { +.c36:hover, +.teleport-button__force-hover .c36 { background-color: rgba(255,255,255,0.13); border-color: transparent; color: #FFFFFF; box-shadow: none; } -.c35:active, -.teleport-button__force-active .c35 { +.c36:active, +.teleport-button__force-active .c36 { background-color: rgba(255,255,255,0.18); border-color: transparent; color: #FFFFFF; } -.c35:disabled { +.c36:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1561,7 +1561,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c36 { +.c37 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1593,8 +1593,8 @@ exports[`buttons 1`] = ` padding-right: 4px; } -.c36:focus-visible, -.teleport-button__force-focus-visible .c36 { +.c37:focus-visible, +.teleport-button__force-focus-visible .c37 { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.72); @@ -1602,22 +1602,22 @@ exports[`buttons 1`] = ` outline: none; } -.c36:hover, -.teleport-button__force-hover .c36 { +.c37:hover, +.teleport-button__force-hover .c37 { background-color: rgba(255,255,255,0.13); border-color: transparent; color: #FFFFFF; box-shadow: none; } -.c36:active, -.teleport-button__force-active .c36 { +.c37:active, +.teleport-button__force-active .c37 { background-color: rgba(255,255,255,0.18); border-color: transparent; color: #FFFFFF; } -.c36:disabled { +.c37:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1625,7 +1625,7 @@ exports[`buttons 1`] = ` cursor: auto; } -.c37 { +.c38 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1655,8 +1655,8 @@ exports[`buttons 1`] = ` letter-spacing: 0.15px; } -.c37:focus-visible, -.teleport-button__force-focus-visible .c37 { +.c38:focus-visible, +.teleport-button__force-focus-visible .c38 { background-color: #9F85FF; color: #000000; border-color: #000000; @@ -1664,22 +1664,22 @@ exports[`buttons 1`] = ` outline: 2px solid #9F85FF; } -.c37:hover, -.teleport-button__force-hover .c37 { +.c38:hover, +.teleport-button__force-hover .c38 { background-color: #B29DFF; border-color: transparent; color: #000000; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12); } -.c37:active, -.teleport-button__force-active .c37 { +.c38:active, +.teleport-button__force-active .c38 { background-color: #C5B6FF; border-color: transparent; color: #000000; } -.c37:disabled { +.c38:disabled { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1688,7 +1688,7 @@ exports[`buttons 1`] = ` pointer-events: none; } -.c37[disabled] { +.c38[disabled] { background-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border-color: transparent; @@ -1697,7 +1697,7 @@ exports[`buttons 1`] = ` pointer-events: none; } -.c38 { +.c39 { align-items: center; border: none; cursor: pointer; @@ -1717,21 +1717,21 @@ exports[`buttons 1`] = ` width: 32px; } -.c38:disabled { +.c39:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c38:not(:disabled):hover, -.c38:not(:disabled):focus { +.c39:not(:disabled):hover, +.c39:not(:disabled):focus { background: rgba(255,255,255,0.13); } -.c38:not(:disabled):active { +.c39:not(:disabled):active { background: rgba(255,255,255,0.18); } -.c40 { +.c41 { align-items: center; border: none; cursor: pointer; @@ -1751,21 +1751,21 @@ exports[`buttons 1`] = ` width: 48px; } -.c40:disabled { +.c41:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c40:not(:disabled):hover, -.c40:not(:disabled):focus { +.c41:not(:disabled):hover, +.c41:not(:disabled):focus { background: rgba(255,255,255,0.13); } -.c40:not(:disabled):active { +.c41:not(:disabled):active { background: rgba(255,255,255,0.18); } -.c41 { +.c42 { align-items: center; border: none; cursor: pointer; @@ -1785,21 +1785,21 @@ exports[`buttons 1`] = ` width: 24px; } -.c41:disabled { +.c42:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c41:not(:disabled):hover, -.c41:not(:disabled):focus { +.c42:not(:disabled):hover, +.c42:not(:disabled):focus { background: rgba(255,255,255,0.13); } -.c41:not(:disabled):active { +.c42:not(:disabled):active { background: rgba(255,255,255,0.18); } -.c39 { +.c40 { color: #009EFF; font-weight: normal; background: none; @@ -1808,46 +1808,47 @@ exports[`buttons 1`] = ` padding: 0 8px; } -.c39:hover, -.c39:focus { +.c40:hover, +.c40:focus { color: #33B1FF; + box-shadow: none; } -.c39:active { +.c40:active { color: #66C5FF; } -.c39:hover, -.c39:focus, -.c39:active { +.c40:hover, +.c40:focus, +.c40:active { background: #222C59; } -.c27 { +.c28 { display: inline-flex; align-items: center; justify-content: center; } -.c32 { +.c33 { display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.72); } -.c29 { +.c30 { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.c31 { +.c32 { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; } -.c20 { +.c21 { appearance: none; border: 1px solid rgba(255,255,255,0.54); border-radius: 4px; @@ -1860,28 +1861,29 @@ exports[`buttons 1`] = ` width: 100%; background: #222C59; color: #FFFFFF; + width: 480px; } -.c20:hover, -.c20:focus, -.c20:active { +.c21:hover, +.c21:focus, +.c21:active { border: 1px solid rgba(255,255,255,0.72); } -.c20::-ms-clear { +.c21::-ms-clear { display: none; } -.c20::placeholder { +.c21::placeholder { color: rgba(255,255,255,0.54); opacity: 1; } -.c20:read-only { +.c21:read-only { cursor: not-allowed; } -.c20:disabled { +.c21:disabled { color: rgba(255,255,255,0.36); border-color: rgba(255,255,255,0.36); } @@ -1890,7 +1892,7 @@ exports[`buttons 1`] = ` display: flex; align-items: flex-start; flex-direction: column; - gap: 24px; + gap: 32px; } .c15 { @@ -1904,7 +1906,14 @@ exports[`buttons 1`] = ` gap: 16px; } -.c28 { +.c20 { + display: flex; + align-items: flex-start; + flex-direction: column; + gap: 16px; +} + +.c29 { display: flex; } @@ -2842,36 +2851,41 @@ exports[`buttons 1`] = ` Small - - - - - + + + + + +
- - + - + -
-
- +
+
- - - - - - - - + - + -
-
- +
+
- - - - - - - - + - + + + + + + + + +
diff --git a/web/packages/design/src/Button/buttons.story.tsx b/web/packages/design/src/Button/buttons.story.tsx index 17d0423428029..8e1c661415897 100644 --- a/web/packages/design/src/Button/buttons.story.tsx +++ b/web/packages/design/src/Button/buttons.story.tsx @@ -47,7 +47,7 @@ export default { export const Buttons = () => { const fills: ButtonFill[] = ['filled', 'minimal', 'border']; return ( - + @@ -100,19 +100,24 @@ export const Buttons = () => { - - - - - + + + + + + + @@ -167,19 +172,21 @@ export const Buttons = () => { Button Link Button Text - {[2, 1, 0].map(size => ( - - - - - - - - - - - - ))} + + {[2, 1, 0].map(size => ( + + + + + + + + + + + + ))} + ); }; diff --git a/web/packages/design/src/ButtonLink/ButtonLink.jsx b/web/packages/design/src/ButtonLink/ButtonLink.jsx index 1496027edd6d9..f0ee045dfee7d 100644 --- a/web/packages/design/src/ButtonLink/ButtonLink.jsx +++ b/web/packages/design/src/ButtonLink/ButtonLink.jsx @@ -42,6 +42,7 @@ const StyledButtonLink = styled.a` &:hover, &:focus { color: ${({ theme }) => theme.colors.buttons.link.hover}; + box-shadow: none; } &:active { diff --git a/web/packages/shared/components/ButtonSso/ButtonSso.tsx b/web/packages/shared/components/ButtonSso/ButtonSso.tsx index a8ccda9d69c85..942a732f6e698 100644 --- a/web/packages/shared/components/ButtonSso/ButtonSso.tsx +++ b/web/packages/shared/components/ButtonSso/ButtonSso.tsx @@ -30,7 +30,7 @@ const ButtonSso = forwardRef((props: Props, ref) => { const { color, Icon } = getSSOIcon(ssoType); return ( - + {Boolean(Icon) && ( diff --git a/web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx b/web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx index b8e0ac49c0143..e8e5a0bb6ce5b 100644 --- a/web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx +++ b/web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx @@ -32,19 +32,7 @@ export const ButtonTextWithAddIcon = ({ iconSize?: number | 'small' | 'medium' | 'large' | 'extraLarge'; }) => { return ( - + - props.theme.colors.spotBackground[0]}; - `} - textTransform="none" - size="small" - onClick={handleOpen} - > + Cluster: {selectedOption.label} diff --git a/web/packages/shared/components/FileTransfer/FileTransferRequests.story.tsx b/web/packages/shared/components/FileTransfer/FileTransferRequests.story.tsx new file mode 100644 index 0000000000000..72c33603237b7 --- /dev/null +++ b/web/packages/shared/components/FileTransfer/FileTransferRequests.story.tsx @@ -0,0 +1,62 @@ +/** + * Teleport + * Copyright (C) 2024 Gravitational, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import React from 'react'; + +import ConsoleContextProvider from 'teleport/Console/consoleContextProvider'; +import ConsoleContext from 'teleport/Console/consoleContext'; +import { FileTransferRequest } from 'teleport/Console/DocumentSsh/useFileTransfer'; + +import { FileTransferRequests } from './'; + +export default { + title: 'Shared/FileTransfer', +}; + +export const Requests = () => { + const conCtx = new ConsoleContext(); + conCtx.storeUser.setState({ username: 'bob' }); + return ( + + {}} + onDeny={() => {}} + /> + + ); +}; + +const requests: FileTransferRequest[] = [ + { + sid: 'dummy-sid', + requestID: 'dummy-request-id', + requester: 'alice', + approvers: [], + location: '/etc/teleport.yaml', + download: true, + }, + { + sid: 'dummy-sid', + requestID: 'dummy-request-id', + requester: 'john', + approvers: ['bob'], + location: '/home/alice/.ssh/config', + download: true, + }, +]; diff --git a/web/packages/shared/components/FileTransfer/FileTransferRequests.tsx b/web/packages/shared/components/FileTransfer/FileTransferRequests.tsx index 1e066f45f2519..16e864ef7a16b 100644 --- a/web/packages/shared/components/FileTransfer/FileTransferRequests.tsx +++ b/web/packages/shared/components/FileTransfer/FileTransferRequests.tsx @@ -18,7 +18,7 @@ import React from 'react'; import styled from 'styled-components'; -import { ButtonBorder, Box, Flex, Text } from 'design'; +import { ButtonBorder, Box, Flex, Text, Button } from 'design'; import * as Icons from 'design/Icon'; import { FileTransferRequest, @@ -130,18 +130,25 @@ const ResponseForm = ({ {getPendingText(request)} - onApprove(request.requestID, true)} > Approve - - onDeny(request.requestID, false)}> + + ); diff --git a/web/packages/shared/components/MenuAction/MenuActionButton.tsx b/web/packages/shared/components/MenuAction/MenuActionButton.tsx index 758f6c8452f66..b6cb9fa3c6ca8 100644 --- a/web/packages/shared/components/MenuAction/MenuActionButton.tsx +++ b/web/packages/shared/components/MenuAction/MenuActionButton.tsx @@ -59,14 +59,13 @@ export default class MenuActionIcon extends React.Component< return ( <> (this.anchorEl = e)} onClick={this.onOpen} {...buttonProps} > - {this.props.buttonText || 'OPTIONS'} - + {this.props.buttonText || 'Options'} + ( Connect - + - props.theme.colors.spotBackground[0]}; - `} - textTransform="none" - size="small" - onClick={handleOpen} - > + Types{' '} {kindsFromParams.length > 0 ? `(${kindsFromParams.length})` : ''} @@ -446,7 +438,6 @@ const SortMenu: React.FC = props => { onClick={onDirChange} textTransform="none" css={` - width: 0px; // remove extra width around the button icon border-top-left-radius: 0; border-bottom-left-radius: 0; border-color: ${props => props.theme.colors.spotBackground[2]}; diff --git a/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx b/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx index 991093a4fc1c4..5bfddd68a6db9 100644 --- a/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx +++ b/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx @@ -27,14 +27,7 @@ import React, { } from 'react'; import styled from 'styled-components'; -import { - Box, - Flex, - ButtonLink, - ButtonSecondary, - Text, - ButtonBorder, -} from 'design'; +import { Box, Flex, Button, ButtonSecondary, Text, ButtonBorder } from 'design'; import { Icon, Magnifier, PushPin } from 'design/Icon'; import { Danger } from 'design/Alert'; @@ -455,7 +448,9 @@ export function UnifiedResources(props: UnifiedResourcesProps) { {resourcesFetchAttempt.statusCode !== 400 && resourcesFetchAttempt.statusCode !== 403 && ( - Retry + )} diff --git a/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx b/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx index aee1d51313940..22044ede0f03f 100644 --- a/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx +++ b/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx @@ -76,7 +76,7 @@ function ConnectorListItem({ name, id, onEdit, onDelete }) { - EDIT CONNECTOR + Edit Connector ); diff --git a/web/packages/teleport/src/Bots/List/BotList.test.tsx b/web/packages/teleport/src/Bots/List/BotList.test.tsx index fa03222f9beb7..f239b5222ab00 100644 --- a/web/packages/teleport/src/Bots/List/BotList.test.tsx +++ b/web/packages/teleport/src/Bots/List/BotList.test.tsx @@ -72,7 +72,7 @@ test('renders View options if type is github actions ssh', async () => { const props = makeProps(); props.bots = [bot]; render(); - fireEvent.click(await screen.findByText('OPTIONS')); + fireEvent.click(await screen.findByText('Options')); expect(screen.getByText('View...')).toBeInTheDocument(); }); @@ -95,6 +95,6 @@ test('doesnt renders View options if bot type is not github actions', async () = const props = makeProps(); props.bots = [bot]; render(); - fireEvent.click(await screen.findByText('OPTIONS')); + fireEvent.click(await screen.findByText('Options')); expect(screen.queryByText('View...')).not.toBeInTheDocument(); }); diff --git a/web/packages/teleport/src/Bots/List/Bots.test.tsx b/web/packages/teleport/src/Bots/List/Bots.test.tsx index c66511df5919f..3d3f5ae2c5e1e 100644 --- a/web/packages/teleport/src/Bots/List/Bots.test.tsx +++ b/web/packages/teleport/src/Bots/List/Bots.test.tsx @@ -64,7 +64,7 @@ test('calls edit endpoint', async () => { ).toBeInTheDocument(); }); - const actionCells = screen.queryAllByRole('button', { name: 'OPTIONS' }); + const actionCells = screen.queryAllByRole('button', { name: 'Options' }); expect(actionCells).toHaveLength(botsApiResponseFixture.items.length); await userEvent.click(actionCells[0]); @@ -96,7 +96,7 @@ test('calls delete endpoint', async () => { ).toBeInTheDocument(); }); - const actionCells = screen.queryAllByRole('button', { name: 'OPTIONS' }); + const actionCells = screen.queryAllByRole('button', { name: 'Options' }); expect(actionCells).toHaveLength(botsApiResponseFixture.items.length); await userEvent.click(actionCells[0]); diff --git a/web/packages/teleport/src/Bots/List/Bots.tsx b/web/packages/teleport/src/Bots/List/Bots.tsx index 0a67fa4c207b7..d07ebc264116a 100644 --- a/web/packages/teleport/src/Bots/List/Bots.tsx +++ b/web/packages/teleport/src/Bots/List/Bots.tsx @@ -20,7 +20,7 @@ import React, { useEffect, useState } from 'react'; import { useAttemptNext } from 'shared/hooks'; import { Link } from 'react-router-dom'; import { HoverTooltip } from 'shared/components/ToolTip'; -import { Alert, Box, ButtonPrimary, Indicator } from 'design'; +import { Alert, Box, Button, Indicator } from 'design'; import { FeatureBox, @@ -120,7 +120,13 @@ export function Bots() { to request bot creation permissions.` } > - Enroll New Bot - + diff --git a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap index e634fbe7084b2..b3e5d6b8c1d8d 100644 --- a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap +++ b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap @@ -40,7 +40,6 @@ exports[`render clusters 1`] = ` font-size: 12px; line-height: 16px; letter-spacing: 0.15px; - height: 24px; } .c18:focus-visible, @@ -87,7 +86,6 @@ exports[`render clusters 1`] = ` justify-content: center; color: rgba(255,255,255,0.72); margin-left: 8px; - margin-right: -8px; } .c6 { @@ -396,9 +394,8 @@ exports[`render clusters 1`] = `
@@ -836,7 +827,7 @@ exports[`render DocumentNodes 1`] = ` > Hostname
cluster: one
kernel: 4.15.0-51-generic @@ -899,13 +890,12 @@ exports[`render DocumentNodes 1`] = ` align="right" > {attempt.status === 'failed' && {attempt.statusText}}
- add my first resource + Add my first resource I'll do that later diff --git a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap b/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap index a424b7733f3c6..70d1beebde086 100644 --- a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap +++ b/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap @@ -409,7 +409,6 @@ exports[`failed 1`] = ` font-size: 12px; line-height: 16px; letter-spacing: 0.15px; - height: 24px; } .c38:focus-visible, @@ -527,7 +526,6 @@ exports[`failed 1`] = ` justify-content: center; color: rgba(255,255,255,0.72); margin-left: 4px; - margin-right: -8px; } .c6 { @@ -1144,7 +1142,6 @@ exports[`failed 1`] = ` {serverSidePagination.attempt.status === 'failed' && ( diff --git a/web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx b/web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx index eb22ccd6aa2b0..feb221eb8b41a 100644 --- a/web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx +++ b/web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx @@ -18,7 +18,15 @@ import React from 'react'; import { Danger } from 'design/Alert'; -import { Indicator, Text, Box, Flex, ButtonPrimary, Link } from 'design'; +import { + Indicator, + Text, + Box, + Flex, + ButtonPrimary, + Link, + Button, +} from 'design'; import Card from 'design/Card'; import Image from 'design/Image'; @@ -63,14 +71,16 @@ export default function TrustedClusters() { Trusted Clusters {hasClusters && ( - resources.create('trusted_cluster')} > Connect to Root Cluster - + )} {attempt.status === 'failed' && {attempt.statusText} } diff --git a/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx b/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx index d17b4cd967a12..748a5554fd8ee 100644 --- a/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx +++ b/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx @@ -64,7 +64,6 @@ export default function TrustedListItem(props: Props) { /> - EDIT TRUSTED CLUSTER + Edit Trusted Cluster ); diff --git a/web/packages/teleport/src/Users/Users.tsx b/web/packages/teleport/src/Users/Users.tsx index 38907d59c425e..220576e48d5ec 100644 --- a/web/packages/teleport/src/Users/Users.tsx +++ b/web/packages/teleport/src/Users/Users.tsx @@ -17,7 +17,7 @@ */ import React from 'react'; -import { Indicator, Box, ButtonPrimary, Alert } from 'design'; +import { Indicator, Box, Alert, Button } from 'design'; import { FeatureBox, @@ -65,18 +65,30 @@ export function Users(props: State) { {attempt.isSuccess && ( <> {!InviteCollaborators && ( - + )} {InviteCollaborators && ( - + )} )} diff --git a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap index 76c93bd8393f4..f619fbd662cef 100644 --- a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap +++ b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap @@ -46,9 +46,9 @@ exports[`success state 1`] = ` text-decoration: none; transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s; -webkit-font-smoothing: antialiased; - background-color: #9F85FF; - color: #000000; - border-color: transparent; + background-color: transparent; + color: #9F85FF; + border-color: #9F85FF; border-width: 1.5px; padding: 0 30.5px; min-height: 32px; @@ -119,7 +119,6 @@ exports[`success state 1`] = ` font-size: 12px; line-height: 16px; letter-spacing: 0.15px; - height: 24px; } .c27:focus-visible, @@ -237,7 +236,6 @@ exports[`success state 1`] = ` justify-content: center; color: rgba(255,255,255,0.72); margin-left: 8px; - margin-right: -8px; } .c6 { @@ -494,7 +492,7 @@ exports[`success state 1`] = ` @@ -2344,7 +2344,7 @@ exports[`story.MfaDeviceWebauthn 1`] = ` fill="filled" width="100%" > - Create an MFA method + Create an MFA Method @@ -3431,7 +3431,7 @@ exports[`story.PrimaryPasswordlessError 1`] = ` fill="filled" width="100%" > - Create a passkey + Create a Passkey
- Use password + Use Password
diff --git a/web/packages/teleport/src/components/AgentButtonAdd/AgentButtonAdd.tsx b/web/packages/teleport/src/components/AgentButtonAdd/AgentButtonAdd.tsx index fad9af48b10ed..9cdcbd05bcc0e 100644 --- a/web/packages/teleport/src/components/AgentButtonAdd/AgentButtonAdd.tsx +++ b/web/packages/teleport/src/components/AgentButtonAdd/AgentButtonAdd.tsx @@ -19,7 +19,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { ButtonPrimary } from 'design'; +import { Button } from 'design'; import cfg from 'teleport/config'; import { SearchResource } from 'teleport/Discover/SelectResource'; @@ -64,15 +64,16 @@ export default function AgentButtonAdd(props: Props) { }} style={{ textDecoration: 'none' }} > - {agent === 'unified_resource' ? 'Enroll New Resource' : `Add ${agent}`} - + ); } diff --git a/web/packages/teleport/src/components/AgentButtonAdd/__snapshots__/AgentButtonAdd.story.test.tsx.snap b/web/packages/teleport/src/components/AgentButtonAdd/__snapshots__/AgentButtonAdd.story.test.tsx.snap index f120c1b2dd886..de8f8269b555c 100644 --- a/web/packages/teleport/src/components/AgentButtonAdd/__snapshots__/AgentButtonAdd.story.test.tsx.snap +++ b/web/packages/teleport/src/components/AgentButtonAdd/__snapshots__/AgentButtonAdd.story.test.tsx.snap @@ -20,9 +20,9 @@ exports[`can create 1`] = ` text-decoration: none; transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s; -webkit-font-smoothing: antialiased; - background-color: #9F85FF; - color: #000000; - border-color: transparent; + background-color: transparent; + color: #9F85FF; + border-color: #9F85FF; border-width: 1.5px; padding: 0 30.5px; min-height: 32px; @@ -30,7 +30,6 @@ exports[`can create 1`] = ` line-height: 16px; letter-spacing: 0.15px; width: 240px; - text-transform: none; } .c0:focus-visible, @@ -72,7 +71,7 @@ exports[`can create 1`] = ` > diff --git a/web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx b/web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx index e0b5129d91416..713c024dea32d 100644 --- a/web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx +++ b/web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx @@ -165,18 +165,6 @@ export function LabelsInput({ e.preventDefault(); addLabel(); }} - css={` - text-transform: none; - font-weight: normal; - &:disabled { - .icon-add { - opacity: 0.35; - } - pointer-events: none; - } - &:hover { - } - `} disabled={disableBtns} gap={1} > diff --git a/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx b/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx index 80e57ab96c214..5667e998b760b 100644 --- a/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx +++ b/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx @@ -265,7 +265,7 @@ export function NewMfaDeviceForm({ onClick={e => onBtnClick(e, validator)} > {mfaType.value === 'webauthn' && !credential - ? 'Create an MFA method' + ? 'Create an MFA Method' : submitButtonText} diff --git a/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx b/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx index fb5b5822bd37f..abdcd1f6d3c07 100644 --- a/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx +++ b/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx @@ -108,7 +108,7 @@ export default function ResourceEditor(props) { disabled={attempt.isProcessing} onClick={handleClose} > - CANCEL + Cancel @@ -146,7 +146,7 @@ export default function ResourceEditor(props) { } }} > - VIEW DOCUMENTATION + View Documentation )} diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterAdd/ClusterAdd.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterAdd/ClusterAdd.tsx index d23442183c1be..a02df45ad07aa 100644 --- a/web/packages/teleterm/src/ui/ClusterConnect/ClusterAdd/ClusterAdd.tsx +++ b/web/packages/teleterm/src/ui/ClusterConnect/ClusterAdd/ClusterAdd.tsx @@ -82,7 +82,7 @@ export function ClusterAdd(props: { props.onCancel(); }} > - CANCEL + Cancel diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx index d33cc46ec8c43..f269351e4834d 100644 --- a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx +++ b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx @@ -186,14 +186,16 @@ export const LocalOnlyWithReasonVnetCertExpired = () => { ); }; +const authProviders = [ + { type: 'github', name: 'github', displayName: 'GitHub' }, + { type: 'saml', name: 'microsoft', displayName: 'Microsoft' }, +]; + export const SsoOnly = () => { const props = makeProps(); props.initAttempt.data.localAuthEnabled = false; props.initAttempt.data.authType = 'github'; - props.initAttempt.data.authProviders = [ - { type: 'github', name: 'github', displayName: 'github' }, - { type: 'saml', name: 'microsoft', displayName: 'microsoft' }, - ]; + props.initAttempt.data.authProviders = authProviders; return ( @@ -223,10 +225,7 @@ export const LocalLoggedInUserWithPasswordless = () => { export const LocalWithSso = () => { const props = makeProps(); - props.initAttempt.data.authProviders = [ - { type: 'github', name: 'github', displayName: 'github' }, - { type: 'saml', name: 'microsoft', displayName: 'microsoft' }, - ]; + props.initAttempt.data.authProviders = authProviders; return ( @@ -261,10 +260,7 @@ export const PasswordlessWithLocalLoggedInUser = () => { export const SsoWithLocalAndPasswordless = () => { const props = makeProps(); props.initAttempt.data.authType = 'github'; - props.initAttempt.data.authProviders = [ - { type: 'github', name: 'github', displayName: 'github' }, - { type: 'saml', name: 'microsoft', displayName: 'microsoft' }, - ]; + props.initAttempt.data.authProviders = authProviders; return ( diff --git a/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx b/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx index 8bb2c617b2752..484cdd0170ea2 100644 --- a/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx +++ b/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx @@ -23,7 +23,7 @@ import DialogConfirmation, { DialogHeader, } from 'design/DialogConfirmation'; import * as Alerts from 'design/Alert'; -import { ButtonIcon, ButtonPrimary, Text } from 'design'; +import { ButtonIcon, ButtonWarning, Text } from 'design'; import { Cross } from 'design/Icon'; @@ -88,16 +88,15 @@ export function ClusterLogout({ {status === 'error' && } - - Log out - + Log Out + diff --git a/web/packages/teleterm/src/ui/ConnectMyComputer/NavigationMenu.tsx b/web/packages/teleterm/src/ui/ConnectMyComputer/NavigationMenu.tsx index 1a5b195a9b165..cea6017fd46e7 100644 --- a/web/packages/teleterm/src/ui/ConnectMyComputer/NavigationMenu.tsx +++ b/web/packages/teleterm/src/ui/ConnectMyComputer/NavigationMenu.tsx @@ -180,7 +180,8 @@ export const MenuIcon = forwardRef( ( const StyledButton = styled(Button)` position: relative; - background: ${props => props.theme.colors.spotBackground[0]}; padding: 0; width: ${props => props.theme.space[5]}px; height: ${props => props.theme.space[5]}px; diff --git a/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx b/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx index 531c0a2f5c4d6..6922359389a92 100644 --- a/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx +++ b/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx @@ -107,7 +107,7 @@ export function DocumentsReopen(props: DocumentsReopenProps) { Reopen - Start new session + Start New Session diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx index 9e8f01bbdfd08..e394e5028ba22 100644 --- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx +++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx @@ -19,7 +19,7 @@ import React, { forwardRef } from 'react'; import { Cluster } from 'design/Icon'; import styled from 'styled-components'; -import { Button } from 'design'; +import { ButtonSecondary } from 'design'; import { useKeyboardShortcutFormatters } from 'teleterm/ui/services/keyboardShortcuts'; @@ -41,7 +41,6 @@ export const ConnectionsIcon = forwardRef( /> props.theme.colors.spotBackground[0]}; +const StyledButton = styled(ButtonSecondary)` padding: 0; width: ${props => props.theme.space[5]}px; height: ${props => props.theme.space[5]}px;