From f887d5ef077d377c63084eebba505bdb8a446b48 Mon Sep 17 00:00:00 2001
From: Olly Hearn <longcat512@gmail.com>
Date: Fri, 12 Apr 2024 20:22:57 +0300
Subject: [PATCH] animations is the most important part of this project

---
 frontend/app/src/components/AuthModal.tsx       |  4 ++++
 frontend/app/src/components/HeaderComponent.tsx |  4 ++--
 frontend/app/src/components/styles.css          | 16 ++++++++++++++++
 frontend/app/src/pages/styles.css               | 17 +++++++++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/frontend/app/src/components/AuthModal.tsx b/frontend/app/src/components/AuthModal.tsx
index 33739b0..616dea6 100644
--- a/frontend/app/src/components/AuthModal.tsx
+++ b/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!")));
   };
 
diff --git a/frontend/app/src/components/HeaderComponent.tsx b/frontend/app/src/components/HeaderComponent.tsx
index 5119814..da3e585 100644
--- a/frontend/app/src/components/HeaderComponent.tsx
+++ b/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("/"),
     },
   ];
 
diff --git a/frontend/app/src/components/styles.css b/frontend/app/src/components/styles.css
index 38c0763..c1db9e2 100644
--- a/frontend/app/src/components/styles.css
+++ b/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;
diff --git a/frontend/app/src/pages/styles.css b/frontend/app/src/pages/styles.css
index a387373..32751e8 100644
--- a/frontend/app/src/pages/styles.css
+++ b/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;