From f5d82af75edad9c80f17a5f501dfff6044059ab0 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Fri, 10 Jan 2025 13:18:38 +0530 Subject: [PATCH] fix: styling for scope variables --- src/components/ClusterNodes/clusterNodes.scss | 4 +- src/components/app/list/list.scss | 2 +- .../FloatingVariablesSuggestions.tsx | 2 +- .../SuggestionItem.tsx | 8 ++-- .../Suggestions.tsx | 39 ++++++++++++------- 5 files changed, 33 insertions(+), 22 deletions(-) diff --git a/src/components/ClusterNodes/clusterNodes.scss b/src/components/ClusterNodes/clusterNodes.scss index 74a828a239..50542ab5e0 100644 --- a/src/components/ClusterNodes/clusterNodes.scss +++ b/src/components/ClusterNodes/clusterNodes.scss @@ -45,7 +45,7 @@ } } .error-icon-white { - path[fill='F33E3E'] { + path[fill='#F33E3E'] { fill: var(--N0); } path[fill='#FFF'] { @@ -61,7 +61,7 @@ } } .no-data-icon { - path[fill='#06c'] { + path[fill='#06C'] { fill: var(--N600); } } diff --git a/src/components/app/list/list.scss b/src/components/app/list/list.scss index 3ab5d89a12..c9ba84cb53 100644 --- a/src/components/app/list/list.scss +++ b/src/components/app/list/list.scss @@ -441,7 +441,7 @@ border: solid 1px var(--Y400); } -.helm-permission-message-strip .icon path[fill='F33E3E'] { +.helm-permission-message-strip .icon path[fill='#F33E3E'] { fill: var(--Y700); } diff --git a/src/components/common/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx b/src/components/common/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx index 6871278472..be6345d08c 100644 --- a/src/components/common/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx +++ b/src/components/common/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx @@ -209,7 +209,7 @@ const FloatingVariablesSuggestions = ({ onDrag={handleExpandedDrag} > <div - className="flex column dc__no-shrink w-356 dc__content-space dc__border-radius-8-imp dc__border-n7 dc__overflow-hidden dc__position-abs mxh-504" + className="flex column dc__no-shrink w-356 dc__content-space dc__border-radius-8-imp dc__border dc__overflow-hidden dc__position-abs mxh-504 bg__overlay" style={{ zIndex, boxShadow: '0px 4px 8px 0px rgba(0, 0, 0, 0.25)', diff --git a/src/components/common/FloatingVariablesSuggestions/SuggestionItem.tsx b/src/components/common/FloatingVariablesSuggestions/SuggestionItem.tsx index c615661dff..279d4b58b9 100644 --- a/src/components/common/FloatingVariablesSuggestions/SuggestionItem.tsx +++ b/src/components/common/FloatingVariablesSuggestions/SuggestionItem.tsx @@ -41,15 +41,15 @@ export default function SuggestionItem({ return <i className="cn-3 fs-12 fw-6 lh-18 m-0">is sensitive & hidden</i> } if (value === '') { - return <p className="cn-0 fs-12 fw-6 lh-18 m-0">'""'</p> + return <p className="text__white fs-12 fw-6 lh-18 m-0">'""'</p> } if (typeof value === 'boolean') { - return <p className="cn-0 fs-12 fw-6 lh-18 m-0">{value ? 'true' : 'false'}</p> + return <p className="text__white fs-12 fw-6 lh-18 m-0">{value ? 'true' : 'false'}</p> } if (typeof value === 'object') { - return <pre className="cn-0 fs-12 fw-6 lh-18 m-0 bcn-9">{YAMLStringify(value)}</pre> + return <pre className="text__white fs-12 fw-6 lh-18 m-0 bcn-9">{YAMLStringify(value)}</pre> } - return <p className="cn-0 fs-12 fw-6 lh-18 m-0">{value}</p> + return <p className="text__white fs-12 fw-6 lh-18 m-0">{value}</p> } const highlightedText = (text: string): string => { diff --git a/src/components/common/FloatingVariablesSuggestions/Suggestions.tsx b/src/components/common/FloatingVariablesSuggestions/Suggestions.tsx index dc89b13e26..b3440ce6ae 100644 --- a/src/components/common/FloatingVariablesSuggestions/Suggestions.tsx +++ b/src/components/common/FloatingVariablesSuggestions/Suggestions.tsx @@ -14,8 +14,17 @@ * limitations under the License. */ -import React, { useState, memo, useEffect } from 'react' -import { GenericEmptyState, Progressing, Reload, DebouncedSearch } from '@devtron-labs/devtron-fe-common-lib' +import { useState, memo, useEffect } from 'react' +import { + GenericEmptyState, + Progressing, + Reload, + DebouncedSearch, + Button, + ComponentSizeType, + ButtonVariantType, + ButtonStyleType, +} from '@devtron-labs/devtron-fe-common-lib' import SuggestionItem from './SuggestionItem' import { ReactComponent as ICClose } from '../../../assets/icons/ic-cross.svg' import { ReactComponent as ICSearch } from '../../../assets/icons/ic-search.svg' @@ -64,26 +73,28 @@ const Suggestions = ({ handleDeActivation, loading, variables, reloadVariables, const renderHeader = (): JSX.Element => ( <div className="flexbox-col dc__align-self-stretch"> - <div className="handle-drag flexbox pt-8 pl-12 pr-12 dc__gap-16 dc__align-start dc__align-self-stretch bcn-7 dc__grabbable"> + <div className="handle-drag flexbox pt-8 pl-12 pr-12 dc__gap-16 dc__align-start dc__align-self-stretch dc__grabbable dc__border-bottom"> <div className="flexbox-col dc__content-center dc__align-start flex-grow-1 dc__no-shrink"> <div className="flex center dc__gap-4"> - <p className="m-0 cn-0 fs-13 fw-6 lh-20 dc__align-self-stretch">Scoped variables</p> + <p className="m-0 cn-7 fs-13 fw-6 lh-20 dc__align-self-stretch">Scoped variables</p> - <ICVariable className="icon-dim-16 scn-0" /> + <ICVariable className="icon-dim-16 scn-7" /> </div> - <p className="dc__align-self-stretch c-n50 fs-12 fw-1 lh-20">Use variable to set dynamic value</p> + <p className="dc__align-self-stretch cn-7 fs-12 fw-1 lh-20">Use variable to set dynamic value</p> </div> <div className="h-100"> - <button - type="button" - className="dc__outline-none-imp dc__no-border p-0 bcn-7 h-20" + <Button + icon={<ICClose />} + ariaLabel="Close suggestions" + showAriaLabelInTippy={false} + dataTestId="deactivate-suggestions" onClick={handleDeActivation} - data-testid="deactivate-suggestions" - > - <ICClose className="fcn-0 icon-dim-20 cursor" /> - </button> + size={ComponentSizeType.xs} + variant={ButtonVariantType.borderLess} + style={ButtonStyleType.negativeGrey} + /> </div> </div> @@ -153,7 +164,7 @@ const Suggestions = ({ handleDeActivation, loading, variables, reloadVariables, if (variables?.length === 0) { return ( <> - <div className="flexbox-col dc__align-self-stretch dc__overflow-scroll bg__primary flex-grow-1 h-200 bg__primary"> + <div className="flexbox-col dc__align-self-stretch dc__overflow-scroll flex-grow-1 h-200"> <GenericEmptyState title="No variables found" image={NoVariables} /> </div>