diff --git a/apps/web/src/components/placeholders/favorites-placeholder.js b/apps/web/src/components/placeholders/favorites-placeholder.js
index f88a526aa..a929dc59d 100644
--- a/apps/web/src/components/placeholders/favorites-placeholder.js
+++ b/apps/web/src/components/placeholders/favorites-placeholder.js
@@ -3,6 +3,7 @@ import React from "react";
import * as Icon from "../icons";
import { Flex, Text } from "rebass";
+//TODO refactor this
function FavoritesPlaceholder() {
return (
<>
diff --git a/apps/web/src/components/placeholders/index.js b/apps/web/src/components/placeholders/index.js
new file mode 100644
index 000000000..5865d75ad
--- /dev/null
+++ b/apps/web/src/components/placeholders/index.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { Flex } from "rebass";
+
+function Placeholder(props) {
+ const { items, renderItem } = props;
+ return (
+ <>
+
+ {items.map(renderItem)}
+
+
+ );
+}
+export default Placeholder;
diff --git a/apps/web/src/components/placeholders/notebooks-placeholder.js b/apps/web/src/components/placeholders/notebooks-placeholder.js
index bdbd3ffb0..f54ecf905 100644
--- a/apps/web/src/components/placeholders/notebooks-placeholder.js
+++ b/apps/web/src/components/placeholders/notebooks-placeholder.js
@@ -1,156 +1,59 @@
-import { motion } from "framer-motion";
import React from "react";
import { Box, Flex, Text } from "rebass";
+import Placeholder from "./index";
+import { getRandom } from "../../utils/random";
+const titles = ["Yearbook 2020", "Semester 5", "Final Project", "Ready. Go"];
+const descriptions = [
+ "Thoughts & Stuff",
+ "Ugh. Can't handle it anymore.",
+ "Have to organize all this :(",
+ "What the heck!"
+];
function NotebooksPlaceholder() {
return (
- <>
-
- (
+
-
-
+
-
-
- My Notebook
-
- Keep it all organized
-
+ {titles[getRandom(0, 3)]}
+
+ {descriptions[getRandom(0, 3)]}
-
-
-
-
-
-
-
-
-
- My Notebook
-
- Keep it flowing
-
-
-
-
-
-
-
-
- Notebooks you add will appear here.
-
-
+
+
+
+ )}
+ >
);
}
-
export default NotebooksPlaceholder;
diff --git a/apps/web/src/components/placeholders/notesplacholder.js b/apps/web/src/components/placeholders/notesplacholder.js
index 44eea8ee0..10d97d5d1 100644
--- a/apps/web/src/components/placeholders/notesplacholder.js
+++ b/apps/web/src/components/placeholders/notesplacholder.js
@@ -1,131 +1,57 @@
-import { motion } from "framer-motion";
import React from "react";
-import { Box, Flex, Text } from "rebass";
-var parameters = {
- padding: "4px",
- margin: "3px",
- width: "170px",
- shadow: "primary",
- opacity: "0.5"
-};
+import { Text, Flex, Box } from "rebass";
+import Placeholder from "./index";
+import * as Icon from "../icons";
+import { getRandom } from "../../utils/random";
+
+const colors = ["hover", "primary", "dimPrimary", "shade"];
+const icons = [Icon.Vault, Icon.Pin, Icon.Star];
+const titles = ["Assignment #4", "Git Workflow", "Project Aurora"];
+const words = Array(25).fill(0);
function NotesPlaceholder() {
return (
- <>
-
- {[
- {
- right: "0px",
- bottom: "-50px",
- opacity: "0.7",
- x: 2,
- y: 2,
- pos: "absolute"
- },
- {
- right: null,
- bottom: null,
- opacity: "0.9",
- x: -2,
- y: -2,
- pos: "relative"
- }
- ].map(item => (
- {
+ const Icon = icons[index];
+ return (
+
-
-
-
+
+
+
+ {titles[index]}
+
+
-
-
- Title
-
- {[1, 2, 3, 4].map(item => (
+
+ {words.map(() => (
+ bg={colors[getRandom(0, 3)]}
+ />
))}
-
-
-
-
-
-
- ))}
-
-
- Notes you write appear here.
-
-
+
+ );
+ }}
+ />
);
}
export default NotesPlaceholder;
diff --git a/apps/web/src/components/placeholders/tags-placeholder.js b/apps/web/src/components/placeholders/tags-placeholder.js
index 08a1f7b53..19928c35b 100644
--- a/apps/web/src/components/placeholders/tags-placeholder.js
+++ b/apps/web/src/components/placeholders/tags-placeholder.js
@@ -1,102 +1,83 @@
-import { motion } from "framer-motion";
-import React from "react";
-import { Flex, Text } from "rebass";
+import React, { useState, useEffect } from "react";
+import Animated from "../animated";
+import { Text, Flex } from "rebass";
+import { getRandom } from "../../utils/random";
+import Placeholder from "./index";
+import { useAnimation } from "framer-motion";
-const animatedTags = [
- {
- delay: 3,
- marginTop: "-50px",
- size: 14,
- text: "presentations",
- left: "25px"
- },
- {
- delay: 12,
- marginTop: "20px",
- size: 16,
- text: "quotesonlife",
- left: "90px"
- },
- {
- delay: 18,
- marginTop: "-25px",
- size: 18,
- text: "workinprogress",
- left: "70px"
- },
- {
- delay: 24,
- marginTop: "0px",
- size: 14,
- text: "todolists",
- left: "35px"
- },
- {
- delay: 30,
- marginTop: "40px",
- size: 24,
- text: "myschoolwork",
- left: "50px"
- }
+const tags = [
+ "presentations",
+ "quotesonlife",
+ "workinprogress",
+ "goodlife",
+ "school",
+ "lessons",
+ "essays",
+ "disasters",
+ "todolists",
+ "myschoolwork"
];
function TagsPlaceholder() {
return (
- <>
-
- {animatedTags.map(item => (
-
-
-
- #
-
- {item.text}
-
-
- ))}
-
-
-
- Tags added to notes appear here.
-
-
+ (
+
+
+ #
+
+
+
+ )}
+ >
);
}
export default TagsPlaceholder;
+
+function TagSlider() {
+ const [tag, setTag] = useState(getRandomTag());
+ const controls = useAnimation();
+ useEffect(() => {
+ animate(controls, setTag);
+ }, [controls]);
+ return (
+
+ {tag}
+
+ );
+}
+
+async function animate(controls, setTag) {
+ await controls.start({ opacity: 1, y: 0 });
+ await controls.start({
+ opacity: 0,
+ y: 50,
+ transition: { delay: 1, duration: 0.4 }
+ });
+ await controls.start({
+ opacity: 0,
+ y: -50,
+ transition: { duration: 0 }
+ });
+ setTag(getRandomTag());
+ await animate(controls, setTag);
+}
+
+function getRandomTag() {
+ return tags[getRandom(0, tags.length - 1)];
+}
diff --git a/apps/web/src/components/properties/index.js b/apps/web/src/components/properties/index.js
index 5560a4fdc..06a5bcba1 100644
--- a/apps/web/src/components/properties/index.js
+++ b/apps/web/src/components/properties/index.js
@@ -21,7 +21,7 @@ function Properties() {
const setTag = useStore(store => store.setTag);
const toggleLocked = useStore(store => store.toggleLocked);
const hideProperties = useAppStore(store => store.hideProperties);
- const showProperties = useAppStore(store => store.showProperties);
+ //const showProperties = useAppStore(store => store.showProperties);
const arePropertiesVisible = useAppStore(store => store.arePropertiesVisible);
const isFocusModeEnabled = useAppStore(store => store.isFocusModeEnabled);
diff --git a/apps/web/src/utils/random.js b/apps/web/src/utils/random.js
new file mode 100644
index 000000000..417c31b10
--- /dev/null
+++ b/apps/web/src/utils/random.js
@@ -0,0 +1,8 @@
+function getRandom(min, max) {
+ return Math.round(Math.random() * (max - min) + min);
+}
+
+function getRandomArbitrary(min, max) {
+ return Math.random() * (max - min) + min;
+}
+export { getRandom, getRandomArbitrary };