Corrected some ui of the front page

src/components/CategoryList/CategoryList.css

@@ -1,5 +1,5 @@
 #categories{
-  padding: 20px;
+  padding: 10px 0 10px 0;
   font-size: 20px;
   font-weight: 800;
   background:#f4f4f4
@@ -11,6 +11,16 @@
 #categories .ant-col span a{
   color: gray;
 }
+#categories .ant-col a span{
+  color: gray;
+  font-size: 20px;
+  font-weight: 800;
+}
+#categories .ant-dropdown-menu-item {
+  color: gray;
+  font-size: 20px;
+  font-weight: 800;
+}
 #categories .ant-col {
   transition: all 0.5s;
   padding: 5px;
@@ -23,4 +33,8 @@ background: rgba(0, 0, 0, 0.1)
     padding: 0;
     font-size: 8px;
   }
+  #categories .ant-col a span{
+    padding: 0;
+    font-size: 8px;
+  }
 }

src/components/CategoryList/CategoryList.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { Link } from 'react-router-dom';
 import 'antd/dist/antd.css';
 import './CategoryList.css'
-import {Col,Row,Icon, notification } from "antd";
+import {Col,Row,Icon, notification,Menu,Dropdown } from "antd";
 
 import { getAllCategories } from "../../redux/actions/categoryServiceActions";
 
@@ -29,7 +29,7 @@ class CategoryList extends Component {
   }
   render() {
     const menu =
-     this.props.categoryService.categories.slice(0,6).map(category=>{
+     this.props.categoryService.categories.slice(0,5).map(category=>{
       return(
         <Col xs={8} md={8} lg={4}>
           <Icon type="file-sync" />
@@ -38,15 +38,31 @@ class CategoryList extends Component {
       )
      }
       )
+      const categoryList=
+      <Menu>
+     { this.props.categoryService.categories.map(category=>{
+        return(
+          <Menu.Item>
+            <Icon type="file-sync" />
+            <span><Link to={`/categoryWiseServices/${category.name}`} style={{color:"gray",padding:"2px 5px 2px 5px"}}>{category.name}</Link></span>
+            </Menu.Item>
+        )
+       }
+        )}
+        </Menu>
     return (
       <Row id="categories">
-      {/* <Dropdown overlay={menu} style={{padding:"10px"}}>
-    <a  href="#">
-      <span style={{background:"white",color:"black",textTransform:"capitalize",letterSpacing:"2px",fontSize:"15px",padding:"5px"}}>See all Categories <Icon type="down" />
+            {menu}
+        <Col xs={8} md={8} lg={4}>
+      <Dropdown overlay={categoryList} style={{padding:"10px"}} trigger={['click']}>
+
+    <a  href="#d">
+      <span>Categories<Icon type="down" />
       </span>
     </a>
-    </Dropdown> */}
-    {menu}
+    </Dropdown>
+    </Col>
+
       </Row>
     )
   }

src/components/Navbar/Navbar.css

@@ -9,6 +9,9 @@
   background-color: inherit !important;
   border: none;
 }
+#navbar .ant-menu-item{
+  border: none;
+}
 #navbar .ant-menu-item:hover{
   border: none;
 }
@@ -34,7 +37,6 @@
   .right {
     float: right;
     font-size: 14px;
-    margin-right: 7px;
   }
 
   .left {
@@ -52,3 +54,7 @@
     font-size: 20px !important;
   }
 }
+footer {
+  background: black;
+  color: white;
+}

src/components/Navbar/Navbar.js

@@ -23,7 +23,7 @@ import TopServices from "../topServices/topServices";
 import NewlyAddedService from '../NewlyAddedService/NewlyAddedService';
 import PageHeader  from '../PageHeader/PageHeader';
 
-const { Header, Content } = Layout;
+const { Header, Content, Footer } = Layout;
 
 class Navbar extends Component {
   static propTypes = {
@@ -113,6 +113,7 @@ class Navbar extends Component {
               </Switch>
             </Content>
           </Layout>
+          <Footer style={{background:"black",color:"white",height:"100px"}}>Ant Design ©2018 Created by Ant UED</Footer>
         </Layout>
       </Router>
     );

src/components/PageHeader/PageHeader.css

@@ -23,4 +23,9 @@
   }
   #pageHeader .ant-input-search {
     margin: 40px 0 0 0 ;
+  }
+  @media(max-width:370px){
+    #pageHeader h1{
+      font-size: 40px;
+    }
   }

src/components/Tables/Tables.css

@@ -21,6 +21,7 @@ height: 600px;
 }
 #tables .imageBox , #tables .descBox{
     font-size: 15px;
+    font-weight: 900;
 }
 #tables .descBox{
     font-size: 20px;
@@ -29,6 +30,8 @@ height: 600px;
 
 }
 #tables .imageBox img{
-    width: 100px;
-    height: 100px;
+    width: 70px;
+    height: 70px;
+    padding: 5px 0 ;
+
 }

src/components/Tables/Tables.js

@@ -7,7 +7,7 @@ import './Tables.css';
 export default function Tables(props){
   let list = null
   if(props.status === "done"){
-   list = props.services.services.map(service=>{
+   list = props.services.services.slice(0,5).map(service=>{
     return (
       <Row className="tableBox">
               <Col xs={10} sm={10} md={6} lg={6} className="imageBox">

src/components/topServices/topServices.js

@@ -17,7 +17,7 @@ this.props.getAllServices();
   render() {
     const {services,status} = this.props;
     if(status === "done"){
-      const serviceList = services.services.map(service=>{
+      const serviceList = services.services.slice(0,8).map(service=>{
         return(
           <Link to={`service/${service._id}`}>
           <Col xs={24} md={8} lg={6} style={{padding:"30px"}}>