Skip to content

Commit

Permalink
WIP: update body background color in theme
Browse files Browse the repository at this point in the history 
Update the body background color in the theme to '#dee9ec' to override the default value and improve the visual appeal of the page.
  • Loading branch information
@kleberbaum
kleberbaum committed Jun 11, 2024
1 parent f9bb7e6 commit 26bd248
Show file tree
Hide file tree
Showing 10 changed files with 225 additions and 5,396 deletions.
4 changes: 2 additions & 2 deletions src/components/AppLayout/AppLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const AppLayout: FC<AppLayoutProps> = ({ children, isDocs, path, footer }) => {
minW="210px"
h="max(100%, 100vh)"
minH="100vh">
{path === "/" && <GridPattern
{/* {path === "/" && <GridPattern
position="absolute"
insetX="0"
top="-14" // In Chakra UI the values are in base 4 pixels, '-14' here might not directly translate. Adjust accordingly.
Expand All @@ -88,7 +88,7 @@ const AppLayout: FC<AppLayoutProps> = ({ children, isDocs, path, footer }) => {
}}
yOffset={-96}
interactive
/>}
/>} */}
{!isAuthenticated && path !== "/" && <TopNav path={path} />}
{!isAuthenticated && path === "/" && <AltTopNav path={path} />}
{childrenElmnt}
Expand Down
91 changes: 69 additions & 22 deletions src/components/navigation/AltTopNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
>
<Box
pos="relative"
bg="#0A0A0A"
bg="brand.900"
color="white"
transition="height 0.2s cubic-bezier(0.68, 0, 0.27, 1), min-height 0.2s cubic-bezier(0.68, 0, 0.27, 1)"
height={isOpen ? 'max(600px, calc(100vh + 15px))' : '0'}
Expand Down Expand Up @@ -126,7 +126,7 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
color: 'brand.500'
}}
>
<LinkOverlay href="/docs">Unsere Services</LinkOverlay>
<LinkOverlay href="/docs">Meine Beratung</LinkOverlay>
</LinkBox>
<LinkBox
gridArea="team"
Expand All @@ -144,7 +144,7 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
color: 'brand.500'
}}
>
<LinkOverlay href="/docs">Dokumentation</LinkOverlay>
<LinkOverlay href="/docs">Meine Kunden</LinkOverlay>
</LinkBox>
<LinkBox
gridArea="portfolio"
Expand All @@ -161,7 +161,7 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
color: 'brand.500'
}}
>
<LinkOverlay href="/docs">Unser Portfolio</LinkOverlay>
<LinkOverlay href="/docs">Rezepte</LinkOverlay>
</LinkBox>
<LinkBox
gridArea="blog"
Expand Down Expand Up @@ -286,37 +286,83 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
py={{ base: '2', md: '4' }}
justifyContent="space-between"
>
<LinkBox flex="2" mr="4" display="flex">
<LinkBox height="100%" flex="2" mr="4" display="flex">
<LinkOverlay href="/" color="white">
<Logo height="100%" color="black" />
<Logo height="100%" />
</LinkOverlay>
</LinkBox>
<Flex alignItems="center" flex="1" justifyContent="flex-end">
<SearchMenu
{/* <SearchMenu
boxSizing={'border-box'}
borderWidth={{ base: 0, lg: 2 }}
color={{ base: 'white', lg: 'gray.400' }}
_hover={{
borderColor: 'brand.600',
bg: { base: 'brand.600', lg: 'transparent' }
}}
/>
/> */}
<Button
variant="ghost"
ml={4}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
onClick={handleOnContactClick}
fontSize="sm"
fontWeight="semibold"
color="#273E53"
display={{ base: 'none', md: 'block' }}
>
Meine Beratung
</Button>
<Button
variant="ghost"
ml={4}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
onClick={handleOnContactClick}
fontSize="sm"
fontWeight="semibold"
color="#273E53"
display={{ base: 'none', md: 'block' }}
>
Meine Kunden
</Button>
<Button
variant="ghost"
ml={4}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
onClick={handleOnContactClick}
fontSize="sm"
fontWeight="semibold"
color="#273E53"
display={{ base: 'none', md: 'block' }}
>
Rezepte
</Button>
<Button
variant="ghost"
ml={4}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
onClick={handleOnContactClick}
fontSize="sm"
fontWeight="semibold"
color="#273E53"
display={{ base: 'none', md: 'block' }}
>
Blog
</Button>
<Button
ml={4}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
borderRadius={'lg'}
onClick={handleOnContactClick}
fontSize="sm"
fontWeight="semibold"
color="white"
display={{ base: 'none', md: 'block' }}
>
Jetzt anfragen
Kontakt
</Button>
{/* <Button
ml={4}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
borderRadius={'lg'}
onClick={handleOnContactClick}
fontSize="sm"
fontWeight="semibold"
Expand All @@ -325,6 +371,8 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
Login
</Button> */}
<IconButton
variant="ghost"
display={{ base: 'block', md: 'none' }}
ml={4}
icon={
<HamburgerMenuIcon
Expand All @@ -334,12 +382,11 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
// ...hamburgerIconProps,
//boxSize: '6',
//boxSize: '100%',
backgroundColor: 'white'
backgroundColor: 'brand.700'
}}
/>
}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
borderRadius={'lg'}
//variant="ghost"
fontWeight={'bold'}
aria-label={isOpen ? 'Close menu' : 'Open menu'}
Expand Down Expand Up @@ -368,13 +415,13 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
py={{ base: '2', md: '4' }}
justifyContent="space-between"
>
<LinkBox flex="2" mr="4" display="flex">
<LinkBox height="100%" flex="2" mr="4" display="flex">
<LinkOverlay href="/" color="white">
<Logo height="100%" color="white" />
</LinkOverlay>
</LinkBox>
<Flex alignItems="center" flex="1" justifyContent="flex-end">
<SearchMenu
{/* <SearchMenu
borderColor={'white'}
boxSizing={'border-box'}
borderWidth={{ base: 0, lg: 2 }}
Expand All @@ -384,13 +431,12 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
borderColor: 'brand.500',
bg: { base: 'brand.500', lg: 'transparent' }
}}
/>
/> */}
<Button
ml={4}
_hover={{
bg: 'brand.500'
}}
borderRadius={'lg'}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
//variant="ghost"
onClick={handleOnContactClick}
Expand All @@ -400,14 +446,13 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
color="black"
display={{ base: 'none', md: 'block' }}
>
Jetzt anfragen
Kontakt
</Button>
{/* <Button
ml={4}
_hover={{
bg: 'brand.500'
}}
borderRadius={'lg'}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
//variant="ghost"
onClick={handleOnContactClick}
Expand All @@ -419,6 +464,8 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
Login
</Button> */}
<IconButton
variant="ghost"
display={{ base: 'block', md: 'none' }}
ml={4}
_hover={{
bg: 'brand.500'
Expand All @@ -431,17 +478,17 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
// ...hamburgerIconProps,
//boxSize: '6',
//boxSize: '100%',
backgroundColor: 'black'
backgroundColor: 'brand.700'
}}
/>
}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
borderRadius={'lg'}

//variant="ghost"
fontWeight={'bold'}
aria-label={isOpen ? 'Close menu' : 'Open menu'}
onClick={toggleMobileMenu}
bg={'white'}
//bg={'white'}
color={'black'}
/>
</Flex>
Expand Down
Loading

0 comments on commit 26bd248

Please sign in to comment.