From ea4ed6e4d6a4fd25b4c20a0656a99e0c2ba9cab7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?=
 =?UTF-8?q?=D0=B5=D0=B2?= <itkataev@gmail.com>
Date: Sun, 2 Jun 2024 00:06:12 +0000
Subject: [PATCH] AW-92-trial-payment-page-v1

---
 .../v1/pages/TrialPayment/components/Header/index.tsx  | 10 +++++++++-
 .../TrialPayment/components/Header/styles.module.css   |  4 +++-
 .../ABDesign/v1/pages/TrialPayment/styles.module.css   |  2 ++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/Header/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/Header/index.tsx
index 0616dff..1a75670 100644
--- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/Header/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/Header/index.tsx
@@ -1,6 +1,8 @@
+import { useSelector } from "react-redux";
 import CustomButton from "../CustomButton";
 import DiscountExpires from "../DiscountExpires";
 import styles from "./styles.module.css";
+import { selectors } from "@/store";
 
 interface IHeaderProps {
   buttonText?: string;
@@ -13,8 +15,14 @@ function Header({
   buttonText = "get my reading",
   buttonClassName = "",
 }: IHeaderProps) {
+  const { gender } = useSelector(selectors.selectQuestionnaire);
   return (
-    <header className={styles.header}>
+    <header
+      className={styles.header}
+      style={{
+        backgroundColor: gender === "male" ? "#C1E5FF" : "#F7EBFF",
+      }}
+    >
       <DiscountExpires />
       <CustomButton
         className={`${styles.button} ${buttonClassName}`}
diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/Header/styles.module.css b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/Header/styles.module.css
index 2d247f5..bd059bc 100644
--- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/Header/styles.module.css
+++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/Header/styles.module.css
@@ -1,5 +1,7 @@
 .header {
-  position: relative;
+  position: sticky;
+  top: 0;
+  z-index: 30;
   height: 62px;
   width: 100%;
   max-width: 560px;
diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css b/src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css
index dc01c42..557d3ce 100644
--- a/src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css
+++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css
@@ -6,6 +6,8 @@
   padding-bottom: 62px;
   width: 100%;
   max-width: 460px;
+  overflow: inherit;
+  overflow-x: clip;
 }
 
 .title {