figma changes

Author: PrasanKumar93

public/icons/check.svg

@@ -124,4 +124,8 @@
   --orange-500: #b37a1e;
   --orange-600: #664611;
   --orange-700: #332309;
+
+  --gradient-g-0: #f0f0f0;
+  --gradient-g-1: #80dbff;
+  --gradient-g-2: #0d2532;
 }

src/app/common/css/redis-core.scss

@@ -19,16 +19,17 @@
   --comp-icon-button-hover-bg-clr: var(--hyper-09);
   --comp-icon-button-active-bg-clr: var(--hyper-08);
 
-  --comp-loader-bg-clr: var(--dusk-06);
-  --comp-loader-gradient1: var(--green-400);
-  --comp-loader-gradient2: var(--purple-06);
+  --comp-loader-bg-clr: var(--gradient-g-0);
+  --comp-loader-gradient1: var(--gradient-g-1);
+  --comp-loader-gradient2: var(--gradient-g-2);
 
   --comp-modal-popup-bg-clr: var(--dusk-01);
   --comp-modal-popup-txt-clr: var(--dusk-04);
   --comp-modal-popup-close-txt-clr: var(--dusk-06);
 
-  --comp-tooltip-bg-clr: var(--dusk-07);
-  --comp-tooltip-txt-clr: var(--white-base);
+  --comp-tooltip-bg-clr: var(--white-base);
+  --comp-tooltip-txt-clr: var(--dusk-08);
+  --comp-tooltip-border-clr: var(--dusk-03);
 
   --pg-main-header-bg-clr: var(--white-base);
   --pg-main-header-txt-clr: var(--midnight-base);
@@ -54,7 +55,7 @@
 
   --pg-result-error-txt-clr: var(--hyper-05);
 
-  --pg-card-panel-resize-handle-bg-clr: var(--gray-04);
+  --pg-card-panel-resize-handle-bg-clr: transparent; //var(--gray-04);
   --pg-card-panel-box-shadow-clr: var(--gray-03);
 
   --pg-query-template-bg-clr: var(--gray-02);

src/app/common/css/theme-redis.scss

@@ -40,7 +40,7 @@ body {
 
   --border: var(--primary-10);
 
-  --comp-loader-height: 4px;
+  --comp-loader-height: 2px;
 
   --pg-sidebar-width: 250px;
   --pg-main-header-height: 50px;

src/app/common/css/variables.scss

@@ -6,6 +6,7 @@ import {
   syntaxHighlighting,
   StreamLanguage,
 } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 
 const redisCommands = [
@@ -71,30 +72,38 @@ const redisHighlightStyle = HighlightStyle.define([
   // Commands or keywords
   {
     tag: tags.keyword,
-    color: "#B76BE2",
+    color: "#F28100",
     //fontWeight: "bold",
   },
 
   // Variables and identifiers
-  { tag: tags.variableName, color: "#1A5FB4" },
+  { tag: tags.variableName, color: "#8F2EC4" },
 
   // Numbers
-  { tag: tags.number, color: "#26A269" },
+  { tag: tags.number, color: "#1750EB" },
 
   // JSON paths ($.productId)
-  { tag: tags.propertyName, color: "#C64600" },
+  { tag: tags.propertyName, color: "#FF16B4" },
 
   // Strings (quoted values)
-  { tag: tags.string, color: "#EB352A" },
+  { tag: tags.string, color: "#018800" },
 
   // Brackets and delimiters
-  { tag: tags.bracket, color: "#5E5C64" },
+  { tag: tags.bracket, color: "#091A23" },
 
   // Comments
   { tag: tags.comment, color: "#939598" },
 ]);
 
+// Add selection theme configuration
+const selectionTheme = EditorView.theme({
+  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": {
+    backgroundColor: "#E9E9E9 !important",
+  },
+});
+
 // Language support with highlighting
 export const redisSyntaxSupport = new LanguageSupport(redisLanguage, [
   syntaxHighlighting(redisHighlightStyle),
+  selectionTheme,
 ]);

src/app/components/CodeMirrorEditor/redis-syntax-support.ts

@@ -6,11 +6,16 @@
   color: var(--comp-tooltip-txt-clr) !important;
   background-color: var(--comp-tooltip-bg-clr) !important;
   border-radius: var(--radius-12) !important;
+  border: 1px solid var(--comp-tooltip-border-clr) !important;
   font-size: var(--font-size-12) !important;
-  font-weight: 700 !important;
   z-index: 1000 !important;
 }
 
