diff --git a/package.json b/package.json
index 1597eb2..3b173bf 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
"ms": "^2.1.1",
"react": "^16.8.6",
"react-blockies": "^1.4.1",
- "react-dom": "^16.8.6"
+ "react-dom": "^16.8.6",
+ "react-pose": "^4.0.8"
},
"devDependencies": {
"@babel/core": "^7.4.4",
diff --git a/src/App.css b/src/App.css
index 4046707..b5708e3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -77,7 +77,13 @@ a h1 {
overflow-y: auto;
}
-.app > div {
+.app > div,
+.app > div > div {
+ width: 100%;
+ height: 100%;
+}
+
+.app > div > div {
display: flex;
align-items: center;
justify-content: center;
@@ -95,7 +101,8 @@ a h1 {
background: #fff;
border-radius: 5px;
border: .1rem solid #e2e2e2;
- animation: fadein .5s .5s ease-out;
+
+ /* animation: fadein .5s .5s ease-out; */
}
.dark .box {
diff --git a/src/App.jsx b/src/App.jsx
index d9514c3..8667be8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,8 @@
import React, { PureComponent } from 'react'
-import {
- Router,
- createMemorySource,
- createHistory,
- LocationProvider
-} from '@reach/router'
+import PropTypes from 'prop-types'
+import { Router, Location } from '@reach/router'
import { webFrame } from 'electron'
+import posed, { PoseGroup } from 'react-pose'
import AppProvider from './store/AppProvider'
import Titlebar from './components/Titlebar'
import Home from './screens/Home'
@@ -18,9 +15,41 @@ import './App.css'
webFrame.setVisualZoomLevelLimits(1, 1)
webFrame.setLayoutZoomLevelLimits(0, 0)
-// https://github.com/reach/router/issues/25
-const source = createMemorySource('/')
-const history = createHistory(source)
+const Animation = posed.div({
+ enter: {
+ y: 0,
+ opacity: 1,
+ delay: 100,
+ transition: {
+ type: 'spring',
+ stiffness: 500,
+ damping: 25,
+ restDelta: 0.5,
+ restSpeed: 10
+ }
+ },
+ exit: {
+ y: 50,
+ opacity: 0,
+ transition: { duration: 150 }
+ }
+})
+
+const PosedRouter = ({ children }) => (
+
+ {({ location }) => (
+
+
+ {children}
+
+
+ )}
+
+)
+
+PosedRouter.propTypes = {
+ children: PropTypes.any.isRequired
+}
export default class App extends PureComponent {
render() {
@@ -28,12 +57,10 @@ export default class App extends PureComponent {
)
diff --git a/src/screens/Home.jsx b/src/screens/Home.jsx
index ee84abb..5627ba9 100644
--- a/src/screens/Home.jsx
+++ b/src/screens/Home.jsx
@@ -18,7 +18,7 @@ export default class Home extends PureComponent {
return (
<>
-
+
diff --git a/src/screens/Preferences.css b/src/screens/Preferences.css
index b8143c2..1566575 100644
--- a/src/screens/Preferences.css
+++ b/src/screens/Preferences.css
@@ -1,7 +1,6 @@
.preferences {
text-align: left;
width: 100%;
- margin-top: 7vh;
position: relative;
}