diff --git a/chain138-snap/packages/site/src/components/Footer.tsx b/chain138-snap/packages/site/src/components/Footer.tsx index 3d106db..7f7cd74 100644 --- a/chain138-snap/packages/site/src/components/Footer.tsx +++ b/chain138-snap/packages/site/src/components/Footer.tsx @@ -39,12 +39,38 @@ const PoweredByContainer = styled.div` margin-left: 1rem; `; +const LegalColumn = styled.div` + display: flex; + flex-direction: column; + gap: 0.35rem; + min-width: 16rem; +`; + +const SectionTitle = styled.div` + font-size: ${({ theme }) => theme.fontSizes.small}; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: ${({ theme }) => theme.colors.text?.muted}; + margin-bottom: 0.4rem; +`; + +const FooterLink = styled.a` + color: ${({ theme }) => theme.colors.text?.default}; + text-decoration: none; + + &:hover { + text-decoration: underline; + } +`; + /** - * + * @returns The Snap footer with brand, legal links, and build metadata. */ export const Footer = () => { const theme = useTheme(); const buildVersion = getBuildVersion(); + const currentYear = new Date().getFullYear(); return ( @@ -55,6 +81,27 @@ export const Footer = () => { + + Explorer + + Documentation + + + Privacy Policy + + + Terms of Service + + + Acknowledgments + + + support@d-bis.org + + + + © {currentYear} Solace Bank Group PLC + {buildVersion ? ( v{buildVersion} ) : null} diff --git a/chain138-snap/packages/site/src/components/Header.tsx b/chain138-snap/packages/site/src/components/Header.tsx index fda3613..bea5e13 100644 --- a/chain138-snap/packages/site/src/components/Header.tsx +++ b/chain138-snap/packages/site/src/components/Header.tsx @@ -6,21 +6,44 @@ import { Toggle } from './Toggle'; import { getThemePreference } from '../utils'; const HeaderWrapper = styled.header` + color: #fff; + background: linear-gradient( + 135deg, + ${(props) => props.theme.colors.primary?.default} 0%, + ${(props) => props.theme.colors.primary?.dark} 100% + ); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 1000; + border-bottom: 1px solid ${(props) => props.theme.colors.border?.default}; +`; + +const HeaderInner = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; - padding: 2.4rem; - border-bottom: 1px solid ${(props) => props.theme.colors.border?.default}; + gap: 0.85rem; + padding: 0.7rem 1.25rem; + max-width: 1320px; + margin: 0 auto; + + ${({ theme }) => theme.mediaQueries.small} { + padding: 0.55rem 0.9rem; + flex-wrap: wrap; + align-items: stretch; + } `; const Title = styled.p` font-size: ${(props) => props.theme.fontSizes.title}; font-weight: bold; margin: 0; - margin-left: 1.2rem; + line-height: 1.05; + ${({ theme }) => theme.mediaQueries.small} { - display: none; + font-size: 1.1rem; } `; @@ -28,42 +51,95 @@ const LogoWrapper = styled.div` display: flex; flex-direction: row; align-items: center; + gap: 0.5rem; + text-decoration: none; + color: inherit; + padding: 0.25rem 0.4rem; + border-radius: 11px; + transition: + background 0.2s, + transform 0.2s; + + &:hover, + &:focus-visible { + background: rgba(255, 255, 255, 0.12); + transform: translateY(-1px); + outline: none; + } + + ${({ theme }) => theme.mediaQueries.small} { + gap: 0.45rem; + padding: 0.22rem 0.35rem; + } `; const RightContainer = styled.div` display: flex; - flex-direction: row; align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + justify-content: flex-end; + + ${({ theme }) => theme.mediaQueries.small} { + width: 100%; + justify-content: space-between; + } +`; + +const Brand = styled.div` + display: flex; + flex-direction: column; + gap: 0.08rem; + + ${({ theme }) => theme.mediaQueries.small} { + gap: 0.08rem; + } +`; + +const BrandSubtitle = styled.span` + font-size: 0.7rem; + font-weight: normal; + opacity: 0.9; + line-height: 1.1; + + ${({ theme }) => theme.mediaQueries.small} { + font-size: 0.62rem; + } `; /** + * Render the companion site header. * - * @param options0 - * @param options0.handleToggleClick + * @param options0 - Header props. + * @param options0.handleToggleClick - Toggles the site theme. + * @returns The header element. */ export const Header = ({ handleToggleClick, }: { - /** - * - */ + /** Toggles the site theme. */ handleToggleClick: () => void; }) => { const theme = useTheme(); return ( - - - Chain 138 Snap - - - - - + + + + + Chain 138 Snap + The Defi Oracle Meta Explorer + + + + + + + ); }; diff --git a/chain138-snap/packages/site/static/version.json b/chain138-snap/packages/site/static/version.json index a90191a..c663ba3 100644 --- a/chain138-snap/packages/site/static/version.json +++ b/chain138-snap/packages/site/static/version.json @@ -1 +1 @@ -{"version":"dev","buildTime":"2026-02-22T19:21:30.615Z"} \ No newline at end of file +{"version":"dev","buildTime":"2026-03-25T23:54:26.711Z"} \ No newline at end of file