From c618e59a565500b0422d0d3dc0ea52f84554823a Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 10 Oct 2021 01:27:42 -0700
Subject: [PATCH] Add indicator for starred albums/artists in grid

---
 src/components/card/Card.tsx   |  1 +
 src/components/card/styled.tsx | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index 9e1f10e..9b83338 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -165,6 +165,7 @@ const Card = ({
 
           {hasHoverButtons && (
             <>
+              {rest.details.starred && <div className="corner-triangle" />}
               <PlayOverlayButton
                 size="lg"
                 circle
diff --git a/src/components/card/styled.tsx b/src/components/card/styled.tsx
index cce44ca..276cc2a 100644
--- a/src/components/card/styled.tsx
+++ b/src/components/card/styled.tsx
@@ -90,6 +90,19 @@ export const Overlay = styled.div<Card>`
   &:hover {
     cursor: pointer;
   }
+
+  .corner-triangle {
+    position: absolute;
+    background-color: ${(props) => props.theme.primary.main};
+    box-shadow: 0 0 10px 8px rgba(0, 0, 0, 0.8);
+    height: 80px;
+    left: -50px;
+    top: -50px;
+    width: 80px;
+
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+  }
 `;
 
 const OverlayButton = styled(IconButton)`