ui/ bottom-nav-comment-input

AboutClan · Oct 24, 2024 · b02cdc9 · b02cdc9
1 parent 0e5ddd6
commit b02cdc9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/pageTemplates/square/SecretSquare/SecretSquareComments.tsx b/pageTemplates/square/SecretSquare/SecretSquareComments.tsx
@@ -118,17 +118,16 @@ function SecretSquareComments({ author, comments, refetch }: SecretSquareComment
         </Flex>
       </Slide>
       <Box
-        h="60px"
         position="fixed"
         borderTop="var(--border)"
         bottom="0"
         flex={1}
         w="100%"
         backgroundColor="white"
-        pb={`calc(16px + ${iPhoneNotchSize()}px)`}
         maxW="var(--max-width)"
+        pb={`${keypadHeight === 0 ? iPhoneNotchSize() : 0}px`}
       >
-        <Box py={4} borderBottom="var(--border-main)" px={5}>
+        <Box py={4} borderBottom="var(--border)" px={5}>
           <UserCommentInput user={SECRET_USER_SUMMARY} onSubmit={onSubmit} type="message" />
         </Box>
       </Box>

diff --git a/pages/chat/[uid].tsx b/pages/chat/[uid].tsx
@@ -11,6 +11,7 @@ import Slide from "../../components/layouts/PageSlide";
 import UserCommentInput from "../../components/molecules/UserCommentInput";
 import { useChatMutation } from "../../hooks/chat/mutations";
 import { useChatQuery } from "../../hooks/chat/queries";
+import { useKeypadHeight } from "../../hooks/custom/useKeypadHeight";
 import { useUserInfoQuery } from "../../hooks/user/queries";
 import { transferUserName } from "../../recoils/transferRecoils";
 import { getDateDiff } from "../../utils/dateTimeUtils";
@@ -25,6 +26,7 @@ interface Chat {
 function Uid() {
   const router = useRouter();
   const { uid } = useParams<{ uid: string }>() || {};
+  const keypadHeight = useKeypadHeight();
 
   const userName = useRecoilValue(transferUserName);
   const [chats, setChats] = useState<Chat[]>([]);
@@ -150,17 +152,16 @@ function Uid() {
         </Flex>
       </Slide>
       <Box
-        h="60px"
-        borderBottom="var(--border)"
         position="fixed"
-        pb={`calc(16px + ${iPhoneNotchSize()}px)`}
         borderTop="var(--border)"
         bottom="0"
         flex={1}
         w="100%"
+        backgroundColor="white"
         maxW="var(--max-width)"
+        pb={`${keypadHeight === 0 ? iPhoneNotchSize() : 0}px`}
       >
-        <Box py={4} borderBottom="var(--border-main)" px={5}>
+        <Box py={4} borderBottom="var(--border)" px={5}>
           <UserCommentInput user={userInfo} onSubmit={onSubmit} type="message" initialFocus />
         </Box>
       </Box>