Skip to content

Commit

Permalink
atropos animations/typing animation/ bugFix
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaryansinha16
aaryansinha16 committed Mar 4, 2023
1 parent 614d0fb commit a8659cf
Show file tree
Hide file tree
Showing 15 changed files with 159 additions and 18 deletions.
14 changes: 14 additions & 0 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"aes256": "^1.1.0",
"atropos": "^1.0.2",
"axios": "^1.3.3",
"buffer": "^6.0.3",
"crypto-js": "^4.1.1",
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,4 +118,11 @@ html{

input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
cursor: pointer;
}

.my-atropos{
width: 100%;
border-radius: 40px;
cursor:all-scroll;
/* height: 160px; */
}
8 changes: 8 additions & 0 deletions frontend/src/components/About/About.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Box } from '@chakra-ui/react'
import React from 'react'
import AboutCard from '../cards/AboutCard'
import Atropos from 'atropos/react'

const About = () => {
return (
Expand All @@ -10,7 +11,14 @@ const About = () => {
borderRadius='20px'
p={4}
>
<Atropos
className='my-atropos'
activeOffset={40}
shadowScale={1.05}
>
<AboutCard />

</Atropos>
</Box>
)
}
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/components/ChatList/ChatList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const ChatList = () => {
useEffect(() => {
if(user != undefined){
setChatLoading(true)
console.log("CHAT LIST HERE")
axios.get(`${URL}/chat` , {
headers : {
Authorization : user.token
Expand Down Expand Up @@ -109,12 +110,12 @@ const ChatList = () => {
</AccordionButton>
<AccordionPanel pb={4} p={0}>
{
!chatLoading ?
// !chatLoading ?
allChat?.map((el, i) => (
<ChatCard key={i} {...el} el={el}/>
))
:
<Spinner size='lg'/>
// :
// <Spinner size='lg'/>
}
</AccordionPanel>
</AccordionItem>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/MainChat/MainChat.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { allContext } from '../../contexts/AllContext'
import SendMessageBox from '../cards/SendMessageBox'
import SingleChatBox from './SingleChatBox'
import GroupAvatar from '../../assets/groupAvatar.png'
import TypingLoader from '../TypingLoader/TypingLoader'

const MainChat = () => {
const {colorMode} = useColorMode()
Expand Down Expand Up @@ -47,7 +48,7 @@ const MainChat = () => {
}
<InfoIcon />
</HStack>

{/* <TypingLoader /> */}
<VStack
pl={4}
pr={4}
Expand Down
11 changes: 6 additions & 5 deletions frontend/src/components/MainChat/SingleChatBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ let checkChat
const SingleChatBox = () => {
const {colorMode} = useColorMode()
const toast = useToast()
const {selectChat, user , setGlobalRender} = useContext(allContext)
const {selectChat, user , setGlobalRender, globalRender} = useContext(allContext)
const [allMessages, setAllMessages] = useState([])
const [loading ,setLoading ] = useState(false)
const [newMessage ,setNewMessage] = useState("")
Expand All @@ -30,13 +30,14 @@ const SingleChatBox = () => {

useEffect(() => {
socket.on("message received", (newMsg) => {
// console.log("MESSAGE AAYA", newMsg)
setGlobalRender(!globalRender)
if(!checkChat || checkChat._id !== newMsg.chatWith._id){

}else{
let decryptedMessage = decryptMessage(newMsg.message)
newMsg = {...newMsg, message : decryptedMessage}
setAllMessages([...allMessages , newMsg])
setGlobalRender((prev) => !prev)
// setGlobalRender(!globalRender)
}
})
}) //! POTENTIAL BUG (DEPENDENCY ARRAY)
Expand Down Expand Up @@ -96,8 +97,8 @@ const SingleChatBox = () => {
var decryptedMyMsg = decryptMessage(myMsg.message)
myMsg = {...myMsg, message : decryptedMyMsg}
setAllMessages([...allMessages, myMsg])
// setRender((prev) => !prev)
setGlobalRender((prev) => !prev)
// setRender(!globalRender)
// setGlobalRender(!globalRender)
})
.catch((e) => console.log(e, 'new message error'))
}
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/components/Modals/AuthModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { useState } from "react";
import { useRef } from "react";
import LoginTab from "./LoginTab";
import SignUpTab from "./SignUpTab";
import Atropos from 'atropos/react'

const changeCol = keyframes`
from { backdrop-filter:blur(1px) hue-rotate(0deg); }
Expand Down Expand Up @@ -74,6 +75,10 @@ export default function AuthModal({ isOpen, onClose }) {
color="white"
py={2}
>
<Atropos
activeOffset={30}
shadow={false}
>
<ModalBody>

<Tabs isLazy isFitted variant='soft-rounded' onChange={(ind) => setTabChange(ind)}>
Expand All @@ -93,6 +98,7 @@ export default function AuthModal({ isOpen, onClose }) {

</ModalBody>

</Atropos>
</ModalContent>
</Modal>
</>
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/components/Modals/LoginTab.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ const LoginTab = ({onClose}) => {
>
<FormControl isRequired>
<Input
data-atropos-offset="-3"
border='none'
bg={colorMode == 'light' ? 'gray.300' : 'gray.600'}
type='email'
Expand All @@ -105,6 +106,7 @@ const LoginTab = ({onClose}) => {
/>
</FormControl>
<Input
data-atropos-offset="3"
border='none'
bg={colorMode == 'light' ? 'gray.300' : 'gray.600'}
type='password'
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/components/Navbar/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
} from "react-icons/ai";
import { BsFillCameraVideoFill } from "react-icons/bs";
import NavProfileCard from '../cards/NavProfileCard';
import Atropos from 'atropos/react'


const Navbar = () => {
Expand Down Expand Up @@ -120,12 +121,17 @@ const Navbar = () => {
spacing={2}
>
<SunIcon color='orange' fontSize='20px'/>
<Atropos

>
<Switch
data-atropos-offset='10'
size='lg'
aria-label={`Switch to ${text} mode`}
onChange={toggleColorMode}
defaultChecked
/>
</Atropos>
<MoonIcon color={colorMode == 'light' ? 'darkBlue' : 'gray.400'} fontSize='20px'/>
</HStack>
<BellIcon fontSize='22px' ml='20px' cursor='pointer'/>
Expand Down
15 changes: 15 additions & 0 deletions frontend/src/components/TypingLoader/TypingLoader.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react'
import Styles from './typingloader.module.css'

const TypingLoader = () => {
return (
<div className={Styles.ldsEllipsis}>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
)
}

export default TypingLoader
57 changes: 57 additions & 0 deletions frontend/src/components/TypingLoader/typingloader.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
.ldsEllipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
/* border:1px solid red; */
}
.ldsEllipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.ldsEllipsis div:nth-child(1) {
left: 8px;
animation: ldsEllipsis1 0.6s infinite;
}
.ldsEllipsis div:nth-child(2) {
left: 8px;
animation: ldsEllipsis2 0.6s infinite;
}
.ldsEllipsis div:nth-child(3) {
left: 32px;
animation: ldsEllipsis2 0.6s infinite;
}
.ldsEllipsis div:nth-child(4) {
left: 56px;
animation: ldsEllipsis3 0.6s infinite;
}
@keyframes ldsEllipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes ldsEllipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes ldsEllipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}

36 changes: 28 additions & 8 deletions frontend/src/components/cards/AboutCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Avatar, Text, useColorMode, VStack } from '@chakra-ui/react'
import React, { useContext } from 'react'
import { allContext } from '../../contexts/AllContext'
import GroupAvatar from '../../assets/groupAvatar.png'
import Atropos from 'atropos/react'

const AboutCard = () => {
const {colorMode} = useColorMode()
Expand All @@ -19,16 +20,26 @@ const AboutCard = () => {
pt={{base: 2, md: 6, lg: 8}}
pb={{base: 2, md: 6, lg: 8}}
color='white'
boxShadow= 'rgba(50, 50, 93, 1) 0px 50px 100px -20px, rgba(255, 255, 255, 0.4) 0px 30px 60px -30px, rgba(0, 0, 0, .8) 0px -2px 16px 0px inset'
_hover={{
boxShadow:'rgba(0, 0, 0, 0.55) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset'
}}
// style={{boxShadow: '10px 10px -14px 14px #FFF'}}
data-atropos-offset="-4"
// boxShadow= 'rgba(50, 50, 93, 1) 0px 50px 100px -20px, rgba(255, 255, 255, 0.4) 0px 30px 60px -30px, rgba(0, 0, 0, .8) 0px -2px 16px 0px inset'
// _hover={{
// boxShadow:'rgba(0, 0, 0, 0.55) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset'
// }}
// style={{boxShadow: '10px 10px -14px 14px #000'}}
>
{
Object.keys(selectChat).length == 0 ?
<>
<Avatar size='2xl' name='Vincent Churchel' src='https://api.dicebear.com/5.x/adventurer-neutral/svg?seed=Felix'/>
<Atropos
activeOffset={40}
shadow={false}
shadowScale={-10}
shadowOffset={-10}
highlight={false}

>
<Avatar data-atropos-offset="10" size='2xl' name='Vincent Churchel' src='https://api.dicebear.com/5.x/adventurer-neutral/svg?seed=Felix'/>
</Atropos>
<VStack spacing={-1} alignItems='center' justifyContent='center'>
<Text fontSize='2xl' color={colorMode == 'dark' ? 'white' : 'white'}>Vincent Churchel</Text>
<Text fontSize='sm' color='gray.300'>vincent@gmail.com</Text>
Expand All @@ -37,9 +48,18 @@ const AboutCard = () => {
</>
:
<>
<Avatar size='2xl' name='Vincent Churchel' src={selectChat.groupChatType ? GroupAvatar : selectChat.users[0].avatar}/>
<Atropos
activeOffset={40}
shadow={false}
shadowScale={-10}
shadowOffset={-10}
highlight={false}

>
<Avatar data-atropos-offset="10" size='2xl' name='Vincent Churchel' src={selectChat.groupChatType ? GroupAvatar : selectChat.users[0].avatar}/>
</Atropos>
<VStack spacing={-1} alignItems='center' justifyContent='center'>
<Text fontSize='2xl' color={colorMode == 'dark' ? 'white' : 'black'}>{selectChat.groupChatType ? selectChat.name : selectChat.users[0].userName}</Text>
<Text fontSize='2xl' color={colorMode == 'dark' ? 'white' : 'white'}>{selectChat.groupChatType ? selectChat.name : selectChat.users[0].userName}</Text>
<Text fontSize='sm' color='gray.300'>{selectChat.groupChatType ? `${selectChat.users.length} Members` : selectChat.users[0].email}</Text>
</VStack>
<Text pt='16px'>Meet {selectChat.users[0].userName}, He is the owner of the app and the one who worked for everything</Text>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/cards/ChatCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Avatar, AvatarBadge, Flex, HStack, Text, useColorMode, VStack } from '@
import React, { useContext } from 'react'
import { allContext } from '../../contexts/AllContext'
import { decryptMessage } from '../../encryption'
import GroupAvatar from '../../assets/groupAvatar.png'

const ChatCard = ({
groupChatType,
Expand Down Expand Up @@ -43,7 +44,7 @@ const ChatCard = ({
alignItems='center'
gap={1}
>
<Avatar src={participent[0].avatar} size='md'>
<Avatar src={groupChatType ? GroupAvatar : participent[0].avatar} size='md'>
<AvatarBadge boxSize='1.25em' bg='green.500' />
</Avatar>

Expand Down
1 change: 1 addition & 0 deletions frontend/src/main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import App from './App'
import AllContextProviderComponent from './contexts/AllContext'
import './index.css'
import theme from './theme'
import 'atropos/css'
// import './polyfill'

ReactDOM.createRoot(document.getElementById('root')).render(
Expand Down

0 comments on commit a8659cf

Please sign in to comment.