From 7415fcab5837166672519fed871e9d2711784695 Mon Sep 17 00:00:00 2001
From: Nicola Sacco <nicola@revenuecat.com>
Date: Fri, 20 Dec 2024 11:14:02 +0100
Subject: [PATCH] Fix for the select options background color(#267)

---
 src/stories/purchase-flow.stories.svelte      | 46 +++++++++++++++++++
 src/ui/states/state-needs-payment-info.svelte |  2 +-
 src/ui/theme/colors.ts                        |  6 ++-
 3 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/stories/purchase-flow.stories.svelte b/src/stories/purchase-flow.stories.svelte
index e35e8458..b2310217 100644
--- a/src/stories/purchase-flow.stories.svelte
+++ b/src/stories/purchase-flow.stories.svelte
@@ -74,6 +74,30 @@
     "es",
     englishLocale,
   );
+
+  const labyrinthosBranding = {
+    color_accent: "#B89662",
+    color_buttons_primary: "#B89662",
+    color_error: "#f04141",
+    color_form_bg: "#FFFFFF",
+    color_page_bg: "#0A2722",
+    color_product_info_bg: "#465551",
+    font: "default",
+    shapes: "pill",
+    show_product_description: true,
+  };
+
+  const iptvWebBranding = {
+    color_accent: "#FF3B30",
+    color_buttons_primary: "#ff3b30",
+    color_error: "#F2545B",
+    color_form_bg: "#1f1f1f",
+    color_page_bg: "#141414",
+    color_product_info_bg: "#1f1f1f",
+    font: "default",
+    shapes: "pill",
+    show_product_description: false,
+  };
 </script>
 
 <Meta title="PurchaseFlow" />
@@ -216,6 +240,28 @@
   }}
 />
 
+<Story
+  name="Labyrinthos"
+  args={{
+    ...defaultArgs,
+    brandingInfo: {
+      ...brandingInfo,
+      appearance: labyrinthosBranding,
+    },
+  }}
+/>
+
+<Story
+  name="IPTV Web"
+  args={{
+    ...defaultArgs,
+    brandingInfo: {
+      ...brandingInfo,
+      appearance: iptvWebBranding,
+    },
+  }}
+/>
+
 <Story
   name="CustomColorsElements"
   args={{
diff --git a/src/ui/states/state-needs-payment-info.svelte b/src/ui/states/state-needs-payment-info.svelte
index fd6d9e19..7ed977b3 100644
--- a/src/ui/states/state-needs-payment-info.svelte
+++ b/src/ui/states/state-needs-payment-info.svelte
@@ -199,7 +199,7 @@
           ".Input": {
             boxShadow: "none",
             border: `2px solid ${customColors["grey-ui-dark"]}`,
-            backgroundColor: "transparent",
+            backgroundColor: customColors["input-background"],
             color: customColors["grey-text-dark"],
           },
           ".Input:focus": {
diff --git a/src/ui/theme/colors.ts b/src/ui/theme/colors.ts
index b94b85a9..14e78d56 100644
--- a/src/ui/theme/colors.ts
+++ b/src/ui/theme/colors.ts
@@ -32,7 +32,7 @@ export const DEFAULT_FORM_COLORS: Colors = {
   "grey-text-light": "rgba(0,0,0,0.5)",
   "grey-ui-dark": "rgba(0,0,0,0.125)",
   "grey-ui-light": "rgba(0,0,0,0.005)",
-  "input-background": "transparent",
+  "input-background": "white",
   background: "white",
 };
 
@@ -48,7 +48,7 @@ export const DEFAULT_INFO_COLORS: Colors = {
   "grey-text-light": "rgba(255,255,255,0.5)",
   "grey-ui-dark": "rgba(255,255,255,0.125)",
   "grey-ui-light": "rgba(255,255,255,0.005)",
-  "input-background": "transparent",
+  "input-background": "#000000",
   background: "#000000",
 };
 
@@ -68,10 +68,12 @@ export const ColorsToBrandingAppearanceMapping: Record<
 
 export const FormColorsToBrandingAppearanceMapping = {
   ...ColorsToBrandingAppearanceMapping,
+  "input-background": "color_form_bg",
   background: "color_form_bg",
 };
 
 export const InfoColorsToBrandingAppearanceMapping = {
   ...ColorsToBrandingAppearanceMapping,
+  "input-background": "color_product_info_bg",
   background: "color_product_info_bg",
 };