Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed_navigation_and_about_page #50

Merged
merged 1 commit into from
May 11, 2023
Merged

fixed_navigation_and_about_page #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 4 additions & 17 deletions client/src/Components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import logo from "../assets/cyf_brand.png";
import { Navbar, Button, Col, Card } from "react-bootstrap";
import ProfileIcone from "./ProfileIcone";
//header component
const Header = ({ user }) => {
const Header = ({ user, text }) => {
return (
<>
<Navbar bg="light" expand="md" className="px-4">
Expand Down Expand Up @@ -37,12 +37,7 @@ const Header = ({ user }) => {
>
<Col></Col>
<Col>
<div>
<h6>
Our all-in-one writing helper tool is designed to reduce mistake,
improve grammar and suggest phrases
</h6>
</div>
<h6>{text}</h6>
</Col>
<Col
xs={4}
Expand All @@ -52,18 +47,10 @@ const Header = ({ user }) => {
xxl={2}
className="justify-content d-flex"
>
<Button
href="/about/this/site"
variant="danger"
style={{ width: "100px" }}
>
<Button href="/" variant="danger" style={{ width: "100px" }}>
Home
</Button>
<Button
href="/about/this/site"
variant="danger"
style={{ width: "100px" }}
>
<Button href="history" variant="danger" style={{ width: "100px" }}>
History
</Button>
</Col>
Expand Down
Binary file added client/src/assets/github.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 83 additions & 10 deletions client/src/pages/About.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,87 @@
const About = () => (
<main role="main">
import React from "react";
import { Col, Navbar, Button, Card, Nav } from "react-bootstrap";
import logo from "../assets/cyf_brand.png";
import TeamLogo from "../assets/TeamLogo.png";
const About = () => {
return (
<div>
<h1>About</h1>
<p>
Starter kit for full-stack JavaScript projects. For more information,
see the wiki:
</p>
<a href="https://github.com/textbook/starter-kit/wiki">Wiki</a>
<Navbar bg="light" expand="md" className="px-4">
<Col xs={4} md={3} lg={3} xl={3} xxl={2}>
<img src={logo} alt="logo" style={{ width: "100%" }} />
</Col>
<Col>
<h3 className="text-center font-weight-bold text-danger">TOOT</h3>
</Col>
<Col
xs={4}
md={3}
lg={3}
xl={3}
xxl={2}
// className="ms-auto justify-content-end d-flex"
></Col>
</Navbar>
<div
className="bg-danger py-3 text-center"
style={{
color: "white",
display: "grid",
gridTemplateColumns: "1fr 4fr 1fr",
}}
>
<Col></Col>
<Col>
<div>
<h6>
Our all-in-one writing helper tool is designed to reduce mistake,
improve grammar and suggest phrases
</h6>
</div>
</Col>
<Col
xs={4}
md={3}
lg={3}
xl={3}
xxl={2}
className="justify-content d-flex"
>
<Button href="/" variant="danger" style={{ width: "100px" }}>
Home
</Button>
</Col>
</div>
<footer
className="bg-danger py-3 border border-dark fixed-bottom "
style={{
color: "red",
display: "flex",
justifyContent: "space-between",
}}
>
<Nav.Link
href="/about/this/site"
style={{ color: "white", textDecoration: "none", marginLeft: "2%" }}
></Nav.Link>
<Card.Img src={TeamLogo} style={{ width: "8%", marginRight: "1%" }} />
</footer>
</div>
</main>
);
);
};

export default About;

// const About = () => (
// <main role="main">
// <div>
// <h1>About</h1>
// <p>
// Starter kit for full-stack JavaScript projects. For more information,
// see the wiki:
// </p>
// <a href="https://github.com/textbook/starter-kit/wiki">Wiki</a>
// </div>
// </main>
// );

// export default About;
2 changes: 1 addition & 1 deletion client/src/pages/History.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const History = () => {

return (
<>
<Header />
<Header text="Refresh your memory with all your saved corrections" />
<main>
<form className="search-input-form">
<textarea name="" id="" cols="30" rows="10"></textarea>
Expand Down
5 changes: 4 additions & 1 deletion client/src/pages/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,10 @@ export function Home({ user }) {

return (
<div>
<Header user={user} />
<Header
user={user}
text="Enter your text and retrieve your corrected results"
/>
{/* <p>Hello World</p>
this the label
<form id="inputForm" onSubmit={onSubmit}>
Expand Down
59 changes: 54 additions & 5 deletions client/src/pages/LandingPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,60 @@
import React from "react";
import { Button, Card } from "react-bootstrap";
import { Button, Card, Col, Navbar } from "react-bootstrap";
import logo from "../assets/cyf_brand.png";
import Footer from "../Components/Footer";
import TeamLogo from "../assets/TeamLogo.png";
import Header from "../Components/Header";
import gitIcon from "../assets/github.png";
// import Header from "../Components/Header";
const LandingPage = () => {
const github = () => {
window.open("http://localhost:3000/api/auth/github", "_self");
};

return (
<>
<Header />
<Navbar bg="light" expand="md" className="px-4">
<Col xs={4} md={3} lg={3} xl={3} xxl={2}>
<img src={logo} alt="logo" style={{ width: "100%" }} />
</Col>
<Col>
<h3 className="text-center font-weight-bold text-danger">TOOT</h3>
</Col>
<Col
xs={4}
md={3}
lg={3}
xl={3}
xxl={2}
// className="ms-auto justify-content-end d-flex"
></Col>
</Navbar>
<div
className="bg-danger py-3 text-center"
style={{
color: "white",
display: "grid",
gridTemplateColumns: "1fr 4fr 1fr",
}}
>
<Col></Col>
<Col>
<div>
<h6>
Our all-in-one writing helper tool is designed to reduce mistake,
improve grammar and suggest phrases
</h6>
</div>
</Col>
<Col
xs={4}
md={3}
lg={3}
xl={3}
xxl={2}
className="justify-content d-flex"
></Col>
</div>
{/* <Header /> */}
<Card
className="text-center"
style={{
Expand All @@ -31,11 +75,16 @@ const LandingPage = () => {
<Button
type="submit"
//href="/about/this/site"
variant="danger "
variant="outline-light"
style={{ marginTop: "20%" }}
onClick={github}
>
Log in with GitHub
<img
src={gitIcon}
alt="Icon"
style={{ height: "50px", borderRadius: "7px" }}
/>
{/* Log in with GitHub */}
</Button>
</Card.Body>
</Card>
Expand Down