Skip to content

Commit e82eb3e

Browse files
mirastroiemirastroie
committed
Added design.
1 parent 881e215 commit e82eb3e

File tree

10 files changed

+298
-71
lines changed

10 files changed

+298
-71
lines changed

‎meetsy/src/assets/bg6.jpg‎

3.63 MB
Loading

‎meetsy/src/assets/elearning.png‎

268 KB
Loading

‎meetsy/src/components/Home/index.js‎

Lines changed: 101 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ import { Component } from 'react';
33
import { withAuthorization } from '../Session';
44
import { withFirebase } from '../Firebase';
55
import {compose} from 'recompose';
6-
6+
import styled from "styled-components";
7+
import bgImg from "../../assets/bg6.jpg";
8+
import imgpng from "../../assets/elearning.png";
9+
import { Row, Column } from 'simple-flexbox';
10+
import {COLORS} from "../../constants/designConstants";
711
class Home extends Component {
812
constructor(props){
913
super(props);
@@ -13,12 +17,106 @@ class Home extends Component {
1317

1418
return (
1519
<div>
16-
<h1>Welcome back, {this.props.firebase.authUser.username}</h1>
17-
<p>The Home Page is accessible by every signed in user.</p>
20+
21+
<Container>
22+
<MainContainer>
23+
<h3>Welcome back, {this.props.firebase.authUser.username}</h3>
24+
<FirstFrame>
25+
<InnerFirstFrame>
26+
<h4>Always reach higher</h4>
27+
<p>Never stop chasing those dreams. Lorem ipsum lorem ipsum lorem ipsum <br/>
28+
lorem ipsum lorem ipsum.</p>
29+
<StyledButton>Explore</StyledButton></InnerFirstFrame></FirstFrame>
30+
<RowFrame>
31+
<Frame style={{backgroundColor: '#11917a', backgroundImage: `${imgpng}` }}>
32+
</Frame>
33+
<Frame style={{backgroundColor: '#11917a'}}>
34+
</Frame>
35+
<Frame>
36+
<p style={{fontSize: '200px', marginLeft:'auto', marginRight: 'auto', height: '50%'}}>14</p>
37+
<p>June, 2021</p>
38+
</Frame>
39+
</RowFrame>
40+
41+
</MainContainer>
1842

43+
<SideFrame>
44+
<h5 style ={{color: 'black', textAlign: 'center', marginTop: '5px'}}>Discover courses</h5>
45+
<InnerSideFrame>
46+
47+
</InnerSideFrame>
48+
</SideFrame>
49+
</Container>
1950
</div>
2051
)
2152
}
2253
}
54+
55+
56+
const InnerSideFrame = styled.div`
57+
width:100%;
58+
height: 50%;
59+
background-color: #EDEDED;
60+
border-radius: 32px;
61+
`;
62+
const RowFrame = styled.div`display:flex;height:auto;`;
63+
const Frame = styled.div`
64+
display:flex;
65+
border-radius:32px;
66+
height: 260px;
67+
margin: 10px 0;
68+
margin-right: 10px;
69+
min-width: 300px;
70+
max-width: 400px;
71+
`
72+
const InnerFirstFrame = styled.div`
73+
display:flex;
74+
flex-direction:column;
75+
padding-left: 10%;
76+
`;
77+
const StyledButton = styled.button`
78+
max-width: 150px;
79+
min-width: 100px;
80+
height: 40px;
81+
border: none;
82+
margin: 1rem 0;
83+
box-shadow: 0px 14px 9 px -15px rgba(0,0,0,0.25);
84+
border-radius: 32px;
85+
background-color: ${COLORS.primaryBg};
86+
color: white;
87+
font-weight: 600;
88+
cursor: pointer;
89+
&:hover {
90+
background-color: #0087e0;
91+
}
92+
`;
93+
const MainContainer = styled.div`
94+
width:100%;height:100%;
95+
`;
96+
const Container = styled.div`
97+
display:flex;
98+
width: 100%;
99+
height: 100%;
100+
justify-content: space-between;
101+
`;
102+
const SideFrame = styled.div`
103+
width: 30%;
104+
height: 80vh;
105+
margin-top: 3%;
106+
background-color: white;
107+
border-radius: 32px;
108+
display: flex;
109+
padding: 15px;
110+
flex-direction: column;
111+
`;
112+
const FirstFrame = styled.div`
113+
margin-top: 3%;
114+
width: 90%;
115+
height: 300px;
116+
background-color: #F78888;
117+
border-radius: 32px;
118+
display:flex;
119+
align-items: center;
120+
`;
23121
const condition = authUser => !!authUser;
24122
export default compose (withFirebase, withAuthorization(condition))(Home);

‎meetsy/src/components/Meet/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ class Meet extends Component {
9494

9595
getMedia = () => {
9696
this.setState({
97-
video: false, // this.videoAvailable,
98-
audio: false // this.audioAvailable
97+
video: this.videoAvailable,
98+
audio: this.audioAvailable
9999
}, () => {
100100
this.getUserMedia()
101101
this.connectToSocketServer()

‎meetsy/src/components/Modal/index.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { useState } from 'react';
2+
import { Column } from 'simple-flexbox';
3+
import styled from 'styled-components';
4+
import { COLORS } from '../../constants/designConstants';
5+
6+
const ModalMain = styled.div`
7+
position:fixed;
8+
background-color: ${COLORS.complementaryDark};
9+
width: 500px;
10+
height: 370px;
11+
top:50%;
12+
left:50%;
13+
transform: translate(-50%,-50%);
14+
`;
15+
16+
const StyledModal = styled.div`
17+
position: fixed;
18+
top: 0;
19+
left: 0;
20+
width:100%;
21+
height: 100%;
22+
background: rgba(0, 0, 0, 0.6);
23+
}
24+
`;
25+
26+
const Modal = ({ handleClose, show, children }) => {
27+
const showHideClassName = show ? {display: "block"} : {display: "none"};
28+
29+
return (
30+
<StyledModal style = {showHideClassName}>
31+
<ModalMain>
32+
{children}
33+
<button type="button" onClick={handleClose}>
34+
Close
35+
</button>
36+
</ModalMain>
37+
</StyledModal>
38+
);
39+
};
40+
41+
export default Modal;

0 commit comments

Comments
 (0)