Fix for the select options background color(#267)

RevenueCat · Dec 20, 2024 · 7415fca · 7415fca
1 parent 9e8e1f1
commit 7415fca
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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",
 };