{taskList[0]?.childName}
-
- {taskList.map((item, index) => (
-
);
});
diff --git a/src/components/TaskListItem/index.module.css b/src/components/TaskListItem/index.module.css
index 833737e..2e672f8 100644
--- a/src/components/TaskListItem/index.module.css
+++ b/src/components/TaskListItem/index.module.css
@@ -1,15 +1,28 @@
@import url("https://fonts.googleapis.com/css?family=Poppins");
.tasks_div {
+ border-bottom: 1px solid black;
+ padding: 2vw;
+ display: flex;
+ justify-content: flex-end;
+ }
+
+.tasks_div.mobile {
border-bottom: 3px solid black;
- margin-left: 3vw;
- margin-right: 3vw;
padding: 4vw;
display: flex;
justify-content: flex-end;
}
.taskName {
+ font-family: "Poppins";
+ font-style: normal;
+ font-size: 1.4vw;
+ font-weight: 500;
+ margin: 0;
+}
+
+.taskName.mobile {
font-family: "Poppins";
font-style: normal;
font-size: 5vw;
@@ -17,7 +30,7 @@
margin: 0;
}
-.taskDate {
+.taskDate.mobile {
font-family: "Poppins";
font-weight:400;
font-size: 4vw;
@@ -25,11 +38,10 @@
margin: 0;
}
-.childName {
+.taskDate {
font-family: "Poppins";
font-weight:400;
- font-size: 3vw;
+ font-size: 1.2vw;
color: #8B5674;
margin: 0;
- margin-right: auto;
}
\ No newline at end of file
diff --git a/src/components/UpcomingComponent/index.js b/src/components/UpcomingComponent/index.js
index 0280ae2..6f8dc08 100644
--- a/src/components/UpcomingComponent/index.js
+++ b/src/components/UpcomingComponent/index.js
@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
import { ROUTES } from "../../lib/constants";
import { CheckBox } from "../CheckBox";
import { checkEvent, uncheckEvent } from "../../lib/services";
+import { COLORS_ARR } from "../../lib/constants";
import React from "react";
const cx = classNames.bind(styles);
@@ -18,6 +19,7 @@ export const UpcomingComponent = (props) => {
completed,
priority,
childId,
+ childName,
isMobile,
} = props;
const [checked, setChecked] = useState(completed);
@@ -25,8 +27,7 @@ export const UpcomingComponent = (props) => {
useEffect(() => {
// randomize color for the display block
- const colors = ["#0198BA26", "#E3D15033", "#8B567478"];
- setColor(colors[Math.floor(Math.random() * colors.length)]);
+ setColor(COLORS_ARR[Math.floor(Math.random() * COLORS_ARR.length)]);
}, []);
const handleChecked = () => {
@@ -41,6 +42,7 @@ export const UpcomingComponent = (props) => {
className={cx(styles.upcomingWrapper)}
style={{
backgroundColor: color,
+ padding: "4vh",
}}
>
+
);
diff --git a/src/components/AllTasksSection/index.module.css b/src/components/AllTasksSection/index.module.css
index e8e3ad7..cd86ac8 100644
--- a/src/components/AllTasksSection/index.module.css
+++ b/src/components/AllTasksSection/index.module.css
@@ -1,17 +1,40 @@
@import url("https://fonts.googleapis.com/css?family=Poppins");
-.tasksSection {
- border-bottom: 3px solid black;
- margin-left: 3vw;
- margin-right: 3vw;
- padding: 4vw;
+.entireSection {
+ border-radius: 50px;
+ margin-top: 2vw;
+ margin-bottom: 1vw;
+ padding-top: 1vw;
+ padding-bottom: 1vw;
+ }
+
+ .entireSection.mobile {
+ border-radius: 50px;
+ margin-top: 3vw;
+ margin-bottom: 3vw;
+ padding-top: 3vw;
+ padding-bottom: 3vw;
}
.childName {
font-family: "Poppins";
font-weight:400;
- font-size: 3vw;
- color: #8B5674;
+ font-size: 1.5vw;
+ margin: 0;
+ margin-left: 6vh;
+}
+
+.childName.mobile {
+ font-family: "Poppins";
+ font-weight:400;
+ font-size: 5vw;
margin: 0;
- margin-right: auto;
+ margin-left: 6vh;
+}
+
+
+.tasksSection {
+ margin-top: 3vw;
+ margin-bottom: 3vw;
+ background-color: rgba(255, 255, 255, 0.5);
}
\ No newline at end of file
diff --git a/src/components/AuthButton/index.module.css b/src/components/AuthButton/index.module.css
index 93030ab..58aaa5b 100644
--- a/src/components/AuthButton/index.module.css
+++ b/src/components/AuthButton/index.module.css
@@ -2,22 +2,23 @@
@value font from "../../index.module.css";
.button {
- width: 100%;
- height: 55px;
+ width: 50%;
+ height: 5vh;
background-color: #0198BA;
color: white;
font-family: "Poppins";
- font-size: 20px;
+ font-size: 2vw;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
cursor: pointer;
+ margin: auto;
}
.button.mobile {
- width: 100%;
- min-height: 7vh;
+ width: 80%;
+ min-height: 5vh;
background-color: #0198BA;
color: white;
font-family: "Poppins";
@@ -25,6 +26,7 @@
display: flex;
justify-content: center;
align-items: center;
- border-radius: 20px;
+ border-radius: 2vh;
cursor: pointer;
+ margin: 4vh;
}
\ No newline at end of file
diff --git a/src/components/AuthInputBlock/index.js b/src/components/AuthInputBlock/index.js
index bd22279..47e1806 100644
--- a/src/components/AuthInputBlock/index.js
+++ b/src/components/AuthInputBlock/index.js
@@ -15,6 +15,7 @@ export const AuthInputBlock = (props) => {
isMobile
} = props;
+ console.log(isMobile)
return + {taskList[0]?.childName} +
+
+ {isExpanded &&
+ taskList.map((item, index) => (
+
{
+export const BackArrow = ({ showBackArrow = true, isMobile }) => {
const navigate = useNavigate();
const goBack = () => {
navigate(-1);
@@ -16,14 +16,13 @@ export const BackArrow = ({ showBackArrow = true }) => {
<>
{showBackArrow && (
- //
);
};
diff --git a/src/components/CommunityPost/index.module.css b/src/components/CommunityPost/index.module.css
index 4e18e82..b265e64 100644
--- a/src/components/CommunityPost/index.module.css
+++ b/src/components/CommunityPost/index.module.css
@@ -39,7 +39,7 @@
}
.post_info {
- font-size: 1.5vw;
+ font-size: 3.5vw;
}
.post_caption {
diff --git a/src/components/CreatePost/index.js b/src/components/CreatePost/index.js
index f48d999..f49848b 100644
--- a/src/components/CreatePost/index.js
+++ b/src/components/CreatePost/index.js
@@ -1,12 +1,14 @@
import React, { useState } from "react";
import classNames from "classnames/bind";
import styles from "./index.module.css";
+import { AuthInputBlock } from "../AuthInputBlock";
const cx = classNames.bind(styles);
-export function CreatePost() {
+export function CreatePost(props) {
const [postContent, setPostContent] = useState("");
const [isLoading, setIsLoading] = useState(false);
+ const [postTitle, setPostTitle] = useState("");
const [error, setError] = useState("");
const handleSubmit = (e) => {
@@ -14,12 +16,16 @@ export function CreatePost() {
setIsLoading(true);
setError("");
- fetch("/createPost", {
+ fetch(process.env.REACT_APP_HOST_URL + "/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
- body: JSON.stringify({ postContent }),
+ body: JSON.stringify({
+ name: localStorage.getItem("firstName"),
+ title: postTitle,
+ body: postContent,
+ }),
})
.then((res) => {
if (!res.ok) {
@@ -35,6 +41,8 @@ export function CreatePost() {
setIsLoading(false);
setError(err.message);
});
+ props.setCreatePost(false);
+ props.rotate(false);
};
return (
@@ -42,6 +50,14 @@ export function CreatePost() {
);
-}
+}
\ No newline at end of file
diff --git a/src/components/CreatePost/index.module.css b/src/components/CreatePost/index.module.css
index b66a01c..f0d6f48 100644
--- a/src/components/CreatePost/index.module.css
+++ b/src/components/CreatePost/index.module.css
@@ -5,7 +5,6 @@
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.2);
-
display: flex;
justify-content: center;
align-items: center;
@@ -15,7 +14,7 @@
display: block;
background-color: white;
width: 80%;
- height: 50%;
+ height: auto;
font-family: "Poppins";
padding: 30px;
@@ -73,3 +72,7 @@
justify-content: center;
border-width: 0;
}
+
+.content_container {
+ font-size: 10vw;
+}
\ No newline at end of file
diff --git a/src/components/OnYourRadar/index.js b/src/components/OnYourRadar/index.js
new file mode 100644
index 0000000..90adad5
--- /dev/null
+++ b/src/components/OnYourRadar/index.js
@@ -0,0 +1,97 @@
+import styles from "./index.module.css";
+import classNames from "classnames/bind";
+import React from "react";
+import { useState, useEffect } from "react";
+import { getChildrenTasksArray } from "../../lib/services";
+import { Loader } from "../../pages/LoadScreen";
+
+const cx = classNames.bind(styles);
+
+export const OnYourRadar = React.forwardRef((props, ref) => {
+ const { childrenId, isMobile } = props;
+ const [hpList, sethpList] = useState([]);
+ const [elseList, setElseList] = useState([]);
+
+ useEffect(async () => {
+ const { taskArray } = await getChildrenTasksArray(childrenId, true);
+ sethpList(taskArray);
+ }, []);
+
+ useEffect(async () => {
+ const { taskArray } = await getChildrenTasksArray(childrenId, false);
+ setElseList(taskArray);
+ }, []);
+
+ const hpElements = hpList.flat().map((thing, index) => (
+
+ {childrenStats.map((childStats) => (
+
+ );
+};
diff --git a/src/components/Slider/index.module.css b/src/components/Slider/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/TaskListItem/index.js b/src/components/TaskListItem/index.js
index cc9a58c..b89cdb8 100644
--- a/src/components/TaskListItem/index.js
+++ b/src/components/TaskListItem/index.js
@@ -10,7 +10,7 @@ import { checkEvent, uncheckEvent } from "../../lib/services";
const cx = classNames.bind(styles);
export const TaskListItem = React.forwardRef((props, ref) => {
- const { taskName, dueAt, taskId, childName, childId, completed } = props;
+ const { taskName, dueAt, taskId, childId, completed, isMobile } = props;
const navigate = useNavigate();
const [checked, setChecked] = useState(completed);
@@ -29,11 +29,22 @@ export const TaskListItem = React.forwardRef((props, ref) => {
})
}
>
-
-
-
- //
)}
);
diff --git a/src/components/BackArrow/index.module.css b/src/components/BackArrow/index.module.css
index b9bc152..216eec4 100644
--- a/src/components/BackArrow/index.module.css
+++ b/src/components/BackArrow/index.module.css
@@ -1,7 +1,16 @@
.backArrow {
display: flex;
justify-content: center;
- width: 5%;
+ width: 2%;
+ height: auto;
+ margin-top: 4vh;
+ margin-left: 5%;
+ }
+
+ .backArrow.mobile {
+ display: flex;
+ justify-content: center;
+ width: 4%;
height: auto;
margin-top: 4vh;
margin-left: 5%;
diff --git a/src/components/Caption/index.js b/src/components/Caption/index.js
index d7cd1d2..7bedd4f 100644
--- a/src/components/Caption/index.js
+++ b/src/components/Caption/index.js
@@ -1,45 +1,46 @@
-import { useWindowSize } from '../../lib/hooks';
-import styles from './index.module.css';
-import classNames from 'classnames/bind';
-import React from 'react';
-import { WINDOW_TYPE } from '../../lib/constants';
-import PropTypes from 'prop-types';
+import { useWindowSize } from "../../lib/hooks";
+import styles from "./index.module.css";
+import classNames from "classnames/bind";
+import React from "react";
+import { WINDOW_TYPE } from "../../lib/constants";
+import PropTypes from "prop-types";
const cx = classNames.bind(styles);
// The caption of each home page
export const Caption = (props) => {
- const {
- mainTitle,
- subTitle,
- className,
- style,
- } = props;
+ const { mainTitle, subTitle, className, style } = props;
- const { type } = useWindowSize();
- const isMobile = type === WINDOW_TYPE.MOBILE;
-
- return
-
+ );
};
Caption.propTypes = {
- mainTitle: PropTypes.string.isRequired,
- subTitle: PropTypes.string.isRequired,
- className: PropTypes.string,
- style: PropTypes.objectOf(PropTypes.string),
-}
\ No newline at end of file
+ mainTitle: PropTypes.string.isRequired,
+ subTitle: PropTypes.string.isRequired,
+ className: PropTypes.string,
+ style: PropTypes.objectOf(PropTypes.string),
+};
diff --git a/src/components/Caption/index.module.css b/src/components/Caption/index.module.css
index 75dfc26..403d0c2 100644
--- a/src/components/Caption/index.module.css
+++ b/src/components/Caption/index.module.css
@@ -9,36 +9,36 @@
border: 0;
}
-.mainTitle.mobile {
+.mainTitle {
height: fit-content;
font-family: "Poppins";
font-style: normal;
- font-size: 8vw;
+ font-size: 3vw;
font-weight: 900;
}
-.mainTitle {
+.mainTitle.mobile {
height: fit-content;
font-family: "Poppins";
font-style: normal;
- font-size: 4vw;
+ font-size: 8vw;
font-weight: 900;
}
-.subTitle.mobile {
+.subTitle {
height: fit-content;
font-family: "Poppins";
font-style: normal;
- font-size: 4vw;
+ font-size: 1vw;
font-weight: 500;
color: #818181;
}
-.subTitle {
+.subTitle.mobile {
height: fit-content;
font-family: "Poppins";
font-style: normal;
- font-size: 2vw;
+ font-size: 4vw;
font-weight: 500;
color: #818181;
}
\ No newline at end of file
diff --git a/src/components/CheckBox/index.js b/src/components/CheckBox/index.js
index 7351eaa..dd81649 100644
--- a/src/components/CheckBox/index.js
+++ b/src/components/CheckBox/index.js
@@ -7,14 +7,13 @@ const cx = classNames.bind(styles);
// The caption of each home page
export const CheckBox = (props) => {
- const { value, onChange } = props;
-
- const { type } = useWindowSize();
- const isMobile = type === WINDOW_TYPE.MOBILE;
+ const { value, onChange, isMobile } = props;
return (
{
- {mainTitle}
-
-
- {subTitle}
-
+
+ {mainTitle}
+
+
+ {subTitle}
+
-
- {props.user} + {props.name}
-{props.location}
+ {props.heading}
-
- {props.content}
+{props.body}
+ {/*
-
+
*/}
- {props.user}
+ {props.name}
- {props.caption}
-
-
-
- View all {props.comments.length} comments -
- {props.comments[0].user} + {props.comments} - {props.comments[0].comment} + {props.comments}
Create a Post
+ {index + 1 + ". " + thing.title} +
+ )); + const elseElements = elseList.flat().map((thing, index) => ( ++ {index + 1 + ". " + thing.title} +
+ )); + + return ( +
+
+ );
+});
diff --git a/src/components/OnYourRadar/index.module.css b/src/components/OnYourRadar/index.module.css
new file mode 100644
index 0000000..98cf67b
--- /dev/null
+++ b/src/components/OnYourRadar/index.module.css
@@ -0,0 +1,85 @@
+.todo_div {
+ border: 3px #0198ba;
+ border-style: solid;
+ border-radius: 50px;
+ margin-top: 5vw;
+ margin-left: 2vw;
+ margin-right: 2vw;
+ padding-left: 3vw;
+ padding-bottom: 10vw;
+}
+
+.todo_div.mobile {
+ border: 6px #0198ba;
+ border-style: solid;
+ border-radius: 50px;
+ margin-top: 10vw;
+ margin-left: 2vw;
+ margin-right: 2vw;
+ padding-left: 3vw;
+ padding-bottom: 10vw;
+}
+
+.priorityParent{
+ display: flex;
+ justify-content: space-between;
+}
+.priorityBlock{
+ flex: 1;
+ display: inline-block;
+}
+
+.priorityParent.mobile{
+ display: block;
+}
+
+.priorityBlock.mobile{
+ display: block;
+}
+
+.radar.mobile {
+ font-family: "Poppins";
+ font-weight: 900;
+ color: black;
+ font-size: 3vw;
+ margin-top: 3vw;
+}
+
+.radar {
+ font-family: "Poppins";
+ font-weight: 900;
+ color: black;
+ font-size: 2vw;
+}
+
+.priority.mobile {
+ font-family: "Poppins";
+ font-weight: bolder;
+ color: #8b5674;
+ font-size: 3vw;
+}
+
+.priority {
+ font-family: "Poppins";
+ font-weight: bolder;
+ color: #8b5674;
+ font-size: 2vw;
+}
+
+.priority.else {
+ color: #e3d150;
+}
+
+.list {
+ font-family: 'Poppins';
+ color: black;
+ font-weight: 600;
+ font-size: 1.7vw;
+}
+
+.list.mobile {
+ font-family: 'Poppins';
+ color: black;
+ font-weight: 600;
+ font-size: 6vw;
+}
\ No newline at end of file
diff --git a/src/components/PointsDisplay/index.js b/src/components/PointsDisplay/index.js
new file mode 100644
index 0000000..3fdd6c3
--- /dev/null
+++ b/src/components/PointsDisplay/index.js
@@ -0,0 +1,70 @@
+import styles from "./index.module.css";
+import classNames from "classnames/bind";
+import React from "react";
+import {
+ CircularProgressbarWithChildren,
+ buildStyles,
+} from "react-circular-progressbar";
+
+const cx = classNames.bind(styles);
+
+export const PointsDisplay = React.forwardRef((props, ref) => {
+ const { childName, points, goal, isMobile } = props;
+
+ return (
+ + On Your Radar +
+
+
+
+
+ + High Priority +
++ {hpElements} +
+
+
+ + All Tasks +
++ {elseElements} +
+
+
+ );
+});
diff --git a/src/components/PointsDisplay/index.module.css b/src/components/PointsDisplay/index.module.css
new file mode 100644
index 0000000..ae6dfd2
--- /dev/null
+++ b/src/components/PointsDisplay/index.module.css
@@ -0,0 +1,82 @@
+.pointsBlock {
+ margin-top: 4vw
+}
+
+.text_div {
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+ position: relative;
+}
+
+.name {
+ font-family: 'Poppins';
+ font-weight: 800;
+ font-size: 2vw;
+ margin: auto;
+ color: #000000;
+}
+
+.name.mobile {
+ font-family: 'Poppins';
+ font-weight: 800;
+ font-size: 5vw;
+ margin: 1vh;
+ color: #000000;
+}
+
+
+.points.mobile {
+ font-family: 'Poppins';
+ font-weight: 800;
+ font-size: 4.2vw;
+ margin: auto;
+ display: inline-block;
+ color: #000000;
+}
+
+.points {
+ font-family: 'Poppins';
+ font-weight: 800;
+ font-size: 1.8vw;
+ margin: auto;
+ display: inline-block;
+ color: #000000;
+}
+
+.points.text {
+ font-weight: 600;
+ color: #818181;
+}
+
+.progress_circle {
+ width: 20vw;
+ height: 20vw;
+ margin-top: 4vw;
+ margin-bottom: 2vw;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.progress_circle.mobile {
+ width: 40vw;
+ height: 40vw;
+ margin-top: 5vw;
+ margin-bottom: 5vw;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.progress_circle_text {
+ font-family: 'Poppins';
+ font-weight: 900;
+ color: black;
+ font-size: 2vw;
+}
+
+.progress_circle_text.mobile {
+ font-family: 'Poppins';
+ font-weight: 900;
+ color: black;
+ font-size: 6vw;
+}
\ No newline at end of file
diff --git a/src/components/ProfilePicture/index.js b/src/components/ProfilePicture/index.js
index edee73e..63f1ef8 100644
--- a/src/components/ProfilePicture/index.js
+++ b/src/components/ProfilePicture/index.js
@@ -1,13 +1,14 @@
import React from "react";
import styles from "./index.module.css";
import classNames from "classnames";
+import PFP from "../../images/PFP.png";
const cx = classNames.bind(styles);
-function ProfilePicture(props) {
+function ProfilePicture() {
return (
+
+ + {childName} +
++ {goal - points} +
++ points away from weekly goal +
+
+
+
+
+
+ {points}
+
+
+ Points
+
+
- 
+ 
);
}
diff --git a/src/components/Slider/index.js b/src/components/Slider/index.js
new file mode 100644
index 0000000..48bf209
--- /dev/null
+++ b/src/components/Slider/index.js
@@ -0,0 +1,29 @@
+import React from "react";
+import styles from "./index.module.css";
+import classNames from "classnames/bind";
+import { PointsDisplay } from "../PointsDisplay";
+import ReactSlidy from "react-slidy";
+import "react-slidy/lib/styles.css";
+import { getRandomColor } from "../../lib/utils";
+
+const cx = classNames.bind(styles);
+
+// build a page slider component
+export const Slider = (props) => {
+ const { childrenStats, isMobile } = props;
+
+ return (
+ {taskName}
-{dueAt}
-{childName}
++ {taskName} +
++ {dueAt} +
{
className={cx(styles.title, {
[styles.mobile]: isMobile,
})}
+ onClick={() =>
+ navigate(ROUTES.TASK_DETAILS, {
+ state: { taskId, completed, childId },
+ })
+ }
>
- {title}
+ {title + " - " + childName}
- {/* { }) } > - {time} + {time + ", priority level: " + priority}
{ > {content}
-- navigate(ROUTES.TASK_DETAILS, { state: { taskId, completed } }) - } - > - {priority} -