Skip to content

Commit

Permalink
Merge pull request #24 from agiledev-students-spring2024/navid
Browse files Browse the repository at this point in the history
Fixed text on homepage, added more endpoints to router, and changed some css that was written by shiwen
  • Loading branch information
ShiwenFang authored Mar 12, 2024
2 parents 6077950 + 0e065db commit f09d888
Show file tree
Hide file tree
Showing 20 changed files with 175 additions and 51 deletions.
1 change: 1 addition & 0 deletions front-end/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Expand Down
43 changes: 26 additions & 17 deletions front-end/src/App.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,34 @@
import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from './screens/Login';
import Home from './screens/Home';
import Registration from './screens/Registration';
import Accessories from './screens/Accessories';
import All_Items from './screens/All_Items';
import Coats_Jackets from './screens/Coats_Jackets';
import Pants from './screens/Pants';
import Shirt from './screens/Shirts';
import Shoes from './screens/Shoes';
import Skirts_Dresses from './screens/Skirts_Dresses';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<BrowserRouter>
<Routes>
<Route path="/" element={<Login/>}> </Route>
<Route path="/home" element={<Home/>} />
<Route path="/register" element={<Registration/>} />
<Route path="/accessories" element={<Accessories/>} />
<Route path="/all-items" element={<All_Items/>} />
<Route path="/coats-jackets" element={<Coats_Jackets/>} />
<Route path="/pants" element={<Pants/>} />
<Route path="/shirt" element={<Shirt/>} />
<Route path="/shoes" element={<Shoes/>} />
<Route path="/skirts-dresses" element={<Skirts_Dresses/>} />
</Routes>
</BrowserRouter>
);
}

export default App;
//https://www.w3schools.com/react/react_router.asp
12 changes: 9 additions & 3 deletions front-end/src/components/OverlayMenu.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import './OverlayMenu.css';

