From 9fc4be7b61dbd2a9004d3e16c20c2d293f985971 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Wed, 5 Apr 2023 10:02:19 -0500
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20fix=20active=20link?=
 =?UTF-8?q?=20style=20issue=20with=20SR=20Player=20(#183)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 fix active link style issue with SR Player

✅ Closes: ICU-8774

* refactor: 💡 update player hds link to hds button and styles

* refactor: 💡 add translation for "Back to channels" text

* test: 💍 add Intl setup hook to player test
---
 addons/core/translations/resources/en-us.yaml        |  2 ++
 .../components/session-recording/player/index.hbs    |  5 +++--
 ui/admin/app/styles/app.scss                         | 12 +++++-------
 .../components/session-recording/player-test.js      |  2 ++
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index b48cbc316..593e9db6a 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -232,6 +232,8 @@ session-recording:
     title: Channel
     title_plural: Channels
     details: Channel details
+    player:
+      back-navigation: Back to channels
   session:
     title: Session Playback
   form:
diff --git a/ui/admin/app/components/session-recording/player/index.hbs b/ui/admin/app/components/session-recording/player/index.hbs
index eed4493a5..bf97e2836 100644
--- a/ui/admin/app/components/session-recording/player/index.hbs
+++ b/ui/admin/app/components/session-recording/player/index.hbs
@@ -1,8 +1,9 @@
 <div class='session-recording-player'>
   <div class='session-recording-player-header'>
-    <Hds::Link::Standalone
+    <Hds::Button
       @icon='arrow-left'
-      @text='Back to channels'
+      @text={{t 'resources.session-recording.channel.player.back-navigation'}}
+      @color='tertiary'
       @route={{@route}}
       @model={{@model}}
     />
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index f2dba4b71..250f533e5 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -788,20 +788,18 @@
   &-header {
     border-bottom: var(--player-divider) 0.125rem solid;
 
-    // override of standalone link styles to allow for
+    // override of button styles to allow for
     // static colors in light and dark mode
     a {
       color: var(--link-color);
       padding: 1rem;
     }
 
-    a:hover {
+    .hds-button--color-tertiary:hover,
+    .hds-button--color-tertiary:active {
       color: var(--link-color);
-
-      /* stylelint-disable selector-class-pattern */
-      .hds-link-standalone__text {
-        text-decoration-color: var(--link-color);
-      }
+      background-color: transparent;
+      border-color: transparent;
     }
   }
 
diff --git a/ui/admin/tests/integration/components/session-recording/player-test.js b/ui/admin/tests/integration/components/session-recording/player-test.js
index d7dd790f9..9f092b1b3 100644
--- a/ui/admin/tests/integration/components/session-recording/player-test.js
+++ b/ui/admin/tests/integration/components/session-recording/player-test.js
@@ -2,9 +2,11 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'admin/tests/helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
 
 module('Integration | Component | session-recording/player', function (hooks) {
   setupRenderingTest(hooks);
+  setupIntl(hooks);
 
   test('it renders', async function (assert) {
     const castConfig = {