removed dependency from 'react-responsive'.

Author: lazycipher

package-lock.json

@@ -43,7 +43,6 @@
     "react-mde": "^10.2.1",
     "react-moment": "^0.9.7",
     "react-redux": "^7.2.0",
-    "react-responsive": "^8.0.3",
     "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^2.2.2",
     "react-scripts": "^3.4.0",

package.json

@@ -16,7 +16,6 @@ import OrgAuth from '../dashboard/Community/components/OrgAuth';
 import OrgMaintenance from '../dashboard/Community/components/OrgMaintenance';
 import Users from './Users';
 import ActivityTimeline from './ActivityTimeline';
-import { Mobile, Desktop } from '../../utils/breakpoints';
 import { Accordion, Button } from 'react-bootstrap'; 
 
 class Activity extends Component {

src/user/Activity/Activity.js

@@ -9,7 +9,6 @@ import Navigation from '../navigation/navigation'
 import { connect } from 'react-redux'
 import OrgMaintenance from './components/OrgMaintenance';
 import Users from '../../Activity/Users'
-import { Mobile, Desktop } from '../../../utils/breakpoints';
 import { Accordion, Button } from 'react-bootstrap'; 
 
 class CommunitySetting extends Component {

src/user/dashboard/Community/CommunitySetting.js

@@ -12,7 +12,6 @@ import { connect } from 'react-redux'
 import { getAllEvents } from "../../actions/eventAction";
 import { getAllPosts } from "../../actions/postAction";
 import { getAllProjects } from "../../actions/projectAction";
-import { Desktop } from '../../utils/breakpoints';
 
 class Dashboard extends Component {
   constructor(props) {
@@ -68,12 +67,10 @@ class Dashboard extends Component {
             {this.state.isLoading ? (
               notifyUsersLoading()
             ) : (
-              <Desktop>
-                <div className="notify-user">
+                <div className="dashboard__container__news__notify">
                   <UpcomingEvents></UpcomingEvents>
                   <Notifications></Notifications>
                 </div>
-              </Desktop>
             )}
             {this.state.isLoading ? newsFeedLoading() : <NewsFeed allMix={allMix} allProjects={allProjects} allPosts={allPosts} allEvents={allEvents}/>}
           </div>

src/user/dashboard/dashboard.js

@@ -6,7 +6,7 @@
   .dashboard__container__news {
     margin-left: 13vw;
     flex-grow: 4;
-    .notify-user {
+    .dashboard__container__news__notify {
       display: flex;
       padding: 20px 0px 20px 30px;
     }
@@ -23,6 +23,9 @@
     }
     .dashboard__container__news {
       margin-left: 0;
+      .dashboard__container__news__notify {
+        display: none;
+      }
     }
   }
 }

src/user/dashboard/dashboard.scss

@@ -39,7 +39,6 @@ import Moment from "react-moment";
 import EditPostModal from "./popups/EditPost";
 import DeletePostModal from "./popups/DeletePost";
 import SharePostModal from "./popups/SharePost";
-import { Desktop, Mobile } from '../../../utils/breakpoints';
 
 // const reactionVariant = {
 //   hover: {
@@ -683,61 +682,8 @@ function NewsFeed(props) {
 
   return (
     <>
-      <Desktop>
-        {createPost}
-      </Desktop>
       <div className="news__feed__container">
-        <Mobile>
-          <div className="tabs__container">
-            <div className="nav__tab">
-              <ul
-                className="nav__list__container"
-              >
-                <li
-                  className={
-                    type === "All"
-                      ? "nav__single__tab selected"
-                      : "nav__single__tab"
-                  }
-                  onClick={handleClick("All")}
-                >
-                  All
-                </li>
-                <li
-                  className={
-                    type === "Post"
-                      ? "nav__single__tab selected"
-                      : "nav__single__tab"
-                  }
-                  onClick={handleClick("Post")}
-                >
-                  Posts
-                </li>
-                <li
-                  className={
-                    type === "Event"
-                      ? "nav__single__tab selected"
-                      : "nav__single__tab"
-                  }
-                  onClick={handleClick("Event")}
-                >
-                  Events
-                </li>
-                <li
-                  className={
-                    type === "Project"
-                      ? "nav__single__tab selected"
-                      : "nav__single__tab"
-                  }
-                  onClick={handleClick("Project")}
-                >
-                  Projects
-                </li>
-              </ul>
-            </div>
-          </div>
-        </Mobile>
-        <Desktop>
+          {createPost}
           <div className="tabs__container" style={isTop ? navStyles : {}}>
             <div className="nav__tab">
               <ul
@@ -787,13 +733,8 @@ function NewsFeed(props) {
               </ul>
             </div>
           </div>
-        </Desktop>
         <Row className="post">
           <Col xs={12}>
-            <Mobile>
-              {createPost}
-              <br />
-            </Mobile>
           </Col>
           <Col xs={12}>
             <Row className="content__row">

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

@@ -563,14 +563,17 @@
       padding: 0;
       .post-article {
         height: auto;
+        .article {
+          justify-content: center;
+          margin-top: 20px;
+        }
       }
     }
     .cta {
       padding-top: 10px;
       text-align: center;
       button {
         padding: 0 1rem;
-        border-radius: 100px;
       }
     }
   }

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

@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
 import { getProfile } from '../../../actions/usersAction'
 import { getOrgProfile } from '../../../actions/orgAction'
 import './styles/SettingSidebar.scss';
-import { Mobile, Desktop } from '../../../utils/breakpoints';
 import { Accordion, Button } from 'react-bootstrap'; 
 
 class SettingContent extends Component {

src/user/dashboard/settings/SettingContent.js

@@ -127,13 +127,22 @@
     width: 100%;
     margin: auto 2vw;
     .org-image {
+      width: 100%;
+      flex: 1;
       .org-pic {
         .orgpic {
           width: 120px;
           height: 120px;
         }
       }
     }
+    .org-data {
+      width: 100%;
+      flex: 2;
+      .fa_icon__container {
+        margin-top: 0;
+      }
+    }
   }
 
 }