feat(web): themeBox 加入 acrylic props

ohbug-org · Jun 30, 2022 · 5f68b96 · 5f68b96
1 parent 52fc349
commit 5f68b96
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 13 deletions.
diff --git a/packages/web/src/components/layout.tsx b/packages/web/src/components/layout.tsx
@@ -42,7 +42,10 @@ const Layout: FC<Props> = ({ children }) => {
       </Container>
       {/* navMenu */}
       <ThemeBox
+        acrylic
+        backdropFilter="saturate(180%) blur(5px)"
         bg="current"
+        boxShadow="inset 0 -1px 0 0 rgba(0,0,0,.1)"
         h={`${NavHeight}px`}
         position={scrollNavVisible ? 'sticky' : 'relative'}
         top={scrollNavVisible ? 0 : ''}
@@ -90,9 +93,8 @@ const Layout: FC<Props> = ({ children }) => {
       {/* main */}
       <ThemeBox
         bg="gray"
-        border="1px"
+        borderBottom="1px"
         borderColor="current"
-        borderX="0"
         minH={`calc(100vh - ${HeadHeight + NavHeight}px)`}
         w="full"
       >

diff --git a/packages/web/src/components/themeBox.tsx b/packages/web/src/components/themeBox.tsx
@@ -4,11 +4,13 @@ import type { FC } from 'react'
 import { useMemo } from 'react'
 import { useBgColor, useBorderColor } from '~/hooks/useColor'
 
-interface Props extends BoxProps {}
+interface Props extends BoxProps {
+  acrylic?: boolean
+}
 
 const ThemeBox: FC<Props> = (props) => {
-  const bgColor = useBgColor()
-  const bgGrayColor = useBgColor(true)
+  const bgColor = useBgColor({ acrylic: props.acrylic })
+  const bgGrayColor = useBgColor({ gray: true })
   const borderColor = useBorderColor()
 
   const bg = useMemo(() => {

diff --git a/packages/web/src/components/title.tsx b/packages/web/src/components/title.tsx
@@ -1,5 +1,5 @@
 import type { BoxProps } from '@chakra-ui/react'
-import { Box, Heading } from '@chakra-ui/react'
+import { Box, Flex, Heading } from '@chakra-ui/react'
 import type { FC, ReactNode } from 'react'
 import ThemeBox from './themeBox'
 import Wrapper from './wrapper'
@@ -25,10 +25,13 @@ const Title: FC<Props> = ({ children, rightNodes, bottomNodes, ...props }) => {
         pb={bottomNodes ? '0' : '16'}
         pt="16"
       >
-        <Box>
+        <Flex
+          align="center"
+          justify="space-between"
+        >
           {typeof children === 'string' ? <Heading>{children}</Heading> : children}
           <Box>{rightNodes}</Box>
-        </Box>
+        </Flex>
         <Box mt="6">{bottomNodes}</Box>
       </Wrapper>
     </ThemeBox>

diff --git a/packages/web/src/hooks/useColor.ts b/packages/web/src/hooks/useColor.ts
@@ -1,8 +1,14 @@
 import { useColorModeValue } from '@chakra-ui/react'
 
-export function useBgColor(gray = false) {
-  if (gray) return useColorModeValue('gray.50', 'dark.800')
-  return useColorModeValue('white', 'dark.900')
+export function useBgColor({ gray = false, acrylic = false }) {
+  if (acrylic) {
+    if (gray) return useColorModeValue('gray.50', 'dark.800')
+    return useColorModeValue('whiteAlpha.600', 'blackAlpha.600')
+  }
+  else {
+    if (gray) return useColorModeValue('gray.50', 'dark.800')
+    return useColorModeValue('white', 'dark.900')
+  }
 }
 
 export function useBorderColor() {

diff --git a/packages/web/src/pages/[projectId]/profile.tsx b/packages/web/src/pages/[projectId]/profile.tsx
@@ -117,13 +117,14 @@ const Profile: NextPage<Props> = ({ project, trends }) => {
       <Title
         rightNodes={
           (
-            <NextLink href={`/projects/${project.id}/settings`}>
+            <NextLink href={`/${project.id}/settings`}>
               <Button
                 leftIcon={
                   <Icon as={RiSettings2Line} />
                 }
                 variant="solid"
-              >Setting
+              >
+                Setting
               </Button>
             </NextLink>
           )