Merge pull request #42 from ImieboGodson/main

Fix: Worked on the left and right side components. Issue #41
zuri-training · Apr 15, 2022 · 99aa80a · 99aa80a
2 parents 60e5dc0 + 6996213
commit 99aa80a
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 33 deletions.
diff --git a/src/components/CommunitiesToFollow/CommunitiesToFollow.css b/src/components/CommunitiesToFollow/CommunitiesToFollow.css
@@ -9,14 +9,14 @@
 }
 
 .communitiesToFollowHeader {
-    padding: 10px 20px;
+    padding: 5px 10px;
     border-bottom: 1px solid #ccc;
 }
 
 .communitiesToFollowHeaderText {
     margin: 0;
-    font-size: 19px;
-    font-weight: 500;
+    font-size: 0.88rem;
+    font-weight: 700;
     color: rgba(0, 0, 0, 0.85);
     cursor: pointer;
 }
@@ -29,7 +29,7 @@
 }
 
 .communitiesToFollowListItem {
-    padding: 10px 20px;
+    padding: 8px 10px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #ccc;
@@ -42,7 +42,11 @@
 
 .communitiesToFollowListItem p {
     margin: 0;
-    font-size: 16px;
+    font-size: 0.85rem;
     font-weight: 500;
     color: rgba(0, 0, 0, 0.775);
+}
+
+.communitiesToFollowListItem:hover {
+    background-color: rgba(250, 250, 241, 0.849);
 }
diff --git a/src/components/RightBar/RightBar.css b/src/components/RightBar/RightBar.css
@@ -1,4 +1,4 @@
 .rightBar {
-    flex: 2.5;
+    flex: 2.1;
     background-color: rgba(255, 255, 255, 0);
 }
diff --git a/src/components/SideBar/SideBar.css b/src/components/SideBar/SideBar.css
@@ -1,36 +1,48 @@
 .sideBar {
-    flex: 2.2;
+    margin-top: 30px;
+    flex: 1.7;
     /* min-height: calc(100vh - 70px); */
     height: fit-content;
-    padding-top: 30px;
-    background-color: #fff;
+    /* padding: 10px 0; */
+    /* background-color: #fff; */
+    border-radius: 6px;
+    color: rgba(0, 0, 0, 0.734);
+    border: 1px solid #ccc;
+}
+
+.sidebarIcons {
+    size: 1.05rem;
 }
 
 .sideBar p {
     margin: 0;
     padding: 0;
-    font-size: 16px;
+    font-size: 0.85rem;
 }
 
 
 .sideBar ul {
+    margin: 0;
     padding: 0;
     list-style: none;
+    border-radius: 6px;
 }
 
 .sideBar ul li {
-    padding: 15px 20px;
+    padding: 5px 10px;
     cursor: pointer;
+    /* border-radius: 5px; */
+    border-bottom: 0.5px solid #ccc;
     transition: ease-in-out 0.3s all;
 }
 
 .sideBar ul li:hover {
-    color: #3757FF;
-    background-color: rgba(55, 87, 255, 0.05);
+    /* color: #3757FF; */
+    background-color: rgba(55, 88, 255, 0.096);
 }
 
 .sideBar ul li p {
-    margin-left: 15px;
+    margin-left: 10px;
 }
 
 .mainSideBarOptions li {
@@ -39,7 +51,7 @@
 }
 
 .dropdownIcon {
-    padding-left: 5px;
+    margin-left: auto;
 }
 
 .yourCommunityList,
@@ -54,13 +66,14 @@
 
 .yourTopicsList li p,
 .yourCommunityList li p {
-    font-size: 12px;
+    font-size: 0.65rem;
+    line-height: 15px;
 }
 
 .sideBarCommunityImage,
 .sideBarTopicsImage {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    border-radius: 5px;
     object-fit: cover;
 }
diff --git a/src/components/SideBar/SideBar.js b/src/components/SideBar/SideBar.js
@@ -21,9 +21,9 @@ const SideBar = () => {
     return (
         <div className='sideBar'>
             <ul className='mainSideBarOptions'>
-                <li className='home'><AiOutlineHome size='1.5em'/><p>Home</p></li>
-                <li className='savedPosts'><FaRegBookmark size='1.5em'/><p>Saved posts</p></li>
-                <li className='yourTopics' onClick={yourTopicListToggle}><FiHash size='1.5em'/><p>Topics</p><MdKeyboardArrowDown className='dropdownIcon'/></li>
+                <li className='home'><AiOutlineHome  className='sidebarIcons'/><p>Home</p></li>
+                <li className='savedPosts'><FaRegBookmark className='sidebarIcons' /><p>Saved posts</p></li>
+                <li className='yourTopics' onClick={yourTopicListToggle}><FiHash className='sidebarIcons' /><p>Topics</p><MdKeyboardArrowDown className='dropdownIcon'/></li>
                     <ul className='yourTopicsList noDisplay' id='yourTopicsList'>
                         <li>
                             <img alt="community" src={process.env.PUBLIC_URL + '/assets/communityImage1.png'} className='sideBarTopicsImage'/>
@@ -42,7 +42,7 @@ const SideBar = () => {
                             <p>Starting Out In Tech</p>
                         </li> 
                     </ul>
-                <li className='yourCommunities' onClick={yourCommunityListToggle}><BsPeople size='1.5em'/><p>My Communities</p><MdKeyboardArrowDown className='dropdownIcon'/></li>
+                <li className='yourCommunities' onClick={yourCommunityListToggle}><BsPeople className='sidebarIcons'/><p>My Communities</p><MdKeyboardArrowDown className='dropdownIcon'/></li>
                     <ul className='yourCommunityList noDisplay' id='yourCommunityList'>
                         <li>
                             <img alt="community" src={process.env.PUBLIC_URL + '/assets/communityImage1.png'} className='sideBarCommunityImage'/>

diff --git a/src/components/TopPicks/TopPicks.css b/src/components/TopPicks/TopPicks.css
@@ -1,30 +1,40 @@
 .topPicks {
     margin-top: 30px;
     width: 100%;
-    padding: 20px;
+    /* padding-top:  10px; */
     background-color: #fff;
     box-sizing: border-box;
     border-radius: 5px;
     border: 1px solid #ccc;
 }
 
 .topPicksTitleText {
-    margin: 15px 0;
-    font-size: 19px;
-    font-weight: 500;
+    margin: 0;
+    padding: 5px 10px;
+    font-size: 0.88rem;
+    font-weight: 700;
     color: rgba(0, 0, 0, 0.85);
+    border-bottom: 0.5px solid #ccc;
     cursor: pointer;
 }
 
 .topPicksList {
-    padding-left: 10px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
 .topPicksListItem {
-    margin-bottom: 10px;
-    font-size: 14px;
+    padding: 8px 10px;
+    /* border-radius: 5px; */
+    border-bottom: 0.5px solid #ccc;
+
+    /* margin-bottom: 10px; */
+    font-size: 0.85rem;
+    line-height: 20px;
     cursor: pointer;
     color: rgba(0, 0, 0, 0.734);
+    transition: ease-in-out 0.3s all;
     /* border-top: 1px solid #ccc; */
 }
 

diff --git a/src/components/TopPicks/TopPicks.js b/src/components/TopPicks/TopPicks.js
@@ -4,13 +4,13 @@ const TopPicks = () => {
     return (
         <div className='topPicks'>
             <p className='topPicksTitleText'>Top picks for you</p>
-            <ol className='topPicksList'>
+            <ul className='topPicksList'>
                 <li className='topPicksListItem'>What's the best stack for build a social platform?</li>
                 <li className='topPicksListItem'>What should i do to get my first job in tech?</li>
                 <li className='topPicksListItem'>What's the most common error in learning to code?</li>
                 <li className='topPicksListItem'>What's the React library for?</li>
                 <li className='topPicksListItem'>What's the best job in tech?</li>
-            </ol>
+            </ul>
         </div>
     )
 }

diff --git a/src/pages/Homepage/Homepage.css b/src/pages/Homepage/Homepage.css
@@ -1,6 +1,7 @@
 .homepage {
-    max-width: 1200px;
+    max-width: 1000px;
     margin: 0 auto;
+    position: relative;
     background-color: rgb(240, 240, 240);
 }