Changed the website logo

src/components/Catalog.tsx

@@ -79,7 +79,7 @@ const dogs = [
 const Catalog: React.FC = () => {
   return (
     <section className="catalog">
-      <h3>Port's Dog Catalog</h3>
+      <h3>Dog's Catalog</h3>
       <div className="dog-cards-container">
         {dogs.map((dog, index) => (
           <DogCard key={index} {...dog} />

src/components/Footer.tsx

@@ -4,7 +4,7 @@ import './Footer.css';
 const Footer: React.FC = () => {
   return (
     <footer className="App-footer">
-      <p>&copy; {new Date().getFullYear()} The Dog Catalog. All rights reserved.</p>
+      <p>{new Date().getFullYear()} The Dog Catalog.</p>
     </footer>
   );
 };

src/components/Header.css

@@ -9,7 +9,7 @@
   }
 
   .logo img {
-    height: 20px; /* Set logo height to 20px */
+    height: 30px; /* Set logo height to 20px */
   }
 
   .nav-container {

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom'; // Import Link for routing
-import PortLogo from '../PortLogo.svg';
+import CatalogLogo from '../CatalogLogo.svg';
 import './Header.css';
 
 const Header: React.FC = () => {
@@ -9,7 +9,7 @@ const Header: React.FC = () => {
       <nav>
         <div className="logo">
           <Link to="/">
-            <img src={PortLogo} alt="Port Logo" />
+            <img src={CatalogLogo} alt="Dog's Catalog Logo" />
           </Link>
         </div>
       </nav>

src/components/Manage.tsx

@@ -5,10 +5,9 @@ const Manage = () => {
   const [dogData, setDogData] = useState({
     name: '',
     age: '',
-    picture: '',
     height: '',
     color: '',
-    favoritePortFeature: '',
+    favoriteToy: '',
     favoriteMeal: '',
   });
 
@@ -23,10 +22,9 @@ const Manage = () => {
     setDogData({
       name: '',
       age: '',
-      picture: '',
       height: '',
       color: '',
-      favoritePortFeature: '',
+      favoriteToy: '',
       favoriteMeal: '',
     });
   };
@@ -42,23 +40,23 @@ const Manage = () => {
         </div>
         <div className="form-group">
           Age: 
-          <input type="number" value={dogData.age} onChange={handleChange} required />
+          <input type="number" name="age" value={dogData.age} onChange={handleChange} required />
         </div>
         <div className="form-group">
         height:
-          <input type="text" value={dogData.height} onChange={handleChange} required />
+          <input type="text" name="height" value={dogData.height} onChange={handleChange} required />
         </div>
         <div className="form-group">
         color:
-          <input type="text" value={dogData.color} onChange={handleChange} required />
+          <input type="text" name="color" value={dogData.color} onChange={handleChange} required />
         </div>
         <div className="form-group">
         favoriteToy:
-          <input type="text" value={dogData.favoritePortFeature} onChange={handleChange} required />
+          <input type="text" name="favoriteToy" value={dogData.favoriteToy} onChange={handleChange} required />
         </div>
         <div className="form-group">
         favoriteMeal: 
-          <input type="text" value={dogData.favoriteMeal} onChange={handleChange} required />
+          <input type="text" name="favoriteMeal" value={dogData.favoriteMeal} onChange={handleChange} required />
         </div>
         <button type="submit" className="submit-button" onClick={() => alert(`Dog name: ${dogData.name} was added successfully!`)}>Add Dog</button>
       </form>