feat: modal

packages/grafnode-run/src/globalStyles.js

@@ -0,0 +1,49 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+     opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes fade-and-slide-in-from-top {
+    from {
+      opacity: 0;
+      -webkit-transform: translateY(-30px);
+              transform: translateY(-30px);
+    }
+    to {
+      opacity: 1;
+      -webkit-transform: none;
+              transform: none;
+    }
+  }
+
+  @keyframes fade-and-slide-out-from-top {
+    from {
+      opacity: 1;
+      -webkit-transform: none;
+              transform: none;
+    }
+    to {
+      opacity: 2;
+      -webkit-transform: translateY(-30px);
+              transform: translateY(-30px);
+    }
+  }
+`;
+ 
+export default GlobalStyle;

packages/grafnode-run/src/pages/index.js

@@ -1,5 +1,6 @@
 import Head from 'next/head';
 import Main from 'pageComponents/Main';
+import GlobalStyle from '../globalStyles';
 
 export default function Home() {
   return (
@@ -9,6 +10,8 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <GlobalStyle />
+
       <main>
         <Main />
       </main>