home screen BG fix + lock scrren notification

RylandAdams · Sep 20, 2023 · 6d6d221 · 6d6d221
1 parent 11b70f5
commit 6d6d221
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 50 deletions.
diff --git a/src/components/LockScreen/lockScreen.css b/src/components/LockScreen/lockScreen.css
@@ -28,9 +28,9 @@
 	right: 0%;
 
 	height: 100%;
-	max-height: 447px;
+	max-height: 455px;
 
-	margin-top: -2.5%;
+	margin-top: -4%;
 
 	/* opacity: 8%; */
 }
@@ -59,9 +59,8 @@
 
 .notificationAlert {
 	position: absolute;
-	background-color: rgb(120, 120, 120);
+	background-color: rgba(59, 59, 59, 0.7);
 	z-index: 12 !important;
-	opacity: 70% !important;
 
 	width: 83%;
 	height: 12.5%;
@@ -74,11 +73,10 @@
 
 .notificationTextTop {
 	position: absolute;
-	color: rgb(23, 23, 23);
+	color: rgb(182, 182, 182);
 	font-size: 1.2rem;
-	background-color: rgba(255, 0, 0, 0.5); /* 50% opacity red background */
-	left: 29%;
-	top: 40%;
+	left: 35%;
+	top: 34%;
 
 	text-shadow: none !important;
 }
@@ -114,10 +112,10 @@
 	position: absolute;
 	z-index: 0.5;
 	width: 100%;
-	height: 23%;
-	top: 3%;
+	height: 22%;
+	top: 4.2%;
 	background: rgb(0, 0, 0);
-	background: linear-gradient(0deg, rgb(32, 32, 32) 50%, rgb(57, 57, 57) 50%);
+	background: linear-gradient(0deg, rgb(32, 32, 32) 55%, rgb(57, 57, 57) 50%);
 	border-bottom: 0.1px solid rgb(0, 0, 0);
 
 	opacity: 65%;

diff --git a/src/components/LockScreen/lockScreen.jsx b/src/components/LockScreen/lockScreen.jsx
@@ -1,41 +1,37 @@
 import React, { useState, useEffect } from 'react';
 import './lockScreen.css';
-
 import SlideToUnlock from '../slideToUnlock/slideToUnlock';
 import lockScreenBackground from '../../assets/imgs/lockScreenBackground.jpg';
 import linkTreeImg from '../../assets/imgs/linkTree.png';
-
-import { motion, AnimatePresence } from 'framer-motion';
-
-let didInit = false;
+import { motion } from 'framer-motion';
 
 const LockScreen = () => {
 	const [date, setDate] = useState(new Date());
-	const [notification, setNotification] = useState(false);
-
-	// Initialize notification after 2 seconds
-	if (!didInit) {
-		setTimeout(() => {
-			setNotification(true);
-			shownotification();
-		}, 200);
-	}
-
-	// Show notification and hide after 3.45 seconds
-	const shownotification = () => {
-		didInit = true;
-		setTimeout(() => {
-			setNotification(false);
-		}, 34500);
-	};
+	const [notificationVisible, setNotificationVisible] = useState(false);
 
+	// Function to refresh the clock
 	function refreshClock() {
 		setDate(new Date());
 	}
 
 	useEffect(() => {
+		// Show notification after 2 seconds
+		const notificationTimeout = setTimeout(() => {
+			setNotificationVisible(true);
+		}, 200);
+
+		// Clean up the timeout when the component unmounts
+		return () => {
+			clearTimeout(notificationTimeout);
+		};
+	}, []);
+
+	useEffect(() => {
+		// Set up an interval to refresh the clock every second
 		const timerId = setInterval(refreshClock, 1000);
-		return function cleanup() {
+
+		return () => {
+			// Clean up the interval when the component unmounts
 			clearInterval(timerId);
 		};
 	}, []);
@@ -46,7 +42,7 @@ const LockScreen = () => {
 			minute: '2-digit',
 			hour12: true,
 		})
-		.replace(/\s?[APap][Mm]\.?/, ''); // Removes AM/PM text
+		.replace(/\s?[APap][Mm]\.?/, ''); // Removes AM/PM text~
 
 	const formattedDate = date.toLocaleString('en-US', {
 		weekday: 'long',
@@ -85,11 +81,10 @@ const LockScreen = () => {
 				<div className='lockScreenDate'>{formattedDate}</div>
 				<div className='lockScreenBottomTransSqr'></div>
 			</motion.div>
-			{/* Render notification if notification state is true */}
-			{notification ? (
+			{/* Render notification if notificationVisible is true */}
+			{notificationVisible && (
 				<motion.a
 					initial={{ opacity: 0, y: -10, zIndex: 20 }}
-					// exit={{ opacity: 0, y: -10, zIndex: 20 }}
 					animate={{
 						opacity: 1,
 						y: 0,
@@ -98,9 +93,7 @@ const LockScreen = () => {
 					transition={{
 						duration: 1.5,
 						type: 'spring',
-						repeat: 1,
-						// repeatType: 'reverse',
-						// repeatDelay: 0.5,
+						repeat: 0,
 					}}
 					key='notification'
 					target='_blank'
@@ -113,11 +106,9 @@ const LockScreen = () => {
 						src={linkTreeImg}
 						alt='BadWeather'
 					/>
-					<div className='notificationTextTop'>Bad Weather - EP</div>
+					<div className='notificationTextTop'>LinkTree</div>
 					<div className='notificationTextBottem'></div>
 				</motion.a>
-			) : (
-				''
 			)}
 		</>
 	);

diff --git a/src/components/homeScreen/homeScreen.jsx b/src/components/homeScreen/homeScreen.jsx
@@ -13,18 +13,17 @@ import { MAINAPPS, FOOTERAPPS } from '../../assets/apps';
 const HomeScreen = () => {
 	return (
 		<>
-			<img
-				src={homeScreenBackground}
-				alt=''
-				className='homeScreenPicture'
-			/>
-
 			{/* Render apps */}
 			<motion.div
 				initial={{ opacity: 0 }}
 				animate={{ opacity: 1 }}
 				exit={{ opacity: 0 }}
 			>
+				<img
+					src={homeScreenBackground}
+					alt=''
+					className='homeScreenPicture'
+				/>
 				{/* Main apps */}
 				<div className='apps'>
 					{MAINAPPS.map((app) => (