diff --git a/build.sh b/build.sh new file mode 100755 index 00000000..dd50dbe2 --- /dev/null +++ b/build.sh @@ -0,0 +1,3 @@ +#!/usr/bin/env bash + +echo "/* /index.html 200" >> ./build/_redirects diff --git a/package.json b/package.json index 82720789..9543c984 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ }, "scripts": { "start": "react-scripts start", - "build": "react-scripts build", + "build": "react-scripts build && ./build.sh", "test": "react-scripts test", "eject": "react-scripts eject" }, diff --git a/src/App.css b/src/App.css index ce8e6d52..578d9ba6 100644 --- a/src/App.css +++ b/src/App.css @@ -8,6 +8,11 @@ src: local('Inter'), url(./fonts/Inter-Regular.otf) format('opentype'); } +@font-face { + font-family: 'Qanelas'; + src: local('Qanelas'), url(./fonts/Qanelas-Regular.ttf) format('truetype'); +} + .App { text-align: center; } diff --git a/src/App.js b/src/App.js index b19958fc..074dbef4 100644 --- a/src/App.js +++ b/src/App.js @@ -18,5 +18,6 @@ class App extends Component { ); } } +document.title = 'Donut'; export default App; diff --git a/src/auth/auth-service.js b/src/auth/auth-service.js index 011f633e..ad0ed6ae 100644 --- a/src/auth/auth-service.js +++ b/src/auth/auth-service.js @@ -1,7 +1,7 @@ import axios from "axios"; export const loginIn = body => { - return axios.post("http://donut-api-prod.codeuino.org/auth/login", { + return axios.post("https://donut-backend-prod.herokuapp.com/auth/login", { email: body.email, password: body.password }); diff --git a/src/auth/login-form/login-form.scss b/src/auth/login-form/login-form.scss index 85b8801e..9e5d54b1 100644 --- a/src/auth/login-form/login-form.scss +++ b/src/auth/login-form/login-form.scss @@ -15,3 +15,22 @@ } } } +.loginbtn{ + background: #ffffff; + color: #000000; + padding: 1vh; + border: 1px solid rgb(211, 220, 228); + border-radius: 3px; + width: 45%; +} +.login-icon{ + width: 1em; + height: 1em; + vertical-align: middle; +} +.loginbtn-content{ + font-size: 16px; + font-family: Roboto, sans-serif; + font-weight: 500; + line-height: 1em; +} \ No newline at end of file diff --git a/src/auth/login/login.js b/src/auth/login/login.js index 0bdc6a68..89c0ffe5 100644 --- a/src/auth/login/login.js +++ b/src/auth/login/login.js @@ -2,7 +2,7 @@ import React, { Component } from "react"; import { Tab, Tabs } from "react-bootstrap"; import LoginForm from "../login-form/login-form"; import SignUpForm from "../signup-form/signup-form"; -import { DonutTitle }from "../../donutTitle/donutTitle"; +import { DonutTitle } from "../../donutTitle/donutTitle"; import multipleDonuts from "../../images/extra-donuts.png"; // import backGroundDonut from "../../images/background-donut.png"; import "./login.scss"; @@ -37,6 +37,66 @@ class Login extends Component { +
+

Or Sign In/Sign Up with

