From 9e42712b9fc8657ab044a7071120f3bda79a9525 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Wed, 8 Mar 2023 12:30:58 -0600
Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20style=20ember-as?=
 =?UTF-8?q?ciinema-player?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: ICU-8380
---
 .../session-recording/player/index.hbs        |  2 +-
 ui/admin/app/styles/app.scss                  | 63 +++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/ui/admin/app/components/session-recording/player/index.hbs b/ui/admin/app/components/session-recording/player/index.hbs
index 377faca68..e3244d9bd 100644
--- a/ui/admin/app/components/session-recording/player/index.hbs
+++ b/ui/admin/app/components/session-recording/player/index.hbs
@@ -1,4 +1,4 @@
-<div class='session-recording-player-layout'>
+<div class='session-recording-player'>
   <div class='session-recording-player-header'>
     <Hds::Link::Standalone
       @icon='arrow-left'
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 1f305e001..7ca105639 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -686,3 +686,66 @@
   }
   /* stylelint-enable selector-class-pattern */
 }
+
+// session recording player
+.session-recording-player {
+  --player-background-color: #252937;
+  --player-divider: #656a761a;
+  --link-color: #fff;
+
+  background-color: var(--player-background-color);
+  border-radius: 0.75rem;
+
+  &-header {
+    padding-left: 1rem;
+    height: 3rem;
+    width: 100%;
+    border-bottom: var(--player-divider) 0.125rem solid;
+
+    // override of standalone link styles to allow for
+    // static colors in light and dark mode
+    .hds-link-standalone {
+      height: inherit;
+    }
+
+    a {
+      color: var(--link-color);
+    }
+
+    a:hover {
+      color: var(--link-color);
+
+      .hds-link-standalone__text {
+        text-decoration-color: var(--link-color);
+      }
+    }
+  }
+
+  &-theme {
+    .asciinema-theme-asciinema {
+      background-color: var(--player-background-color);
+    }
+
+    .asciinema-terminal {
+      background-color: var(--player-background-color);
+      border-color: var(--player-background-color);
+      border-width: 1rem;
+    }
+
+    .asciinema-player {
+      border-radius: 0.75rem;
+    }
+
+    .asciinema-player-wrapper {
+      &.hud .control-bar {
+        bottom: 0rem;
+      }
+
+      .control-bar {
+        bottom: 0rem;
+        background: var(--player-background-color);
+        border-top: var(--player-divider) 0.125rem solid;
+      }
+    }
+  }
+}

From cb1524b6cc2ba4003882b84623b5d5e8ed54327f Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Wed, 8 Mar 2023 13:05:47 -0600
Subject: [PATCH 2/3] =?UTF-8?q?style:=20=F0=9F=92=84=20fix=20lint=20issues?=
 =?UTF-8?q?=20for=20player=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/admin/app/styles/app.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 7ca105639..c0859d17b 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -715,6 +715,7 @@
     a:hover {
       color: var(--link-color);
 
+      /* stylelint-disable selector-class-pattern */
       .hds-link-standalone__text {
         text-decoration-color: var(--link-color);
       }
@@ -738,11 +739,11 @@
 
     .asciinema-player-wrapper {
       &.hud .control-bar {
-        bottom: 0rem;
+        bottom: 0;
       }
 
       .control-bar {
-        bottom: 0rem;
+        bottom: 0;
         background: var(--player-background-color);
         border-top: var(--player-divider) 0.125rem solid;
       }

From 1ec6bd28f01f637823fd18ef68b10559fc3a1da0 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <ccorvo@hashicorp.com>
Date: Thu, 9 Mar 2023 11:45:28 -0800
Subject: [PATCH 3/3] Fix lint issue

---
 ui/admin/app/styles/app.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index b3d9f1124..c1bc62db0 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -750,6 +750,7 @@
     }
   }
 }
+
 // Layout - Sidebar
 .layout-sidebar {
   display: grid;