a bunch of refactoring

package.json

@@ -36,7 +36,8 @@
     "tailwindcss": "^3.2.4",
     "tinycolor2": "^1.4.2",
     "typescript": "^4.8.2",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zustand": "^4.5.0"
   },
   "scripts": {
     "start": "react-scripts start",

roadmap.md

@@ -3,14 +3,9 @@
     - move dot out of range resets color to red
     - changing the canvas size is weird 
     - hsl rgb number inputs dont all work
+    - the first time you use an action it wipes the screen
 
 # MVP
-- previous 2 color switch
-    - just as a quick reference, does no effect the pallete
-
- - colors used in pallette  
-        - when changing color in pallete, update all instances of that color in all layers
-
 - box selection tools
     - stretch with side grab 
     - rotate with corner grab
@@ -23,6 +18,20 @@
 
 - lighten/darken tool 
 
+- basic shapes
+    - square
+    - circle
+    - rect
+    - oval
+
+- previous 2 color switch
+    - just as a quick reference, does no effect the pallete
+ - colors used in pallette  
+        - when changing color in pallete, update all instances of that color in all layers
+
+- light/dark theme
+- minimize UI
+
 - import/export 
     - import project file
     - export selected frame 

src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import mixpanel from 'mixpanel-browser';
 import { Home } from './pages/Home/index';
 import { BrowserRouter, Routes, Route, } from 'react-router-dom';
-import mixpanel from 'mixpanel-browser';
 
 
 mixpanel.init('d0fd76de4b27e761d97f59a0ca878094', {debug: true, track_pageview: true, persistence: 'localStorage'});