+ + + + + + diff --git a/src/fonts/Qanelas-Regular.ttf b/src/fonts/Qanelas-Regular.ttf new file mode 100644 index 00000000..697d644d Binary files /dev/null and b/src/fonts/Qanelas-Regular.ttf differ diff --git a/src/jsonData/news-feed.js b/src/jsonData/news-feed.js new file mode 100644 index 00000000..b89877d5 --- /dev/null +++ b/src/jsonData/news-feed.js @@ -0,0 +1,88 @@ +import profileImg from '../svgs/evt-creator.svg'; +import eventImg from "../svgs/event-img-1.svg"; +import eventImg2 from "../svgs/event-img-2.svg"; + +const newsFeed = [ + { + _id: 1, + imgSrc: profileImg, + createdBy: 'Marjorie Alexander', + created: 'June 5, 2018 4:31 AM', + details: 'ex sit ex laboris adipisicing enim eiusmod proident exercitation ea fugiat in mollit pariatur occaecat ut nostrud ullamco ex official', + upvotes: 810, + downVotes: 185, + eventImage: null, + type: 'Donut' + }, + { + _id: 2, + imgSrc: profileImg, + createdBy: 'Marjorie Alexander', + created: 'June 5, 2018 4:31 AM', + details: 'ex sit ex laboris adipisicing enim eiusmod proident exercitation ea fugiat in mollit pariatur occaecat ut nostrud ullamco ex official', + upvotes: 80, + downVotes: 15, + eventImage: eventImg2, + type: 'Project', + projectName: 'Some Huge Project Name', + projectOwner: 'Neilson' + }, + { + _id: 3, + imgSrc: profileImg, + createdBy: 'Marjorie Alexander', + created: 'June 5, 2018 4:31 AM', + details: 'ex sit ex laboris adipisicing enim eiusmod proident exercitation ea fugiat in mollit pariatur occaecat ut nostrud ullamco ex official', + upvotes: 104, + downVotes: 25, + eventImage: null, + type: 'Donut' + }, + { + _id: 4, + imgSrc: profileImg, + createdBy: 'Marjorie Alexander', + created: 'June 5, 2018 4:31 AM', + details: 'ex sit ex laboris adipisicing enim eiusmod proident exercitation ea fugiat in mollit pariatur occaecat ut nostrud ullamco ex official', + upvotes: 810, + downVotes: 185, + eventImage: null, + type: 'Donut' + }, + { + _id: 5, + imgSrc: profileImg, + createdBy: 'Marjorie Alexander', + created: 'June 5, 2018 4:31 AM', + eventName: 'Christmas Party', + details: 'ex sit ex laboris adipisicing enim eiusmod proident exercitation ea fugiat in mollit pariatur occaecat ut nostrud ullamco ex official', + upvotes: 80, + downVotes: 15, + eventImage: eventImg, + type: 'Event' + }, + { + _id: 6, + imgSrc: profileImg, + createdBy: 'Marjorie Alexander', + created: 'June 5, 2018 4:31 AM', + details: 'ex sit ex laboris adipisicing enim eiusmod proident exercitation ea fugiat in mollit pariatur occaecat ut nostrud ullamco ex official', + upvotes: 80, + downVotes: 15, + eventImage: null, + type: 'Donut' + }, + { + _id: 7, + imgSrc: profileImg, + createdBy: 'Marjorie Alexander', + created: 'June 5, 2018 4:31 AM', + details: 'ex sit ex laboris adipisicing enim eiusmod proident exercitation ea fugiat in mollit pariatur occaecat ut nostrud ullamco ex official', + upvotes: 810, + downVotes: 185, + eventImage: null, + type: 'Donut' + }, +] + +export default newsFeed; \ No newline at end of file diff --git a/src/jsonData/notifications.js b/src/jsonData/notifications.js new file mode 100644 index 00000000..a37ae682 --- /dev/null +++ b/src/jsonData/notifications.js @@ -0,0 +1,36 @@ +import donutIcon from '../svgs/donut-icon.svg' +import icon2 from '../svgs/not-icon-2.svg' +import icon3 from '../svgs/not-icon-3.svg' + +const customNotifications = [ + { + _id: 1, + imgSrc: donutIcon, + heading: 'Cody Nguyen', + content: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', + tag: '+1 RSVP' + }, + { + _id: 2, + imgSrc: icon2, + heading: 'Arlene Mccoy', + content: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', + tag: '' + }, + { + _id: 3, + imgSrc: icon3, + heading: 'Julian Richards', + content: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', + tag: 'View' + }, + { + _id: 4, + imgSrc: donutIcon, + heading: 'Julian Richards', + content: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', + tag: '' + }, +] + +export default customNotifications; \ No newline at end of file diff --git a/src/jsonData/upcoming-events.js b/src/jsonData/upcoming-events.js new file mode 100644 index 00000000..622afbba --- /dev/null +++ b/src/jsonData/upcoming-events.js @@ -0,0 +1,48 @@ +import profileImg from '../svgs/profile-icon.svg'; + +const events = [ + { + _id: 1, + imgSrc: profileImg, + createdBy: 'Julian Richards', + description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', + tag: '+1 RSVP' + }, + { + _id: 2, + imgSrc: profileImg, + createdBy: 'Julian Richards', + description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', + tag: '' + }, + { + _id: 3, + imgSrc: profileImg, + createdBy: 'Julian Richards', + description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', + tag: '+1 RSVP' + }, + { + _id: 4, + imgSrc: profileImg, + createdBy: 'Julian Richards', + description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', + tag: '' + }, + { + _id: 5, + imgSrc: profileImg, + createdBy: 'Julian Richards', + description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', + tag: '' + }, + { + _id: 6, + imgSrc: profileImg, + createdBy: 'Julian Richards', + description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', + tag: '' + } +] + +export default events; \ No newline at end of file diff --git a/src/svgs/comment.svg b/src/svgs/comment.svg new file mode 100644 index 00000000..37139d2b --- /dev/null +++ b/src/svgs/comment.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/svgs/down.svg b/src/svgs/down.svg new file mode 100644 index 00000000..bb3a85d8 --- /dev/null +++ b/src/svgs/down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/svgs/event-img-1.svg b/src/svgs/event-img-1.svg new file mode 100644 index 00000000..63d30ef2 --- /dev/null +++ b/src/svgs/event-img-1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/svgs/event-img-2.svg b/src/svgs/event-img-2.svg new file mode 100644 index 00000000..e8a56866 --- /dev/null +++ b/src/svgs/event-img-2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/svgs/evt-creator.svg b/src/svgs/evt-creator.svg new file mode 100644 index 00000000..ac3eea9c --- /dev/null +++ b/src/svgs/evt-creator.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/svgs/logout.svg b/src/svgs/logout.svg new file mode 100644 index 00000000..e0188843 --- /dev/null +++ b/src/svgs/logout.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/svgs/up.svg b/src/svgs/up.svg new file mode 100644 index 00000000..4061c7eb --- /dev/null +++ b/src/svgs/up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/user/dashboard/navigation/navigation.js b/src/user/dashboard/navigation/navigation.js index 1993a4aa..4ac449c0 100644 --- a/src/user/dashboard/navigation/navigation.js +++ b/src/user/dashboard/navigation/navigation.js @@ -1,11 +1,17 @@ import React, { Component } from "react"; -import { ListGroup } from "react-bootstrap"; -import { NavLink } from 'react-router-dom'; +import { ListGroup, Button } from "react-bootstrap"; +import { NavLink } from "react-router-dom"; import { DonutTitleSmall } from "../../../donutTitle/donutTitle"; import "./navigation.scss"; +import {Logout} from "../../profile/popups/logout"; +import logo from "../../../svgs/logout.svg"; class Navigation extends Component { + state = { logout:false }; render() { + let cancel =()=>this.setState({ + logout:false + }); const divStyle = { position: "absolute", bottom: 0 @@ -106,7 +112,7 @@ class Navigation extends Component { Account - + Settings + + + + ); diff --git a/src/user/dashboard/navigation/navigation.scss b/src/user/dashboard/navigation/navigation.scss index fa1ef97f..a5928a66 100644 --- a/src/user/dashboard/navigation/navigation.scss +++ b/src/user/dashboard/navigation/navigation.scss @@ -64,4 +64,12 @@ } } } +} + +.logout{ + height: 21px; + width: 21px; + color: rgba(0, 0, 0, 0.5); + margin-right: 15px; + margin-left: 2px; } \ No newline at end of file diff --git a/src/user/dashboard/news-feed/news-feed.js b/src/user/dashboard/news-feed/news-feed.js index 700ecc3a..dc66e931 100644 --- a/src/user/dashboard/news-feed/news-feed.js +++ b/src/user/dashboard/news-feed/news-feed.js @@ -1,19 +1,245 @@ -import React, { Component } from "react"; -import { Button } from "react-bootstrap"; +import React, { Component} from "react"; +import { Button , Dropdown, Modal, Form, Col} from "react-bootstrap"; import "./news-feed.scss"; -import gsoc from "../../../images/gsoc.png"; +import upVoteImg from "../../../svgs/up.svg"; +import downVoteImg from "../../../svgs/down.svg"; +import commentIcon from "../../../svgs/comment.svg"; +import feed from "../../../jsonData/news-feed"; + +const CustomToggle = React.forwardRef(({ children, onClick }, ref) => ( + { + e.preventDefault(); + onClick(e); + }} + > + {children} + +)); + +const CustomMenu = React.forwardRef( + ({ children, style, className, 'aria-labelledby': labeledBy }, ref) => { + return ( +
+
    + {children} +
+
+ ); + }, +); + class NewsFeed extends Component { - state = { date: new Date() }; + constructor(props) { + super(props) + + this.state = { + date : new Date(), + show : false + } + } + + + + handleClose = () => { + this.setState({ + show: false + }) + }; + + handleShow = () => { + this.setState({ + show: true + }) + } render() { + const borderStyle = { + borderBottom: "0 none" + } + var content; + let newsFeed = feed.map((newsItem, i)=>{ + if(newsItem.type === "Project"){ + content = ( + newsItem.eventImage ? +
+ +
+
+

{newsItem.projectName}

+

By {newsItem.projectOwner}

+
+ +
+
+
+
+ : +
+ ) + }else if(newsItem.type === "Event"){ + content = ( + newsItem.eventImage ? +
+ +
+
+

{newsItem.eventName}

+
+
+
+ DATE +

25

+
Dec
+
2020
+
+
+ +
+
+ TIME +

10

+
PM
+
Onwards
+
+
+
+
+ +
+
+
+
+ : +
+ ) + }else{ + content = ( +
+ ) + } + + return( +
+ {content} +
+
+ icon +
+
+

{newsItem.createdBy}

+ {newsItem.created} +
+
+ + + ... + + + + Item 1 + + +
+
+
+

{newsItem.details}

+
+
+ + {newsItem.upvotes} +
+
+ + {newsItem.downVotes} +
+
+ comment + Comment +
+
+
+
+ ) + }) return (
- +
- - + + + +
New Event
ABOUT THE EVENT
 + + +
+ + + + Event Name + + + + + Location + + + + + + Date + + + + + Time + + + + + + Post Description + + + +
+ +
+ + +
+ +
@@ -23,39 +249,7 @@ class NewsFeed extends Component {
Projects
-
-
-
- icon -
-
-

Marjorie Alexander

-

{this.state.date.toTimeString()}

-
-
-
- ex sit ex laboris adipisicing enim eiusmod proident exercitation - ea fugiat in mollit pariatur occaecat ut nostrud ullamco ex - official -
-
- -
-
-
- icon -
-
-

Marjorie Alexander

-

{this.state.date.toTimeString()}

-
-
-
- ex sit ex laboris adipisicing enim eiusmod proident exercitation - ea fugiat in mollit pariatur occaecat ut nostrud ullamco ex - official -
-
+ {newsFeed}
diff --git a/src/user/dashboard/news-feed/news-feed.scss b/src/user/dashboard/news-feed/news-feed.scss index a10c0a38..f50ddabf 100644 --- a/src/user/dashboard/news-feed/news-feed.scss +++ b/src/user/dashboard/news-feed/news-feed.scss @@ -2,7 +2,6 @@ padding: 0 20px; .post-article { height: 50px; - border: solid 1px #dfe9f1; .article { display: flex; input { @@ -35,32 +34,424 @@ } } .article-posts { - display: flex; + column-count: 2; + width: 100%; + counter-reset: item-counter; .individual-post { + // position: relative; + display: inline-block; + counter-increment: item-counter; + width: 100%; + margin-bottom: 15px; border: solid 1px #dfe9f1; - margin: 0 10px; - padding: 8px; + box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + border-radius: 5px; + .event-image-container{ + position: relative; + width: 100%; + height: 300px; + img{ + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 5px; + } + .event-jumbotron{ + position: absolute; + background-color: white; + box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + border-radius: 5px; + width: 30%; + min-width: 167px; + top: 10px; + right: 10px; + // bottom: 20px; + .event-details{ + // width: 90%; + margin: 5px auto; + .event-schedule{ + display: flex; + justify-content: flex-start; + .event-date{ + flex: 1; + border-top: 1px solid rgba(204,204,204,0.7); + border-bottom: 1px solid rgba(204,204,204,0.7); + border-right: 1px solid rgba(204,204,204,0.7); + .date-content{ + width:50%; + margin: 0 auto; + small{ + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 8px; + line-height: 10px; + letter-spacing: 0.27em; + color: rgba(29, 33, 41, 0.4); + mix-blend-mode: normal; + } + h4{ + font-family: Qanelas; + font-style: normal; + font-weight: 600; + font-size: 26px; + line-height: 32px; + color: #1D2129; + mix-blend-mode: normal; + margin-bottom:0; + } + h5{ + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 17px; + color: #1D2129; + mix-blend-mode: normal; + margin-bottom:0; + } + h6{ + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 10px; + line-height: 12px; + color: #1D2129; + mix-blend-mode: normal; + } + } + } + .event-time{ + flex: 1; + border-top: 1px solid rgba(204,204,204,0.7); + border-bottom: 1px solid rgba(204,204,204,0.7); + border-left: 1px solid rgba(204,204,204,0.7); + .time-content{ + width:50%; + margin: 0 auto; + small{ + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 8px; + line-height: 10px; + letter-spacing: 0.27em; + color: rgba(29, 33, 41, 0.4); + mix-blend-mode: normal; + } + h4{ + font-family: Qanelas; + font-style: normal; + font-weight: 600; + font-size: 26px; + line-height: 32px; + color: #1D2129; + mix-blend-mode: normal; + margin-bottom:0; + } + h5{ + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 17px; + color: #1D2129; + mix-blend-mode: normal; + margin-bottom:0; + } + h6{ + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 10px; + line-height: 12px; + color: #1D2129; + mix-blend-mode: normal; + } + } + } + } + h3{ + margin-left:5px; + margin-right:5px; + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 28px; + line-height: 34px; + color: #1D2129; + } + p{ + font-family: Qanelas; + font-style: normal; + font-weight: 500; + font-size: 10px; + line-height: 12px; + color: #1D2129; + } + .tag-container{ + margin-top: 15px; + display: flex; + justify-content: flex-end; + margin-right:15px; + margin-bottom: 15px; + .tag-btn{ + background: #1A73E8;; + border-radius: 15px; + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 10px; + line-height: 12px; + } + } + } + } + } + .project-image-container{ + position: relative; + width: 100%; + height: 150px; + img{ + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 5px; + } + .project-jumbotron{ + position: absolute; + background-color: white; + box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + border-radius: 5px; + width: 30%; + min-width: 147px; + top: 10px; + right: 10px; + // bottom: 20px; + .project-details{ + width: 90%; + margin: 5px auto; + h3{ + font-family: Qanelas; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 24px; + color: #1D2129; + } + p{ + font-family: Qanelas; + font-style: normal; + font-weight: 500; + font-size: 10px; + line-height: 12px; + color: #1D2129; + } + .view-project-btn-container{ + display: flex; + justify-content: center; + .view-project-btn{ + background: #1A73E8; + border-radius: 20px; + padding-left: 25px; + padding-right: 25px; + font-family: Qanelas; + font-style: normal; + font-weight: 600; + font-size: 10px; + line-height: 12px; + color: #FFFFFF; + } + } + } + } + } .user-info { display: flex; + padding: 8px; + .image{ + width:38px; + height:38px; + img{ + width:100%; + height:100%; + border-radius: 2px; + } + } .img-desc { + margin-left: 10px; h2 { - font-size: 16px; - padding: 0 10px; - font-weight: bold; - margin: 0; + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 22px; + color: #1A73E8; + margin-bottom: 0px; } - p { + small { + font-family: Inter; + font-style: normal; + font-weight: normal; font-size: 12px; + line-height: 15px; + color: #90949C; margin: 0; - padding: 0 10px; } } + .dropdown-container{ + margin-left: auto; + margin-right: 5px; + } } .post-details { + padding: 8px; + p{ font-size: 14px; - padding: 10px 0; + margin-bottom: 10px; + font-family: Inter; + font-style: normal; + font-weight: normal; + line-height: 17px; + } + .post-activity{ + display:flex; + .up-vote, .down-vote{ + margin-right: 10px; + small{ + font-family: SF Pro Text; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 14px; + } + } + .vote-btn{ + background-color: transparent; + border: 0; + width: 20px; + } + .vote-btn:active{ + background-color: transparent; + } + .comments{ + small{ + margin-left: 5px; + font-family: Inter; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 15px; + color: rgba(0, 0, 0, 0.4); + cursor: pointer; + } + small:hover{ + text-decoration: underline; + } + } + } } } } } } + +.up-vote small{ + color: #1EB025; +} + +.down-vote small{ + color: #FF0000; +} + +.news-feed { + .post-article { + .article { + .post-input { + background: #FFFFFF; + border: 1px solid #CCCCCC; + box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + border-radius: 5px; + } + .cta { + button { + svg{ + padding-right: 16px; + padding-bottom: 5px; + margin-top: 0px; + } + } + } + } + } +} + +.modal-box{ + .modal-header { + .modal-title { + .main { + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 32px; + line-height: 39px; + color: #1A73E8; + } + .mini { + font-family: Inter; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 19px; + color: #90949C; + letter-spacing: 0.2em; + padding-top: 18px; + } + } + } + .modal-body{ + .modal-form { + .modal-row { + .modal-group { + .form-label { + font-family: Inter; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 17px; + color: #1A73E8; + } + .post{ + border: 0.75px solid #E2E2E2; + box-sizing: border-box; + border-radius: 5px; + text-align: left; + resize: none; + } + } + } + } + } + .modal-buttons { + .save{ + font-weight: bold; + background: #1A73E8; + box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + border-radius: 34px; + width: 74px; + margin-right: 20px; + margin-bottom: 10px; + margin-left: 14px; + } + .cancel{ + border: 1px solid #1A73E8; + box-sizing: border-box; + box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + border-radius: 34px; + margin-right: 20px; + margin-bottom: 10px; + color: #1A73E8; + font-weight: 500; + } + } +} diff --git a/src/user/dashboard/notifications/notifications.js b/src/user/dashboard/notifications/notifications.js index 27700d81..92e3763f 100644 --- a/src/user/dashboard/notifications/notifications.js +++ b/src/user/dashboard/notifications/notifications.js @@ -1,39 +1,6 @@ import React, { Component } from "react"; -import donutIcon from '../../../svgs/donut-icon.svg' -import icon2 from '../../../svgs/not-icon-2.svg' -import icon3 from '../../../svgs/not-icon-3.svg' import "./notifications.scss"; - -const customNotifications = [ - { - _id: 1, - imgSrc: donutIcon, - heading: 'Cody Nguyen', - content: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', - tag: '+1 RSVP' - }, - { - _id: 2, - imgSrc: icon2, - heading: 'Arlene Mccoy', - content: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', - tag: '' - }, - { - _id: 3, - imgSrc: icon3, - heading: 'Julian Richards', - content: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', - tag: 'View' - }, - { - _id: 4, - imgSrc: donutIcon, - heading: 'Julian Richards', - content: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', - tag: '' - }, -] +import customNotifications from '../../../jsonData/notifications' class Notifications extends Component { render() { diff --git a/src/user/dashboard/upcoming-events/upcoming-events.js b/src/user/dashboard/upcoming-events/upcoming-events.js index dd360a44..59c6b786 100644 --- a/src/user/dashboard/upcoming-events/upcoming-events.js +++ b/src/user/dashboard/upcoming-events/upcoming-events.js @@ -1,51 +1,6 @@ import React, { Component } from "react"; import "./upcoming-events.scss"; -import profileImg from '../../../svgs/profile-icon.svg'; - -const events = [ - { - _id: 1, - imgSrc: profileImg, - createdBy: 'Julian Richards', - description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', - tag: '+1 RSVP' - }, - { - _id: 2, - imgSrc: profileImg, - createdBy: 'Julian Richards', - description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', - tag: '' - }, - { - _id: 3, - imgSrc: profileImg, - createdBy: 'Julian Richards', - description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', - tag: '+1 RSVP' - }, - { - _id: 4, - imgSrc: profileImg, - createdBy: 'Julian Richards', - description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', - tag: '' - }, - { - _id: 5, - imgSrc: profileImg, - createdBy: 'Julian Richards', - description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', - tag: '' - }, - { - _id: 6, - imgSrc: profileImg, - createdBy: 'Julian Richards', - description: 'Lorem ipsum dolor sit amet, duo esse augue torgatos te, ius an nisi deterruisset.', - tag: '' - } -] +import events from '../../../jsonData/upcoming-events'; class UpcomingEvents extends Component { render() { diff --git a/src/user/profile/popups/edit-profile.js b/src/user/profile/popups/edit-profile.js new file mode 100644 index 00000000..86ac8a57 --- /dev/null +++ b/src/user/profile/popups/edit-profile.js @@ -0,0 +1,99 @@ +import React, {Component} from 'react'; +import {Modal, Button, Row, Col, Form} from 'react-bootstrap'; +import "./popups.scss"; + +export class EditProfile extends Component{ + // eslint-disable-next-line + constructor(props){ + super(props); + } + render(){ + return ( + +
+ + +
Edit Profile
+
PERSONAL INFORMATION
+ + + + + + First Name + + + + Last Name + + + + + + Designation + + + + Location + + + + + About + + +
PROFILES
+ + + GitHub URL + + + + LinkedIn URL + + + + + + Facebook URL + + + + +
+ + +
+
+ + ); + } +} \ No newline at end of file diff --git a/src/user/profile/popups/followers.js b/src/user/profile/popups/followers.js new file mode 100644 index 00000000..c673d738 --- /dev/null +++ b/src/user/profile/popups/followers.js @@ -0,0 +1,81 @@ +import React, {Component} from 'react'; +import {Modal, Button, Row, Col} from 'react-bootstrap'; +import logo from "../../../svgs/profile-icon.svg"; +import "./popups.scss"; + +export class Followers extends Component{ + // eslint-disable-next-line + constructor(props){ + super(props); + } + state = {text:"Follow"}; + render(){ + + return ( + +
+ + +
Followers
+
PEOPLE WHO FOLLOW YOU
+ + + + + I +
+

Dhanus Rajendra

+

Front-End Developer

+
+ + + + I +
+

Dhanus Rajendra

+

Front-End Developer

+
+ + + + I +
+

Dhanus Rajendra

+

Front-End Developer

+
+ + + + I +
+

Dhanus Rajendra

+

Front-End Developer

+
+ + + + I +
+

Dhanus Rajendra

+

Front-End Developer

+
+ + + + I +
+

Dhanus Rajendra

+

Front-End Developer

+
+ + + +
+ + ); + } +} diff --git a/src/user/profile/popups/logout.js b/src/user/profile/popups/logout.js new file mode 100644 index 00000000..e2feb86a --- /dev/null +++ b/src/user/profile/popups/logout.js @@ -0,0 +1,33 @@ +import React, {Component} from 'react'; +import {Modal, Button} from 'react-bootstrap'; +import "./popups.scss"; + +export class Logout extends Component{ + // eslint-disable-next-line + constructor(props){ + super(props); + } + render(){ + return ( + +
+ + +
Logout?
+
Are you sure you want to logout of Donut?
+ + + +
+ + +
+
+ + ); + } +} \ No newline at end of file diff --git a/src/user/profile/popups/popups.scss b/src/user/profile/popups/popups.scss new file mode 100644 index 00000000..8e8f8f3c --- /dev/null +++ b/src/user/profile/popups/popups.scss @@ -0,0 +1,100 @@ +.heading{ + margin-top: 20px; +} +.title{ + font-size: 22px; + font-weight: 700; + line-height: 29px; + color: #1A73E8; +} +.about{ + font-weight: 500; + font-size: 10px; + line-height: 14px; + letter-spacing: 0.2em; + color: #90949C; + margin-top:10px; +} +.message{ + font-weight: 500; + font-size: 14px; + line-height: 14px; + letter-spacing: 0.2em; + color: rgb(28, 30, 34); + margin-top:15px; + margin-bottom: 20px; +} +.extra{ + margin-bottom: 20px; + margin-left: -15px; +} +.label{ + font-weight: 600; + font-size: 12px; + color:#000000; + margin-bottom: 3px; +} +.form-input{ + font-family: Inter; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 16px; +} +.form-content{ + margin-top:-2%; + margin-bottom: 20px; + justify-content:space-between; +} +.form-footer{ + margin-top: 0; + Button{ + width:90px; + margin-right: 20px; + margin-bottom: 30px; + border-radius: 100px; + font-weight:600; + } + .savebtn{ + background-color: #1A73E8; + } + +} +.contain{ + margin-top: -3px; +} +.photo{ + margin-top: 3px; + height: 43px; + width: 43px; +} +.user{ + margin-top: 2px; + font-size: 1.1em; + color: black; +} +.descr{ + font-size: 0.8em; + color: rgb(90, 84, 84); + margin-top: -13px; +} +.follow-link{ + margin-top: 3px; + padding: 8px; + font-size: 14px; + box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + border-radius: 20px; + width: 80px; + height: 35px; + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 17px; + text-align: center; +} +.follower{ + margin-top: 10px; + margin-bottom: 10px; + justify-content:space-between; +} \ No newline at end of file diff --git a/src/user/profile/user-info/user-info.js b/src/user/profile/user-info/user-info.js index e38c7500..ba9a2619 100644 --- a/src/user/profile/user-info/user-info.js +++ b/src/user/profile/user-info/user-info.js @@ -1,9 +1,17 @@ import React, { Component } from "react"; import "./user-info.scss"; import { Button } from "react-bootstrap"; - +import {EditProfile} from "./../popups/edit-profile"; +import {Followers} from "./../popups/followers" class UserInfo extends Component { + state = { editProfile:false, followersList:false }; render() { + let cancel =()=>this.setState({ + editProfile:false + }); + let cancelf =()=>this.setState({ + followersList:false + }); return (
@@ -11,12 +19,18 @@ class UserInfo extends Component {
- + +

- Dhanus Rajendra + Dhanus Rajendra +

Front end developer

Bengaluru, Karnataka