Skip to content

Commit

Permalink
Merge pull request #7 from kawtarzz/styling
Browse files Browse the repository at this point in the history
Styling
  • Loading branch information
kawtarzz authored Sep 16, 2023
2 parents 016d8e7 + 325168f commit b0a74a3
Show file tree
Hide file tree
Showing 18 changed files with 413 additions and 245 deletions.
5 changes: 0 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"homepage": "http://kawtarzz.github.io/cooki-jar",
"name": "cooki-jar",
"version": "0.1.0",
"private": true,
Expand All @@ -23,7 +22,6 @@
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
Expand All @@ -45,8 +43,5 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^6.0.0"
}
}
59 changes: 48 additions & 11 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,60 @@
text-align: center;
}

.App-logo {
height: auto;
pointer-events: all;
h1 {
font-family: 'Cambria';
color: rgb(0, 0, 0);
font-size: relative;
justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
h2 {
font-family: 'Cambria';
color: rgb(0, 0, 0);
font-size: relative;
}

h3 {
font-family: 'Verdana';
color: rgb(0, 0, 0);
font-size: relative;
}

h4,
h5 {
font-family: 'Verdana';
color: rgb(0, 0, 0);
font-size: relative;
}

.navbar-brand {
display: flex;
align-items: center;
}

.navbar-brand>img {
padding: 5px 1px;
}

.App-header {
min-height: 0vh;


.cardContainer {
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
justify-content: center;
font-size: calc(10px + 2vmin);
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

body {
min-height: 80vh;
display: grid;
Expand All @@ -38,3 +65,13 @@ body {
footer {
margin-top: auto;
}

.button__tasks {
background-color: #03004F;
border: 1px solid rgb(0, 6, 26);
color: #03004f;
padding: 6px 24px;
margin: 3rem 1rem;
display: inline-block;
font-size: 18px;
}
51 changes: 27 additions & 24 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,33 +1,36 @@
import { Authorized } from "./components/views/Authorized.js"
import ApplicationViews from "./components/views/ApplicationViews.js"
import AppNavBar from "./components/nav/NavBar.js"
import { Login } from "./components/auth/Login.js"
import { Register } from "./components/auth/Register.js"
import { Route, Routes } from "react-router-dom"
import './index.css'

import { Outlet, Route, Routes } from "react-router-dom"
import Home from "./components/Home"
import { Login } from "./components/auth/Login"
import { Register } from "./components/auth/Register"
import TaskList from "./components/tasks/TaskList"
import { useState, useEffect } from "react"
import RewardsList from "./components/rewards/Rewards"
import { Navbar } from "react-bootstrap"
import Nav from './components/Navbar'
import Header from "./components/ui/Header"
import ApplicationViews from "./components/views/ApplicationViews"
import { Authorized } from './components/views/Authorized'
import { ButtonAction } from "./components/ui/ButtonAction"
export const App = () => {
return <>

<Routes>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />

<Route path="*" element={
<Authorized><>


<AppNavBar />

return (
<>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="*" element={
<Authorized><>
<Nav />
<Header />
<ApplicationViews />

</>
</Authorized>} />
</Routes>
</>
)

</>
</Authorized>} />
</Routes>

</>
}

export default App;

21 changes: 21 additions & 0 deletions src/components/Home.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// import Header from './ui/Header';
// import React from 'react';
// import { ButtonAction } from './ui/ButtonAction';
// import { Outlet, Route, Routes } from "react-router-dom"
// import Navbar from './Navbar'
// import { Container, Nav } from 'react-bootstrap';

// const Home = () => {
// return (
// <>
// <Container>
// <Header />
// <ButtonAction />
// <Outlet />
// </Container>
// </>

// )
// }

// export default Home;
55 changes: 55 additions & 0 deletions src/components/Navbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Icon from './img/logo-icon.svg'

function nav() {
const localcookiJarUser = localStorage.getItem("cookijar_user");
const cookijarUserObject = JSON.parse(localcookiJarUser)

return (
<Navbar bg="primary" className="m-auto" data-bs-theme="dark" expand="lg">
<Navbar.Brand href="/home">
<img
alt=""
src={Icon}
width="160"
height="160"
className="d-inline-block align-center"
/>{' '} CookiJar
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="/tasks">To-do</Nav.Link>
<Nav.Link href="/tasks/new"> + New Task </Nav.Link>
<NavDropdown title={`${cookijarUserObject.name}'s Jar`} id="basic-nav-dropdown">
<NavDropdown.Item href="/createreward">
+ New Reward
</NavDropdown.Item>
<NavDropdown.Item href="/rewards">
Cash-In
</NavDropdown.Item>
<NavDropdown.Item href="/rewards">
Rewards List
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href={`/users/${cookijarUserObject.id}`}>
My Account
</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="/logout" onClick={() => {
localStorage.removeItem("cookijar_user")
}}>
Logout
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}

export default nav;
55 changes: 23 additions & 32 deletions src/components/auth/Login.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom"
import { Link } from "react-router-dom"
import "./Login.css"
import { Card } from "react-bootstrap"
import Logo from "./Logo.svg";
import Logo from "../img/logo.svg"
import Button from "react-bootstrap/Button"

export const Login = () => {
Expand All @@ -21,9 +21,10 @@ export const Login = () => {
localStorage.setItem("cookijar_user", JSON.stringify({
id: user.id,
name: user.name,
email: user.email
email: user.email,
points: user.points
}))
navigate("/")
navigate("/home")
window.alert('Welcome back ' + user.name + '!')
}
else {
Expand All @@ -34,44 +35,34 @@ export const Login = () => {

return (
<main className="container--login">
<Card className="form--login">
<section>
<form className="form--login" onSubmit={handleLogin}>
<Card.Header>
<center>
<img src={Logo} alt="Login-logo"
width="400"
height="400"

className="Login-Logo" />
<h3>Please sign in</h3>
</center>
</Card.Header>
<Card.Body>

<fieldset>
<label htmlFor="inputEmail"><h3>
<h1>cookiJar</h1>
<h2>Please sign in</h2>
<fieldset>
<label htmlFor="inputEmail"><h3>

</h3>
Email address</label>
<input type="email"
value={email}
onChange={evt => set(evt.target.value)}
className="form-control"
placeholder="Email address"
required autoFocus />
</fieldset>
</Card.Body>
</h3>
Email address</label>
<input type="email"
value={email}
onChange={evt => set(evt.target.value)}
className="form-control"
placeholder="Email address"
required autoFocus />
</fieldset>
<fieldset>
<button type="submit">
Sign in
</button>
</fieldset>
</form>
<section className="link--register">
<Link to="/register">Not a member yet?</Link>
</section>
</Card>
</section>
<section className="link--register">
<Link to="/register">Not a member yet?</Link>
</section>
</main>

)
}

Expand Down
3 changes: 3 additions & 0 deletions src/components/img/logo-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/components/img/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions src/components/nav/CookiNav.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Link, useNavigate } from "react-router-dom"
import { Button } from "react-bootstrap"
import { Navbar } from "react-bootstrap"
import { Container } from "react-bootstrap"
import logo from "./logo.svg"
import { Nav } from "react-bootstrap"


export default function CookiNav() {
const navigate = useNavigate()
return (
<> <Nav className="bg-body-tertiary">
<Container>
<Nav.Link href="/">
<img
alt="logo"
src={logo}
width="200"
height="200"

/>{' '}

</Nav.Link>
<Nav.Link to="/tasks" onClick={() => { navigate("/tasks") }}>Tasks</Nav.Link>{' '}
<Nav.Link to="/create" onClick={() => { navigate("/create"); }}> Add Task</Nav.Link>
<Nav.Link to="/login" className="logout" onClick={() => {
localStorage.removeItem("cookijar_user")
navigate("/", { replace: true })
}}>Logout</Nav.Link >{' '}
</Container>

</Nav>
</>

)
}
1 change: 1 addition & 0 deletions src/components/nav/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit b0a74a3

Please sign in to comment.