UCL · acholyn · Dec 5, 2024 · Nov 21, 2024 · Nov 21, 2024 · Nov 28, 2024
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
 		<link
 			href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css"

diff --git a/public/Logo_green_white.svg b/public/Logo_green_white.svg
diff --git a/public/Poster_cs_1.svg b/public/Poster_cs_1.svg
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/logo_green_transparent.svg b/public/logo_green_transparent.svg
diff --git a/public/logo_white_transparent.svg b/public/logo_white_transparent.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -14,6 +14,9 @@ import ConfirmModal from "./utils/ConfirmationModal";
 import SuccessModal from "./SuccessModal";
 import BurgerMenu from "./BurgerMenu";
 import SearchResults from "./SearchResultsList";
+import LegalNotice from "./utils/LegalNoticeModal";
+import PosterModal from "./utils/PosterModal";
+import { KaptaSVGIconWhite } from "./utils/icons";
 
 export default function App() {
 	const [isTaskFormVisible, setTaskFormVisible] = useState(false);
@@ -37,12 +40,15 @@ export default function App() {
 	const [BMopen, setBMopen] = useState(false);
 
 	const [boundsVisible, setBoundsVisible] = useState(false);
-	const [polygonStore, setPolygonStore] = useState(null);
-	const [focusTask, setFocusTask] = useState(null);
-	const [chosenTask, setChosenTask] = useState(null);
+	const [polygonStore, setPolygonStore] = useState(null); // for showing polygons
+	const [focusTask, setFocusTask] = useState(null); // for showing data points
+	const [chosenTaskId, setChosenTaskId] = useState(null); // for showing task in list from popup
 
 	const [taskListName, setTaskListName] = useState("mine");
 
+	const [noticeVisible, setNoticeVisible] = useState(false);
+	const [posterVisible, setPosterVisible] = useState(false);
+
 	const user = useUserStore();
 
 	const showTaskForm = (task) => {
@@ -62,10 +68,10 @@ export default function App() {
 		setConfirmModalVisible(true);
 	};
 	const showLoginSuccessModal = (message) => {
-		setSuccessModalVisible(true);
-		setSuccessMsg(message);
-		setSuccessIsTask(false);
-		setEmail("");
+		// setSuccessModalVisible(true);
+		// setSuccessMsg(message);
+		// setSuccessIsTask(false);
+		// setEmail("");
 	};
 
 	const showFilledLoginForm = (email) => {
@@ -91,10 +97,12 @@ export default function App() {
 				polygons.push(task);
 			}
 		});
+		console.log("polygons", polygons);
 		return polygons;
 	};
 
 	const showSearchResults = (results) => {
+		setBoundsVisible(false);
 		if (results !== searchResults) {
 			setPolygonStore(null); // reset polygon store for each new search
 			setSearchResults(results);
@@ -109,156 +117,181 @@ export default function App() {
 	};
 
 	const showTaskInList = (id) => {
-		setChosenTask(id);
+		console.log("show task in list", id);
+		setChosenTaskId(id);
 		setTaskListVisible(true);
 	};
 
 	const scrollFlashTask = (taskRefs) => {
+		// if (!isTaskListVisible) setTaskListVisible(true);
+		console.log("scroll flash", taskRefs, chosenTaskId);
 		// Scroll to the chosen task
-		taskRefs.current[chosenTask].scrollIntoView({
+		taskRefs.current[chosenTaskId].scrollIntoView({
 			behavior: "smooth",
 			block: "center",
 		});
 		// Make it flash
-		const taskElement = taskRefs.current[chosenTask];
+		const taskElement = taskRefs.current[chosenTaskId];
 		taskElement.classList.add("flash");
 
 		// Remove the flash class after the animation duration
 		setTimeout(() => {
 			taskElement.classList.remove("flash");
-			setChosenTask(null);
-		}, 1600);
+			setChosenTaskId(null);
+		}, 2600);
 	};
 
 	return (
-		<main>
-			{errorMsg && <ErrorModal message={errorMsg} />}
-			{!isLoginFormVisible && !user.loggedIn && !signUpFormVisible && (
-				<div className="login-signup__wrapper">
-					<Button
-						variant="outlined"
-						onClick={() => {
-							setLoginFormVisible(true);
-						}}
-						startIcon={<LoginIcon />}
-						className="btn--login"
-					>
-						Login
-					</Button>
-					<Button
-						color="secondary"
-						variant="outlined"
-						onClick={() => {
-							setSignUpFormVisible(true);
-						}}
-						className="btn--signup"
-					>
-						Sign Up
-					</Button>
+		<>
+			<main>
+				<div className="kapta-logo--main">
+					<KaptaSVGIconWhite />
+					Kapta
 				</div>
-			)}
-			<LoginForm
-				isVisible={isLoginFormVisible}
-				setIsVisible={setLoginFormVisible}
-				setSignUpVisible={setSignUpFormVisible}
-				setErrorMsg={setErrorMsg}
-				showConfirmModal={showConfirmModal}
-				showLoginSuccessModal={showLoginSuccessModal}
-				prefilledEmail={email}
-			/>
-			<SignUpForm
-				isVisible={signUpFormVisible}
-				setIsVisible={setSignUpFormVisible}
-				showConfirmModal={showConfirmModal}
-				showFilledLoginForm={showFilledLoginForm}
-			/>
-			{confirmModalVisible && (
-				<ConfirmModal
-					isVisible={confirmModalVisible}
-					setIsVisible={setConfirmModalVisible}
-					recipient={cmRecipient}
+				{errorMsg && <ErrorModal message={errorMsg} />}
+				{!isLoginFormVisible && !user.loggedIn && !signUpFormVisible && (
+					<div className="login-signup__wrapper">
+						<Button
+							variant="outlined"
+							onClick={() => {
+								setLoginFormVisible(true);
+							}}
+							startIcon={<LoginIcon />}
+							className="btn--login"
+						>
+							Login
+						</Button>
+						<Button
+							color="secondary"
+							variant="outlined"
+							onClick={() => {
+								setSignUpFormVisible(true);
+							}}
+							className="btn--signup"
+						>
+							Sign Up
+						</Button>
+					</div>
+				)}
+				<LoginForm
+					isVisible={isLoginFormVisible}
+					setIsVisible={setLoginFormVisible}
+					setSignUpVisible={setSignUpFormVisible}
+					setErrorMsg={setErrorMsg}
+					showConfirmModal={showConfirmModal}
 					showLoginSuccessModal={showLoginSuccessModal}
+					prefilledEmail={email}
+				/>
+				<SignUpForm
+					isVisible={signUpFormVisible}
+					setIsVisible={setSignUpFormVisible}
+					showConfirmModal={showConfirmModal}
+					showFilledLoginForm={showFilledLoginForm}
+				/>
+				{confirmModalVisible && (
+					<ConfirmModal
+						isVisible={confirmModalVisible}
+						setIsVisible={setConfirmModalVisible}
+						recipient={cmRecipient}
+						showLoginSuccessModal={showLoginSuccessModal}
+					/>
+				)}
+				{successModalVisible && !successIsTask && (
+					<SuccessModal
+						taskTitle={successMsg}
+						setSuccessModalVisible={setSuccessModalVisible}
+						isTask={successIsTask}
+					/>
+				)}
+				{successModalVisible && successIsTask && (
+					<SuccessModal
+						taskTitle={successMsg.title}
+						taskDescription={successMsg.description}
+						taskID={successMsg.taskID}
+						campaignCode={successMsg.campaignCode}
+						setSuccessModalVisible={setSuccessModalVisible}
+						isTask={true}
+					/>
+				)}
+				<LegalNotice
+					isVisible={noticeVisible}
+					setIsVisible={setNoticeVisible}
 				/>
-			)}
-			{successModalVisible && !successIsTask && (
-				<SuccessModal
-					taskTitle={successMsg}
-					setSuccessModalVisible={setSuccessModalVisible}
-					isTask={successIsTask}
+				<PosterModal
+					isVisible={posterVisible}
+					setIsVisible={setPosterVisible}
 				/>
-			)}
-			{successModalVisible && successIsTask && (
-				<SuccessModal
-					taskTitle={successMsg.title}
-					taskDescription={successMsg.description}
-					taskID={successMsg.taskID}
-					campaignCode={successMsg.campaignCode}
-					setSuccessModalVisible={setSuccessModalVisible}
-					isTask={true}
+				<BurgerMenu
+					isOpen={BMopen}
+					setIsOpen={setBMopen}
+					setNoticeVisible={setNoticeVisible}
+					setPosterVisible={setPosterVisible}
 				/>
-			)}
-			{user.loggedIn && (
-				<>
-					<BurgerMenu isOpen={BMopen} setIsOpen={setBMopen} />
-					<div className="search-response-wrapper">
-						<div className="response-container">
-							{/* this is where the bot responses will go */}
-						</div>
 
-						<SearchForm
-							showSearchResults={showSearchResults}
-							taskListOpen={isTaskListVisible || searchResultsVisible}
-						/>
-					</div>
-					<div className="task-map-wrapper">
-						<Map
-							boundsVisible={boundsVisible}
-							polygonStore={polygonStore}
-							taskListOpen={isTaskListVisible || searchResultsVisible}
-							focusTask={focusTask}
-							showTaskInList={showTaskInList}
-						/>
-						<TaskList
-							isVisible={isTaskListVisible}
-							setIsVisible={setTaskListVisible}
-							user={user}
-							showTaskForm={showTaskForm}
-							showNewTaskForm={showNewTaskForm}
-							showBounds={showBounds}
-							setFocusTask={setFocusTask}
-							chosenTask={chosenTask}
-							scrollFlashTask={scrollFlashTask}
-							taskListName={taskListName}
-							setTaskListName={setTaskListName}
-						/>
+				{!user.loggedIn && <div className="background shield"></div>}
 
-						<SearchResults
-							isVisible={searchResultsVisible}
-							setIsVisible={setSearchResultsVisible}
-							results={searchResults}
-							setFocusTask={setFocusTask}
-							chosenTask={chosenTask}
-							scrollFlashTask={scrollFlashTask}
-						/>
+				<div className="search-response-wrapper">
+					<div className="response-container">
+						{/* this is where the bot responses will go */}
 					</div>
-					<TaskForm
-						isVisible={isTaskFormVisible}
-						setIsVisible={setTaskFormVisible}
+
+					<SearchForm
+						showSearchResults={showSearchResults}
+						taskListOpen={isTaskListVisible || searchResultsVisible}
+						isBackground={!user.loggedIn}
+					/>
+				</div>
+				<div className="task-map-wrapper">
+					<Map
+						boundsVisible={boundsVisible}
+						polygonStore={polygonStore}
+						taskListOpen={isTaskListVisible || searchResultsVisible}
+						focusTask={focusTask}
+						showTaskInList={showTaskInList}
+						isBackground={!user.loggedIn}
+					/>
+
+					<TaskList
+						isVisible={user.loggedIn && isTaskListVisible}
+						setIsVisible={setTaskListVisible}
 						user={user}
-						taskValues={taskValues}
-						showTaskSuccessModal={showTaskSuccessModal}
+						showTaskForm={showTaskForm}
+						showNewTaskForm={showNewTaskForm}
+						showBounds={showBounds}
+						setFocusTask={setFocusTask}
+						chosenTaskId={chosenTaskId}
+						scrollFlashTask={scrollFlashTask}
+						taskListName={taskListName}
+						setTaskListName={setTaskListName}
+					/>
+
+					<SearchResults
+						isVisible={user.loggedIn && searchResultsVisible}
+						setIsVisible={setSearchResultsVisible}
+						results={searchResults}
+						setFocusTask={setFocusTask}
+						chosenTaskId={chosenTaskId}
+						scrollFlashTask={scrollFlashTask}
 					/>
 					<Fab
 						size="medium"
 						variant="extended"
-						color="tomato"
+						color="primary"
 						onClick={() => setTaskListVisible(true)}
 						className="btn--view-tasks"
+						disabled={!user.loggedIn}
 					>
-						TASKS
+						Task WhatsApp Mappers
 					</Fab>
-				</>
-			)}
-		</main>
+				</div>
+				<TaskForm
+					isVisible={isTaskFormVisible}
+					setIsVisible={setTaskFormVisible}
+					user={user}
+					taskValues={taskValues}
+					showTaskSuccessModal={showTaskSuccessModal}
+				/>
+			</main>
+		</>
 	);
 }