add secondaryColor for header and footer

mfrosi · Jul 12, 2024 · e0d3fb2 · e0d3fb2
1 parent 672d1dd
commit e0d3fb2
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 17 deletions.
diff --git a/rair-front/src/components/Footer/Footer.tsx b/rair-front/src/components/Footer/Footer.tsx
@@ -30,7 +30,7 @@ const Footer: React.FC<IFooter> = () => {
 
   const hotdropsVar = import.meta.env.VITE_TESTNET;
 
-  const { headerLogo, primaryColor, textColor, primaryButtonColor } =
+  const { headerLogo, primaryColor, textColor, secondaryColor } =
     useSelector<RootState, ColorStoreType>((store) => store.colorStore);
 
   const onChangeEmail = (e) => {
@@ -52,7 +52,9 @@ const Footer: React.FC<IFooter> = () => {
     <FooterMain
       hotdrops={hotdropsVar}
       primaryColor={primaryColor}
-      textColor={textColor}>
+      textColor={textColor}
+      secondaryColor={secondaryColor}
+      >
       <FooterWrapper
         className="footer-wrapper-hotdrops"
         primaryColor={primaryColor}>

diff --git a/rair-front/src/components/Footer/FooterItems/FooterItems.tsx b/rair-front/src/components/Footer/FooterItems/FooterItems.tsx
@@ -5,13 +5,14 @@ type TFooterMainStyled = {
   messageAlert?: string;
   hotdrops?: string;
   textColor?: any;
+  secondaryColor?: string;
 };
 
 export const FooterMain = styled.footer<TFooterMainStyled>`
   background: ${(props) =>
     props.primaryColor === '#dedede'
       ? '#fff'
-      : `color-mix(in srgb, ${props.primaryColor}, #888888)`};
+      : `color-mix(in srgb, ${props.secondaryColor}, #888888)`};
   padding: 40px 120px 25px 120px;
   color: ${(props) => props.textColor};
 

diff --git a/rair-front/src/components/Header/HeaderItems/HeaderItems.tsx b/rair-front/src/components/Header/HeaderItems/HeaderItems.tsx
@@ -7,13 +7,14 @@ interface IHeaderContainerStyled {
   isSplashPage?: boolean;
   hotdrops?: string;
   realChainId?: string | undefined;
+  secondaryColor?: string;
 }
 
 export const HeaderContainer = styled.div<IHeaderContainerStyled>`
   background: ${(props) =>
     props.primaryColor === '#dedede'
       ? '#fff'
-      : `color-mix(in srgb, ${props.primaryColor}, #888888)`};
+      : `color-mix(in srgb, ${props.secondaryColor}, #888888)`};
   margin-top: ${(props) =>
     props.realChainId &&
     props.showAlert &&

diff --git a/rair-front/src/components/Header/MainHeader.tsx b/rair-front/src/components/Header/MainHeader.tsx
@@ -55,7 +55,7 @@ const MainHeader: React.FC<IMainHeader> = ({
 
   const { ref, isComponentVisible, setIsComponentVisible } =
     useComponentVisible(true);
-  const { primaryColor, headerLogo, primaryButtonColor, textColor, secondaryButtonColor, iconColor } =
+  const { primaryColor, headerLogo, primaryButtonColor, textColor, secondaryColor, iconColor } =
     useSelector<RootState, ColorStoreType>((store) => store.colorStore);
   const { connectUserData } = useConnectUser();
   const { dataAll, message } = useSelector<RootState, TSearchInitialState>(
@@ -207,6 +207,7 @@ const MainHeader: React.FC<IMainHeader> = ({
       isSplashPage={isSplashPage}
       selectedChain={selectedChain}
       realChainId={realChainId}
+      secondaryColor={secondaryColor}
       ref={ref}>
       <div>
         <MainLogo

diff --git a/rair-front/src/components/Navigation/Menu.tsx b/rair-front/src/components/Navigation/Menu.tsx
@@ -88,7 +88,7 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
     ContractsInitialType
   >((state) => state.contractStore);
 
-  const {primaryButtonColor, textColor, iconColor } =
+  const {primaryButtonColor, textColor, iconColor, secondaryColor } =
   useSelector<RootState, ColorStoreType>((store) => store.colorStore);
 
   const hotdropsVar = import.meta.env.VITE_TESTNET;
@@ -210,10 +210,11 @@ useEffect(() => {
     <MenuMobileWrapper
       className="col-1 rounded burder-menu"
       showAlert={showAlert}
+      secondaryColor={secondaryColor}
       selectedChain={selectedChain}
       isSplashPage={isSplashPage}
       realChainId={realChainId}>
-      <Nav hotdrops={hotdropsVar} primaryColor={primaryColor}>
+      <Nav hotdrops={hotdropsVar} secondaryColor={secondaryColor} primaryColor={primaryColor}>
         <MobileChoiseNav
           click={click}
           messageAlert={messageAlert}
@@ -233,6 +234,7 @@ useEffect(() => {
           </Suspense>
         ) : (
           <MobileListMenu
+          secondaryColor={secondaryColor}
             primaryColor={primaryColor}
             click={click}
             toggleMenu={toggleMenu}

diff --git a/rair-front/src/components/Navigation/MenuComponents/MobileListMenu.tsx b/rair-front/src/components/Navigation/MenuComponents/MobileListMenu.tsx
@@ -32,6 +32,7 @@ interface IMobileListMenu {
   toggleMenu: (otherPage?: string | undefined) => void;
   setTabIndexItems: (arg: number) => void;
   isSplashPage: boolean;
+  secondaryColor?: string;
 }
 
 const MobileListMenu: React.FC<IMobileListMenu> = ({
@@ -42,7 +43,8 @@ const MobileListMenu: React.FC<IMobileListMenu> = ({
   messageAlert,
   setMessageAlert,
   setTabIndexItems,
-  isSplashPage
+  isSplashPage,
+  secondaryColor
 }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -152,7 +154,7 @@ const MobileListMenu: React.FC<IMobileListMenu> = ({
   }, [currentUserAddress, dispatch]);
 
   return (
-    <List hotdrops={hotdropsVar} primaryColor={primaryColor} click={click}>
+    <List secondaryColor={secondaryColor} hotdrops={hotdropsVar} primaryColor={primaryColor} click={click}>
       <div>
         {activeSearch && (
           <>

diff --git a/rair-front/src/components/Navigation/NavigationItems/NavigationItems.tsx b/rair-front/src/components/Navigation/NavigationItems/NavigationItems.tsx
@@ -11,6 +11,7 @@ interface IMenuMobileWrapper {
   isSplashPage?: boolean;
   hotdrops?: string;
   realChainId?: string | undefined;
+  secondaryColor?: string;
 }
 
 export const MenuMobileWrapper = styled.div<IMenuMobileWrapper>`
@@ -28,10 +29,10 @@ export const MenuMobileWrapper = styled.div<IMenuMobileWrapper>`
 `;
 
 export const Nav = styled.nav<IMenuMobileWrapper>`
-  background: ${(props) =>
-    props.primaryColor === '#dedede'
-      ? '#fff'
-      : `${props.hotdrops === 'true' ? 'rgb(11 11 11)' : '#383637'}`};
+background: ${(props) =>
+  props.primaryColor === '#dedede'
+    ? '#fff'
+    : `color-mix(in srgb, ${props.secondaryColor}, #888888)`};
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -83,10 +84,10 @@ export const TitleEditProfile = styled.h4`
 `;
 
 export const List = styled.ul<IMenuMobileWrapper>`
-  background: ${(props) =>
-    props.primaryColor === '#dedede'
-      ? '#fff'
-      : `${props.hotdrops === 'true' ? 'rgb(11 11 11)' : 'rgb(56, 54, 55)'}`};
+background: ${(props) =>
+  props.primaryColor === '#dedede'
+    ? '#fff'
+    : `color-mix(in srgb, ${props.secondaryColor}, #888888)`};
   overflow: ${(props) => props.click && 'hidden'};
   border-bottom-right-radius: 16px;
   border-bottom-left-radius: 16px;