Merge pull request #573 from AuraOfDivinity/dashboard-fixes

Minor fixes

Author: vaibhavdaren

src/user/dashboard/dashboard.scss

@@ -18,7 +18,7 @@
     flex-grow: 4;
     .notify-user {
       display: flex;
-      padding: 20px 10px 20px 30px;
+      padding: 20px 0px 20px 30px;
     }
   }
   .promotions {

src/user/dashboard/insights/insight.scss

@@ -1,15 +1,17 @@
 .insight_main_container {
   display: flex;
   .insight_left_nav {
-     width: 15%;
-     left: -1px;
-     top: -1px;
-     height: 100vh;
-     border: 1px solid #CCCCCC;
-     box-sizing: border-box;
+    border-right: solid 1px #dfe9f1;
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    overflow-y: scroll;
+    background: #f5f5f5;
   }
   .right_view_container {
     .right_view {
+      margin-left: 13vw;
       margin-top: 10px;
       .right_view_header {
         font-family: Qanelas;
@@ -25,28 +27,28 @@
           .org_btn {
             width: 11vw;
             height: 5vh;
-            background: #1A73E8;
+            background: #1a73e8;
             padding: 0.3em;
             margin-right: 1em;
           }
           .member_btn {
             width: 11vw;
             height: 5vh;
             background: rgb(250, 251, 252);
-            color: #1A73E8;
+            color: #1a73e8;
             padding: 0.3em;
           }
         }
         .community_overview {
-           .community_overview_header {
-             padding-top: 0.7em;
-             font-family: Qanelas;
-             font-style: normal;
-             font-weight: 600;
-             font-size: 1.3em;
-             line-height: 27px;
-             color: #000000;
-           }
+          .community_overview_header {
+            padding-top: 0.7em;
+            font-family: Qanelas;
+            font-style: normal;
+            font-weight: 600;
+            font-size: 1.3em;
+            line-height: 27px;
+            color: #000000;
+          }
         }
         .overview_stats {
           display: flex;
@@ -57,8 +59,8 @@
             width: 15vw;
             height: 22vh;
             min-width: 150px;
-            background: #FFFFFF;
-            border: 1px solid #CCCCCC;
+            background: #ffffff;
+            border: 1px solid #cccccc;
             box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
             text-align: center;
             margin-right: 2vw;
@@ -84,4 +86,8 @@
       }
     }
   }
-}
+}
+
+.insight_left_nav::-webkit-scrollbar {
+  display: none;
+}

src/user/dashboard/news-feed/news-feed.js

@@ -35,7 +35,7 @@ import { withRouter } from "react-router-dom";
 import { rsvpYes } from "../../../actions/eventAction";
 import { FaEllipsisH, FaThumbtack } from "react-icons/fa";
 import ReactionsElement from "./ReactionsElement";
-import { pinPost } from '../../../actions/postAction'
+import { pinPost } from "../../../actions/postAction";
 import Moment from "react-moment";
 
 // const reactionVariant = {
@@ -46,7 +46,15 @@ import Moment from "react-moment";
 //   },
 // };
 
-const navStyles = { position: 'fixed', width: '83%', top: '0', zIndex:1, background: '#fff', marginTop: '0px', marginBottom:'0px'}
+const navStyles = {
+  position: "fixed",
+  width: "83%",
+  top: "0",
+  zIndex: 1,
+  background: "#fff",
+  marginTop: "0px",
+  marginBottom: "0px",
+};
 
 const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
   <a
