From 3932ab46a4123d92a2a8dc54d5371862cd4de51a Mon Sep 17 00:00:00 2001
From: ResetPower <resetpower20@gmail.com>
Date: Fri, 9 Jul 2021 22:33:54 +0800
Subject: [PATCH] feat: anime

---
 package-lock.json         | 5 +++++
 package.json              | 1 +
 src/components/Dialog.tsx | 2 +-
 src/renderer/index.tsx    | 1 +
 src/styles/main.css       | 4 ++++
 5 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 196845c6..ccf8e3be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1343,6 +1343,11 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-align": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
diff --git a/package.json b/package.json
index 2199679e..04fd9251 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index 286f1059..34fc37de 100644
--- a/src/components/Dialog.tsx
+++ b/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" : ""
       }`}
     >
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
index dea6e4ce..97f29450 100644
--- a/src/renderer/index.tsx
+++ b/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";
 
diff --git a/src/styles/main.css b/src/styles/main.css
index 96257450..75930a72 100644
--- a/src/styles/main.css
+++ b/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;