From bf0deeed613270ef1675dac528caa75406a65ea6 Mon Sep 17 00:00:00 2001
From: AshDyson <ashleyrobert@hotmail.co.uk>
Date: Thu, 4 Apr 2024 10:15:54 +0100
Subject: [PATCH] chore(fe): css variables to rgba where needed

---
 pkg/frontend/src/styles/components/hero.module.scss    | 2 +-
 pkg/frontend/src/styles/components/nav.module.scss     | 4 ++--
 pkg/frontend/src/styles/components/trailer.module.scss | 2 +-
 pkg/frontend/src/styles/global/global.scss             | 4 +++-
 pkg/frontend/src/styles/views/movie.module.scss        | 2 +-
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/pkg/frontend/src/styles/components/hero.module.scss b/pkg/frontend/src/styles/components/hero.module.scss
index 8b659b3e..174e03f7 100644
--- a/pkg/frontend/src/styles/components/hero.module.scss
+++ b/pkg/frontend/src/styles/components/hero.module.scss
@@ -19,7 +19,7 @@
 
     &:before {
       content: '';
-      background: rgba(var(--grey), 0.2);
+      background: rgba(var(--grey-rgb), 0.2);
       top: 0;
       left: 0;
       width: 100%;
diff --git a/pkg/frontend/src/styles/components/nav.module.scss b/pkg/frontend/src/styles/components/nav.module.scss
index 36bf0746..e4231e30 100644
--- a/pkg/frontend/src/styles/components/nav.module.scss
+++ b/pkg/frontend/src/styles/components/nav.module.scss
@@ -10,7 +10,7 @@
   z-index: 500;
   backdrop-filter: blur(20px);
   border-bottom: solid 1px rgba(#fff, 0.2);
-  background: rgba(#000, 0.6);
+  background: rgba(var(--grey-rgb), 0.6);
   // height: 51px;
 
   @media (min-width: $lg) {
@@ -227,7 +227,7 @@
   height: calc(60px + env(safe-area-inset-bottom));
   backdrop-filter: blur(20px);
   border-top: solid 1px rgba(#fff, 0.2);
-  background: rgba(var(--grey), 0.6);
+  background: rgba(var(--grey-rgb), 0.6);
   z-index: 500;
   padding: 0 20px;
   padding-bottom: env(safe-area-inset-bottom);
diff --git a/pkg/frontend/src/styles/components/trailer.module.scss b/pkg/frontend/src/styles/components/trailer.module.scss
index 66e52b84..00ad7197 100644
--- a/pkg/frontend/src/styles/components/trailer.module.scss
+++ b/pkg/frontend/src/styles/components/trailer.module.scss
@@ -165,7 +165,7 @@
     &__buffer {
       height: 100%;
       width: 25%;
-      background: rgba(var(--orange-dark-30), 0.5);
+      background: rgba(var(--orange-dark-30-rgb), 0.5);
       position: absolute;
       top: 0;
       left: 0;
diff --git a/pkg/frontend/src/styles/global/global.scss b/pkg/frontend/src/styles/global/global.scss
index 04101045..31041191 100644
--- a/pkg/frontend/src/styles/global/global.scss
+++ b/pkg/frontend/src/styles/global/global.scss
@@ -6,6 +6,7 @@
   --black: #111;
   --white: #fff;
   --grey: #202020;
+  --grey-rgb: 32, 32, 32;
   --grey-light-10: color-mix(in srgb, var(--grey), #fff 10%);
   --grey-light-20: color-mix(in srgb, var(--grey), #fff 20%);
   --grey-light-30: color-mix(in srgb, var(--grey), #fff 30%);
@@ -16,6 +17,7 @@
   --orange: #ff8300;
   --orange-dark-10: color-mix(in srgb, var(--orange), #000 10%);
   --orange-dark-30: color-mix(in srgb, var(--orange), #000 30%);
+  --orange-dark-30-rgb: 178, 91, 0;
   --green: #98dd32;
   --green-dark-30: color-mix(in srgb, var(--green), #000 30%);
   --green-dark: #2e8321;
@@ -160,7 +162,7 @@ hr {
     color: white;
 
     @media (max-width: $lg) {
-      background: rgba(var(--grey), 0.8);
+      background: rgba(var(--grey-rgb), 0.8);
       backdrop-filter: blur(20px);
       margin-top: 5px;
       border-radius: 5px !important;
diff --git a/pkg/frontend/src/styles/views/movie.module.scss b/pkg/frontend/src/styles/views/movie.module.scss
index d0d99758..c2830583 100644
--- a/pkg/frontend/src/styles/views/movie.module.scss
+++ b/pkg/frontend/src/styles/views/movie.module.scss
@@ -265,7 +265,7 @@
 
       &__option {
         padding: 10px;
-        border-bottom: solid 1px rgba(var(--grey), 0.5);
+        border-bottom: solid 1px rgba(var(--grey-rgb), 0.5);
         cursor: pointer;
 
         &:last-child {