Skip to content

Commit b2e8bc5

Browse files
vaibhavdarenvaibhavdaren
authored
Merge pull request #564 from AuraOfDivinity/Integrations-page
Integrations UI
2 parents 41789c6 + 689a1df commit b2e8bc5

File tree

9 files changed

+292
-0
lines changed

9 files changed

+292
-0
lines changed

‎src/assets/integrations/Calendar.png

18 KB
Loading

‎src/assets/integrations/Drive.png

46.4 KB
Loading

‎src/assets/integrations/Github.png

6.76 KB
Loading

‎src/assets/integrations/Jitsi.png

91.7 KB
Loading

‎src/assets/integrations/SimplePoll.png

5.43 KB
Loading

‎src/assets/integrations/Trello.png

65 KB
Loading

‎src/router.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import CommunitySetting from "./user/dashboard/Community/CommunitySetting";
2121
import Insight from "./user/dashboard/insights/Insight";
2222
import AdminRoute from "./common/AdminRoute";
2323
import Activity from './user/Activity/Activity';
24+
import IntegrationsPage from './user/integrations/IntegrationsPage/IntegrationsPage'
2425

2526
const Router = () => (
2627
<BrowserRouter>
@@ -52,6 +53,7 @@ const Router = () => (
5253
<AdminRoute exact path="/activity/:userId" component={Activity} />
5354
<PrivateRoute exact path="/insight" component={Insight} />
5455
<PrivateRoute exact path="/admin" component={Admin} />
56+
<PrivateRoute exact path="/integrations" component={IntegrationsPage} />
5557
<Route component={NotFound} />
5658
</Switch>
5759
</BrowserRouter>

‎src/user/integrations/IntegrationsPage/IntegrationsPage.js

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
import React, { Component } from "react";
2+
import "./IntegrationsPage.scss";
3+
import { connect } from "react-redux";
4+
import Navigation from "../../dashboard/navigation/navigation";
5+
import {
6+
Button,
7+
Form,
8+
Image,
9+
Card,
10+
Container,
11+
Row,
12+
Col,
13+
} from "react-bootstrap";
14+
import GoogleCalendar from "../../../assets/integrations/Calendar.png";
15+
import GoogleDrive from '../../../assets/integrations/Drive.png'
16+
import Github from '../../../assets/integrations/Github.png'
17+
import Jitsi from '../../../assets/integrations/Jitsi.png'
18+
import Trello from '../../../assets/integrations/Trello.png'
19+
import SimplePoll from '../../../assets/integrations/SimplePoll.png'
20+
21+
class IntegrationsPage extends Component {
22+
constructor(props) {
23+
super(props);
24+
this.state = {
25+
integrations: true,
26+
};
27+
}
28+
render() {
29+
return (
30+
<div className="integrations">
31+
<div className="navigation">
32+
<Navigation org={this.state.org}></Navigation>
33+
</div>
34+
<div className="integrations-content">
35+
<div className="title-content">
36+
<div className="integrations-title">Integrations</div>
37+
<div className="integrations-subtitle">
38+
These are the present integrations for the donut application. More
39+
cool integrations are on their way
40+
</div>
41+
<Form>
42+
<Form.Control
43+
as="input"
44+
placeholder="Search"
45+
className="searchbar"
46+
onChange={this.handleSearchBarChange}
47+
/>
48+
</Form>
49+
</div>
50+
<div className="integration-content">
51+
52+
<Card className="integration-card">
53+
<Card.Img
54+
variant="top"
55+
src={GoogleCalendar}
56+
className="integration-card-image"
57+
/>
58+
<Card.Body>
59+
<div className="integration-card-body">
60+
<Card.Title className="integration-card-title">
61+
Google Calendar
62+
</Card.Title>
63+
<Card.Text className="integration-card-tag">
64+
Communication
65+
</Card.Text>
66+
<Button
67+
className="integration-card-button-remove"
68+
>
69+
Remove
70+
</Button>
71+
</div>
72+
</Card.Body>
73+
</Card>
74+
75+
<Card className="integration-card">
76+
<Card.Img
77+
variant="top"
78+
src={GoogleDrive}
79+
className="integration-card-image"
80+
/>
81+
<Card.Body>
82+
<div className="integration-card-body">
83+
<Card.Title className="integration-card-title">
84+
Google Drive
85+
</Card.Title>
86+
<Card.Text className="integration-card-tag">
87+
File Management
88+
</Card.Text>
89+
<Button
90+
variant="primary"
91+
className="integration-card-button"
92+
>
93+
Add to Donut
94+
</Button>
95+
</div>
96+
</Card.Body>
97+
</Card>
98+
99+
<Card className="integration-card">
100+
<Card.Img
101+
variant="top"
102+
src={Github}
103+
className="integration-card-image"
104+
/>
105+
<Card.Body>
106+
<div className="integration-card-body">
107+
<Card.Title className="integration-card-title">
108+
Github
109+
</Card.Title>
110+
<Card.Text className="integration-card-tag">
111+
Source Control
112+
</Card.Text>
113+
<Button
114+
variant="primary"
115+
className="integration-card-button"
116+
>
117+
Add to Donut
118+
</Button>
119+
</div>
120+
</Card.Body>
121+
</Card>
122+
<Card className="integration-card">
123+
<Card.Img
124+
variant="top"
125+
src={Jitsi}
126+
className="integration-card-image"
127+
/>
128+
<Card.Body>
129+
<div className="integration-card-body">
130+
<Card.Title className="integration-card-title">
131+
Jitsi Meet
132+
</Card.Title>
133+
<Card.Text className="integration-card-tag">
134+
Communication
135+
</Card.Text>
136+
<Button
137+
variant="primary"
138+
className="integration-card-button"
139+
>
140+
Add to Donut
141+
</Button>
142+
</div>
143+
</Card.Body>
144+
</Card>
145+
146+
<Card className="integration-card">
147+
<Card.Img
148+
variant="top"
149+
src={SimplePoll}
150+
className="integration-card-image"
151+
/>
152+
<Card.Body>
153+
<div className="integration-card-body">
154+
<Card.Title className="integration-card-title">
155+
Simple Poll
156+
</Card.Title>
157+
<Card.Text className="integration-card-tag">
158+
Productivity
159+
</Card.Text>
160+
<Button
161+
className="integration-card-button-remove"
162+
>
163+
Remove
164+
</Button>
165+
</div>
166+
</Card.Body>
167+
</Card>
168+
<Card className="integration-card">
169+
<Card.Img
170+
variant="top"
171+
src={Trello}
172+
className="integration-card-image"
173+
/>
174+
<Card.Body>
175+
<div className="integration-card-body">
176+
<Card.Title className="integration-card-title">
177+
Trello
178+
</Card.Title>
179+
<Card.Text className="integration-card-tag">
180+
Communication
181+
</Card.Text>
182+
<Button
183+
variant="primary"
184+
className="integration-card-button"
185+
>
186+
Add to Donut
187+
</Button>
188+
</div>
189+
</Card.Body>
190+
</Card>
191+
</div>
192+
</div>
193+
</div>
194+
);
195+
}
196+
}
197+
198+
export default IntegrationsPage;

‎src/user/integrations/IntegrationsPage/IntegrationsPage.scss

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
.integrations {
2+
display: flex;
3+
min-height: 100vh;
4+
height: auto;
5+
font-family: "Inter";
6+
.navigation {
7+
flex: 0.5;
8+
border-right: solid 1px #dfe9f1;
9+
10+
}
11+
.integrations-content {
12+
width: 100%;
13+
flex: 3;
14+
flex-direction: column;
15+
.title-content {
16+
display: inline-block;
17+
flex: 1;
18+
padding: 10px;
19+
.integrations-title {
20+
text-align: left;
21+
font-family: Inter;
22+
font-style: normal;
23+
font-weight: 700;
24+
font-size: 36px;
25+
letter-spacing: normal;
26+
line-height: 44px;
27+
color: #000000;
28+
}
29+
.integrations-subtitle {
30+
margin-top: 10px;
31+
text-align: left;
32+
font-family: Inter;
33+
font-style: normal;
34+
font-size: 16px;
35+
line-height: 44px;
36+
color: #2d2d2d;
37+
}
38+
.searchbar {
39+
border-radius: 25px;
40+
}
41+
}
42+
.integration-content {
43+
flex: 5;
44+
45+
margin-top: 30px;
46+
.integration-card {
47+
text-align: center;
48+
display: inline-block;
49+
margin: 15px;
50+
padding: 10px;
51+
border-radius: 0.5rem;
52+
width: 18rem;
53+
border: 1px solid #f0f0f0;
54+
min-height: 300px;
55+
box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1),
56+
0 5px 15px rgba(0, 0, 0, 0.07);
57+
.integration-card-image {
58+
height: 128px;
59+
width: 128px;
60+
margin: 0 auto;
61+
}
62+
.integration-card-body {
63+
text-align: center;
64+
.integration-card-title {
65+
font-family: Qanelas;
66+
font-size: 20px;
67+
font-weight: 600;
68+
}
69+
.integration-card-tag {
70+
font-family: Inter;
71+
font-size: 14px;
72+
font-weight: 300;
73+
}
74+
.integration-card-button {
75+
text-align: center;
76+
border-radius: 25px;
77+
font-size: 15px;
78+
width: 60%;
79+
}
80+
.integration-card-button-remove {
81+
text-align: center;
82+
border-radius: 25px;
83+
font-size: 15px;
84+
color: #1A73E8;
85+
background-color: #FFFFFF;
86+
width: 60%;
87+
}
88+
}
89+
}
90+
}
91+
}
92+
}

0 commit comments

Comments
 (0)