+.comp-custom-tooltip-arrow {
+  border-bottom: 1px solid var(--comp-tooltip-border-clr) !important;
+  border-right: 1px solid var(--comp-tooltip-border-clr) !important;
+}
+
 .comp-tooltip-icon-img {
   position: relative;
 }

src/app/components/TooltipIcon/index.scss

@@ -11,6 +11,7 @@ enum TooltipIconType {
 
 interface ITooltipIconProps {
     id?: string;
+    className?: string;
     iconCls?: string;
     imgSrc?: string;
     imgWidth?: number | string;
@@ -24,27 +25,27 @@ const tooltipOptions: ITooltip = {
     // place: 'right',
     // variant: 'light',
     delayShow: 200,
-    className: 'comp-custom-tooltip',
-    //classNameArrow: 'comp-custom-tooltip-arrow'
+    className: 'comp-custom-tooltip font-regular',
+    classNameArrow: 'comp-custom-tooltip-arrow'
 }
 
 const generateTooltipId = () => {
     return `tooltip-id-${Math.random().toString(36).substring(2, 15)}`;
 }
 
-const TooltipIcon = ({ id, iconCls, imgSrc, imgWidth = "1rem", imgHeight = "1rem", title, titleType = TooltipIconType.text, onClick }: ITooltipIconProps) => {
+const TooltipIcon = ({ id, iconCls, imgSrc, imgWidth = "1rem", imgHeight = "1rem", title, titleType = TooltipIconType.text, onClick, className }: ITooltipIconProps) => {
     const [tooltipId, setTooltipId] = useState(id || generateTooltipId());
     return <>
         {iconCls && (
-            <i className={`comp-tooltip-icon ${iconCls}`}
+            <i className={`comp-tooltip-icon ${iconCls} ${className}`}
                 onClick={onClick}
                 data-tooltip-id={tooltipId}
                 data-tooltip-content={titleType === TooltipIconType.text ? title : undefined}
                 data-tooltip-html={titleType === TooltipIconType.html ? title : undefined}
             ></i>
         )}
         {imgSrc && (
-            <div className='comp-tooltip-icon-img' style={{ width: imgWidth, height: imgHeight }} >
+            <div className={`comp-tooltip-icon-img ${className}`} style={{ width: imgWidth, height: imgHeight }} >
                 <Image src={imgSrc} alt={title} fill
                     onClick={onClick}
                     data-tooltip-id={tooltipId}

src/app/components/TooltipIcon/index.tsx

@@ -59,7 +59,7 @@ const PgCardHeader = ({ headerTitle, infoIconContent, infoIconContentType, showC
                 }
 
                 {showCopyIcon &&
-                    (copied ? <i className="fa fa-check"></i> : <TooltipIcon imgSrc="/icons/copy.svg" imgWidth="1.25rem" imgHeight="1.25rem" title="Copy" onClick={() => handleClick(HeaderIcon.copy)} />)}
+                    (copied ? <TooltipIcon imgSrc="/icons/check.svg" imgWidth="1.25rem" imgHeight="1.25rem" title="Copied" /> : <TooltipIcon imgSrc="/icons/copy.svg" imgWidth="1.25rem" imgHeight="1.25rem" title="Copy" onClick={() => handleClick(HeaderIcon.copy)} />)}
 
             </div>
         </div>

src/app/page-components/PgCardPanel/PgCardHeader.tsx

@@ -8,6 +8,7 @@ import Highlighter from 'react-highlight-words';
 import { usePlaygroundContext } from "../PlaygroundContext";
 import Loader from "@/app/components/Loader";
 import ImageIcon from "@/app/components/ImageIcon";
+import TooltipIcon from '@/app/components/TooltipIcon';
 
 interface IQueryTemplateProps {
     onClose?: () => void;
@@ -106,7 +107,8 @@ const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
                         {/* <i className="fa fa-search"></i> */}
                         <ImageIcon imgSrc="/icons/search.svg" alt={labels.searchPlaceholder} imgWidth="1.125rem" imgHeight="1.125rem" />
                         <input type="text" placeholder={labels.searchPlaceholder} onChange={handleSearchChange} className="query-search-input" value={searchValue} />
-                        {searchValue && <i className="fa fa-times clear-icon" onClick={handleClearSearch}></i>}
+                        {/* {searchValue && <i className="fa fa-times clear-icon" onClick={handleClearSearch}></i>} */}
+                        {searchValue && <TooltipIcon imgSrc="/icons/close.svg" className='clear-icon' imgWidth="1rem" imgHeight="1rem" title="Clear" onClick={handleClearSearch} />}
                     </div>
                 </div>
                 <div className="query-sidebar-content">