Update icons, update codebase, add spring animation

package.json

@@ -6,13 +6,17 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "lodash-es": "^4.17.15",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.4.0"
+    "react-scripts": "3.4.0",
+    "react-spring": "^8.0.27",
+    "react-with-gesture": "^4.0.8"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "bundle": "react-scripts build && tauri build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.css

@@ -5,6 +5,13 @@ body {
   width: 100vw;
   position: relative;
   overflow: hidden;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none;
+  font-family: Tahoma, Geneva, serif;
 }
 .overlay {
   width: 100vw;
@@ -17,7 +24,7 @@ body {
     rgba(98, 35, 210, 0.85) 100%
   );
 }
-.author{
+.sticker {
   position: absolute;
   height: 100vh;
   width: 100vw;
@@ -29,16 +36,21 @@ body {
   color: white;
   z-index: 2;
 }
-.author > span {
-  background: rgba(120,120,120, 0.9);
+.sticker > div {
+  background: rgba(120, 120, 120, 0.9);
   padding: 0 20px;
   border-radius: 7px;
+  cursor: pointer;
+}
+.sticker > div:active {
+  cursor: -webkit-grabbing;
 }
 .container {
   display: grid;
   grid-template-columns: repeat(10, 200px);
   grid-template-rows: repeat(6, 230px);
   transform: translate(-3%, -4%);
+  will-change: transform;
 }
 .shape {
   width: 200px;

src/App.js

@@ -1,14 +1,40 @@
-import React from 'react';
+import React, { useState } from 'react';
+import clamp from 'lodash-es/clamp';
+import { useSpring, animated } from 'react-spring';
+import { useGesture } from 'react-with-gesture';
+
 import logo from './logo.svg';
 import './App.css';
 
 function App() {
+  const [clicked, setClick] = useState(false);
+  const [{ xy }, set] = useSpring(() => ({ xy: [0, 0] }));
+  const bind = useGesture(({ down, delta, velocity }) => {
+    velocity = clamp(velocity, 1, 8);
+    set({
+      xy: down ? delta : [0, 0],
+      config: { mass: velocity, tension: 500 * velocity, friction: 50 }
+    });
+  });
+
+  const _onClick = _ => setClick(!clicked);
+
   return (
     <div className="App">
       <header className="App-header">
         <div className="overlay" />
-        <div className="author">
-          <span>React-Tauri</span>
+        <div className="sticker">
+          <animated.div
+            {...bind()}
+            style={{
+              transform: xy.interpolate(
+                (x, y) => `translate3d(${x}px,${y}px,0)`
+              )
+            }}>
+            <span onClick={_onClick}>
+              {!clicked ? 'React-Tauri' : 'Hellö!'}
+            </span>
+          </animated.div>
         </div>
         <div className="container">
           <svg