style profile page

Author: Easybuoy

src/App.js

@@ -1,60 +1,61 @@
 // dependencies
-import React, { Component } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { ToastContainer } from 'react-toastify';
+import React, { Component } from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
 
 // components
-import Dashboard from './components/Dashboard';
-import Home from './components/Home';
-import Navbar from './components/Navbar';
-import Register from './components/Register';
-import Login from './components/Login';
-import CategoriesList from './components/Category/CategoriesList';
-import PrivateRoute from './components/PrivateRoute';
-import Items from './components/Items';
-import Item from './components/Item';
-import NotFound from './components/NotFound';
-import AddItem from './components/AddItem';
-import UpdateItem from './components/UpdateItem';
-import User from './components/User';
+import Dashboard from "./components/Dashboard";
+import Home from "./components/Home";
+import Navbar from "./components/Navbar";
+import Register from "./components/Register";
+import Login from "./components/Login";
+import CategoriesList from "./components/Category/CategoriesList";
+import PrivateRoute from "./components/PrivateRoute";
+import Items from "./components/Items";
+import Item from "./components/Item";
+import NotFound from "./components/NotFound";
+import AddItem from "./components/AddItem";
+import UpdateItem from "./components/UpdateItem";
+import User from "./components/User";
 
 // styles
-import './App.scss';
-import 'react-toastify/dist/ReactToastify.min.css';
-import Footer from './components/Footer';
+import "./App.scss";
+import "react-toastify/dist/ReactToastify.min.css";
+import Footer from "./components/Footer";
 
 class App extends Component {
  render() {
  return (
  <Router>
  <Navbar />
-
- <Switch>
- <Route exact path='/' component={Home} />
- <Route path='/login' component={Login} />
- <Route path='/register' component={Register} />
- <Route
- exact
- path='/category/:category_id'
- component={CategoriesList}
- />
- <Route path='/items' component={Items} />
- <PrivateRoute exact path='/profile' component={Dashboard} />
- <PrivateRoute exact path='/profile/add' component={AddItem} />
- <Route exact path='/item/:id' component={Item} />
- <PrivateRoute
- exact
- path='/profile/update/:id'
- component={UpdateItem}
- />
- <PrivateRoute exact path='/user/:id' component={User} />
- <Route path='*' component={NotFound} />
- </Switch>
+ <div style={{ minHeight: "100vh" }} className="">
+ <Switch>
+ <Route exact path="/" component={Home} />
+ <Route path="/login" component={Login} />
+ <Route path="/register" component={Register} />
+ <Route
+ exact
+ path="/category/:category_id"
+ component={CategoriesList}
+ />
+ <Route path="/items" component={Items} />
+ <PrivateRoute exact path="/profile" component={Dashboard} />
+ <PrivateRoute exact path="/profile/add" component={AddItem} />
+ <Route exact path="/item/:id" component={Item} />
+ <PrivateRoute
+ exact
+ path="/profile/update/:id"
+ component={UpdateItem}
+ />
+ <PrivateRoute exact path="/user/:id" component={User} />
+ <Route path="*" component={NotFound} />
+ </Switch>
+ </div>
 
  <Footer />
  <ToastContainer
  autoClose={3000}
- position='top-right'
+ position="top-right"
  hideProgressBar={true}
  />
  </Router>

src/components/Dashboard.js

@@ -172,9 +172,9 @@ class Dashboard extends React.Component {
  src={userItem.image_url}
  alt="Item"
  />
- <a href="#!">
+ <Link to={`/item/${userItem.id}`}>
  <div className="mask rgba-white-slight" />
- </a>
+ </Link>
  </div>
 
  <div className="card-body">
@@ -190,7 +190,7 @@ class Dashboard extends React.Component {
  type="button"
  className="btn btn-block my-4 w-50"
  >
- <Link to={`/item/${userItem.id}`}>Edit</Link>
+ <Link to={`/profile/update/${userItem.id}`}>Edit</Link>
  </Button>
 
  <Button

src/components/Login.js

@@ -44,10 +44,11 @@ class Login extends React.Component {
  }
 
  if (error) {
- toast.error(error);
+ toast.error("Error Login In, Please Try Again");
  }
 
  return (
+ 
  <div className="mt-5 mb-5">
  <Form
  className="text-center border border-light p-5 w-50 text-center m-auto mb-5"
@@ -61,6 +62,7 @@ class Login extends React.Component {
  onChange={this.handleChange}
  className="form-control mb-4"
  placeholder="Enter Username"
+ required
  />
 
  <Input
@@ -70,6 +72,7 @@ class Login extends React.Component {
  onChange={this.handleChange}
  className="form-control mb-4"
  placeholder="Enter Password"
+ required
  />
 
  <div className="d-flex justify-content-around" />

src/components/Register.js

@@ -18,7 +18,8 @@ class Register extends Component {
  email: "",
  state: "",
  town: "",
- password: ""
+ password: "",
+ location: ""
  };
 
  handleChange = e => {
@@ -85,15 +86,15 @@ class Register extends Component {
  required
  />
 
- {/* <Input
+ <Input
  type="text"
  name="location"
  value={this.state.location}
  onChange={this.handleChange}
  placeholder="Location"
  className="form-control mb-4"
  required
- /> */}
+ />
 
  <Input
  type="text"

src/styles/Styles.js

@@ -562,6 +562,10 @@ const Form = styled.form`
  p {
  font-family: "Ubuntu", sans-serif;
  }
+
+ @media (max-width: 770px) {
+ width: 90% !important;
+ }
 `;
 
 const Profile = styled.div`