From e4fac74fbc97371209647eeaba75f0eb2243d338 Mon Sep 17 00:00:00 2001 From: Michael Myers Date: Fri, 12 Jan 2024 12:36:14 -0600 Subject: [PATCH] Update Toggle component styles --- web/packages/design/src/Alert/Alert.jsx | 2 +- web/packages/design/src/Alert/Alert.test.jsx | 2 +- .../__snapshots__/CardSuccess.test.jsx.snap | 7 +- web/packages/design/src/Label/Label.jsx | 2 +- .../design/src/LabelState/LabelState.jsx | 2 +- .../design/src/LabelState/LabelState.test.jsx | 2 +- .../design/src/Toggle/Toggle.story.tsx | 24 +++- web/packages/design/src/Toggle/Toggle.tsx | 123 +++++++++++++----- .../design/src/theme/themes/bblpTheme.ts | 11 +- .../design/src/theme/themes/darkTheme.ts | 12 +- .../design/src/theme/themes/lightTheme.ts | 12 +- .../design/src/theme/themes/sharedStyles.ts | 1 + web/packages/design/src/theme/themes/types.ts | 8 +- .../__snapshots__/Apps.story.test.tsx.snap | 106 +++++++++++---- .../DocumentNodes.story.test.tsx.snap | 53 ++++++-- .../Databases.story.test.tsx.snap | 106 +++++++++++---- .../EnrollRdsDatabase/RdsDatabaseList.tsx | 2 +- .../teleport/src/Discover/Shared/HintBox.tsx | 2 +- .../src/Integrations/IntegrationList.tsx | 2 +- .../__snapshots__/Kubes.story.test.tsx.snap | 106 +++++++++++---- .../__snapshots__/LoginSuccess.test.tsx.snap | 7 +- .../__snapshots__/Nodes.story.test.tsx.snap | 106 +++++++++++---- .../src/Player/ProgressBar/ProgressBar.tsx | 4 +- .../DocumentConnectMyComputer/ProgressBar.tsx | 8 +- .../ui/ConnectMyComputer/NavigationMenu.tsx | 2 +- .../ConnectionStatusIndicator.tsx | 2 +- .../ConnectionsIconStatusIndicator.tsx | 2 +- 27 files changed, 537 insertions(+), 179 deletions(-) diff --git a/web/packages/design/src/Alert/Alert.jsx b/web/packages/design/src/Alert/Alert.jsx index a7f737ee6bb3e..38e471cc49743 100644 --- a/web/packages/design/src/Alert/Alert.jsx +++ b/web/packages/design/src/Alert/Alert.jsx @@ -40,7 +40,7 @@ const kind = props => { }; case 'success': return { - background: theme.colors.success, + background: theme.colors.success.main, color: theme.colors.text.primaryInverse, }; default: diff --git a/web/packages/design/src/Alert/Alert.test.jsx b/web/packages/design/src/Alert/Alert.test.jsx index 7fdd7b82c7aa3..6d3ebeeea51cf 100644 --- a/web/packages/design/src/Alert/Alert.test.jsx +++ b/web/packages/design/src/Alert/Alert.test.jsx @@ -52,7 +52,7 @@ describe('design/Alert', () => { test('"kind" success renders bg == theme.colors.success', () => { const { container } = render(); expect(container.firstChild).toHaveStyle({ - background: theme.colors.success, + background: theme.colors.success.main, }); }); }); diff --git a/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap b/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap index e72d8f2320e56..4f0f327cfbe74 100644 --- a/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap +++ b/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap @@ -19,10 +19,15 @@ exports[`rendering of CardSuccess components 1`] = ` display: inline-flex; align-items: center; justify-content: center; - color: #00BFA5; margin-bottom: 16px; } +.c1 color { + main: #00BFA6; + hover: #33CCB8; + active: #66D9CA; +} +
{ if (kind === 'success') { return { - backgroundColor: theme.colors.success, + backgroundColor: theme.colors.success.main, color: theme.colors.text.primaryInverse, }; } diff --git a/web/packages/design/src/LabelState/LabelState.jsx b/web/packages/design/src/LabelState/LabelState.jsx index 46d83d59513e0..13f5913d5b852 100644 --- a/web/packages/design/src/LabelState/LabelState.jsx +++ b/web/packages/design/src/LabelState/LabelState.jsx @@ -43,7 +43,7 @@ const kinds = ({ theme, kind, shadow }) => { } if (kind === 'success') { - styles.background = theme.colors.success; + styles.background = theme.colors.success.main; styles.color = theme.colors.text.primaryInverse; } diff --git a/web/packages/design/src/LabelState/LabelState.test.jsx b/web/packages/design/src/LabelState/LabelState.test.jsx index a2d04edfa347c..dba4a6d00e315 100644 --- a/web/packages/design/src/LabelState/LabelState.test.jsx +++ b/web/packages/design/src/LabelState/LabelState.test.jsx @@ -30,7 +30,7 @@ const colors = { info: theme.colors.spotBackground[0], warning: theme.colors.warning.main, danger: theme.colors.error.main, - success: theme.colors.success, + success: theme.colors.success.main, }; describe('design/LabelState', () => { diff --git a/web/packages/design/src/Toggle/Toggle.story.tsx b/web/packages/design/src/Toggle/Toggle.story.tsx index 8295d9256b0d8..8412010bdff1a 100644 --- a/web/packages/design/src/Toggle/Toggle.story.tsx +++ b/web/packages/design/src/Toggle/Toggle.story.tsx @@ -26,7 +26,16 @@ export default { }; export const Default = () => { - const [toggled, setToggled] = useState(false); + return ( + + + + + ); +}; + +const ToggleRow = (props: { initialToggled: boolean }) => { + const [toggled, setToggled] = useState(props.initialToggled); function toggle(): void { setToggled(wasToggled => !wasToggled); @@ -42,6 +51,19 @@ export const Default = () => { Disabled
+
+ Enabled (large) + +
+
+ Disabled (large) + +
); }; diff --git a/web/packages/design/src/Toggle/Toggle.tsx b/web/packages/design/src/Toggle/Toggle.tsx index f13d1c98bf3c4..c744e3b38527a 100644 --- a/web/packages/design/src/Toggle/Toggle.tsx +++ b/web/packages/design/src/Toggle/Toggle.tsx @@ -1,18 +1,20 @@ -/* -Copyright 2022 Gravitational, Inc. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ +/** + * Teleport + * Copyright (C) 2023 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, { ReactNode } from 'react'; import styled from 'styled-components'; @@ -23,12 +25,14 @@ export function Toggle({ children, disabled, className, + size = 'small', }: { isToggled: boolean; onToggle: () => void; children?: ReactNode; disabled?: boolean; className?: string; + size?: 'small' | 'large'; }) { return ( @@ -36,8 +40,9 @@ export function Toggle({ checked={isToggled} onChange={onToggle} disabled={disabled} + size={size} /> - + {children} ); @@ -54,23 +59,65 @@ const StyledWrapper = styled.label` } `; +const size = props => { + switch (props.size) { + case 'large': + return { + track: { + width: 40, + height: 20, + }, + circle: { + width: 14, + height: 14, + transform: 'translate(3px, -50%)', + }, + translate: 'translate(23px, -50%)', + }; + default: + // small + return { + track: { + width: 32, + height: 16, + }, + circle: { + width: 12, + height: 12, + transform: 'translate(2px, -50%)', + }, + translate: 'translate(18px, -50%)', + }; + } +}; + const StyledSlider = styled.div` - width: 32px; - height: 12px; - border-radius: 12px; - background: ${props => props.theme.colors.levels.surface}; + // the slider 'track' + ${props => size(props).track}; + border-radius: 10px; cursor: inherit; flex-shrink: 0; + background: ${props => props.theme.colors.buttons.secondary.default}; + transition: background 0.15s ease-in-out; + + &:hover { + background: ${props => props.theme.colors.buttons.secondary.hover}; + } + + &:active { + background: ${props => props.theme.colors.buttons.secondary.active}; + } + // the slider 'circle' &:before { content: ''; position: absolute; top: 50%; - transform: translate(0, -50%); - width: 16px; - height: 16px; - border-radius: 16px; - background: ${props => props.theme.colors.brand}; + ${props => size(props).circle}; + border-radius: 14px; + background: ${props => props.theme.colors.interactionHandle}; + box-shadow: ${props => props.theme.boxShadow[0]}; + transition: transform 0.05s ease-in; } `; @@ -78,20 +125,36 @@ const StyledInput = styled.input.attrs({ type: 'checkbox' })` opacity: 0; position: absolute; cursor: inherit; + z-index: -1; &:checked + ${StyledSlider} { - background: ${props => props.theme.colors.spotBackground[1]}; - &:before { - transform: translate(16px, -50%); + transform: ${props => size(props).translate}; + } + } + + &:enabled:checked + ${StyledSlider} { + background: ${props => props.theme.colors.success.main}; + + &:hover { + background: ${props => props.theme.colors.success.hover}; + } + + &:active { + background: ${props => props.theme.colors.success.active}; } } &:disabled + ${StyledSlider} { - background: ${props => props.theme.colors.levels.surface}; + background: ${props => props.theme.colors.spotBackground[0]}; &:before { - background: ${props => props.theme.colors.grey[700]}; + opacity: 0.36; + box-shadow: none; } } + + &:disabled:checked + ${StyledSlider} { + background: ${props => props.theme.colors.interactive.tonal.success[2]}; + } `; diff --git a/web/packages/design/src/theme/themes/bblpTheme.ts b/web/packages/design/src/theme/themes/bblpTheme.ts index d817465604f6b..5d85f5e47e80b 100644 --- a/web/packages/design/src/theme/themes/bblpTheme.ts +++ b/web/packages/design/src/theme/themes/bblpTheme.ts @@ -93,6 +93,11 @@ const colors: ThemeColors = { 'rgba(255,160,40, 0.18)', 'rgba(255,160,40, 0.25)', ], + success: [ + 'rgba(0, 162, 35, 0.1)', + 'rgba(0, 162, 35, 0.18)', + 'rgba(0, 162, 35, 0.25)', + ], }, }, @@ -429,7 +434,11 @@ const colors: ThemeColors = { }, link: '#66ABFF', - success: '#00BFA5', + success: { + main: '#00A223', + hover: '#35D655', + active: '#00851C', + }, dataVisualisation: dataVisualisationColors, }; diff --git a/web/packages/design/src/theme/themes/darkTheme.ts b/web/packages/design/src/theme/themes/darkTheme.ts index 78928023ea998..8affb9e62a97e 100644 --- a/web/packages/design/src/theme/themes/darkTheme.ts +++ b/web/packages/design/src/theme/themes/darkTheme.ts @@ -93,6 +93,11 @@ const colors: ThemeColors = { 'rgba(159,133,255, 0.18)', 'rgba(159,133,255, 0.25)', ], + success: [ + 'rgba(0, 191, 166, 0.1)', + 'rgba(0, 191, 166, 0.18)', + 'rgba(0, 191, 166, 0.25)', + ], }, }, @@ -166,6 +171,12 @@ const colors: ThemeColors = { active: '#FFCD66', }, + success: { + main: '#00BFA6', + hover: '#33CCB8', + active: '#66D9CA', + }, + notice: { background: '#344179', // elevated }, @@ -429,7 +440,6 @@ const colors: ThemeColors = { }, link: '#009EFF', - success: '#00BFA5', dataVisualisation: dataVisualisationColors, }; diff --git a/web/packages/design/src/theme/themes/lightTheme.ts b/web/packages/design/src/theme/themes/lightTheme.ts index 3b51ffc53dd80..f2c36d62ec0d6 100644 --- a/web/packages/design/src/theme/themes/lightTheme.ts +++ b/web/packages/design/src/theme/themes/lightTheme.ts @@ -88,6 +88,11 @@ const colors: ThemeColors = { 'rgba(81,47,201, 0.18)', 'rgba(81,47,201, 0.25)', ], + success: [ + 'rgba(0, 125, 107, 0.1)', + 'rgba(0, 125, 107, 0.18)', + 'rgba(0, 125, 107, 0.25)', + ], }, }, @@ -424,7 +429,12 @@ const colors: ThemeColors = { }, link: '#0073BA', - success: '#007D6B', + + success: { + main: '#007D6B', + hover: '#006456', + active: '#004B40', + }, dataVisualisation: dataVisualisationColors, }; diff --git a/web/packages/design/src/theme/themes/sharedStyles.ts b/web/packages/design/src/theme/themes/sharedStyles.ts index 8fbf081cdae27..473eb65890cf4 100644 --- a/web/packages/design/src/theme/themes/sharedStyles.ts +++ b/web/packages/design/src/theme/themes/sharedStyles.ts @@ -60,6 +60,7 @@ export const sharedStyles: SharedStyles = { // Colors that are shared between all themes, these should be added to the theme.colors object. export const sharedColors: SharedColors = { + interactionHandle: '#FFFFFF', dark: '#000000', light: '#FFFFFF', grey: { diff --git a/web/packages/design/src/theme/themes/types.ts b/web/packages/design/src/theme/themes/types.ts index 957d37e4ad39e..d821c37ad58d3 100644 --- a/web/packages/design/src/theme/themes/types.ts +++ b/web/packages/design/src/theme/themes/types.ts @@ -55,6 +55,7 @@ export type ThemeColors = { interactive: { tonal: { primary: string[]; + success: string[]; }; }; @@ -131,6 +132,11 @@ export type ThemeColors = { hover: string; active: string; }; + success: { + main: string; + hover: string; + active: string; + }; notice: { background: string; @@ -179,7 +185,6 @@ export type ThemeColors = { }; link: string; - success: string; dataVisualisation: DataVisualisationColors; accessGraph: AccessGraphColors; @@ -236,6 +241,7 @@ interface AccessGraphEdgeColors { } export type SharedColors = { + interactionHandle: string; dark: string; light: string; grey: typeof blueGrey; diff --git a/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap b/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap index c5fc7c23c0628..be39845c3b4d4 100644 --- a/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap +++ b/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap @@ -629,44 +629,69 @@ exports[`failed state 1`] = ` .c18 { width: 32px; - height: 12px; - border-radius: 12px; - background: #222C59; + height: 16px; + border-radius: 10px; cursor: inherit; flex-shrink: 0; + background: rgba(255,255,255,0.07); + transition: background 0.15s ease-in-out; +} + +.c18:hover { + background: rgba(255,255,255,0.13); +} + +.c18:active { + background: rgba(255,255,255,0.18); } .c18:before { content: ''; position: absolute; top: 50%; - transform: translate(0,-50%); - width: 16px; - height: 16px; - border-radius: 16px; - background: #9F85FF; + width: 12px; + height: 12px; + transform: translate(2px,-50%); + border-radius: 14px; + background: #FFFFFF; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); + transition: transform 0.05s ease-in; } .c16 { opacity: 0; position: absolute; cursor: inherit; + z-index: -1; } -.c16:checked + .c17 { - background: rgba(255,255,255,0.13); +.c16:checked + .c17:before { + transform: translate(18px,-50%); } -.c16:checked + .c17:before { - transform: translate(16px,-50%); +.c16:enabled:checked + .c17 { + background: #00BFA6; +} + +.c16:enabled:checked + .c17:hover { + background: #33CCB8; +} + +.c16:enabled:checked + .c17:active { + background: #66D9CA; } .c16:disabled + .c17 { - background: #222C59; + background: rgba(255,255,255,0.07); } .c16:disabled + .c17:before { - background: #455a64; + opacity: 0.36; + box-shadow: none; +} + +.c16:disabled:checked + .c17 { + background: rgba(0,191,166,0.25); } .c1 { @@ -2225,44 +2250,69 @@ exports[`loaded state 1`] = ` .c18 { width: 32px; - height: 12px; - border-radius: 12px; - background: #222C59; + height: 16px; + border-radius: 10px; cursor: inherit; flex-shrink: 0; + background: rgba(255,255,255,0.07); + transition: background 0.15s ease-in-out; +} + +.c18:hover { + background: rgba(255,255,255,0.13); +} + +.c18:active { + background: rgba(255,255,255,0.18); } .c18:before { content: ''; position: absolute; top: 50%; - transform: translate(0,-50%); - width: 16px; - height: 16px; - border-radius: 16px; - background: #9F85FF; + width: 12px; + height: 12px; + transform: translate(2px,-50%); + border-radius: 14px; + background: #FFFFFF; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); + transition: transform 0.05s ease-in; } .c16 { opacity: 0; position: absolute; cursor: inherit; + z-index: -1; } -.c16:checked + .c17 { - background: rgba(255,255,255,0.13); +.c16:checked + .c17:before { + transform: translate(18px,-50%); } -.c16:checked + .c17:before { - transform: translate(16px,-50%); +.c16:enabled:checked + .c17 { + background: #00BFA6; +} + +.c16:enabled:checked + .c17:hover { + background: #33CCB8; +} + +.c16:enabled:checked + .c17:active { + background: #66D9CA; } .c16:disabled + .c17 { - background: #222C59; + background: rgba(255,255,255,0.07); } .c16:disabled + .c17:before { - background: #455a64; + opacity: 0.36; + box-shadow: none; +} + +.c16:disabled:checked + .c17 { + background: rgba(0,191,166,0.25); } .c1 { diff --git a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap index 5becfc7f45f4f..9f8a6a7e1bf1f 100644 --- a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap +++ b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap @@ -254,44 +254,69 @@ exports[`render DocumentNodes 1`] = ` .c21 { width: 32px; - height: 12px; - border-radius: 12px; - background: #222C59; + height: 16px; + border-radius: 10px; cursor: inherit; flex-shrink: 0; + background: rgba(255,255,255,0.07); + transition: background 0.15s ease-in-out; +} + +.c21:hover { + background: rgba(255,255,255,0.13); +} + +.c21:active { + background: rgba(255,255,255,0.18); } .c21:before { content: ''; position: absolute; top: 50%; - transform: translate(0,-50%); - width: 16px; - height: 16px; - border-radius: 16px; - background: #9F85FF; + width: 12px; + height: 12px; + transform: translate(2px,-50%); + border-radius: 14px; + background: #FFFFFF; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); + transition: transform 0.05s ease-in; } .c19 { opacity: 0; position: absolute; cursor: inherit; + z-index: -1; } -.c19:checked + .c20 { - background: rgba(255,255,255,0.13); +.c19:checked + .c20:before { + transform: translate(18px,-50%); } -.c19:checked + .c20:before { - transform: translate(16px,-50%); +.c19:enabled:checked + .c20 { + background: #00BFA6; +} + +.c19:enabled:checked + .c20:hover { + background: #33CCB8; +} + +.c19:enabled:checked + .c20:active { + background: #66D9CA; } .c19:disabled + .c20 { - background: #222C59; + background: rgba(255,255,255,0.07); } .c19:disabled + .c20:before { - background: #455a64; + opacity: 0.36; + box-shadow: none; +} + +.c19:disabled:checked + .c20 { + background: rgba(0,191,166,0.25); } .c28 { diff --git a/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap b/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap index 74ed57816320f..0c2fb625d9009 100644 --- a/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap +++ b/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap @@ -500,44 +500,69 @@ exports[`failed 1`] = ` .c18 { width: 32px; - height: 12px; - border-radius: 12px; - background: #222C59; + height: 16px; + border-radius: 10px; cursor: inherit; flex-shrink: 0; + background: rgba(255,255,255,0.07); + transition: background 0.15s ease-in-out; +} + +.c18:hover { + background: rgba(255,255,255,0.13); +} + +.c18:active { + background: rgba(255,255,255,0.18); } .c18:before { content: ''; position: absolute; top: 50%; - transform: translate(0,-50%); - width: 16px; - height: 16px; - border-radius: 16px; - background: #9F85FF; + width: 12px; + height: 12px; + transform: translate(2px,-50%); + border-radius: 14px; + background: #FFFFFF; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); + transition: transform 0.05s ease-in; } .c16 { opacity: 0; position: absolute; cursor: inherit; + z-index: -1; } -.c16:checked + .c17 { - background: rgba(255,255,255,0.13); +.c16:checked + .c17:before { + transform: translate(18px,-50%); } -.c16:checked + .c17:before { - transform: translate(16px,-50%); +.c16:enabled:checked + .c17 { + background: #00BFA6; +} + +.c16:enabled:checked + .c17:hover { + background: #33CCB8; +} + +.c16:enabled:checked + .c17:active { + background: #66D9CA; } .c16:disabled + .c17 { - background: #222C59; + background: rgba(255,255,255,0.07); } .c16:disabled + .c17:before { - background: #455a64; + opacity: 0.36; + box-shadow: none; +} + +.c16:disabled:checked + .c17 { + background: rgba(0,191,166,0.25); } .c1 { @@ -1641,44 +1666,69 @@ exports[`open source loaded 1`] = ` .c18 { width: 32px; - height: 12px; - border-radius: 12px; - background: #222C59; + height: 16px; + border-radius: 10px; cursor: inherit; flex-shrink: 0; + background: rgba(255,255,255,0.07); + transition: background 0.15s ease-in-out; +} + +.c18:hover { + background: rgba(255,255,255,0.13); +} + +.c18:active { + background: rgba(255,255,255,0.18); } .c18:before { content: ''; position: absolute; top: 50%; - transform: translate(0,-50%); - width: 16px; - height: 16px; - border-radius: 16px; - background: #9F85FF; + width: 12px; + height: 12px; + transform: translate(2px,-50%); + border-radius: 14px; + background: #FFFFFF; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); + transition: transform 0.05s ease-in; } .c16 { opacity: 0; position: absolute; cursor: inherit; + z-index: -1; } -.c16:checked + .c17 { - background: rgba(255,255,255,0.13); +.c16:checked + .c17:before { + transform: translate(18px,-50%); } -.c16:checked + .c17:before { - transform: translate(16px,-50%); +.c16:enabled:checked + .c17 { + background: #00BFA6; +} + +.c16:enabled:checked + .c17:hover { + background: #33CCB8; +} + +.c16:enabled:checked + .c17:active { + background: #66D9CA; } .c16:disabled + .c17 { - background: #222C59; + background: rgba(255,255,255,0.07); } .c16:disabled + .c17:before { - background: #455a64; + opacity: 0.36; + box-shadow: none; +} + +.c16:disabled:checked + .c17 { + background: rgba(0,191,166,0.25); } .c1 { diff --git a/web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/RdsDatabaseList.tsx b/web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/RdsDatabaseList.tsx index 49f6802099d62..a5226a96bb990 100644 --- a/web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/RdsDatabaseList.tsx +++ b/web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/RdsDatabaseList.tsx @@ -156,7 +156,7 @@ const StatusLight = styled(Box)` height: 8px; background-color: ${({ status, theme }) => { if (status === Status.Success) { - return theme.colors.success; + return theme.colors.success.main; } if (status === Status.Error) { return theme.colors.error.main; diff --git a/web/packages/teleport/src/Discover/Shared/HintBox.tsx b/web/packages/teleport/src/Discover/Shared/HintBox.tsx index a91ee29acb4fb..0bfa7ccbb30c2 100644 --- a/web/packages/teleport/src/Discover/Shared/HintBox.tsx +++ b/web/packages/teleport/src/Discover/Shared/HintBox.tsx @@ -47,7 +47,7 @@ export const SuccessInfo = styled(Box)` background-color: ${props => props.theme.colors.spotBackground[0]}; padding: ${props => `${props.theme.space[3]}px`}; border-radius: ${props => `${props.theme.space[2]}px`}; - border: 2px solid ${props => props.theme.colors.success}; + border: 2px solid ${props => props.theme.colors.success.main}; display: flex; align-items: center; `; diff --git a/web/packages/teleport/src/Integrations/IntegrationList.tsx b/web/packages/teleport/src/Integrations/IntegrationList.tsx index b28e8c52602ac..b36af2c899756 100644 --- a/web/packages/teleport/src/Integrations/IntegrationList.tsx +++ b/web/packages/teleport/src/Integrations/IntegrationList.tsx @@ -229,7 +229,7 @@ const StatusLight = styled(Box)` height: 8px; background-color: ${({ status, theme }) => { if (status === Status.Success) { - return theme.colors.success; + return theme.colors.success.main; } if (status === Status.Error) { return theme.colors.error.main; diff --git a/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap b/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap index 3003dacc15a53..89c40d9c6ba3d 100644 --- a/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap +++ b/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap @@ -500,44 +500,69 @@ exports[`failed 1`] = ` .c18 { width: 32px; - height: 12px; - border-radius: 12px; - background: #222C59; + height: 16px; + border-radius: 10px; cursor: inherit; flex-shrink: 0; + background: rgba(255,255,255,0.07); + transition: background 0.15s ease-in-out; +} + +.c18:hover { + background: rgba(255,255,255,0.13); +} + +.c18:active { + background: rgba(255,255,255,0.18); } .c18:before { content: ''; position: absolute; top: 50%; - transform: translate(0,-50%); - width: 16px; - height: 16px; - border-radius: 16px; - background: #9F85FF; + width: 12px; + height: 12px; + transform: translate(2px,-50%); + border-radius: 14px; + background: #FFFFFF; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); + transition: transform 0.05s ease-in; } .c16 { opacity: 0; position: absolute; cursor: inherit; + z-index: -1; } -.c16:checked + .c17 { - background: rgba(255,255,255,0.13); +.c16:checked + .c17:before { + transform: translate(18px,-50%); } -.c16:checked + .c17:before { - transform: translate(16px,-50%); +.c16:enabled:checked + .c17 { + background: #00BFA6; +} + +.c16:enabled:checked + .c17:hover { + background: #33CCB8; +} + +.c16:enabled:checked + .c17:active { + background: #66D9CA; } .c16:disabled + .c17 { - background: #222C59; + background: rgba(255,255,255,0.07); } .c16:disabled + .c17:before { - background: #455a64; + opacity: 0.36; + box-shadow: none; +} + +.c16:disabled:checked + .c17 { + background: rgba(0,191,166,0.25); } .c25 { @@ -1373,44 +1398,69 @@ exports[`loaded 1`] = ` .c18 { width: 32px; - height: 12px; - border-radius: 12px; - background: #222C59; + height: 16px; + border-radius: 10px; cursor: inherit; flex-shrink: 0; + background: rgba(255,255,255,0.07); + transition: background 0.15s ease-in-out; +} + +.c18:hover { + background: rgba(255,255,255,0.13); +} + +.c18:active { + background: rgba(255,255,255,0.18); } .c18:before { content: ''; position: absolute; top: 50%; - transform: translate(0,-50%); - width: 16px; - height: 16px; - border-radius: 16px; - background: #9F85FF; + width: 12px; + height: 12px; + transform: translate(2px,-50%); + border-radius: 14px; + background: #FFFFFF; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); + transition: transform 0.05s ease-in; } .c16 { opacity: 0; position: absolute; cursor: inherit; + z-index: -1; } -.c16:checked + .c17 { - background: rgba(255,255,255,0.13); +.c16:checked + .c17:before { + transform: translate(18px,-50%); } -.c16:checked + .c17:before { - transform: translate(16px,-50%); +.c16:enabled:checked + .c17 { + background: #00BFA6; +} + +.c16:enabled:checked + .c17:hover { + background: #33CCB8; +} + +.c16:enabled:checked + .c17:active { + background: #66D9CA; } .c16:disabled + .c17 { - background: #222C59; + background: rgba(255,255,255,0.07); } .c16:disabled + .c17:before { - background: #455a64; + opacity: 0.36; + box-shadow: none; +} + +.c16:disabled:checked + .c17 { + background: rgba(0,191,166,0.25); } .c25 { diff --git a/web/packages/teleport/src/Login/__snapshots__/LoginSuccess.test.tsx.snap b/web/packages/teleport/src/Login/__snapshots__/LoginSuccess.test.tsx.snap index 3df95b7456432..5fd4abbc1fd0a 100644 --- a/web/packages/teleport/src/Login/__snapshots__/LoginSuccess.test.tsx.snap +++ b/web/packages/teleport/src/Login/__snapshots__/LoginSuccess.test.tsx.snap @@ -29,10 +29,15 @@ exports[`renders 1`] = ` display: inline-flex; align-items: center; justify-content: center; - color: #00BFA5; margin-bottom: 16px; } +.c2 color { + main: #00BFA6; + hover: #33CCB8; + active: #66D9CA; +} + .c0 { display: block; outline: none; 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 8272a11874140..afda3a434fd0c 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 @@ -510,44 +510,69 @@ exports[`failed 1`] = ` .c18 { width: 32px; - height: 12px; - border-radius: 12px; - background: #222C59; + height: 16px; + border-radius: 10px; cursor: inherit; flex-shrink: 0; + background: rgba(255,255,255,0.07); + transition: background 0.15s ease-in-out; +} + +.c18:hover { + background: rgba(255,255,255,0.13); +} + +.c18:active { + background: rgba(255,255,255,0.18); } .c18:before { content: ''; position: absolute; top: 50%; - transform: translate(0,-50%); - width: 16px; - height: 16px; - border-radius: 16px; - background: #9F85FF; + width: 12px; + height: 12px; + transform: translate(2px,-50%); + border-radius: 14px; + background: #FFFFFF; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); + transition: transform 0.05s ease-in; } .c16 { opacity: 0; position: absolute; cursor: inherit; + z-index: -1; } -.c16:checked + .c17 { - background: rgba(255,255,255,0.13); +.c16:checked + .c17:before { + transform: translate(18px,-50%); } -.c16:checked + .c17:before { - transform: translate(16px,-50%); +.c16:enabled:checked + .c17 { + background: #00BFA6; +} + +.c16:enabled:checked + .c17:hover { + background: #33CCB8; +} + +.c16:enabled:checked + .c17:active { + background: #66D9CA; } .c16:disabled + .c17 { - background: #222C59; + background: rgba(255,255,255,0.07); } .c16:disabled + .c17:before { - background: #455a64; + opacity: 0.36; + box-shadow: none; +} + +.c16:disabled:checked + .c17 { + background: rgba(0,191,166,0.25); } .c1 { @@ -1692,44 +1717,69 @@ exports[`loaded 1`] = ` .c18 { width: 32px; - height: 12px; - border-radius: 12px; - background: #222C59; + height: 16px; + border-radius: 10px; cursor: inherit; flex-shrink: 0; + background: rgba(255,255,255,0.07); + transition: background 0.15s ease-in-out; +} + +.c18:hover { + background: rgba(255,255,255,0.13); +} + +.c18:active { + background: rgba(255,255,255,0.18); } .c18:before { content: ''; position: absolute; top: 50%; - transform: translate(0,-50%); - width: 16px; - height: 16px; - border-radius: 16px; - background: #9F85FF; + width: 12px; + height: 12px; + transform: translate(2px,-50%); + border-radius: 14px; + background: #FFFFFF; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); + transition: transform 0.05s ease-in; } .c16 { opacity: 0; position: absolute; cursor: inherit; + z-index: -1; } -.c16:checked + .c17 { - background: rgba(255,255,255,0.13); +.c16:checked + .c17:before { + transform: translate(18px,-50%); } -.c16:checked + .c17:before { - transform: translate(16px,-50%); +.c16:enabled:checked + .c17 { + background: #00BFA6; +} + +.c16:enabled:checked + .c17:hover { + background: #33CCB8; +} + +.c16:enabled:checked + .c17:active { + background: #66D9CA; } .c16:disabled + .c17 { - background: #222C59; + background: rgba(255,255,255,0.07); } .c16:disabled + .c17:before { - background: #455a64; + opacity: 0.36; + box-shadow: none; +} + +.c16:disabled:checked + .c17 { + background: rgba(0,191,166,0.25); } .c1 { diff --git a/web/packages/teleport/src/Player/ProgressBar/ProgressBar.tsx b/web/packages/teleport/src/Player/ProgressBar/ProgressBar.tsx index fd5604f7b3f3d..53448282c7e8c 100644 --- a/web/packages/teleport/src/Player/ProgressBar/ProgressBar.tsx +++ b/web/packages/teleport/src/Player/ProgressBar/ProgressBar.tsx @@ -142,7 +142,7 @@ const ActionButton = styled.button` opacity: 1; .icon { - color: ${props => props.theme.colors.success}; + color: ${props => props.theme.colors.success.main}; } } @@ -181,7 +181,7 @@ const StyledProgessBar = styled.div` } .grv-slider .bar-0 { - background-color: ${props => props.theme.colors.success}; + background-color: ${props => props.theme.colors.success.main}; box-shadow: none; } diff --git a/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputer/ProgressBar.tsx b/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputer/ProgressBar.tsx index 87d0d18a97fcc..ac516c5504f96 100644 --- a/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputer/ProgressBar.tsx +++ b/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputer/ProgressBar.tsx @@ -65,7 +65,7 @@ function Phase({ let bg = phaseSolidColor; if (status === 'success') { - bg = theme.colors.success; + bg = theme.colors.success.main; } if (status === 'error') { @@ -85,7 +85,9 @@ function Phase({ {!isLast && ( )} @@ -151,7 +153,7 @@ function getPhaseSolidColor(theme: any): string { const Spinner = styled.div` opacity: 1; color: ${props => props.theme.colors.spotBackground[2]}; - border: 3px solid ${props => props.theme.colors.success}; + border: 3px solid ${props => props.theme.colors.success.main}; border-radius: 50%; border-top: 3px solid ${props => props.theme.colors.spotBackground[0]}; width: 24px; diff --git a/web/packages/teleterm/src/ui/ConnectMyComputer/NavigationMenu.tsx b/web/packages/teleterm/src/ui/ConnectMyComputer/NavigationMenu.tsx index 5d4651a90c4be..0e1f59749fc24 100644 --- a/web/packages/teleterm/src/ui/ConnectMyComputer/NavigationMenu.tsx +++ b/web/packages/teleterm/src/ui/ConnectMyComputer/NavigationMenu.tsx @@ -248,7 +248,7 @@ const StyledStatus = styled(Box)` } if (status === 'processing' || status === 'success') { - return { backgroundColor: theme.colors.success }; + return { backgroundColor: theme.colors.success.main }; } // 'error' status can be ignored as it's handled outside of StyledStatus. diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx index 543d83d2f241d..c9f2b36eb8eaf 100644 --- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx +++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx @@ -30,7 +30,7 @@ const StyledStatus = styled(Box)` ${props => { const { $connected, theme } = props; const backgroundColor = $connected - ? theme.colors.success + ? theme.colors.success.main : theme.colors.grey[300]; return { backgroundColor, diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIconStatusIndicator.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIconStatusIndicator.tsx index 772111bd5a619..bf1678edc1614 100644 --- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIconStatusIndicator.tsx +++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIconStatusIndicator.tsx @@ -34,7 +34,7 @@ const StyledStatus = styled(Box)` box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); ${props => { const { $connected, theme } = props; - const backgroundColor = $connected ? theme.colors.success : null; + const backgroundColor = $connected ? theme.colors.success.main : null; const border = $connected ? null : `1px solid ${theme.colors.text.slightlyMuted}`;