Proposal dashboard page implementation outline

src/css/components/_modals.scss

@@ -1,12 +1,12 @@
 .modal {
   border-radius: 20px;
   .modal-content {
-     border-radius: 10px;
-     max-height: 70vh;
-     width: 66%;
-     border: 0px;
-     overflow-y: scroll;
-     overflow-x: hidden;
+    border-radius: 10px;
+    max-height: 70vh;
+    width: 66%;
+    border: 0px;
+    overflow-y: scroll;
+    overflow-x: hidden;
   }
   .modal__header {
     .modal__title {
@@ -33,7 +33,7 @@
     }
     .modal__search {
       width: 100%;
-      border: 1px solid #CCCCCC;
+      border: 1px solid #cccccc;
       box-sizing: border-box;
       border-radius: 5px;
       padding-left: 5px;
@@ -44,23 +44,23 @@
       font-weight: normal;
       font-size: 15px;
       line-height: 5px;
-      color: #90949C;
+      color: #90949c;
       padding-top: 5px;
       padding-bottom: 5px;
     }
   }
   .modal__body {
     overflow-y: scroll;
-     .modal__mini-title {
-       font-family: $font-family-Inter;
-       font-style: normal;
-       font-weight: $font-weight-normal;
-       font-size: 12px;
-       line-height: 19px;
-       color: $color-modal-miniheader;
-       letter-spacing: 0.2em;
-       padding-top: 5px;
-     }
+    .modal__mini-title {
+      font-family: $font-family-Inter;
+      font-style: normal;
+      font-weight: $font-weight-normal;
+      font-size: 12px;
+      line-height: 19px;
+      color: $color-modal-miniheader;
+      letter-spacing: 0.2em;
+      padding-top: 5px;
+    }
     .modal__form {
       .modal__row {
         .modal__group {
@@ -94,10 +94,15 @@
             margin-left: 0px;
             margin-top: -0.3em;
             border-radius: 50%;
-            border: 1px solid #CCCCCC;
+            border: 1px solid #cccccc;
             box-sizing: border-box;
             border-radius: 5px;
           }
+          .modal__textSelection {
+            font-style: italic;
+            display: block;
+            color: #6c757d;
+          }
         }
       }
       .modal__secondary-title {
@@ -119,7 +124,7 @@
       justify-content: center;
       align-items: center;
       .follower__image {
-        border: 1px solid #E6E6E5;
+        border: 1px solid #e6e6e5;
         border-radius: 5px;
         min-width: 56px;
         margin-left: 10px;
@@ -181,7 +186,7 @@
       justify-content: center;
       align-items: center;
       .member__image {
-        border: 1px solid #E6E6E5;
+        border: 1px solid #e6e6e5;
         border-radius: 5px;
         min-width: 56px;
         margin-left: 10px;
@@ -222,7 +227,7 @@
         display: block;
       }
       .modal__remove__followButton {
-        border: 1px solid #EB5757;
+        border: 1px solid #eb5757;
         box-sizing: border-box;
         box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
         border-radius: 34px;
@@ -238,7 +243,7 @@
           font-weight: 500;
           font-size: 12px;
           line-height: 15px;
-          color: #EB5757;
+          color: #eb5757;
         }
       }
     }
@@ -256,7 +261,7 @@
           display: flex;
           .invite__btn {
             margin-left: 3px;
-            background: #1A73E8;
+            background: #1a73e8;
             box-shadow: 1.26667px 2.53333px 6.33333px rgba(0, 0, 0, 0.1);
             border-radius: 43.0667px;
             width: 83px;
@@ -269,7 +274,7 @@
           flex-wrap: wrap;
           .invite__btn {
             margin-right: 10px;
-            background: #1A73E8;
+            background: #1a73e8;
             box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
             border-radius: 20px;
             width: 83px;
@@ -282,7 +287,7 @@
             font-weight: normal;
             font-size: 13px;
             line-height: 16px;
-            color: #90949C;
+            color: #90949c;
             width: 100%;
             padding-top: 1em;
           }

src/router.js

@@ -12,12 +12,15 @@ import ProjInfo from "./user/projects/proj-info/proj-info";
 import PrivateRoute from "./common/PrivateRoute";
 import Maintenance from "./maintenance/maintenance";
 import Events from "./user/events/events";
+import UserProposalDashboard from "./user/proposals/UserProposalDashboard/UserProposalDashboard";
+import AdminProposalDashboard from "./user/proposals/AdminProposalDashboard/AdminProposalDashboard";
+import ProposalDiscussion from "./user/proposals/ProposalDiscussion/ProposalDiscussion";
+import ProposalEditor from "./user/proposals/ProposalEditor/ProposalEditor";
 import Admin from "./user/Admin/Admin";
 import Setup from "./user/setup/Setup";
 import CommunitySetting from "./user/dashboard/Community/CommunitySetting";
 import Insight from "./user/dashboard/insights/Insight";
 
-
 const Router = () => (
   <BrowserRouter>
     <Switch>
@@ -29,13 +32,30 @@ const Router = () => (
       <PrivateRoute exact path="/profile" component={Profile} />
       <PrivateRoute exact path="/:id/proj-info" component={ProjInfo} />
       <PrivateRoute exact path="/organization" component={Organization} />
-      <PrivateRoute exact path="/settings" component={Settings}/>
+      <PrivateRoute exact path="/settings" component={Settings} />
       <PrivateRoute exact path="/projects" component={Projects} />
       <PrivateRoute exact path="/events" component={Events} />
+      <PrivateRoute exact path="/proposal" component={UserProposalDashboard} />
+      <PrivateRoute
+        exact
+        path="/adminproposal"
+        component={AdminProposalDashboard}
+      />
+      <PrivateRoute
+        exact
+        path="/proposalDiscussion"
+        component={ProposalDiscussion}
+      />
+      <PrivateRoute
+        exact
+        path="/adminproposal"
+        component={AdminProposalDashboard}
+      />
+      <PrivateRoute exact path="/proposaleditor" component={ProposalEditor} />
       <PrivateRoute exact path="/setup" component={Setup} />
       <PrivateRoute exact path="/org-settings" component={CommunitySetting} />
       <PrivateRoute exact path="/insight" component={Insight} />
-      <PrivateRoute exact path="/admin" component={Admin}/>
+      <PrivateRoute exact path="/admin" component={Admin} />
       <Route component={NotFound} />
     </Switch>
   </BrowserRouter>

src/user/dashboard/dashboard.scss

@@ -4,18 +4,18 @@
   height: auto;
   font-family: Muli, sans-serif;
   .navigation {
-    flex: 1;
+    flex-grow: 1;
     border-right: solid 1px #dfe9f1;
   }
   .news {
-    flex: 4;
+    flex-grow: 4;
     .notify-user {
       display: flex;
       padding: 20px 0px 20px 30px;
     }
   }
   .promotions {
-    flex: 2;
+    flex-grow: 2;
     padding: 20px 12px 20px 0px;
   }
 }

src/user/pinned-posts/posts/posts.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import "./posts.scss";
-import gsoc from "../../../images/gsoc.png";
+import userIcon2 from "../../../images/gsoc.png";
 
 class Posts extends Component {
   state = { date: new Date() };

src/user/proposals/AdminProposalDashboard/AdminProposalDashboard.js

@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+import "./AdminProposalDashboard.scss";
+import Navigation from "../../dashboard/navigation/navigation";
+import DashboardContent from "./DashboardContent/DashboardContent";
+import DashboardRightPanel from "./DashboardRightPanel/DashboardRightPanel";
+
+class UserProposalDashboard extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dashboard: true,
+      isLoading: true,
+    };
+  }
+  render() {
+    return (
+      <div className="dashboard">
+        <div className="dashboard__navigation">
+          <Navigation dashboard={this.state.dashboard} />
+        </div>
+        <div className="dashboard__content">
+          <DashboardContent />
+        </div>
+        <div className="dashboard__rightpanel">
+          <DashboardRightPanel />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default UserProposalDashboard;

src/user/proposals/AdminProposalDashboard/AdminProposalDashboard.scss

@@ -0,0 +1,16 @@
+.dashboard {
+  display: flex;
+  min-height: 100vh;
+  height: auto;
+  font-family: Muli, sans-serif;
+  .dashboard__navigation {
+    flex: 1;
+    border-right: solid 1px #dfe9f1;
+  }
+  .dashboard__content {
+    flex: 4;
+  }
+  .dashboard__rightpanel {
+    flex: 1.5;
+  }
+}