@@ -68,8 +76,6 @@ const styles = makeStyles((theme) => ({
   },
   listStyle: {
     background: "#ffffff",
-    border: "1px solid #cccccc",
-    boxShadow: "1px 2px 5px rgba(0, 0, 0, 0.1)",
     borderRadius: "5px",
   },
   listStyle2: {
@@ -148,7 +154,7 @@ function NewsFeed(props) {
   useEffect(() => {
     window.addEventListener("scroll", () => {
       const scrollAmount = window.scrollY;
-      scrollAmount > 369 ? setisTop(true) : setisTop(false)
+      scrollAmount > 369 ? setisTop(true) : setisTop(false);
     });
   }, [window]);
 
@@ -223,9 +229,9 @@ function NewsFeed(props) {
   };
 
   let onPinPost = (postId) => {
-    console.log('Pinning post ', postId)
-    props.pinPost(postId)
-  }
+    console.log("Pinning post ", postId);
+    props.pinPost(postId);
+  };
 
   useEffect(() => {
     if (Object.keys(votes).length !== 0) {
@@ -269,7 +275,7 @@ function NewsFeed(props) {
     return (
       <div className="grid" key={post._id}>
         <Paper elevation={1} className={classes.paper}>
-          <Card className={classes.root}>
+          <Card className={classes.root} variant="outlined">
             <List className={classes.listStyle}>
               <ListItem className={classes.listStyle2}>
                 <ListItemAvatar>
@@ -285,8 +291,8 @@ function NewsFeed(props) {
                   </h2>
                   <Moment format="DD MMM YYYY">{post?.createdAt}</Moment>
                 </ListItemText>
-                <FaThumbtack 
-                  style={{ margin: "10px", width: "10px", cursor: "pointer" }} 
+                <FaThumbtack
+                  style={{ margin: "10px", width: "10px", cursor: "pointer" }}
                   onClick={() => onPinPost(post._id)}
                 />
                 <Dropdown>
@@ -560,9 +566,12 @@ function NewsFeed(props) {
         </div>
       </div>
       <div className="news__feed__container">
-        <div className="tabs__container" style={isTop? navStyles: {}}>
+        <div className="tabs__container" style={isTop ? navStyles : {}}>
           <span className="nav__tab container">
-            <ul className="nav__list__container" style={isTop ? {marginBottom: '0px'}: {}}>
+            <ul
+              className="nav__list__container"
+              style={isTop ? { marginBottom: "0px" } : {}}
+            >
               <li
                 className={
                   type === "All"

src/user/dashboard/news-feed/news-feed.scss

@@ -39,7 +39,9 @@
       column-count: 2;
       width: 100%;
       counter-reset: item-counter;
+
       .individual-post {
+        break-inside: avoid-column;
         // position: relative;
         display: inline-block;
         counter-increment: item-counter;
@@ -363,8 +365,8 @@
   color: #1eb025;
 }
 
-.reactions-container{
-  .reaction-element{
+.reactions-container {
+  .reaction-element {
     display: inline-block;
     margin-right: 10px;
     padding: 4px;
@@ -376,7 +378,7 @@
 }
 .news__feed__container {
   .news-feed {
-    .post-article{
+    .post-article {
       .article {
         margin-left: auto;
         margin-right: auto;
@@ -426,11 +428,11 @@
 }
 
 .posts {
-   width: 140%;
+  width: 140%;
   //  margin-top: 25px;
-   margin-left: 20px;
-   margin-right: 10px;
-   margin-bottom: 24px;
+  margin-left: 20px;
+  margin-right: 10px;
+  margin-bottom: 24px;
   .category {
     .category-btn {
       background-color: white;
@@ -463,7 +465,7 @@
       align-items: center;
       list-style: none;
       border-bottom: 2px solid #eee;
-      transition: all .5s;
+      transition: all 0.5s;
       font-weight: 300;
       color: #262727;
 
@@ -496,7 +498,7 @@
     }
   }
   .show__comment__section {
-    .comment__input{
+    .comment__input {
       .comment__wrap {
         display: flex;
         .comment__img {
@@ -516,6 +518,7 @@
 }
 .post {
   .grid {
+    break-inside: avoid-column;
     .com-btn {
       .btn-primary {
         background-color: #ffffff;
@@ -526,6 +529,6 @@
     }
   }
 }
- .post .main h2 {
-   cursor: pointer;
- }
+.post .main h2 {
+  cursor: pointer;
+}

src/user/dashboard/portfolio/portfolio.scss

@@ -3,9 +3,9 @@
   text-align: center;
   border-top-right-radius: 2%;
   border-bottom-right-radius: 2%;
-  height: 269px;
+  height: 270px;
   flex-direction: row;
-  border-bottom: 1px solid #dfe9f1;
+  // border-bottom: 1px solid #dfe9f1;
   box-shadow: -1px 2px 2px -1px rgba(0, 0, 0, 0.1);
   .items-list {
     padding: 40px 0px;
@@ -35,8 +35,8 @@
     .admins__list {
       cursor: pointer;
     }
-    .followers__pointer{
+    .followers__pointer {
       cursor: pointer;
     }
   }
-}
+}