hover icon images for buttons

Author: PrasanKumar93

public/icons/arrow-up-right-hover.svg

@@ -23,13 +23,29 @@
     color: var(--comp-icon-button-icon-clr);
   }
 
+  .default-image {
+    display: block;
+  }
+
+  .hover-image {
+    display: none;
+  }
+
   &:hover {
     color: var(--comp-icon-button-hover-bg-clr);
     border: 1px solid var(--comp-icon-button-hover-bg-clr);
 
     i {
       color: var(--comp-icon-button-hover-bg-clr) !important;
     }
+
+    .default-image {
+      display: none;
+    }
+
+    .hover-image {
+      display: block;
+    }
   }
 }
 

public/icons/redo-hover.svg

@@ -12,14 +12,15 @@ interface IconButtonProps {
     onClick?: () => void;
     iconCls?: string;
     imgSrc?: string;
+    imgHoverSrc?: string;
     imgWidth?: number | string;
     imgHeight?: number | string;
     buttonCls?: string;
     buttonType?: IconButtonType;
     isDisabled?: boolean;
 }
 
-const IconButton = ({ buttonLbl, onClick, iconCls = "", imgSrc = "", imgWidth = "1rem", imgHeight = "1rem", buttonCls = "",
+const IconButton = ({ buttonLbl, onClick, iconCls = "", imgSrc = "", imgHoverSrc = "", imgWidth = "1rem", imgHeight = "1rem", buttonCls = "",
     buttonType = IconButtonType.REGULAR, isDisabled = false }: IconButtonProps) => {
 
     const handleClick = () => {
@@ -33,7 +34,8 @@ const IconButton = ({ buttonLbl, onClick, iconCls = "", imgSrc = "", imgWidth =
         <div className='comp-icon-button-wrapper'>
             <span className="button-lbl">{buttonLbl}</span>
             {iconCls && <i className={`icon ${iconCls}`} />}
-            {imgSrc && <ImageIcon imgSrc={imgSrc} alt={buttonLbl} imgWidth={imgWidth} imgHeight={imgHeight} />}
+            {imgSrc && <ImageIcon imgSrc={imgSrc} alt={buttonLbl} imgWidth={imgWidth} imgHeight={imgHeight} className="default-image" />}
+            {imgHoverSrc && <ImageIcon imgSrc={imgHoverSrc} alt={buttonLbl} imgWidth={imgWidth} imgHeight={imgHeight} className="hover-image" />}
         </div>
     </div>);
 }

src/app/components/IconButton/index.scss

@@ -7,10 +7,11 @@ interface IImageIconProps {
     alt: string;
     imgWidth?: number | string;
     imgHeight?: number | string;
+    className?: string;
 }
 
-const ImageIcon = ({ imgSrc, alt, imgWidth = "1rem", imgHeight = "1rem" }: IImageIconProps) => {
-    return <div className="comp-image-icon" style={{ width: imgWidth, height: imgHeight }} >
+const ImageIcon = ({ imgSrc, alt, imgWidth = "1rem", imgHeight = "1rem", className = "" }: IImageIconProps) => {
+    return <div className={`comp-image-icon ${className}`} style={{ width: imgWidth, height: imgHeight }} >
         <Image src={imgSrc} alt={alt} fill />
     </div>
 }

src/app/components/IconButton/index.tsx

@@ -210,9 +210,11 @@ const PgMainHeader = () => {
                             buttonCls="header-run-btn" onClick={handleRunQuery} buttonType={IconButtonType.SUCCESS} isDisabled={isRunButtonDisabled} />
                         <IconButton buttonLbl={labels.buttonReset}
                             imgSrc='/icons/redo.svg' imgWidth="1.25rem" imgHeight="1.25rem"
+                            imgHoverSrc='/icons/redo-hover.svg'
                             buttonCls="header-reset-btn" onClick={handleResetQuery} />
                         <IconButton buttonLbl={labels.buttonShare}
                             imgSrc='/icons/arrow-up-right.svg' imgWidth="1.25rem" imgHeight="1.25rem"
+                            imgHoverSrc='/icons/arrow-up-right-hover.svg'
                             buttonCls="header-share-btn" onClick={handleShareQuery} />
                     </div>
                 </div>