Skip to content

Commit

Permalink
feat: add announcement banner (#1059)
Browse files Browse the repository at this point in the history
  • Loading branch information
@albertfolch-redeemeum
albertfolch-redeemeum authored Apr 5, 2024
1 parent 3a4d4cb commit f1486c1
Show file tree
Hide file tree
Showing 2 changed files with 170 additions and 90 deletions.
64 changes: 64 additions & 0 deletions src/components/header/AnnouncementBanner.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { styled } from "styled-components";

const Wrapper = styled.a`
font-size: 0.875rem;
background-color: rgb(120 41 249);
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.2s;
padding: 0.5rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
* {
font-size: inherit;
}
svg {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.2s;
left: 0;
}
&:hover {
background-color: rgb(9 24 44);
svg {
left: 10px;
position: relative;
}
}
`;

export const AnnouncementBanner = () => {
return (
<Wrapper href="https://form.typeform.com/to/nHbO8y3e" target="_blank">
<span>Help us improve: take the Boson website survey (3 mins)</span>
<svg
width="20"
height="20"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="24"
height="24"
transform="translate(0.5)"
fill="#02F3A2"
></rect>
<path
d="M11.95 6.25C12.1 6.11667 12.2417 6.11667 12.375 6.25L17.6 11.5C17.75 11.6333 17.75 11.7667 17.6 11.9L12.375 17.15C12.2417 17.2833 12.1 17.2833 11.95 17.15L11.45 16.65C11.4 16.6 11.375 16.5333 11.375 16.45C11.375 16.3667 11.4 16.2917 11.45 16.225L15.325 12.35H6.8C6.6 12.35 6.5 12.25 6.5 12.05V11.35C6.5 11.15 6.6 11.05 6.8 11.05H15.325L11.45 7.175C11.3167 7.025 11.3167 6.88333 11.45 6.75L11.95 6.25Z"
fill="#09182C"
></path>
</svg>
</Wrapper>
);
};
196 changes: 106 additions & 90 deletions src/components/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,20 @@ import { useBreakpoints } from "lib/utils/hooks/useBreakpoints";
import { useKeepQueryParamsNavigate } from "lib/utils/hooks/useKeepQueryParamsNavigate";
import { useCustomStoreQueryParameter } from "pages/custom-store/useCustomStoreQueryParameter";
import { X } from "phosphor-react";
import { forwardRef, useEffect, useMemo, useState } from "react";
import {
ElementRef,
forwardRef,
useEffect,
useMemo,
useRef,
useState
} from "react";
import { generatePath, useLocation } from "react-router-dom";
import useUserRoles from "router/useUserRoles";
import styled, { css } from "styled-components";

import { AccountDrawer } from "./accountDrawer";
import { AnnouncementBanner } from "./AnnouncementBanner";
import { BurgerButton } from "./BurgerButton";
import ConnectButton from "./ConnectButton";
import HeaderLinks, { HEADER_HEIGHT } from "./HeaderLinks";
Expand Down Expand Up @@ -121,9 +129,6 @@ const Header = styled.header<{
top: 0;
left: 0;
right: 0;
+ * {
padding-top: ${HEADER_HEIGHT};
}
border-bottom: 2px solid ${colors.border};
> div {
> * {
Expand Down Expand Up @@ -207,7 +212,7 @@ interface Props {
fluidHeader: boolean | undefined;
}
export const HeaderComponent = forwardRef<HTMLElement, Props>(
({ fluidHeader = false }, ref) => {
({ fluidHeader = false }) => {
const navigate = useKeepQueryParamsNavigate();
const [isOpen, setOpen] = useState(false);
const { pathname, search } = useLocation();
Expand Down Expand Up @@ -317,99 +322,110 @@ export const HeaderComponent = forwardRef<HTMLElement, Props>(
isFetching,
isLteXS
]);

const ref = useRef<ElementRef<"header">>(null);
return (
<Header
$navigationBarPosition={navigationBarPosition}
$isSideBarOpen={isOpen}
ref={ref}
>
<HeaderContainer
fluidHeader={fluidHeader}
<>
<div
style={{
height:
(ref?.current?.offsetHeight
? `${ref.current.offsetHeight}px`
: undefined) || HEADER_HEIGHT
}}
/>
<Header
$navigationBarPosition={navigationBarPosition}
$isSideBarOpen={isOpen}
ref={ref}
>
{isSideBurgerVisible ? (
<Grid justifyContent="center">
<BurgerButton onClick={toggleMenu} />
</Grid>
) : (
<>
<Grid
flexDirection="row"
alignItems="center"
width="initial"
gap="1rem"
>
<LinkWithQuery
to={BosonRoutes.Root}
style={{ display: "flex" }}
>
<LogoImg
src={logoUrl || logo}
alt="logo image"
data-testid="logo"
style={{ maxWidth: "100%" }}
width={logoUrl ? undefined : isLteXS ? 104 : 204}
height={
logoUrl
? undefined
: isLteXS
? logoXXSHeightPx
: logoSHeightPx
}
/>
</LinkWithQuery>
{isSideCrossVisible && (
<X
color={colors.secondary}
onClick={toggleMenu}
style={{
cursor: "pointer",
minWidth: "24px",
maxWidth: "24px"
}}
size="24"
/>
)}
{!isCustomStoreFront && <AnnouncementBanner />}
<HeaderContainer
fluidHeader={fluidHeader}
$navigationBarPosition={navigationBarPosition}
>
{isSideBurgerVisible ? (
<Grid justifyContent="center">
<BurgerButton onClick={toggleMenu} />
</Grid>
<HeaderItems $navigationBarPosition={navigationBarPosition}>
{burgerMenuBreakpoint && (
<>
{CTA}
{!isLteXS && <ChainSelector />}
{!isXXS && <ConnectButton showOnlyIcon />}
<BurgerButton onClick={toggleMenu} />
</>
)}
<HeaderLinks
isMobile={burgerMenuBreakpoint}
isOpen={isOpen}
navigationBarPosition={navigationBarPosition}
) : (
<>
<Grid
flexDirection="row"
alignItems="center"
width="initial"
gap="1rem"
>
<LinkWithQuery
to={BosonRoutes.Root}
style={{ display: "flex" }}
>
<LogoImg
src={logoUrl || logo}
alt="logo image"
data-testid="logo"
style={{ maxWidth: "100%" }}
width={logoUrl ? undefined : isLteXS ? 104 : 204}
height={
logoUrl
? undefined
: isLteXS
? logoXXSHeightPx
: logoSHeightPx
}
/>
</LinkWithQuery>
{isSideCrossVisible && (
<X
color={colors.secondary}
onClick={toggleMenu}
style={{
cursor: "pointer",
minWidth: "24px",
maxWidth: "24px"
}}
size="24"
/>
)}
</Grid>
<HeaderItems $navigationBarPosition={navigationBarPosition}>
{burgerMenuBreakpoint && (
<Grid justifyContent="flex-start">
<ChainSelector leftAlign={true} />
<>
{CTA}
{!isLteXS && <ChainSelector />}
{!isXXS && <ConnectButton showOnlyIcon />}
<BurgerButton onClick={toggleMenu} />
</>
)}
<HeaderLinks
isMobile={burgerMenuBreakpoint}
isOpen={isOpen}
navigationBarPosition={navigationBarPosition}
>
{burgerMenuBreakpoint && (
<Grid justifyContent="flex-start">
<ChainSelector leftAlign={true} />
<ConnectButton />
</Grid>
)}
</HeaderLinks>
{!burgerMenuBreakpoint && (
<>
{CTA}
<ChainSelector
leftAlign={navigationBarPosition === "left"}
/>
<ConnectButton />
</Grid>
</>
)}
</HeaderLinks>
{!burgerMenuBreakpoint && (
<>
{CTA}
<ChainSelector
leftAlign={navigationBarPosition === "left"}
/>
<ConnectButton />
</>
)}
</HeaderItems>
</>
)}
</HeaderContainer>
<Portal>
<AccountDrawer />
</Portal>
</Header>
</HeaderItems>
</>
)}
</HeaderContainer>
<Portal>
<AccountDrawer />
</Portal>
</Header>
</>
);
}
);

0 comments on commit f1486c1

Please sign in to comment.