feat: anime

package.json

@@ -75,6 +75,7 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "got": "^11.8.2",
     "material-design-icons": "^3.0.1",
     "node-stream-zip": "^1.13.6",

src/components/Dialog.tsx

@@ -6,7 +6,7 @@ export default function Dialog(props: {
 }): JSX.Element {
   return (
     <div
-      className={`p-6 w-full shadow-xl rounded-lg bg-card eph-dialog ${
+      className={`p-6 w-full shadow-xl rounded-lg bg-card animate__animated animate__zoomIn eph-dialog ${
         props.indentBottom ? "pb-4" : ""
       }`}
     >

src/renderer/index.tsx

@@ -1,5 +1,6 @@
 import "../styles/index.css";
 import "material-design-icons/iconfont/material-icons.css";
+import "animate.css/animate.css";
 import { render } from "react-dom";
 import App from "./App";
 

src/styles/main.css

@@ -2,6 +2,10 @@ body {
   background: var(--eph-background-color);
 }
 
+:root {
+  --animate-duration: 0.3s;
+}
+
 /* hide scrollbar */
 ::-webkit-scrollbar {
   width: 0 !important;