Merge pull request #12 from ihughes22/photobook-flip

added css styling for login, registration and flip
ihughes22 · Nov 29, 2023 · 4bc3cdb · 4bc3cdb
2 parents ae6b3fa + 4c9c693
commit 4bc3cdb
Show file tree

Hide file tree

Showing 8 changed files with 351 additions and 186 deletions.
diff --git a/digital-memory-book/src/App.css b/digital-memory-book/src/App.css
@@ -19,7 +19,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
   font-size: calc(10px + 2vmin);
   color: white;
 }

diff --git a/digital-memory-book/src/App.js b/digital-memory-book/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import "./App.css";
 import Login from "./Login";
 import Registration from "./Registration";
@@ -22,20 +22,19 @@ import Button from "react-bootstrap/Button";
 import NavDropdown from "react-bootstrap/NavDropdown";
 import { signOut } from "firebase/auth";
 import { auth } from "./firebase";
+import "./Interactable.css";
 
 function App() {
   const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));
   const [uid, setUid] = useState(localStorage.getItem("uid"));
   const [webName, setWebName] = useState(localStorage.getItem("webName"));
 
   const handleHomeClick = () => {
-    if(isAuth){
+    if (isAuth) {
       window.location.pathname = "/timeline";
-    }
-    else{
+    } else {
       window.location.pathname = "/";
     }
-
   };
 
   const handleLoginClick = () => {
@@ -46,61 +45,108 @@ function App() {
     setWebName(localStorage.getItem("webName"));
   }, []);
 
-
-
   const handleSignOutClick = () => {
-    signOut(auth).then(() => {
-      localStorage.clear();
-      setIsAuth(false);
-      window.location.pathname = "/";
-    }).catch((error) => {
-      console.log(error);
-    });
+    signOut(auth)
+      .then(() => {
+        localStorage.clear();
+        setIsAuth(false);
+        window.location.pathname = "/";
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   };
 
   return (
     <BrowserRouter>
-      <Navbar style = {{border: '1px solid grey', margin: '5px'}} expand="lg" className="bg-body-tertiary" >
-      <Container>
-        <Navbar.Brand onClick={handleHomeClick}>
-        {isAuth ? webName : 'Digital Memory Book'}
-        </Navbar.Brand>
-        <Navbar.Toggle aria-controls="basic-navbar-nav" />
-        <Navbar.Collapse id="basic-navbar-nav">
-          <Nav className="me-auto">
-            <Nav.Link onClick={handleHomeClick}>
-              Home
-            </Nav.Link>
-            <NavDropdown title="Resources">
-              <NavDropdown.Item href="/ourmission">Our Mission</NavDropdown.Item>
-              <NavDropdown.Item href="/meetus">Meet the Creators</NavDropdown.Item>
-            </NavDropdown>
-            <Nav.Link href="/contactus">Contact</Nav.Link>
-            {isAuth ? (
-              <Button variant="outline-danger" onClick={handleSignOutClick}>
-                Sign Out
-              </Button>
-            ) : (
-              <Button variant="outline-success" onClick={handleLoginClick}>
-                Get Started
-              </Button>
-            )}
-          </Nav>
-        </Navbar.Collapse>
-      </Container>
-    </Navbar>
+      <Navbar
+        style={{
+          margin: "5px",
+          justifyContent: "flex-end",
+          fontFamily: "DM Sans",
+        }}
+        expand="lg"
+        className="bg-body-tertiary"
+      >
+        <Container>
+          <Navbar.Brand onClick={handleHomeClick}>
+            {isAuth ? webName : "Digital Memory Book"}
+          </Navbar.Brand>
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+            <Nav className="me-auto">
+              <Nav.Link onClick={handleHomeClick}>Home</Nav.Link>
+              <NavDropdown title="Resources">
+                <NavDropdown.Item href="/ourmission">
+                  Our Mission
+                </NavDropdown.Item>
+                <NavDropdown.Item href="/meetus">
+                  Meet the Creators
+                </NavDropdown.Item>
+              </NavDropdown>
+              <Nav.Link href="/contactus">Contact</Nav.Link>
+              {isAuth ? (
+                <Button
+                  style={{
+                    display: "inline-block",
+                    padding: "10px 10spx",
+                    fontSize: "16px",
+                    fontWeight: "bold",
+                    textAlign: "center",
+                    textDecoration: "none",
+                    fontFamily: "DM Sans, sans-serif",
+                    borderRadius: "25px",
+                    backgroundColor: "#434DA1",
+                    color: "#ffffff",
+                    cursor: "pointer",
+                    transition: "background-color 0.3s ease",
+                    marginRight: "10px",
+                  }}
+                  onClick={handleSignOutClick}
+                >
+                  Sign Out
+                </Button>
+              ) : (
+                <Button
+                  style={{
+                    display: "inline-block",
+                    padding: "10px 10spx",
+                    fontSize: "16px",
+                    fontWeight: "bold",
+                    textAlign: "center",
+                    textDecoration: "none",
+                    fontFamily: "DM Sans, sans-serif",
+                    borderRadius: "25px",
+                    backgroundColor: "#434DA1",
+                    color: "#ffffff",
+                    cursor: "pointer",
+                    transition: "background-color 0.3s ease",
+                    marginRight: "10px",
+                  }}
+                  onClick={handleLoginClick}
+                >
+                  Get Started
+                </Button>
+              )}
+            </Nav>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
       <Routes>
-        <Route path="/" element={<Home isAuth={isAuth}/>} />
-        <Route path="/registration" element={<Registration/>} />
-        <Route path="/login" element={<Login setIsAuth={setIsAuth}/>} />
+        <Route path="/" element={<Home isAuth={isAuth} />} />
+        <Route path="/registration" element={<Registration />} />
+        <Route path="/login" element={<Login setIsAuth={setIsAuth} />} />
         <Route path="/contactus" element={<ContactUs />} />
         <Route path="/ourmission" element={<OurMission />} />
         <Route path="/meetus" element={<MeetTheCreators />} />
-        <Route path="/timelinecreation" element={<DigitalTimeline isAuth={isAuth}/>} />
-        <Route path="/timeline" element={<Post isAuth={isAuth}/>} />
-        <Route path="/addpost" element={<PostUploaderV2 isAuth={isAuth}/>} />
-        <Route path="/family" element={<FamilyView isAuth={isAuth}/>} />
-        <Route path="/photobook" element={<PhotoBook isAuth={isAuth}/>} />
+        <Route
+          path="/timelinecreation"
+          element={<DigitalTimeline isAuth={isAuth} />}
+        />
+        <Route path="/timeline" element={<Post isAuth={isAuth} />} />
+        <Route path="/addpost" element={<PostUploaderV2 isAuth={isAuth} />} />
+        <Route path="/family" element={<FamilyView isAuth={isAuth} />} />
+        <Route path="/photobook" element={<PhotoBook isAuth={isAuth} />} />
       </Routes>
     </BrowserRouter>
   );

diff --git a/digital-memory-book/src/Home.js b/digital-memory-book/src/Home.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useNavigate } from "react-router-dom";
-
+import "./Interactable.css"
 const Home = ({ isAuth}) => {
   const pageStyles = {
     textAlign: 'center',
@@ -22,15 +22,6 @@ const Home = ({ isAuth}) => {
     marginBottom: '30px',
   };
 
-  const loginButtonStyles = {
-    background: '#0073e6',
-    color: '#fff',
-    border: 'none',
-    padding: '10px 20px',
-    borderRadius: '5px',
-    fontSize: '20px',
-    cursor: 'pointer',
-  };
 
   const navigate = useNavigate();
 
@@ -44,7 +35,7 @@ const Home = ({ isAuth}) => {
         <h1 style={headingStyles}>Welcome to My Memory Book Software</h1>
         <p style={subheadingStyles}>Capture and relive your memories with ease.</p>
         {!isAuth ? (
-          <button onClick = {handleClick2} style={loginButtonStyles}>Log In</button>
+          <button onClick = {handleClick2} className="login-button">Log In</button>
         ) :
         (
           <p style={subheadingStyles}>Glad you're here!</p>

diff --git a/digital-memory-book/src/Interactable.css b/digital-memory-book/src/Interactable.css
@@ -0,0 +1,73 @@
+/* Import DM Sans font */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
+
+.login-button {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  font-family: 'DM Sans', sans-serif;
+  border-radius: 25px; 
+  background-color: #434DA1; 
+  color: #ffffff; 
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin-right: 10px;
+}
+
+.register-button {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  font-family: 'DM Sans', sans-serif;
+  border-radius: 25px; 
+  background-color: #ffffff; 
+  color: #434DA1; 
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.Login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  font-family: 'DM Sans', sans-serif;
+}
+
+.box {
+  border: 1px solid #ccc;
+  border-radius: 20px; 
+  padding: 50px;
+  width: 600px; 
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background-color: #e5e6f4;
+  text-align: center;
+  font-family: 'DM Sans', sans-serif;
+}
+
+.Login h2 {
+  margin-bottom: 20px;
+}
+
+.Login input {
+  padding: 10px;
+  margin: 5px 0;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.rounded-input{
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+    box-sizing: border-box;
+  }
diff --git a/digital-memory-book/src/Login.css b/digital-memory-book/src/Login.css
@@ -1,22 +1,23 @@
-/* Login.css */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
 
 .Login {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  font-family: Arial, sans-serif;
+  font-family: 'DM Sans', sans-serif;
 }
 
 .login-box {
   border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 40px; /* Increase padding for more height */
-  width: 300px; /* Increase width as needed */
+  border-radius: 20px; 
+  padding: 50px;
+  width: 600px; 
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
+  background-color: #e5e6f4;
   text-align: center;
+  font-family: 'DM Sans', sans-serif;
 }
 
 .Login h2 {
@@ -31,21 +32,10 @@
   border-radius: 4px;
 }
 
-.Login button {
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 5px;
-}
-
-.Login button:hover {
-  background-color: #0056b3;
-}
-
-.Login p {
-  color: red;
-  font-weight: bold;
+.input-box {
+  width: 100%;
+  padding: 10px; /* Adjust padding based on your preference */
+  border: 1px solid #ccc;
+  border-radius: 10px; /* Add round edges */
+  box-sizing: border-box; /* Include padding and border in the element's total width and height */
 }