animations is the most important part of this project

frontend/app/src/components/AuthModal.tsx

@@ -14,11 +14,14 @@ import {
 import { MessageContext } from "../App";
 import { store, updateToken, updateUser } from "../config/store";
 import tr from "../config/translation";
+import { useNavigate } from "react-router-dom";
 
 const AuthModal = (props: {
   open: boolean;
   setOpen: (arg0: boolean) => void;
 }) => {
+  const navigate = useNavigate();
+
   const [loginForm] = Form.useForm();
   const [registerForm] = Form.useForm();
 
@@ -47,6 +50,7 @@ const AuthModal = (props: {
       })
       .then(() => refetch())
       .then(() => props.setOpen(false))
+      .then(() => navigate("/dashboard"))
       .catch(() => messageApi.error(tr("Login failed!")));
   };
 

frontend/app/src/components/HeaderComponent.tsx

@@ -11,7 +11,7 @@ import "./styles.css";
 import { StorePrototype, logOut, store } from "../config/store";
 import { useSelector } from "react-redux";
 import tr from "../config/translation";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import logo from "../../static/android-chrome-192x192.png";
 
 const { Header } = Layout;
@@ -39,7 +39,7 @@ const HeaderComponent = () => {
       key: "logout",
       icon: <LogoutOutlined />,
       danger: true,
-      onClick: () => store.dispatch(logOut()),
+      onClick: () => store.dispatch(logOut()) && navigate("/"),
     },
   ];
 

frontend/app/src/components/styles.css

@@ -8,7 +8,23 @@
   background-color: #001529;
 }
 
+@keyframes cardPopup {
+  0% {
+    transform: translateY(20%);
+    opacity: 0%;
+  }
+  50% {
+    opacity: 20%;
+    transform: translateY(3%);
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 100%;
+  }
+}
+
 .card {
+  animation: 0.5s ease-out 0s 1 cardPopup;
   background: #001529;
   margin-top: 0.5rem;
   margin-right: 1rem;

frontend/app/src/pages/styles.css

@@ -1,4 +1,21 @@
+
+@keyframes cardPopup {
+    0% {
+      transform: translateY(20%);
+      opacity: 0%;
+    }
+    50% {
+      opacity: 20%;
+      transform: translateY(3%);
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 100%;
+    }
+  }
+
 .card {
+    animation: 0.5s ease-out 0s 1 cardPopup;
     background: #001529;
     margin-top: 0.5rem;
     margin-right: 1rem;