From b86e468eef3a06cfaf3cc68e2581b7dc8e918e68 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 22 Feb 2022 00:24:45 -0500
Subject: [PATCH] Add highlight option to grid items

---
 src/common/index.scss                | 17 ++++++++++++++++-
 src/common/layout/LayoutGridItem.tsx |  7 +++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/common/index.scss b/src/common/index.scss
index be5d045f..cc85242b 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -6,7 +6,7 @@
 
     &.active {
         border-color: $grid-active-border-color !important;
-        background-color: $grid-active-bg-color !important;
+        background-color: $grid-active-bg-color;
     }
 
     &.disabled {
@@ -25,4 +25,19 @@
     .avatar-image {
         background-position-y: -35px;
     }
+
+    &.has-highlight {
+
+        &:after {
+            content: "";
+            z-index: 2;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 50%;
+            background-color: $white;
+            opacity: 0.1;
+        }
+    }
 }
diff --git a/src/common/layout/LayoutGridItem.tsx b/src/common/layout/LayoutGridItem.tsx
index 07a081c2..531ac483 100644
--- a/src/common/layout/LayoutGridItem.tsx
+++ b/src/common/layout/LayoutGridItem.tsx
@@ -14,12 +14,13 @@ export interface LayoutGridItemProps extends ColumnProps
     itemUniqueSoldout?: boolean;
     itemUniqueNumber?: number;
     itemUnseen?: boolean;
+    itemHighlight?: boolean;
     disabled?: boolean;
 }
 
 export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, disabled = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, itemHighlight = false, disabled = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -33,6 +34,8 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
 
         if(itemUnseen) newClassNames.push('unseen');
 
+        if(itemHighlight) newClassNames.push('has-highlight');
+
         if(disabled) newClassNames.push('disabled')
 
         if(itemImage === null) newClassNames.push('icon', 'loading-icon');
@@ -40,7 +43,7 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, disabled, itemImage, classNames ]);
+    }, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, itemHighlight, disabled, itemImage, classNames ]);
 
     const getStyle = useMemo(() =>
     {