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/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/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