fix: styling for scope variables

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);
         }
     }

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);
 }
 

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)',

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">&apos;&quot;&quot;&apos;</p>
+            return <p className="text__white fs-12 fw-6 lh-18 m-0">&apos;&quot;&quot;&apos;</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 => {

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>