style: fix where network switcher opens depending if it's side bar or…

… not, and fix other styling issues (#961) * style: fix where network swithcer opens depending if it's side bar or not, and fix other styling issues * style: fix padding my transactions
bosonprotocol · Dec 8, 2023 · ea897c4 · ea897c4
1 parent 6468583
commit ea897c4
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -329,7 +329,12 @@ export const HeaderComponent = forwardRef<HTMLElement, Props>(
             </Grid>
           ) : (
             <>
-              <Grid flexDirection="row" alignItems="center" $width="initial">
+              <Grid
+                flexDirection="row"
+                alignItems="center"
+                $width="initial"
+                gap="1rem"
+              >
                 <LinkWithQuery
                   to={BosonRoutes.Root}
                   style={{ display: "flex" }}
@@ -338,6 +343,7 @@ export const HeaderComponent = forwardRef<HTMLElement, Props>(
                     src={logoUrl || logo}
                     alt="logo image"
                     data-testid="logo"
+                    style={{ maxWidth: "100%" }}
                     width={logoUrl ? undefined : isLteXS ? 104 : 204}
                     height={
                       logoUrl
@@ -352,7 +358,11 @@ export const HeaderComponent = forwardRef<HTMLElement, Props>(
                   <X
                     color={colors.secondary}
                     onClick={toggleMenu}
-                    style={{ cursor: "pointer" }}
+                    style={{
+                      cursor: "pointer",
+                      minWidth: "24px",
+                      maxWidth: "24px"
+                    }}
                     size="24"
                   />
                 )}
@@ -381,7 +391,9 @@ export const HeaderComponent = forwardRef<HTMLElement, Props>(
                 {!burgerMenuBreakpoint && (
                   <>
                     {CTA}
-                    <ChainSelector />
+                    <ChainSelector
+                      leftAlign={navigationBarPosition === "left"}
+                    />
                     <ConnectButton />
                   </>
                 )}

diff --git a/src/components/header/HeaderLinks.tsx b/src/components/header/HeaderLinks.tsx
@@ -90,7 +90,8 @@ const NavigationLinks = styled.div<{
                 align-items: stretch;
                 justify-content: space-between;
                 gap: 2rem;
-                a {
+                a,
+                [data-anchor] {
                   justify-content: flex-start;
                   padding: 0.5rem;
                 }

diff --git a/src/components/header/Search.tsx b/src/components/header/Search.tsx
@@ -85,7 +85,7 @@ export default function Search({ isMobile, navigationBarPosition }: Props) {
       isMobile={isMobile}
       $navigationBarPosition={navigationBarPosition}
     >
-      {!isMobile && <MagnifyingGlass size={24} />}
+      {!isMobile && <MagnifyingGlass size={24} style={{ minWidth: "24px" }} />}
       <Input
         data-testid="search-by-name-input"
         onChange={handleChange}

diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx
@@ -61,7 +61,7 @@ const ExploreContainer = styled.div`
   margin-top: 2rem;
 `;
 
-const DarkerBackground = styled.div`
+const DarkerBackground = styled.div.attrs({ id: "darker-background" })`
   background-color: var(--secondary);
   width: 100vw;
   position: relative;
@@ -90,6 +90,10 @@ export default function Landing() {
   const bannerImgPosition = useCustomStoreQueryParameter(
     "bannerImgPosition"
   ) as unknown as "under" | "over" | "";
+  const navigationBarPosition = useCustomStoreQueryParameter(
+    "navigationBarPosition"
+  );
+  const isSideNavBar = ["left", "right"].includes(navigationBarPosition);
   const title = useCustomStoreQueryParameter("title");
   const description = useCustomStoreQueryParameter("description");
   const bannerUrl = useCustomStoreQueryParameter("bannerUrl");
@@ -102,6 +106,7 @@ export default function Landing() {
   const realBannerImgPosition = title ? bannerImgPosition : "over";
   const withUnderBanner = bannerUrl && realBannerImgPosition === "under";
   const TitleAndDescriptionWrapper = withUnderBanner ? Layout : Div;
+  const LayoutWrapper = isSideNavBar ? Grid : DarkerBackground;
   return (
     <LandingPage isCustomStoreFront={isCustomStoreFront}>
       {isCustomStoreFront ? (
@@ -159,7 +164,6 @@ export default function Landing() {
             flexBasis="50%"
             flexDirection={isLteS ? "column-reverse" : "row"}
             gap="2.5rem"
-            data-hero-wrapper
           >
             <GridWithZindex alignItems="flex-start" flexDirection="column">
               <Title tag="h1" fontWeight="600">
@@ -202,16 +206,16 @@ export default function Landing() {
           </Grid>
         </>
       )}
-      <DarkerBackground>
-        <LayoutRoot>
+      <LayoutWrapper>
+        <LayoutRoot style={{ ...(isSideNavBar && { padding: "initial" }) }}>
           <LandingPage
             isCustomStoreFront={isCustomStoreFront}
             style={{ paddingTop: "2rem", paddingBottom: "2rem" }}
           >
             <FeaturedOffers title="Products" />
           </LandingPage>
         </LayoutRoot>
-      </DarkerBackground>
+      </LayoutWrapper>
     </LandingPage>
   );
 }