Merge pull request #44 from ImieboGodson/homepage-fix

added a create-a-space button. Issue #41

src/components/CreateASpace/createASpace.css

@@ -0,0 +1,33 @@
+.createASpace {
+    margin-bottom: 20px;
+    padding: 5px 10px;
+    display: flex;
+    /* justify-content: space-around; */
+    align-items: center;
+    border-radius: 6px;
+    color: rgba(0, 0, 0, 0.734);
+    background-color: rgba(227, 226, 226, 0.734);
+    /* border: 1px solid #ccc; */
+    cursor: pointer;
+}
+
+.createASpace:hover {
+    background-color: rgba(55, 88, 255, 0.096);
+}
+
+.createASpaceIcon {
+    margin-right: 15px;
+    padding: 2px;
+    border-radius: 50%;
+    background-color: rgba(205, 205, 205, 0.726);
+}
+
+.createASpaceIcon:hover {
+
+}
+
+.createASpace p {
+    margin: 0;
+    padding: 0;
+    font-size: 0.85rem;
+}

src/components/CreateASpace/createASpace.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import './createASpace.css'
+import { BsPlus } from "react-icons/bs";
+
+
+
+const createASpace = () => {
+  return (
+    <div className='createASpace'>
+        <BsPlus className='createASpaceIcon'/>
+        <p>Create Space</p>
+    </div>
+  )
+}
+
+export default createASpace

src/components/Post/Post.css

@@ -1,5 +1,5 @@
 .post {
-    margin-bottom: 30px;
+    margin-bottom: 20px;
     padding-top: 20px;
     background-color: #fff;
     border-radius: 5px;

src/components/PostAQuestion/PostAQuestion.css

@@ -26,7 +26,7 @@
 }
 
 .postAQuestionBtn p {
-    font-size: 19px;
+    font-size: 1rem;
     font-weight: 700;
     color: rgba(0, 0, 0, 0.5);
 }

src/components/SideBar/SideBar.css

@@ -5,6 +5,10 @@
     height: fit-content;
     /* padding: 10px 0; */
     /* background-color: #fff; */
+
+}
+
+.mainSideBarOptions {
     border-radius: 6px;
     color: rgba(0, 0, 0, 0.734);
     border: 1px solid #ccc;

src/components/SideBar/SideBar.js

@@ -4,6 +4,7 @@ import { FaRegBookmark  } from 'react-icons/fa';
 import { FiHash  } from 'react-icons/fi';
 import { BsPeople  } from 'react-icons/bs';
 import { MdKeyboardArrowDown } from 'react-icons/md';
+import CreateASpace from '../CreateASpace/createASpace';
 
 
 const SideBar = () => {
@@ -20,6 +21,7 @@ const SideBar = () => {
 
     return (
         <div className='sideBar'>
+            <CreateASpace />
             <ul className='mainSideBarOptions'>
                 <li className='home'><AiOutlineHome  className='sidebarIcons'/><p>Home</p></li>
                 <li className='savedPosts'><FaRegBookmark className='sidebarIcons' /><p>Saved posts</p></li>

src/pages/Homepage/Homepage.js

@@ -4,6 +4,7 @@ import SideBar from '../../components/SideBar/SideBar';
 import RightBar from '../../components/RightBar/RightBar';
 import Feed from '../../components/Feed/Feed';
 
+
 const Homepage = () => {
     return (
         <div className='homepage'>