Skip to content

Commit

Permalink
Merge pull request #86 from luisdavidgarcia/frontend
Browse files Browse the repository at this point in the history 
Frontend
  • Loading branch information
@junseo-lee-git
junseo-lee-git authored Jun 8, 2023
2 parents 30b15f1 + 1624b0d commit fd4d301
Show file tree
Hide file tree
Showing 12 changed files with 624 additions and 68 deletions.
3 changes: 2 additions & 1 deletion react-frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {ProtectedRoute} from "./components/Utils/ProtectedRoute"
import {AuthProvider} from "./components/context/AuthProvider";
import { IngredientProvider } from "./components/context/ingredients_context";
import RecipeMenu from "./pages/recipes";
import TAC from "./pages/tac";
import ShowRecipe from "./pages/recipeShow";

function App() {
Expand All @@ -30,7 +31,7 @@ function App() {
{/* <Route path="/ContactUs" element={<ReviewPage />} /> */}
<Route path="/Login" element={<LoginForm />} />
<Route path="/Register" element={<RegisterForm />} />

<Route path="/tac" element={<TAC/>} />
<Route
path="/services/saved_recipes"
element={
Expand Down
100 changes: 76 additions & 24 deletions react-frontend/src/components/Home/home_widgets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,83 @@ import { NavLink as Link } from 'react-router-dom';
// import { StyledLink, NavBtn } from "../Navbar/NavbarElements";

export const WidgetBox = styled.div`
padding-top: 20px;
padding-top: 3em;;
position: relative;
display: flex;
display: grid;
grid-template-area:
"widget widget widget";
grid-template-columns: 1fr 1fr 1fr;
justify-content: space-evenly;
gap: 2em;
padding-left: 12em;
padding-right: 12em;
justify-content: space-evenly;
justify-items: center;
align-content: space-evenly;
align-items: center;
width: 100%;
height: 100%;
`;

export const WidgetImg = styled.div`
export const ToastImg = styled.div`
background-image: url(${"https://i.pinimg.com/originals/b5/64/ef/b564efd57ef4a8542a4e4520f9a201cd.jpg"});
background-size: 140%;
background-position: 40%;
border: 1px solid black;
position: relative;
display: grid;
justify-content: center;
width: 310px;
height: 365px;
margin: auto;
border-radius: 20px;
`;

export const SoupImg = styled.div`
background-image: url(${"https://soyummy.club/wp-content/uploads/2019/09/martha-stewart-potato-soup-lovely-9-carrot-soup-recipes-that-anybunny-will-love-of-martha-stewart-potato-soup.jpg"});
background-size: 140%;
background-position: 65%;
border: 1px solid black;
position: relative;
display: grid;
justify-content: center;
width: 310px;
height: 365px;
margin: auto;
border-radius: 20px;
`;

export const BrownieImg = styled.div`
background-image: url(${"https://i.pinimg.com/originals/87/6e/19/876e19fa02ed05a1ca42045c8e3e372e.jpg"});
background-size: 140%;
background-position: center;
border: 2px solid black;
position: relative;
display: grid;
justify-content: center;
max-width: 290px;
max-height: 365px;
width: 310px;
height: 365px;
margin: auto;
border-radius: 20px;
`;

export const Button = styled.button`
position: relative;
z-index: 10;
top: -210px;
width: 150px;
height: 50px;
height: 60px;
margin: auto;
border-radius: 20px;
background: #353839;
color: #fff;
outline: none;
border: none;
border: 1px solid black;
cursor: pointer;
transition: all 0.2s ease-in-out;
text-decoration: none;
top: 0;
&:hover {
transition: all 0.2s ease-in-out;
background: #929292;
Expand All @@ -50,29 +95,36 @@ export const StyledLink = styled(Link)`
margin: auto;
`;

const BigWrapper = styled.section`
padding: 0;
background: white;
width: 100%;
height: ${props => props.height};
`;

export default function HomeWidgets() {
return (
<>
<WidgetBox>
<WidgetImg>
<img src={require('../../images/toast.png')} id="Saved_Recipe" alt="Toast" style={{ width: '310px', height: '365px' }}/>
<StyledLink id="link" to="/services/saved_recipes">
<Button id="Button"> My Favorites </Button>
</StyledLink>
</WidgetImg>
<WidgetImg>
<img src={require('../../images/soup.png')} id="Saved_Recipe" alt="Soup"/>
<StyledLink id="link" to="/services/ingredients">
<Button id="Button"> Find Recipes </Button>
</StyledLink>
</WidgetImg>
<WidgetImg>
<img src={require('../../images/cookie.png')} id="Saved_Recipe" alt="Cookie"/>
<StyledLink id="link" to="/ContactUs">
<ToastImg>
<StyledLink href="/services/saved_recipes">
<Button id="Button"> My Favorites </Button>
</StyledLink>
</ToastImg>
<SoupImg>
<StyledLink href="/services/ingredients">
<Button id="Button"> Find Recipes </Button>
</StyledLink>
</SoupImg>
<BrownieImg>
<StyledLink href="/ContactUs">

<Button id="Button"> Contact Us </Button>
</StyledLink>
</WidgetImg>
</BrownieImg>
</WidgetBox>

<BigWrapper height="50px"></BigWrapper>
</>
);
}
7 changes: 3 additions & 4 deletions react-frontend/src/components/Navbar/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from './NavbarElements';

import { useAuth } from "../context/AuthProvider";
import Searchbar from './Searchbar';
// import Searchbar from './Searchbar';
import '../../css/Nav.css'

const Navbar = () => {
Expand All @@ -27,7 +27,7 @@ const Navbar = () => {
<>
<Nav>
<NavLink to='/'>
<img src={require('../../images/logo.png')} id='logo' alt="logo" />
<img src={require('../../images/logohome.png')} id='logo' alt="logo" border="2px"/>
</NavLink>

<NavMenu>
Expand All @@ -38,7 +38,6 @@ const Navbar = () => {
<NavLink id="link" to='/About' >
<Title>About</Title>
</NavLink>

<NavLink id="link" to='/services/ingredients'>
<Title>Services</Title>
</NavLink>
Expand All @@ -48,7 +47,7 @@ const Navbar = () => {
</NavLink>
</NavMenu>

<Searchbar id="Search"/>
{/* <Searchbar id="Search"/> */}

<NavBtn>
{button}
Expand Down
21 changes: 20 additions & 1 deletion react-frontend/src/components/Utils/ProtectedRoute.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,33 @@
import React from "react";
import { useAuth } from '../context/AuthProvider';
import styled from "styled-components";

// import { Auth } from "./Auth";

const BigWrapper = styled.section`
padding: 0;
background: white;
width: 100%;
height: ${props => props.height};
`;

const Title = styled.h1`
font-size: ${props => props.fontSize}em;
text-align: center;
color: black;
padding-bottom: 0.1em;
font-weight: bold;
`;

export const ProtectedRoute = ({children}) => {
const {Auth} = useAuth();

if (Auth.token === null) {
return (
<h1> You do not have Authentication </h1>
<>
<BigWrapper height = "50px"> </BigWrapper>
<Title fontSize = "2"> Please log in or register to start finding recipes! </Title>
</>
);
} else {
return children;
Expand Down
2 changes: 2 additions & 0 deletions react-frontend/src/images/desktop.ini
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
[LocalizedFileNames]
logotest.png=@logotest,0
Binary file added react-frontend/src/images/logohome.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added react-frontend/src/images/logologin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 changes: 113 additions & 10 deletions react-frontend/src/pages/about.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,65 @@ const Grid = styled.div`
padding-top: ${props => props.paddingTop}em;
`;

const Team = styled.div`
display: grid;
grid-template-area:
"image image image image image"
"name name name name name"
"caption caption caption caption caption";
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1px 1px;
padding-left: 8em;
padding-right: 8em;
gap: 2em;
padding-top: 0;
`;

const Middle = styled.div`
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
`;

const Profile = styled.div`
background-image: url(${props => props.src});
background-size: cover;
border: 1px solid black;
border-radius: 50%;
opacity: 1;
display: block;
width: 225px;
height: 225px;
transition: .5s ease;
backface-visibility: hidden;
`;

const ProfileContainer = styled.div`
position: relative;
width: 100%;
border-radius: 50%;
&:hover {
${Middle} {
opacity: 1;
}
${Profile} {
opacity: 0.3;
}
}
`;

const Github = styled.text`
background-color: #2b3137;
color: #fafbfc;
font-size: 16px;
padding: 16px 32px;
`;

const Caption = styled.caption`
caption-side: bottom;
padding-left: ${props => props.paddingLeft};
Expand Down Expand Up @@ -97,16 +156,8 @@ const About = () => {
</Wrapper>
</BigWrapper>

{/* <Body>
Aaron Ahmadyar
Killian Brait
Luis D. Garcia
Junseo Lee
Wesley Luu
</Body> */}

<Title fontSize = "2.5">
Welcome to CookMyFridge!
Welcome to CookMyFridge
</Title>

<Body
Expand Down Expand Up @@ -163,12 +214,64 @@ const About = () => {
By utilizing technology and leveraging our expertise in computer engineering and computer science, we aim to empower individuals to make the most of the ingredients they already have, thereby reducing food waste and promoting sustainability. We envision a future where cooking becomes effortless and enjoyable, while also contributing to a more environmentally conscious society.
</Body>

<BigWrapper height = "100px"></BigWrapper>
<BigWrapper height = "50px"></BigWrapper>

<Title fontSize = "2.5">
Meet the team!
</Title>
<BigWrapper height = "25px"></BigWrapper>
<Team>

<ProfileContainer>
<Profile src="https://avatars.githubusercontent.com/u/87344382?v=4" alt="luisdavidgarcia"></Profile>
<Middle>
<a href="https://github.com/luisdavidgarcia" target="-blank"><Github>Github</Github></a>
</Middle>
</ProfileContainer>

<ProfileContainer>
<Profile src="https://avatars.githubusercontent.com/u/73966214?v=4" alt="junseolee"></Profile>
<Middle>
<a href="https://github.com/junseo-lee-git" target="-blank"><Github>Github</Github></a>
</Middle>
</ProfileContainer>

<ProfileContainer>
<Profile src="https://avatars.githubusercontent.com/u/76977316?v=4" alt="wesleyluu"></Profile>
<Middle>
<a href="https://github.com/Westluu" target="-blank"><Github>Github</Github></a>
</Middle>
</ProfileContainer>

<ProfileContainer>
<Profile src="https://avatars.githubusercontent.com/u/99124944?v=4" alt="aaronahmadyar"></Profile>
<Middle>
<a href="https://github.com/aahmadyar123" target="-blank"><Github>Github</Github></a>
</Middle>
</ProfileContainer>

<ProfileContainer>
<Profile src="https://avatars.githubusercontent.com/u/23425894?v=4" alt="killianbrait"></Profile>
<Middle>
<a href="https://github.com/killian-brait" target="-blank"><Github>Github</Github></a>
</Middle>
</ProfileContainer>

<Title fontSize="1.25">Luis Garcia</Title>
<Title fontSize="1.25">Junseo Lee</Title>
<Title fontSize="1.25">Wesley Luu</Title>
<Title fontSize="1.25">Aaron Ahmadyar</Title>
<Title fontSize="1.25">Killian Brait</Title>

<Caption>Front-End Developer</Caption>
<Caption>Front-End Developer</Caption>
<Caption>Full Stack Developer</Caption>
<Caption>Back-End Developer</Caption>
<Caption>Back-End Developer</Caption>

</Team>

<BigWrapper height="100px"></BigWrapper>

</>
);
Expand Down
Loading

0 comments on commit fd4d301

Please sign in to comment.