diff --git a/wtwui/.gitignore b/wtwui/.gitignore index 4d29575de80483b005c29bfcac5061cd2f45313e..529310e3b8c2ab94933cc523161962dc38f048fc 100644 --- a/wtwui/.gitignore +++ b/wtwui/.gitignore @@ -4,7 +4,7 @@ /node_modules /.pnp .pnp.js - +.package-lock.json # testing /coverage diff --git a/wtwui/package.json b/wtwui/package.json index 57f81b7cc59858509c159448f0fc7b8a893bfdbf..76722de3f235c79e43767ebf6835efb5ebfe5636 100644 --- a/wtwui/package.json +++ b/wtwui/package.json @@ -6,7 +6,9 @@ "@testing-library/jest-dom": "^5.11.10", "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^12.8.3", + "bootstrap": "^4.6.0", "react": "^17.0.2", + "react-bootstrap": "^1.5.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "web-vitals": "^1.1.1" diff --git a/wtwui/src/App.js b/wtwui/src/App.js index 37845757234ccb68531c10cf7a2ffc589c47e342..40419f4dc0c7b78f4d5b95fdef71dcb2a16fa0ac 100644 --- a/wtwui/src/App.js +++ b/wtwui/src/App.js @@ -1,23 +1,16 @@ -import logo from './logo.svg'; -import './App.css'; +import logo from "./logo.svg"; + +import "./App.css"; +import Navbar from "./components/Navbar"; +import "bootstrap/dist/css/bootstrap.css"; +import Dashboard from "./components/Dashboard"; 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> + <Navbar></Navbar> + + <Dashboard></Dashboard> </div> ); } diff --git a/wtwui/src/Images/Blog.svg b/wtwui/src/Images/Blog.svg new file mode 100644 index 0000000000000000000000000000000000000000..2b019adf9a1b3aae9c0a4fc40f0731e8b990a83c --- /dev/null +++ b/wtwui/src/Images/Blog.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.07 98.61"><defs><style>.cls-1{fill:#231f20;}.cls-2{font-size:22.41px;fill:#d1b22b;font-family:Galvji-Bold, Galvji;font-weight:700;letter-spacing:0.2em;}</style></defs><g id="Artboard_4" data-name="Artboard 4"><rect class="cls-1" x="8.69" y="15.78" width="94.7" height="58.81" rx="12"/><polygon class="cls-1" points="75.02 74.59 48.74 92.74 56.03 74.59 75.02 74.59"/><text class="cls-2" transform="translate(17.67 51.79)">BLOG</text></g></svg> \ No newline at end of file diff --git a/wtwui/src/Images/Logo.png b/wtwui/src/Images/Logo.png new file mode 100644 index 0000000000000000000000000000000000000000..63153d28189366edbc575be83ea92a2a704a3bd9 Binary files /dev/null and b/wtwui/src/Images/Logo.png differ diff --git a/wtwui/src/Images/Logo.svg b/wtwui/src/Images/Logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..4a58951cf31ae87b1b2858f304e1851173147cfc --- /dev/null +++ b/wtwui/src/Images/Logo.svg @@ -0,0 +1 @@ +<svg id="Artboard_1" data-name="Artboard 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.98 34.07"><defs><style>.cls-1,.cls-2{fill:#231f20;}.cls-2{font-size:3.77px;font-family:Galvji-Bold, Galvji;font-weight:700;}.cls-3{fill:#d1b22b;}</style></defs><path class="cls-1" d="M40.19,16.92a126.62,126.62,0,0,0-19.62,3.37c-.24-.95-.49-1.9-.74-2.84A128.61,128.61,0,0,1,39.88,14C40,15,40.09,16,40.19,16.92Z"/><path class="cls-1" d="M85,16.79a129.77,129.77,0,0,1,20.25,3.47c.24-1,.49-1.89.74-2.84a134.34,134.34,0,0,0-20.68-3.55C85.24,14.84,85.14,15.81,85,16.79Z"/><text class="cls-2" transform="translate(42.57 28.87)"><tspan xml:space="preserve">WORTH THE WEIGHT</tspan></text><path class="cls-1" d="M51.35,23.11q-1.71-5.59-3.51-11.17-1.29,5.72-2.49,11.44l-2.79.16q-3-8.74-6.35-17.45c1.33-.11,2.67-.2,4-.29q1.76,5.47,3.42,11,1.08-5.66,2.24-11.29l3.36-.16q1.68,5.52,3.26,11.05,1.15-5.61,2.41-11.23l4-.07q-2.5,9-4.74,18Q52.76,23,51.35,23.11Z"/><path class="cls-1" d="M44.75,22.68l-1.68.1q-2.77-8-5.79-16l2.37-.17q2.12,6.56,4.09,13.13h.09q1.28-6.77,2.68-13.52l2.15-.1q2,6.6,3.89,13.23h.09Q54,12.57,55.53,5.85l2.37,0Q55.64,14,53.59,22.3l-1.71.06q-2-6.56-4.11-13.08h-.1Q46.14,16,44.75,22.68Z"/><path class="cls-1" d="M61.28,22.9q0-7.33-.07-14.67c-1.76,0-3.51,0-5.27.06l-.06-3.18Q63,5,70.05,5.11L70,8.29c-1.75,0-3.51-.06-5.26-.06q0,7.33-.07,14.67Z"/><path class="cls-1" d="M63.93,22.17H62q0-7.34,0-14.68-2.64,0-5.28.06l0-1.72q6.3-.12,12.61,0l0,1.72c-1.76,0-3.51,0-5.27-.06Q64,14.83,63.93,22.17Z"/><path class="cls-1" d="M80.55,23.38q-1.18-5.73-2.48-11.44-1.81,5.58-3.51,11.17c-.93,0-1.86-.07-2.8-.09q-2.22-9-4.74-18l4,.07q1.26,5.61,2.42,11.23,1.57-5.53,3.25-11l3.37.16q1.17,5.64,2.24,11.29,1.67-5.49,3.42-11c1.33.09,2.67.18,4,.29q-3.31,8.7-6.35,17.45Z"/><path class="cls-1" d="M74,22.36l-1.68-.06Q70.3,14.05,68,5.81l2.37,0q1.51,6.72,2.89,13.45h.09q1.88-6.63,3.89-13.23l2.15.1q1.41,6.75,2.68,13.52h.09q2-6.58,4.09-13.13l2.37.17q-3,8-5.79,16l-1.7-.1Q79.77,16,78.24,9.28h-.1Q76,15.81,74,22.36Z"/><rect class="cls-3" x="19.35" y="6.46" width="3" height="23.96" rx="1.5" transform="translate(44.59 32.97) rotate(170)"/><rect class="cls-3" x="15.74" y="12.31" width="3" height="15.09" rx="1.5" transform="translate(-3.19 3.3) rotate(-10)"/><path class="cls-3" d="M2.56,18.54l0,.3h0L7.49,18a.51.51,0,1,1,.18,1l-4.88.87h0l.13.75h0l4.89-.86a.51.51,0,0,1,.17,1l-4.88.87h0l.13.75h0l4.89-.86a.51.51,0,0,1,.6.42h0a.5.5,0,0,1-.42.59l-4.89.87h0l.13.75h0l4.89-.86a.51.51,0,0,1,.6.42.5.5,0,0,1-.42.59l-4.89.87h0l.1.54a.52.52,0,0,0,.6.42l5.84-1a2.51,2.51,0,0,0,2-2.91L11.73,19a2.51,2.51,0,0,0-2.91-2L3,17.94A.51.51,0,0,0,2.56,18.54Z"/><path class="cls-3" d="M14.87,21.32,11,22.74c-.27.05-.65-1.17-.76-1.84h0c-.12-.67-.18-1.92.09-2l4.16,0C14.71,18.85,15.14,21.28,14.87,21.32Z"/><rect class="cls-3" x="102.89" y="6.46" width="3" height="23.96" rx="1.5" transform="translate(4.79 -17.85) rotate(10)"/><rect class="cls-3" x="106.5" y="12.31" width="3" height="15.09" rx="1.5" transform="translate(210.9 58.17) rotate(-170)"/><path class="cls-3" d="M111,18.7l5.39.25c.35.06.33,1.35.2,2h0c-.12.67-.54,1.85-.9,1.79l-5.13-1.64C110.23,21.06,110.67,18.63,111,18.7Z"/><ellipse class="cls-3" cx="119.8" cy="21.61" rx="4.27" ry="5.92" transform="translate(77.08 135.6) rotate(-79.68)"/></svg> \ No newline at end of file diff --git a/wtwui/src/Images/Recipe.svg b/wtwui/src/Images/Recipe.svg new file mode 100644 index 0000000000000000000000000000000000000000..d7ede8ad453f0f76904a379c75df749e9e05c4f3 --- /dev/null +++ b/wtwui/src/Images/Recipe.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.07 98.61"><defs><style>.cls-1{fill:#231f20;stroke:#231f20;stroke-miterlimit:10;stroke-width:0.25px;}.cls-2{fill:#d1b22b;}.cls-3{fill:#f7ec13;}.cls-4{fill:#e32028;}.cls-5{fill:#e41e26;}.cls-6{fill:#63923f;}.cls-7{fill:#d2d3ab;}.cls-8{fill:#e15526;}</style></defs><g id="Artboard_2" data-name="Artboard 2"><path class="cls-1" d="M104.41,47.52c6,10.83-17.52,48.37-48.37,48.37S1.62,58.35,7.66,47.52c2.82-5,10.93-2.29,48.82-2.3C93.72,45.21,101.64,42.54,104.41,47.52Z"/><path class="cls-2" d="M44.58,75.58q-1.68-5.51-3.46-11-1.27,5.64-2.45,11.28L35.91,76q-3-8.62-6.26-17.21l3.94-.29q1.74,5.4,3.38,10.82Q38,63.75,39.18,58.19c1.1-.06,2.21-.11,3.31-.15q1.65,5.43,3.21,10.89,1.15-5.54,2.39-11.07c1.31,0,2.63-.06,3.94-.07q-2.47,8.84-4.67,17.71Z"/><path class="cls-2" d="M38.07,75.16l-1.66.1q-2.73-7.94-5.71-15.82L33,59.27q2.09,6.46,4,12.95h.09q1.24-6.68,2.64-13.34l2.12-.1q2,6.51,3.83,13h.09q1.36-6.63,2.85-13.26l2.34,0q-2.24,8.13-4.25,16.27l-1.68,0q-2-6.45-4.06-12.89H41Q39.43,68.55,38.07,75.16Z"/><path class="cls-2" d="M54.38,75.38q0-7.23-.08-14.47L49.11,61c0-1,0-2.09-.07-3.13q7-.15,14,0c0,1-.05,2.09-.07,3.13-1.73,0-3.45,0-5.18-.06L57.7,75.38Z"/><path class="cls-2" d="M57,74.66H55.1q0-7.25-.05-14.48c-1.73,0-3.47,0-5.2.06l0-1.7q6.21-.1,12.43,0l0,1.7q-2.59,0-5.19-.06Q57,67.43,57,74.66Z"/><path class="cls-2" d="M73.38,75.85q-1.17-5.64-2.45-11.28c-1.19,3.66-2.34,7.34-3.46,11l-2.76-.08Q62.51,66.62,60,57.79c1.31,0,2.63,0,3.94.07q1.25,5.53,2.39,11.07Q67.93,63.47,69.58,58c1.1,0,2.21.09,3.31.15Q74,63.76,75.1,69.33q1.65-5.41,3.38-10.82l3.94.29Q79.15,67.38,76.16,76Z"/><path class="cls-2" d="M66.94,74.84l-1.66,0q-2-8.15-4.25-16.27l2.34,0q1.49,6.63,2.85,13.26h.09q1.84-6.54,3.83-13l2.12.1q1.39,6.66,2.64,13.34H75q2-6.48,4-12.95l2.34.17q-3,7.89-5.71,15.82L74,75.16Q72.61,68.55,71.1,62H71Q68.9,68.39,66.94,74.84Z"/><path class="cls-3" d="M81.72,33.63l1,1.77a9.42,9.42,0,0,0,5.28-1,12.64,12.64,0,0,0,3-2.74c2.41-2.71,3.53-6.88,3.27-11.29-.12-2.15-.41-4.2-2-5.8s-4-2.22-6.14-2.79a20.61,20.61,0,0,0-2.42-.49l-1.9-.89-.36-.16c-.13-.07-.36.19-.56.52s-.42.91-.26,1l.27.15,1.4.81q11.35,8.75.93,18.45A8.19,8.19,0,0,0,81.72,33.63Z"/><path d="M81.79,34.75c-.07.1.85.75.92.65l-1-1.77C81.53,33.64,81.59,34.76,81.79,34.75Z"/><path d="M81.2,12,82,10.47l-.55-.25c-.28-.16-1.11,1.36-.82,1.52Z"/><path class="cls-4" d="M58.15,10.25c1.11-8.28,17-6.14,15.9,2.13Z"/><circle class="cls-4" cx="74.11" cy="38.43" r="3.37"/><path class="cls-5" d="M44.11,42C44.37,41.47,44,40.83,43,40a17.77,17.77,0,0,0-5.24-2.1c-3.28-1.35-6-2.91-7.51-5-2.06-2.78-2.65-5.64-1.47-8.61.67-2,1-3.74-.11-4.47A9.81,9.81,0,0,1,25,18.37c-1.31-.54-2.28.53-3,2.94a17.71,17.71,0,0,0,3,13.55c3.75,5.43,9.43,7,16.37,6.19a4,4,0,0,1,2.46,1.1"/><path class="cls-6" d="M28.58,19.87a1.52,1.52,0,0,1-.51-.25c-.65-.49-.43-1.45.65-2.87a12.06,12.06,0,0,1,2-1.78c.1-.3-.08-.46-.56-.45-.7,0-1.57.67-2.62,2.17l-.74.89a1.53,1.53,0,0,1-1.5.87L25,18.4l2,1"/><circle class="cls-6" cx="41.22" cy="9.16" r="5.61"/><path class="cls-7" d="M64.44,33.78c1.1-2-3.3-9-9-9s-10.08,7-9,9,8.17.9,9-1.45c.2-.59.07-1.5.21-1.51s.26,1.06.6,1.73C57.5,34.9,63.47,35.5,64.44,33.78Z"/><path class="cls-7" d="M54.81,30.57c.12,1.62.23,3.23.35,4.84-2.28.87-1.88,1.86,0,2.91,1.67.31,2.55,0,2.81-.93s.21-1.49-1.25-2.18c0-1.55.07-3.1.11-4.65"/><circle class="cls-8" cx="66.77" cy="20.37" r="2.45"/></g></svg> \ No newline at end of file diff --git a/wtwui/src/Images/Workout.svg b/wtwui/src/Images/Workout.svg new file mode 100644 index 0000000000000000000000000000000000000000..81821d736e6773aefc5fbb0fbaa3e80fe223d474 --- /dev/null +++ b/wtwui/src/Images/Workout.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.07 98.61"><defs><style>.cls-1{fill:#231f20;}.cls-2,.cls-3{fill:none;stroke-miterlimit:10;}.cls-2{stroke:#231f20;}.cls-3{stroke:#d1b22b;stroke-width:2px;}</style></defs><g id="Artboard_3" data-name="Artboard 3"><rect class="cls-1" x="33.96" y="51.79" width="41.46" height="3.6"/><rect class="cls-2" x="29.15" y="37.16" width="4.81" height="32.87" rx="0.46"/><rect class="cls-2" x="24.43" y="41.16" width="4.71" height="24.87" rx="0.46"/><rect class="cls-2" x="75.42" y="37.16" width="4.81" height="32.87" rx="0.46" transform="translate(155.65 107.19) rotate(180)"/><path class="cls-2" d="M82.59,41.16a2.36,2.36,0,0,0-2.36,2.36V63.67a2.36,2.36,0,0,0,4.72,0V43.52A2.36,2.36,0,0,0,82.59,41.16Z"/><path class="cls-3" d="M54.91,25.26c-11.77-14.12-22.78-12.77-33.23,0-5.05,8.07-4.7,16.48,0,25.15l.69,1.38"/><path class="cls-3" d="M36.47,68.11,51.85,80.37c2.76,2.06,3.58,5.2,3.77,8.69"/><path class="cls-3" d="M74.12,67.55l-14,12.59c-2.52,2.11-3.26,5.34-3.43,8.92"/><path class="cls-3" d="M54.11,25.26c11.77-14.12,22.78-12.77,33.22,0,5.06,8.07,4.71,16.48,0,25.15l-.68,1.38"/></g></svg> \ No newline at end of file diff --git a/wtwui/src/components/Dashboard.js b/wtwui/src/components/Dashboard.js new file mode 100644 index 0000000000000000000000000000000000000000..953ca6b0f73332e35c86c35924f3ebd278edb5d1 --- /dev/null +++ b/wtwui/src/components/Dashboard.js @@ -0,0 +1,42 @@ +import React, { Fragment } from "react"; + +import logo from "../Images/Logo.svg"; +import workout from "../Images/Workout.svg"; +import blog from "../Images/Blog.svg"; +import recipe from "../Images/Recipe.svg"; + +import Tile from "./Tile"; + +export default function Dashboard() { + return ( + <Fragment> + <Tile + logo={workout} + logo2={recipe} + logo3={blog} + cardTitle={"Workouts"} + cardText={"View workouts for targeted areas"} + stylecss={{ + width: 18 + "rem", + height: 30 + "rem", + }} + /> + {/* <Tile + logo={logo} + cardTitle={"Recipes"} + stylecss={{ + width: 18 + "rem", + height: 30 + "rem", + }} + /> + <Tile + logo={logo} + cardTitle={"Blog"} + stylecss={{ + width: 18 + "rem", + height: 30 + "rem", + }} + /> */} + </Fragment> + ); +} diff --git a/wtwui/src/components/Navbar.js b/wtwui/src/components/Navbar.js new file mode 100644 index 0000000000000000000000000000000000000000..be968d253b288cc22a1ba61465a35cbee3abbf53 --- /dev/null +++ b/wtwui/src/components/Navbar.js @@ -0,0 +1,92 @@ +import React, { Component } from "react"; +import logo from "../Images/Logo.svg"; +import "../css/Navbar.css"; + +export class Navbar extends Component { + render() { + return ( + <nav className="navbar navbar-expand-lg navbar-light bg-light"> + <div className="container-fluid"> + <button + className="navbar-toggler" + type="button" + data-bs-toggle="collapse" + data-bs-target="#navbarSupportedContent" + aria-controls="navbarSupportedContent" + aria-expanded="false" + aria-label="Toggle navigation" + > + <span className="navbar-toggler-icon"></span> + </button> + <a className="navbar-brand" href="#"> + <img + src={logo} + alt="Logo" + width="300" + height="90" + textalign="center" + ></img> + </a> + <div className="collapse navbar-collapse" id="navbarSupportedContent"> + <ul className="navbar-nav me-auto mb-2 mb-lg-0"> + <li className="nav-item"> + <a className="nav-link active" aria-current="page" href="#"> + Home + </a> + </li> + <li className="nav-item"> + <a className="nav-link" href="#"> + Link + </a> + </li> + <li className="nav-item dropdown"> + <a + className="nav-link dropdown-toggle" + href="#" + id="navbarDropdown" + role="button" + data-bs-toggle="dropdown" + aria-expanded="false" + > + Dropdown + </a> + <ul className="dropdown-menu" aria-labelledby="navbarDropdown"> + <li> + <a className="dropdown-item" href="#"> + Action + </a> + </li> + <li> + <a className="dropdown-item" href="#"> + Another action + </a> + </li> + <li> + <hr className="dropdown-divider"></hr> + </li> + <li> + <a className="dropdown-item" href="#"> + Something else here + </a> + </li> + </ul> + </li> + <li className="nav-item"> + <a + className="nav-link disabled" + href="#" + tabIndex="-1" + aria-disabled="true" + > + Disabled + </a> + </li> + </ul> + </div> + </div> + </nav> + ); + } +} + +export default Navbar; diff --git a/wtwui/src/components/Tile.js b/wtwui/src/components/Tile.js new file mode 100644 index 0000000000000000000000000000000000000000..fafc033040a1f5b58d98f1ec03f861427b3d52e2 --- /dev/null +++ b/wtwui/src/components/Tile.js @@ -0,0 +1,60 @@ +// import logo from "../Images/Logo.png"; +import blog from "../Images/Blog.svg"; +import recipe from "../Images/Recipe.svg"; + +// import { Card, CardGroup } from "reactstrap"; +import "bootstrap/dist/css/bootstrap.min.css"; +import { Card, Button, CardGroup } from "react-bootstrap"; +// import Button from "@bit/react-bootstrap.react-bootstrap.button"; +// import Card from "@bit/react-bootstrap.react-bootstrap.card"; +export default function Tile(props) { + return ( + // <div className="card1" style={props.stylecss}> + // <img className="card-img-top" src={props.logo} alt="Card image cap"></img> + // <div className="card-body" style={props.cbodycss}> + // <h5 className="card-title">{props.cardTitle}</h5> + // <p className="card-text">{props.cardText}</p> + + // <a href={props.url} className="btn btn-primary"> + // Select + // </a> + // </div> + // </div> + <div> + <br></br> + <br></br> + <CardGroup> + <Card> + <Card.Img variant="top" src={props.logo} /> + <Card.Body> + <Card.Title>Workout</Card.Title> + <Card.Text>View workouts for targeted area</Card.Text> + </Card.Body> + <a href={props.url} className="btn btn-primary"> + Workouts + </a> + </Card> + <Card> + <Card.Img variant="top" src={props.logo2} /> + <Card.Body> + <Card.Title>Recipe </Card.Title> + <Card.Text>Prep your next meal here.</Card.Text> + </Card.Body> + <a href={props.url} className="btn btn-primary" > + Recipes + </a> + </Card> + <Card> + <Card.Img variant="top" src={props.logo3} /> + <Card.Body> + <Card.Title>Blog</Card.Title> + <Card.Text>Connect with other user's.</Card.Text> + </Card.Body> + <a href={props.url} className="btn btn-primary"> + Blog + </a> + </Card> + </CardGroup> + </div> + ); +} diff --git a/wtwui/src/css/Navbar.css b/wtwui/src/css/Navbar.css new file mode 100644 index 0000000000000000000000000000000000000000..89009034ec01e2fd54569fde290305f9654ed5a4 --- /dev/null +++ b/wtwui/src/css/Navbar.css @@ -0,0 +1,16 @@ +.navbar-brand { + transform: translateX(-50%); + left: 50%; + position: absolute; +} + +/* DEMO example styles for logo image */ +.navbar-brand { + padding: 0px; + +} +.navbar-brand > img { + height: 240; + width: 200; + padding: 7px 14px; +} diff --git a/wtwui/src/css/Tile.css b/wtwui/src/css/Tile.css new file mode 100644 index 0000000000000000000000000000000000000000..025e2f1dc9c3b112eb3aa103e79d5f70466e096c --- /dev/null +++ b/wtwui/src/css/Tile.css @@ -0,0 +1,7 @@ +.btn-primary { + width: 50%; +} + +.btn-primary:hover { + background-color: darkgoldenrod; +}