- Components page and it's sections are now on hooks

- Run prettier

src/components/Badge/Badge.js

@@ -22,7 +22,6 @@ Badge.defaultProps = {
 };
 
 Badge.propTypes = {
-
   color: PropTypes.oneOf([
     "primary",
     "warning",

src/components/Card/Card.js

@@ -29,7 +29,6 @@ export default function Card(props) {
 }
 
 Card.propTypes = {
-
   className: PropTypes.string,
   plain: PropTypes.bool,
   carousel: PropTypes.bool,

src/components/Card/CardBody.js

@@ -27,7 +27,6 @@ export default function CardBody(props) {
 }
 
 CardBody.propTypes = {
-
   className: PropTypes.string,
   children: PropTypes.node
 };

src/components/Card/CardFooter.js

@@ -27,7 +27,6 @@ export default function CardFooter(props) {
 }
 
 CardFooter.propTypes = {
-
   className: PropTypes.string,
   children: PropTypes.node
 };

src/components/Card/CardHeader.js

@@ -29,7 +29,6 @@ export default function CardHeader(props) {
 }
 
 CardHeader.propTypes = {
-
   className: PropTypes.string,
   color: PropTypes.oneOf(["warning", "success", "danger", "info", "primary"]),
   plain: PropTypes.bool,

src/components/Clearfix/Clearfix.js

@@ -1,6 +1,4 @@
 import React from "react";
-// nodejs library to set properties for components
-import PropTypes from "prop-types";
 
 // mterial-ui components
 import { makeStyles } from "@material-ui/core/styles";
@@ -24,6 +22,4 @@ export default function Clearfix() {
   return <div className={classes.clearfix} />;
 }
 
-Clearfix.propTypes = {
-
-};
+Clearfix.propTypes = {};

src/components/CustomDropdown/CustomDropdown.js

@@ -171,7 +171,6 @@ CustomDropdown.defaultProps = {
 };
 
 CustomDropdown.propTypes = {
-
   hoverColor: PropTypes.oneOf([
     "black",
     "primary",

src/components/CustomInput/CustomInput.js

@@ -79,7 +79,6 @@ export default function CustomInput(props) {
 }
 
 CustomInput.propTypes = {
-
   labelText: PropTypes.node,
   labelProps: PropTypes.object,
   id: PropTypes.string,

src/components/CustomLinearProgress/CustomLinearProgress.js

@@ -29,7 +29,6 @@ CustomLinearProgress.defaultProps = {
 };
 
 CustomLinearProgress.propTypes = {
-
   color: PropTypes.oneOf([
     "primary",
     "warning",

src/components/CustomTabs/CustomTabs.js

@@ -83,7 +83,6 @@ export default function CustomTabs(props) {
 }
 
 CustomTabs.propTypes = {
-
   headerColor: PropTypes.oneOf([
     "warning",
     "success",

src/components/Footer/Footer.js

@@ -87,6 +87,5 @@ export default function Footer(props) {
 }
 
 Footer.propTypes = {
-
   whiteFont: PropTypes.bool
 };

src/components/Grid/GridContainer.js

@@ -31,7 +31,6 @@ GridContainer.defaultProps = {
 };
 
 GridContainer.propTypes = {
-
   children: PropTypes.node,
   className: PropTypes.string
 };

src/components/Grid/GridItem.js

@@ -33,7 +33,6 @@ GridItem.defaultProps = {
 };
 
 GridItem.propTypes = {
-
   children: PropTypes.node,
   className: PropTypes.string
 };

src/components/Header/Header.js

@@ -112,7 +112,6 @@ Header.defaultProp = {
 };
 
 Header.propTypes = {
-
   color: PropTypes.oneOf([
     "primary",
     "info",

src/components/InfoArea/InfoArea.js

@@ -40,7 +40,6 @@ InfoArea.defaultProps = {
 };
 
 InfoArea.propTypes = {
-
   icon: PropTypes.object.isRequired,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,

src/components/NavPills/NavPills.js

@@ -105,7 +105,6 @@ NavPills.defaultProps = {
 };
 
 NavPills.propTypes = {
-
   // index of the default active pill
   active: PropTypes.number,
   tabs: PropTypes.arrayOf(

src/components/Pagination/Pagination.js

@@ -49,7 +49,6 @@ Pagination.defaultProps = {
 };
 
 Pagination.propTypes = {
-
   pages: PropTypes.arrayOf(
     PropTypes.shape({
       active: PropTypes.bool,

src/components/Typography/Danger.js

@@ -19,6 +19,5 @@ export default function Danger(props) {
 }
 
 Danger.propTypes = {
-
   children: PropTypes.node
 };

src/components/Typography/Info.js

@@ -19,6 +19,5 @@ export default function Info(props) {
 }
 
 Info.propTypes = {
-
   children: PropTypes.node
 };

src/components/Typography/Muted.js

@@ -19,6 +19,5 @@ export default function Muted(props) {
 }
 
 Muted.propTypes = {
-
   children: PropTypes.node
 };

src/components/Typography/Primary.js

@@ -19,6 +19,5 @@ export default function Primary(props) {
 }
 
 Primary.propTypes = {
-
   children: PropTypes.node
 };

src/components/Typography/Quote.js

@@ -20,7 +20,6 @@ export default function Quote(props) {
 }
 
 Quote.propTypes = {
-
   text: PropTypes.node,
   author: PropTypes.node
 };

src/components/Typography/Small.js

@@ -19,6 +19,5 @@ export default function Small(props) {
 }
 
 Small.propTypes = {
-
   children: PropTypes.node
 };

src/components/Typography/Success.js

@@ -19,6 +19,5 @@ export default function Success(props) {
 }
 
 Success.propTypes = {
-
   children: PropTypes.node
 };

src/components/Typography/Warning.js

@@ -19,6 +19,5 @@ export default function Warning(props) {
 }
 
 Warning.propTypes = {
-
   children: PropTypes.node
 };

src/views/Components/Components.js

@@ -1,12 +1,10 @@
 import React from "react";
-// nodejs library to set properties for components
-import PropTypes from "prop-types";
 // nodejs library that concatenates classes
 import classNames from "classnames";
 // react components for routing our app without refresh
 import { Link } from "react-router-dom";
 // @material-ui/core components
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 // @material-ui/icons
 // core components
 import Header from "components/Header/Header.js";
@@ -30,68 +28,63 @@ import SectionLogin from "./Sections/SectionLogin.js";
 import SectionExamples from "./Sections/SectionExamples.js";
 import SectionDownload from "./Sections/SectionDownload.js";
 
-import componentsStyle from "assets/jss/material-kit-react/views/components.js";
+import styles from "assets/jss/material-kit-react/views/components.js";
 
-class Components extends React.Component {
-  render() {
-    const { classes, ...rest } = this.props;
-    return (
-      <div>
-        <Header
-          brand="Material Kit React"
-          rightLinks={<HeaderLinks />}
-          fixed
-          color="transparent"
-          changeColorOnScroll={{
-            height: 400,
-            color: "white"
-          }}
-          {...rest}
-        />
-        <Parallax image={require("assets/img/bg4.jpg")}>
-          <div className={classes.container}>
-            <GridContainer>
-              <GridItem>
-                <div className={classes.brand}>
-                  <h1 className={classes.title}>Material Kit React.</h1>
-                  <h3 className={classes.subtitle}>
-                    A Badass Material-UI Kit based on Material Design.
-                  </h3>
-                </div>
-              </GridItem>
-            </GridContainer>
-          </div>
-        </Parallax>
+const useStyles = makeStyles(styles);
 
-        <div className={classNames(classes.main, classes.mainRaised)}>
-          <SectionBasics />
-          <SectionNavbars />
-          <SectionTabs />
-          <SectionPills />
-          <SectionNotifications />
-          <SectionTypography />
-          <SectionJavascript />
-          <SectionCarousel />
-          <SectionCompletedExamples />
-          <SectionLogin />
-          <GridItem md={12} className={classes.textCenter}>
-            <Link to={"/login-page"} className={classes.link}>
-              <Button color="primary" size="lg" simple>
-                View Login Page
-              </Button>
-            </Link>
-          </GridItem>
-          <SectionExamples />
-          <SectionDownload />
+export default function Components(props) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  return (
+    <div>
+      <Header
+        brand="Material Kit React"
+        rightLinks={<HeaderLinks />}
+        fixed
+        color="transparent"
+        changeColorOnScroll={{
+          height: 400,
+          color: "white"
+        }}
+        {...rest}
+      />
+      <Parallax image={require("assets/img/bg4.jpg")}>
+        <div className={classes.container}>
+          <GridContainer>
+            <GridItem>
+              <div className={classes.brand}>
+                <h1 className={classes.title}>Material Kit React.</h1>
+                <h3 className={classes.subtitle}>
+                  A Badass Material-UI Kit based on Material Design.
+                </h3>
+              </div>
+            </GridItem>
+          </GridContainer>
         </div>
-        <Footer />
+      </Parallax>
+
+      <div className={classNames(classes.main, classes.mainRaised)}>
+        <SectionBasics />
+        <SectionNavbars />
+        <SectionTabs />
+        <SectionPills />
+        <SectionNotifications />
+        <SectionTypography />
+        <SectionJavascript />
+        <SectionCarousel />
+        <SectionCompletedExamples />
+        <SectionLogin />
+        <GridItem md={12} className={classes.textCenter}>
+          <Link to={"/login-page"} className={classes.link}>
+            <Button color="primary" size="lg" simple>
+              View Login Page
+            </Button>
+          </Link>
+        </GridItem>
+        <SectionExamples />
+        <SectionDownload />
       </div>
-    );
-  }
+      <Footer />
+    </div>
+  );
 }
-
-Components.propTypes = {
-  classes: PropTypes.object
-};
-
-export default withStyles(componentsStyle)(Components);