import { Link } from 'react-router-dom';
const OverlayMenu = () => {
const [isOpen, setIsOpen] = useState(false); // State to manage the menu visibility

Expand All @@ -17,12 +17,18 @@ const OverlayMenu = () => {
<h2>Wardrobe Wizard</h2>
<nav>
<ul>
<li><a href="/home">Home</a></li>
{/* <li><a href="/home">Home</a></li>
<li><a href="/view-closet">View Closet</a></li>
<li><a href="/add-item">Add Item</a></li>
<li><a href="/outfit-archive">Outfit Archive</a></li>
<li><a href="/generator">Generator</a></li>
<li><a href="/logout">Logout</a></li>
<li><a href="/">Logout</a></li> */}
<li><Link to="/home">Home</Link></li>
<li><Link to="/view-closet">View Closet</Link></li>
<li><Link to="/add-item">Add Item</Link></li>
<li><Link to="/outfit-archive">Outfit Archive</Link></li>
<li><Link to="/generator">Generator</Link></li>
<li><Link to="/">Logout</Link></li>
</ul>
</nav>
</div>
Expand Down
2 changes: 1 addition & 1 deletion front-end/src/screens/Accessories.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Accessories = () => {
<OverlayMenu />
<header className='Accessories-banner'>
<h1>WARDROBE WIZARD</h1>
<h1>Accessories</h1>
<h3>Accessories</h3>
</header>
<div className="Accessories-list">
{Accessories.map((Accessorie, index) => (
Expand Down
2 changes: 1 addition & 1 deletion front-end/src/screens/All_Items.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const All_Items = () => {
<OverlayMenu />
<header className='All_Items-banner'>
<h1>WARDROBE WIZARD</h1>
<h1>All_Items</h1>
<h3>All Items</h3>
</header>
<div className="All_Items-list">
{All_Items.map((All_Item, index) => (
Expand Down
2 changes: 1 addition & 1 deletion front-end/src/screens/Coats_Jackets.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Coats_Jackets = () => {
<OverlayMenu />
<header className='Coats_Jackets-banner'>
<h1>WARDROBE WIZARD</h1>
<h1>Coats/Jackets</h1>
<h3>Coats/Jackets</h3>
</header>
<div className="Coats_Jackets-list">
{Coats_Jackets.map((Coat_Jacket, index) => (
Expand Down
12 changes: 8 additions & 4 deletions front-end/src/screens/Home.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
import '../styles/Home.css'
import OverlayMenu from '../components/OverlayMenu';
import { Link } from 'react-router-dom';

function Home(){
return(
<div className="Home">
<OverlayMenu />
<div className='banner'>
<h1>WARDROBE WIZARD</h1>
<h3>Home Page</h3>
</div>
<div className="homeList">
<h3>View Closet</h3>
<h3>View Closet</h3>
<h3>Add Item</h3>
<h3>Generator Outfit</h3>
<h3><Link to="/home">View Closet</Link></h3>
<h3><Link to="/view-closet">Add Item</Link></h3>
<h3><Link to="/outfit-archive">Outfit Archive</Link></h3>
<h3><Link to="/generator">Generator Outfit</Link></h3>
</div>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion front-end/src/screens/Pants.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Pants = () => {
<OverlayMenu />
<header className='Pants-banner'>
<h1>WARDROBE WIZARD</h1>
<h1>Pants</h1>
<h3>Pants</h3>
</header>
<div className="Pants-list">
{Pants.map((Pant, index) => (
Expand Down
2 changes: 1 addition & 1 deletion front-end/src/screens/Shirts.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Shirt = () => {
<OverlayMenu />
<header className='Shirt-banner'>
<h1>WARDROBE WIZARD</h1>
<h1>Shirts</h1>
<h3>Shirts</h3>
</header>
<div className="Shirt-list">
{shirts.map((shirt, index) => (
Expand Down
2 changes: 1 addition & 1 deletion front-end/src/screens/Shoes.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Shoes = () => {
<OverlayMenu />
<header className='Shoes-banner'>
<h1>WARDROBE WIZARD</h1>
<h1>Shoes</h1>
<h3>Shoes</h3>
</header>
<div className="Shoes-list">
{Shoes.map((Shoe, index) => (
Expand Down
2 changes: 1 addition & 1 deletion front-end/src/screens/Skirts_Dresses.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Skirts_Dresses = () => {
<OverlayMenu />
<header className='Skirts_Dresses-banner'>
<h1>WARDROBE WIZARD</h1>
<h1>Skirts/Dresses</h1>
<h3>Skirts/Dresses</h3>
</header>
<div className="Skirts_Dresses-list">
{Skirts_Dresses.map((Skirt_Dresse, index) => (
Expand Down
4 changes: 2 additions & 2 deletions front-end/src/styles/Accessories.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
text-align: center;
}

.Accessories-banner h1, .Accessories-banner h2 {
.Accessories-banner h1 {
font-family: "IM Fell French Canon SC", serif;
margin: 0;
margin-left: 2em;
text-align: left;
font-size: 27px;
}

.Accessories-banner h2 {
.Accessories-banner h3, .Accessories-banner h1 {
font-family: 'Cormorant Infant', serif;
font-weight: 300;
}
Expand Down
4 changes: 2 additions & 2 deletions front-end/src/styles/All_Items.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
text-align: center;
}

.All_Items-banner h1, .All_Items-banner h2 {
.All_Items-banner h1 {
font-family: "IM Fell French Canon SC", serif;
margin: 0;
margin-left: 2em;
text-align: left;
font-size: 27px;
}

.All_Items-banner h2 {
.All_Items-banner h3, .All_Items-banner h1 {
font-family: 'Cormorant Infant', serif;
font-weight: 300;
}
Expand Down
4 changes: 2 additions & 2 deletions front-end/src/styles/Coats_Jackets.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
text-align: center;
}

.Coats_Jackets-banner h1, .Coats_Jackets-banner h2 {
.Coats_Jackets-banner h1 {
font-family: "IM Fell French Canon SC", serif;
margin: 0;
margin-left: 2em;
text-align: left;
font-size: 27px;
}

.Coats_Jackets-banner h2 {
.Coats_Jackets-banner h3, .Coats_Jackets-banner h1 {
font-family: 'Cormorant Infant', serif;
font-weight: 300;
}
Expand Down
36 changes: 36 additions & 0 deletions front-end/src/styles/Home.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IM+Fell+French+Canon+SC&family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:[email protected]&display=swap');

.banner {
background-color: #f1f1f1;
padding: 1.5rem;
text-align: center;
}

.banner h1{
font-family: "IM Fell French Canon SC", serif;
margin: 0;
margin-left: 2em;
text-align: left;
font-size: 27px;
}

.banner h3 {
font-family: 'Cormorant Infant', serif;
font-weight: 300;
}

.homeList {
display: flex;
flex-direction: column;
text-align: center;
font-family: "Inria Serif", serif;
font-weight: 700;
font-style: normal;
}

.homeList a{
text-decoration: none;
text-decoration: none;
color: black;
}

63 changes: 63 additions & 0 deletions front-end/src/styles/Login.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IM+Fell+French+Canon+SC&family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:[email protected]&display=swap');

.banner{
background-color: #f1f1f1;
padding: 1.5rem;
}

.banner h1 {
font-family: "IM Fell French Canon SC", serif;
font-weight: 400;
margin: 0;
text-align: center;
}

.banner h3{
font-family: 'Cormorant Infant', serif;
font-weight: 300;
text-align: center;
}

.login{
display: flex;
flex-direction: column;
align-items: center;
}

.login h2 {
font-family: "Inria Serif", serif;
font-weight: 700;
font-style: normal;
}

.loginForm{
display: flex;
flex-direction: column;
width: max-content;
}

.loginForm input{
background-color: #f1f1f1;
border: none;
text-align: center;
border-radius: 5px;
}

.loginForm button{
background-color: #000000;
border: none;
color: #f1f1f1;
padding: .5rem;
}

.register{
text-align: center;
}

.register a {
text-decoration: none;
text-decoration: none;
font-size: xx-small;
font-family: "Inter", sans-serif;
color: #919191;
}
4 changes: 2 additions & 2 deletions front-end/src/styles/Pants.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
text-align: center;
}

.Pants-banner h1, .Pants-banner h2 {
.Pants-banner h1 {
font-family: "IM Fell French Canon SC", serif;
margin: 0;
margin-left: 2em;
text-align: left;
font-size: 27px;
}

.Pants-banner h2 {
.Pants-banner h3 {
font-family: 'Cormorant Infant', serif;
font-weight: 300;
}
Expand Down
7 changes: 5 additions & 2 deletions front-end/src/styles/Shirts.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,15 @@
text-align: center;
}

.Shirt-banner h1, .Shirt-banner h2 {
.Shirt-banner h1{
font-family: "IM Fell French Canon SC", serif;
margin: 0;
margin-left: 2em;
text-align: left;
font-size: 27px;
}

.Shirt-banner h2 {
.Shirt-banner h3, .Shirt-banner h1 {
font-family: 'Cormorant Infant', serif;
font-weight: 300;
}
Expand Down
10 changes: 5 additions & 5 deletions front-end/src/styles/Shoes.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@
text-align: center;
}

.Shoes-banner h1, .Shoes-banner h2 {
.Shoes-banner h1 {
font-family: "IM Fell French Canon SC", serif;
margin: 0;
margin-left: 2em;
text-align: left;
font-size: 27px;
}

.Shoes-banner h2 {
.Shoes-banner h3, .Shoes-banner h1 {
font-family: 'Cormorant Infant', serif;
font-weight: 300;
margin-left: 2em;
text-align: left;
font-size: 27px;
}

/* Grid layout for the shirt list */
Expand Down
Loading

0 comments on commit f09d888

Please sign in to comment.