Adding background styling to all webpages

digital-memory-book/src/ContactUs.js

@@ -1,10 +1,14 @@
 import React from 'react';
+import backgroundImage from './Photos/triangle-mosaic.png'
 
 const ContactUs = () => {
   const pageStyles = {
     textAlign: 'center',
     padding: '20px',
-    backgroundColor: '#f4f4f4',
+    backgroundImage: `url(${backgroundImage})`,
+    backgroundSize: '500px 500px',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'repeat',
     height: '100vh',
   };
 

digital-memory-book/src/DigitalTimeline.js

@@ -145,6 +145,7 @@ const DigitalTimeline = ({ isAuth }) => {
   };
 
   return (
+    <div className="page">
     <div style={centeredContainer}>
       <div style={buttonContainer}>
         {isCreatingNewFamily ? (
@@ -188,6 +189,7 @@ const DigitalTimeline = ({ isAuth }) => {
         )}
       </div>
     </div>
+    </div>
   );
 };
 

digital-memory-book/src/FamilyView.js

@@ -4,6 +4,7 @@ import TrashCanIcon from './Photos/trashcan.png';
 import Modal from 'react-modal';
 import { useNavigate } from 'react-router-dom';
 import { db } from './firebase';
+import backgroundImage from './Photos/triangle-mosaic.png'
 import {
   setDoc,
   getDocs,
@@ -18,6 +19,16 @@ import {
 } from 'firebase/firestore';
 
 const FamilyView = ({ isAuth }) => {
+  const pageStyles = {
+    textAlign: 'center',
+    padding: '20px',
+    backgroundImage: `url(${backgroundImage})`,  // Add this line
+    backgroundSize: '500px 500px',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'repeat',
+    height: '100vh',
+  };
+
   Modal.setAppElement('#root'); 
 
   const [showPasswordChange, setShowPasswordChange] = useState(false);
@@ -189,6 +200,7 @@ const FamilyView = ({ isAuth }) => {
   };
 
   return (
+    <div style={pageStyles}>
     <div style={centerContentStyle}>
       <h2>My Family View</h2>
       <p> Your family code is: {code}</p>
@@ -300,6 +312,7 @@ const FamilyView = ({ isAuth }) => {
         </div>
       </Modal>
     </div>
+    </div>
   );
 };
 

digital-memory-book/src/Home.js

@@ -1,11 +1,16 @@
 import React from 'react';
 import { useNavigate } from "react-router-dom";
 import "./Interactable.css"
+import backgroundImage from './Photos/triangle-mosaic.png'
+
 const Home = ({ isAuth}) => {
   const pageStyles = {
     textAlign: 'center',
     padding: '20px',
-    backgroundColor: '#f4f4f4',
+    backgroundImage: `url(${backgroundImage})`,  // Add this line
+    backgroundSize: '500px 500px',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'repeat',
     height: '100vh',
   };
 

digital-memory-book/src/Interactable.css

@@ -32,6 +32,17 @@
   transition: background-color 0.3s ease;
 }
 
+.page {
+  text-align: center;
+  padding: 20px;
+  background-image: url('./Photos/triangle-mosaic.png'); /* Replace with the correct path */
+  background-size: 500px 500px;
+  background-position: center;
+  background-repeat: repeat;
+  height: 100vh;
+}
+
+
 .Login {
   display: flex;
   flex-direction: column;

digital-memory-book/src/Login.js

@@ -5,6 +5,7 @@ import { signInWithEmailAndPassword } from "firebase/auth";
 import { db } from "./firebase";
 import { collection, query, where, getDocs } from "firebase/firestore";
 import "./Interactable.css";
+import backgroundImage from './Photos/triangle-mosaic.png'
 
 function Login({ setIsAuth }) {
   const [username, setUsername] = useState("");
@@ -65,7 +66,18 @@ function Login({ setIsAuth }) {
     });
   };
 
+  const pageStyles = {
+    textAlign: 'center',
+    padding: '20px',
+    backgroundImage: `url(${backgroundImage})`,  // Add this line
+    backgroundSize: '500px 500px',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'repeat',
+    height: '100vh',
+  };
+
   return (
+    <div className="page">
     <div className="Login">
       <div className="box">
         <div>
@@ -111,6 +123,7 @@ function Login({ setIsAuth }) {
         </div>
       </div>
     </div>
+    </div>
   );
 }
 

digital-memory-book/src/MeetTheCreators.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import backgroundImage from './Photos/triangle-mosaic.png'
+
 
 const teamMembers = [
   {
@@ -42,8 +44,11 @@ const MeetTheCreators = () => {
   const pageStyles = {
     textAlign: 'center',
     padding: '20px',
-    backgroundColor: '#f4f4f4',
-  };
+    backgroundImage: `url(${backgroundImage})`, 
+    backgroundSize: '500px 500px',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'repeat',
+    height: '100%',  };
 
   const headingStyles = {
     fontSize: '36px',
@@ -56,7 +61,12 @@ const MeetTheCreators = () => {
     marginBottom: '40px',
     padding: '20px',
     backgroundColor: '#fff',
-    borderRadius: '5px',
+    background: '#FFFFFF', 
+    border: '1px gray solid', 
+    borderRadius: '75px', 
+    margin: '50px auto', 
+    maxWidth: '800px', 
+    position: 'relative',
   };
 
   const memberNameStyles = {
@@ -81,7 +91,7 @@ const MeetTheCreators = () => {
     <div style={pageStyles}>
       <h1 style={headingStyles}>Meet the Creators</h1>
       {teamMembers.map((member, index) => (
-        <div data-testid="people" key={index} style={memberStyles}>
+        <div data-testid="people" key={index} style={memberStyles}> {/* Use className instead of style */}
           <img src={`team_member_${index + 1}.jpg`} alt={member.name} />
           <h2 style={memberNameStyles}>{member.name}</h2>
           <p style={memberRoleStyles}>{member.role}</p>
@@ -90,6 +100,6 @@ const MeetTheCreators = () => {
       ))}
     </div>
   );
-};
+      };
 
 export default MeetTheCreators;

digital-memory-book/src/OurMission.js

@@ -1,10 +1,14 @@
 import React from 'react';
+import backgroundImage from './Photos/triangle-mosaic.png'
 
 const OurMission = () => {
   const pageStyles = {
     textAlign: 'center',
     padding: '20px',
-    backgroundColor: '#f4f4f4',
+    backgroundImage: `url(${backgroundImage})`,  // Add this line
+    backgroundSize: '500px 500px',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'repeat',
     height: '100vh',
   };
 

digital-memory-book/src/PhotoBook.css

@@ -1,6 +1,7 @@
 /* PhotoBook.css */
 
 #post-container {
+    background-color: white;
     width: 50%;
     height: 75%;
     margin: 0 auto;

digital-memory-book/src/PhotoBook.js

@@ -12,8 +12,19 @@ import {
 import { db } from "./firebase";
 import { useNavigate } from "react-router-dom";
 import "./PhotoBook.css"; // Import the CSS file
+import backgroundImage from './Photos/triangle-mosaic.png'
 
 const PhotoBook = ({ isAuth }) => {
+  const pageStyles = {
+    textAlign: 'center',
+    padding: '20px',
+    backgroundImage: `url(${backgroundImage})`,  // Add this line
+    backgroundSize: '500px 500px',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'repeat',
+    height: '100vh',
+  };
+
   const [posts, setPosts] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [code, setCode] = useState(localStorage.getItem("code"));
@@ -64,6 +75,7 @@ const PhotoBook = ({ isAuth }) => {
   const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
 
   return (
+    <div style={pageStyles}>
     <div id="post-container" onLoad={fetchPosts}>
       <h1 className="post-heading">Photobook</h1>
       {currentPosts.map((post) => (
@@ -88,6 +100,7 @@ const PhotoBook = ({ isAuth }) => {
         </button>
       </div>
     </div>
+    </div>
   );
 };
 

digital-memory-book/src/Post.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import backgroundImage from './Photos/triangle-mosaic.png'
 import { useRef } from 'react';
 import {
   setDoc,
@@ -15,6 +16,15 @@ import {
 import { db } from './firebase';
 import { useNavigate } from 'react-router-dom';
 
+const pageStyles = {
+    padding: '20px',
+    backgroundImage: `url(${backgroundImage})`,  // Add this line
+    backgroundSize: '500px 500px',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'repeat',
+    height: '100%',
+  };
+
 const Slideshow = ({ images, onClose, currentSlide, onNext, onPrev, intervalDuration }) => {
 
   const [showEscapeMessage, setShowEscapeMessage] = useState(true);
@@ -97,7 +107,13 @@ const Post = ({ isAuth }) => {
   const [code, setCode] = useState(localStorage.getItem("code"));
   const [uid, setUid] = useState(localStorage.getItem("uid"));
 
+  const [errorMessage, setErrorMessage] = useState('');
+
   const startSlideshow = () => {
+      if (posts.length === 0) {
+        setErrorMessage('There are no posts to start a slideshow.');
+        return;
+      }
     setSlideshowActive(true);
     setFullscreen(true);
     setCurrentSlide(0);
@@ -213,6 +229,7 @@ const Post = ({ isAuth }) => {
   };
 
   const postContainer = {
+    backgroundColor: 'white',
     width: '50%',
     margin: '0 auto',
     padding: '20px',
@@ -229,7 +246,7 @@ const Post = ({ isAuth }) => {
   };
 
   const postItem = {
-    display: 'flex',
+    sdisplay: 'flex',
     flexDirection: 'column',
     marginBottom: '20px',
     border: '4px solid #eeee',
@@ -266,6 +283,7 @@ const Post = ({ isAuth }) => {
     border: '1px solid #ccc',
     borderRadius: '5px',
     cursor: 'pointer',
+
   };
 
   const postEditButton2 = {
@@ -274,6 +292,7 @@ const Post = ({ isAuth }) => {
     border: '1px solid #ccc',
     borderRadius: '5px',
     cursor: 'pointer',
+    margin: '10 auto',
   };
 
   const postEditButton3 = {
@@ -282,10 +301,18 @@ const Post = ({ isAuth }) => {
     border: '1px solid #ccc',
     borderRadius: '5px',
     cursor: 'pointer',
+    margin: '10s auto',
   };
 
   return (
+    <div style={pageStyles}>
     <div onLoad={fetchPosts} style={postContainer}>
+      {/* Display error message below the button */}
+      {errorMessage && (
+          <div style={{ color: 'red', marginTop: '10px' }}>
+            {errorMessage}
+          </div>
+        )}
       <button
         onClick={makePost}
         style={{
@@ -303,6 +330,11 @@ const Post = ({ isAuth }) => {
       >
         {slideshowActive ? 'Pause Slideshow' : 'Start Slideshow'}
       </button>
+      <button onClick = {viewFamily} style = {postEditButton3}>
+        View Family
+      </button>
+
+      <div> 
       {[3, 5, 7, 10].map((interval) => (
         <button
           key={interval}
@@ -314,11 +346,9 @@ const Post = ({ isAuth }) => {
           onClick={() => handleIntervalChange(interval)}
         >
           {`${interval}s`}
-        </button>
+       </button>
       ))}
-      <button onClick = {viewFamily} style = {postEditButton3}>
-        View Family
-      </button>
+      </div> 
       <h1 style={postHeading}>Posts</h1>
       {posts.map((post, index) => (
         <div key={post.id} style={postItem}>
@@ -379,6 +409,7 @@ const Post = ({ isAuth }) => {
       )}
       <button style={postEditButton2} onClick={handleClose}>Close the Final Chapter</button>
     </div>
+    </div>
   );
 };