From 1b6e36c426ad35c1834d229048167545433e0929 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= <jnyiri@sk.ibm.com>
Date: Sat, 1 May 2021 20:35:37 +0200
Subject: [PATCH] Update: Change play action to play button and update design
 after click

---
 www/content-card-example.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/www/content-card-example.js b/www/content-card-example.js
index a1f950b..12756fd 100644
--- a/www/content-card-example.js
+++ b/www/content-card-example.js
@@ -77,7 +77,7 @@ class ContentCardExample extends HTMLElement {
     movieElem.append(interactiveArea);
 
     const _this = this;
-    movieElem.addEventListener("click", function (event) {
+    playButton.addEventListener("click", function (event) {
       var keyParts = data.key.split("/");
       var movieID = keyParts[keyParts.length - 1];
       var command =
@@ -141,8 +141,9 @@ class ContentCardExample extends HTMLElement {
       }
       button[name="playButton"]:focus {
         outline: 0;
-        border: 1px solid hsl(210, 58%, 69%);
-        box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
+        background: orange;
+        border: 2px solid orange;
+        box-shadow: 0 0 0 3px orange;
       }
       
       button[name="playButton"]::after {
@@ -159,6 +160,10 @@ class ContentCardExample extends HTMLElement {
   
       button[name="playButton"]:hover:after {
         border-color: transparent transparent transparent black;
+      }
+  
+      button[name="playButton"]:focus:after {
+        border-color: transparent transparent transparent black;
       }`;
 
     this.appendChild(style);