codeuino · vaibhavdaren · May 12, 2020 · May 11, 2020
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,13 @@
 import React, { Component } from "react";
 import Router from "./router";
 import "./App.css";
-import { Provider } from 'react-redux';
-import store from './store';
-import jwt_decode from 'jwt-decode';
+
+import { Provider } from "react-redux";
+import store from "./store";
+import jwt_decode from "jwt-decode";
 import { setAuthToken } from "./utils/setAuthToken";
 import { setCurrentUser, logoutUser } from "./actions/authAction";
+import "./css/main.scss";
 
 class App extends Component {
   componentDidMount() {
@@ -14,23 +16,23 @@ class App extends Component {
     console.log("CHECKING TOKEN ", token);
     if (token) {
       const decodedData = jwt_decode(token);
-      // set auth token in axios header 
+      // set auth token in axios header
       setAuthToken(token);
-      // set user in the state 
+      // set user in the state
       setCurrentUser(decodedData);
       // check if token is valid or expired
       const currentTime = Date.now() / 1000; // in ms
       const expiryTime = decodedData.iat + 10800000; // 24 hrs
       if (expiryTime <= currentTime) {
         store.dispatch(logoutUser());
-        // now redirect to home page 
+        // now redirect to home page
         window.location.href = "/";
       }
     }
   }
   render() {
     return (
-      <Provider store={store} >
+      <Provider store={store}>
         <React.Fragment>
           <link
             rel="stylesheet"
@@ -44,6 +46,6 @@ class App extends Component {
     );
   }
 }
-document.title = 'Donut';
+document.title = "Donut";
 
 export default App;
diff --git a/src/css/abstracts/_mixins.scss b/src/css/abstracts/_mixins.scss
@@ -0,0 +1 @@
+
diff --git a/src/css/abstracts/_variables.scss b/src/css/abstracts/_variables.scss
@@ -0,0 +1,23 @@
+/*------------------------------------*\
+    #COLORS
+\*------------------------------------*/
+// Primary Colours
+$color-primary-blue: #1a73e8;
+$color-primary-black: #000;
+$color-primary-white: #fff;
+
+// General modal colors
+$color-modal-title: #1a73e8;
+$color-modal-button: #1a73e8;
+$color-modal-miniheader: #90949c;
+$color-modal-form-label: #000000;
+$color-modal-field-border: #e2e2e2;
+$color-modal-buttton-background: #1a73e8;
+$color-modal-button-border: #1a73e8;
+$color-modal-message: #000000;
+$color-modal-button-active: #1a73e8;
+$color-modal-button-inactive: #fff;
+
+//Follower modal specific colors
+$color-modal-follower-name: #000000;
+$color-modal-follower-description: #90949c;
diff --git a/src/css/base/_reset.scss b/src/css/base/_reset.scss
diff --git a/src/css/base/_typography.scss b/src/css/base/_typography.scss
@@ -0,0 +1,13 @@
+/*------------------------------------*\
+    #Typography
+\*------------------------------------*/
+
+//Fonts used in the project
+$font-family-Inter: Inter;
+$font-family-Qanelas: Qanelas;
+$font-family-PlayfairDisplay: Playfair Display;
+
+//General font sizes
+$font-weight-normal: 500;
+$font-weight-bold: 600;
+$font-weight-light: 400;
diff --git a/src/css/components/_modals.scss b/src/css/components/_modals.scss
@@ -0,0 +1,149 @@
+.modal {
+  .modal__header {
+    .modal__title {
+      .modal__main-title {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: $font-weight-bold;
+        font-size: 32px;
+        line-height: 39px;
+        color: $color-modal-title;
+      }
+      .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__body {
+    .modal__form {
+      .modal__row {
+        .modal__group {
+          .modal__label {
+            font-family: $font-family-Inter;
+            font-weight: $font-weight-normal;
+            font-size: 14px;
+            color: $color-modal-form-label;
+            margin-bottom: 3px;
+            line-height: 17px;
+          }
+          .modal__post {
+            border: 0.75px solid $color-modal-field-border;
+            box-sizing: border-box;
+            border-radius: 5px;
+            text-align: left;
+            resize: none;
+          }
+          .modal__message {
+            font-family: $font-family-Inter;
+            font-style: normal;
+            font-weight: $font-weight-normal;
+            font-size: 14px;
+            line-height: 17px;
+
+            color: $color-modal-message;
+          }
+        }
+      }
+      .modal__secondary-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: 18px;
+      }
+    }
+    .modal__follower {
+      margin-top: 15px;
+      margin-bottom: 10px;
+      justify-content: space-between;
+
+      .modal__followerPhoto {
+        margin-top: 3px;
+        height: 43px;
+        width: 43px;
+      }
+      .modal__followerName {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: $font-weight-bold;
+        font-size: 18px;
+        display: block;
+        color: $color-modal-follower-name;
+      }
+      .modal__followerDescription {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 12px;
+        color: $color-modal-follower-description;
+        display: block;
+      }
+      .modal__followButton {
+        background: #fff;
+        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
+        border-radius: 34px;
+      }
+      .modal__followText {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: $font-weight-normal;
+        font-size: 12px;
+        line-height: 15px;
+
+        color: #1a73e8;
+      }
+    }
+  }
+  .modal__buttons {
+    .modal__save {
+      background: $color-modal-button-active;
+      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
+      border-radius: 34px;
+      width: 104px;
+      height: 42px;
+      margin-right: 20px;
+      margin-bottom: 10px;
+      margin-left: 14px;
+      .modal__buttontext {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 18px;
+        line-height: 22px;
+        /* identical to box height */
+
+        color: #ffffff;
+      }
+    }
+    .modal__cancel {
+      border: 1px solid #1a73e8;
+      background: $color-modal-button-inactive;
+      box-sizing: border-box;
+      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
+      border-radius: 34px;
+      margin-right: 20px;
+      margin-bottom: 10px;
+      width: 104px;
+      height: 42px;
+      .modal__buttontext {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: $font-weight-normal;
+        font-size: 18px;
+        line-height: 22px;
+        /* identical to box height */
+        color: #1a73e8;
+      }
+    }
+  }
+}
diff --git a/src/css/layouts/_footer.scss b/src/css/layouts/_footer.scss
diff --git a/src/css/layouts/_header.scss b/src/css/layouts/_header.scss
diff --git a/src/css/main.scss b/src/css/main.scss
@@ -0,0 +1,48 @@
+/*------------------------------------*\
+    #CONTENTS
+\*------------------------------------*/
+/**
+ * ABSTRACTS..............................Declarations of Sass variables & mixins
+ * BASE...................................Default element styles
+ * LAYOUT.................................Layout-specific styles
+ * COMPONENTS.............................Component styles
+ * PAGES..................................Page specific styles
+ * THEMES.................................Theme styles
+ * VENDORS...............................
+ */
+
+/*------------------------------------*\
+    #ABSTRACTS
+\*------------------------------------*/
+@import "./abstracts/variables";
+@import "./abstracts//mixins";
+
+/*------------------------------------*\
+    #BASE
+\*------------------------------------*/
+@import "./base/reset";
+@import "./base/typography";
+
+/*------------------------------------*\
+    #COMPONENTS
+\*------------------------------------*/
+
+@import "./components/modals";
+
+/*------------------------------------*\
+    #LAYOUT
+\*------------------------------------*/
+@import "./layouts/header";
+@import "./layouts/footer";
+
+/*------------------------------------*\
+    #PAGES
+\*------------------------------------*/
+
+/*------------------------------------*\
+    #THEMES
+\*------------------------------------*/
+
+/*------------------------------------*\
+    #VENDORS
+\*------------------------------------*/
diff --git a/src/svgs/logo-image.jpg b/src/svgs/logo-image.jpg
diff --git a/src/user/dashboard/navigation/navigation.js b/src/user/dashboard/navigation/navigation.js
@@ -4,7 +4,7 @@ import { NavLink } from "react-router-dom";
 import PropTypes from "prop-types";
 import { DonutTitleSmall } from "../../../donutTitle/donutTitle";
 import "./navigation.scss";
-import Logout from "../../profile/popups/logout";
+import Logout from "../../profile/popups/Logout";
 import logo from "../../../svgs/logout.svg";
 import { Info } from "../../integrations/NameForm";
 
@@ -215,7 +215,7 @@ class Navigation extends Component {
               <img class="logout" src={logo} alt="L"></img>
               <b>Logout</b>
             </Button>
-            <Logout show={this.state.logout} onHide={cancel} />
+            <Logout show={this.state.logout} handleClose={cancel} />
           </ListGroup.Item>
           <ListGroup.Item className="inactive">
             <p className="logo-text">CODEUINO</p>

diff --git a/src/user/dashboard/news-feed/news-feed.js b/src/user/dashboard/news-feed/news-feed.js
@@ -17,6 +17,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import { Button } from "react-bootstrap";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import AddEventModal from "./popups/AddEventModal";
+import AddProjectModal from "./popups/AddProjectModal";
 import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import ChatBubbleIcon from "@material-ui/icons/ChatBubble";
@@ -80,17 +81,26 @@ export default function PinPosts(props) {
   const classes = styles();
   const [type, changeType] = React.useState("All");
   const [first, second] = React.useState("f");
-  const [show, setShow] = React.useState(false);
+  const [showProject, setShowProject] = React.useState(false);
+  const [showEvent, setShowEvent] = React.useState(false);
 
   let handleClick = (atrb) => () => {
     changeType(atrb);
     second("s");
   };
-  let handleShow = () => {
-    setShow(true);
+  let handleShow = (modalName) => {
+    if (modalName === "project") {
+      setShowProject(true);
+    } else if (modalName === "event") {
+      setShowEvent(true);
+    }
   };
-  let handleClose = () => {
-    setShow(false);
+  let handleClose = (modalName) => {
+    if (modalName === "project") {
+      setShowProject(false);
+    } else if (modalName === "event") {
+      setShowEvent(false);
+    }
   };
   let posts = feed.map((newsItem) => {
     if (
@@ -330,7 +340,9 @@ export default function PinPosts(props) {
               >
                 <Button
                   variant="primary"
-                  onClick={handleShow}
+                  onClick={() => {
+                    handleShow("event");
+                  }}
                   className="optionbtn"
                 >
                   <svg
@@ -347,8 +359,19 @@ export default function PinPosts(props) {
                   </svg>
                   <span className="optionbtn-text">Event</span>
                 </Button>
-                <AddEventModal show={show} handleClose={handleClose} />
-                <Button variant="primary" className="optionbtn">
+                <AddEventModal
+                  show={showEvent}
+                  handleClose={() => {
+                    handleClose("event");
+                  }}
+                />
+                <Button
+                  variant="primary"
+                  className="optionbtn"
+                  onClick={() => {
+                    handleShow("project");
+                  }}
+                >
                   <svg
                     width="38"
                     height="38"
@@ -363,6 +386,12 @@ export default function PinPosts(props) {
                   </svg>
                   <span className="optionbtn-text">Project</span>
                 </Button>
+                <AddProjectModal
+                  show={showProject}
+                  handleClose={() => {
+                    handleClose("project");
+                  }}
+                />
               </ButtonGroup>
             </div>
           </div>