Skip to content
This repository was archived by the owner on Aug 8, 2019. It is now read-only.

Commit 34465e7

Browse files
cristianbgpcristianbgp
committed
Add basic UI to Owner Home view
1 parent 6d748b2 commit 34465e7

5 files changed

Lines changed: 480 additions & 0 deletions

File tree

‎client/src/components/owner-club-circle.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/** @jsx jsx */
2+
import { jsx } from "@emotion/core";
3+
import { Title } from "../components/ui";
4+
5+
function OwnerClubCircle({ id, active, name, activeClub, setActiveClub }) {
6+
const styleCircle = {
7+
backgroundColor: "#bababa",
8+
width: "80px",
9+
height: "80px",
10+
borderRadius: "50%",
11+
margin: "0 1em",
12+
display: "flex",
13+
cursor: "pointer",
14+
border: "solid #ffffff00 0.5em",
15+
flex: "0 0 80px"
16+
};
17+
18+
const styleActive = {
19+
...styleCircle,
20+
border: "solid #272727 0.5em"
21+
};
22+
23+
const styleName = {
24+
fontWeight: "normal",
25+
margin: "auto",
26+
alignSelf: "center"
27+
};
28+
29+
function handleClick() {
30+
setActiveClub(id);
31+
}
32+
33+
return (
34+
<div
35+
css={activeClub === id ? styleActive : styleCircle}
36+
onClick={handleClick}
37+
>
38+
<Title css={styleName}>{name}</Title>
39+
</div>
40+
);
41+
}
42+
43+
export default OwnerClubCircle;

‎client/src/components/owner-sportfield-card.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/** @jsx jsx */
2+
import React from "react";
3+
import { jsx } from "@emotion/core";
4+
import { Card, Title, Progress } from "../components/ui";
5+
6+
function OwnerSportFieldCard({ name, progressStatus }) {
7+
const [status, setStatus] = React.useState("0%");
8+
9+
const styleCard = {
10+
maxWidth: "40%",
11+
marginBottom: "1.5em",
12+
"@media screen and (max-width: 530px)": {
13+
maxWidth: "100%"
14+
}
15+
};
16+
17+
React.useEffect(() => {
18+
if (status !== progressStatus) {
19+
setStatus(progressStatus);
20+
}
21+
}, [progressStatus, status]);
22+
23+
return (
24+
<Card css={styleCard}>
25+
<Title>{name}</Title>
26+
<Progress styles={{ bar: { width: status } }} />
27+
<p css={{ textAlign: "center" }}>Bookings: {progressStatus}</p>
28+
</Card>
29+
);
30+
}
31+
32+
export default OwnerSportFieldCard;

‎client/src/components/ui.js‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
/** @jsx jsx */
2+
import { jsx } from "@emotion/core";
3+
4+
function Button({ styles, ...props }) {
5+
return (
6+
<button
7+
{...props}
8+
css={{
9+
backgroundColor: "#3AC69F",
10+
border: "1px solid #3AC69F",
11+
borderRadius: ".25rem",
12+
color: "white",
13+
cursor: "pointer",
14+
fontSize: "1rem",
15+
padding: ".75rem 0",
16+
transition: "all 200ms ease",
17+
textAlign: "center",
18+
width: "100%",
19+
"&:hover": {
20+
backgroundColor: "white",
21+
color: "black"
22+
},
23+
...styles
24+
}}
25+
/>
26+
);
27+
}
28+
29+
function SecondaryButton({ styles, ...props }) {
30+
return (
31+
<span
32+
{...props}
33+
css={{
34+
color: "#000000",
35+
cursor: "pointer",
36+
fontSize: ".8rem",
37+
textAlign: "center",
38+
textDecoration: "underline",
39+
padding: "1em",
40+
...styles
41+
}}
42+
/>
43+
);
44+
}
45+
46+
function Modal({ styles = {}, children }) {
47+
return (
48+
<div
49+
css={{
50+
backgroundColor: "rgba(0, 0, 0, .5)",
51+
display: "flex",
52+
justifyContent: "center",
53+
alignItems: "center",
54+
position: "fixed",
55+
top: 0,
56+
left: 0,
57+
right: 0,
58+
bottom: 0,
59+
zIndex: 100,
60+
...(styles.backdrop || {})
61+
}}
62+
>
63+
<div
64+
role="dialog"
65+
css={{
66+
position: "fixed",
67+
top: "50%",
68+
transform: "translateY(-50%)",
69+
width: "80%",
70+
maxWidth: 450,
71+
zIndex: 110,
72+
...(styles.dialog || {})
73+
}}
74+
>
75+
{children}
76+
</div>
77+
</div>
78+
);
79+
}
80+
81+
function Title({ styles, ...props }) {
82+
return (
83+
<p
84+
{...props}
85+
css={{
86+
fontSize: "1.1em",
87+
fontWeight: "bold",
88+
margin: "1em 0",
89+
...styles
90+
}}
91+
/>
92+
);
93+
}
94+
95+
function Line({ styles, ...props }) {
96+
return (
97+
<hr
98+
{...props}
99+
css={{ border: "solid 1px #efefef", background: "#efefef" }}
100+
/>
101+
);
102+
}
103+
104+
function Card({ styles, ...props }) {
105+
return (
106+
<div
107+
{...props}
108+
css={{
109+
background: "white",
110+
borderRadius: ".5em",
111+
boxShadow: "2px 2px 5px 0px rgba(0, 0, 0, 0.39)",
112+
boxSizing: "border-box",
113+
padding: "2rem",
114+
width: "100%",
115+
...styles
116+
}}
117+
/>
118+
);
119+
}
120+
121+
function Input({ styles, ...props }) {
122+
return (
123+
<input
124+
{...props}
125+
css={{
126+
background: "none",
127+
border: "1px solid #eaeaea",
128+
borderRadius: ".25rem",
129+
boxSizing: "border-box",
130+
display: "block",
131+
fontSize: "1rem",
132+
padding: ".5rem",
133+
width: "100%",
134+
"&:focus": {
135+
outline: "none",
136+
borderColor: "#444444"
137+
},
138+
...styles
139+
}}
140+
/>
141+
);
142+
}
143+
144+
function Select({ styles = {}, children, ...props }) {
145+
return (
146+
<div
147+
css={{
148+
WebkitAppearance: "none",
149+
color: "rgb(0, 0, 0)",
150+
display: "inline-flex",
151+
height: 40,
152+
fontSize: 12,
153+
textTransform: "uppercase",
154+
userSelect: "none",
155+
fontWeight: 100,
156+
position: "relative",
157+
whiteSpace: "nowrap",
158+
lineHeight: 0,
159+
width: "auto",
160+
minWidth: 160,
161+
background: "rgb(255, 255, 255)",
162+
outline: "none",
163+
borderWidth: 1,
164+
borderStyle: "solid",
165+
borderColor: "rgb(234, 234, 234)",
166+
borderImage: "initial",
167+
overflow: "hidden",
168+
transition:
169+
"border 0.2s ease 0s, background 0.2s ease 0s, color 0.2s ease-out 0s, box-shadow 0.2s ease 0s",
170+
borderRadius: 4,
171+
...(styles.container || {})
172+
}}
173+
>
174+
<select
175+
css={{
176+
height: "100%",
177+
boxShadow: "none",
178+
color: "rgb(0, 0, 0)",
179+
lineHeight: 40,
180+
fontSize: 14,
181+
marginRight: -20,
182+
width: "calc(100% + 20px)",
183+
textTransform: "none",
184+
borderWidth: "initial",
185+
borderStyle: "none",
186+
borderColor: "initial",
187+
borderImage: "initial",
188+
background: "none transparent",
189+
padding: "0px 76px 0px 16px",
190+
outline: "none",
191+
...(styles.select || {})
192+
}}
193+
{...props}
194+
>
195+
{children}
196+
</select>
197+
<div
198+
css={{
199+
width: 30,
200+
height: "100%",
201+
position: "absolute",
202+
right: 0,
203+
pointerEvents: "none",
204+
display: "flex",
205+
alignItems: "center",
206+
justifyContent: "center",
207+
borderLeft: "1px solid rgb(234, 234, 234)",
208+
background: "rgb(255, 255, 255)",
209+
transition: "border 0.2s ease 0s",
210+
...(styles.icon || {})
211+
}}
212+
>
213+
<svg
214+
width="7"
215+
height="17"
216+
viewBox="0 0 7 12"
217+
fill="none"
218+
aria-label="arrow double"
219+
>
220+
<path
221+
d="M0.642491 3.35053L0.292945 3.70804L1.00798 4.40714L1.35752 4.04962L0.642491 3.35053ZM3.75752 1.59491L4.10707 1.23739L3.39204 0.538299L3.04249 0.895815L3.75752 1.59491ZM5.58506 4.04651L5.93149 4.40704L6.65256 3.71417L6.30613 3.35364L5.58506 4.04651ZM3.95354 0.9053L3.6071 0.544767L2.88604 1.23763L3.23247 1.59817L3.95354 0.9053ZM1.35752 7.95041L1.00797 7.59289L0.292938 8.29198L0.642485 8.6495L1.35752 7.95041ZM3.04248 11.1042L3.39203 11.4617L4.10706 10.7626L3.75751 10.4051L3.04248 11.1042ZM6.36054 8.64636L6.70697 8.28583L5.98591 7.59296L5.63947 7.95349L6.36054 8.64636ZM3.28688 10.4018L2.94045 10.7624L3.66152 11.4552L4.00795 11.0947L3.28688 10.4018ZM1.35752 4.04962L3.75752 1.59491L3.04249 0.895815L0.642491 3.35053L1.35752 4.04962ZM6.30613 3.35364L3.95354 0.9053L3.23247 1.59817L5.58506 4.04651L6.30613 3.35364ZM0.642485 8.6495L3.04248 11.1042L3.75751 10.4051L1.35752 7.95041L0.642485 8.6495ZM5.63947 7.95349L3.28688 10.4018L4.00795 11.0947L6.36054 8.64636L5.63947 7.95349Z"
222+
fill="#000"
223+
/>
224+
</svg>
225+
</div>
226+
</div>
227+
);
228+
}
229+
230+
function Progress({ styles = {}, ...props }) {
231+
return (
232+
<div
233+
{...props}
234+
css={{
235+
width: "100%",
236+
margin: "30px auto 0",
237+
...(styles.container || {})
238+
}}
239+
>
240+
<div
241+
css={{
242+
overflow: "hidden",
243+
height: "18px",
244+
backgroundColor: "#f7f7f7",
245+
backgroundImage: "linear-gradient(top, #f5f5f5, #f9f9f9)",
246+
backgroundRepeat: "repeat-x",
247+
boxShadow: "inset 0 1px 2px rgba(0, 0, 0, 0.1)",
248+
borderRadius: "30px",
249+
...(styles.progress || {})
250+
}}
251+
>
252+
<div
253+
css={{
254+
width: "0%",
255+
height: "18px",
256+
backgroundColor: "#bae66b",
257+
backgroundImage: "linear-gradient(top, #f5f5f5, #f9f9f9)",
258+
backgroundRepeat: "repeat-x",
259+
boxShadow: "inset 0 -1px 0 rgba(0, 0, 0, 0.15)",
260+
boxSizing: "border-box",
261+
transition: "width 0.6s ease",
262+
...(styles.bar || {})
263+
}}
264+
/>
265+
</div>
266+
</div>
267+
);
268+
}
269+
270+
export {
271+
Button,
272+
Modal,
273+
Card,
274+
Input,
275+
Select,
276+
Title,
277+
SecondaryButton,
278+
Line,
279+
Progress
280+
};

‎client/src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import store from "./store";
1010
import Home from "./views/home";
1111
import Login from "./views/login";
1212
import Signup from "./views/signup";
13+
import OwnerHome from "./views/owner-home";
1314
import Navbar from "./components/navbar";
1415
import { register } from "./service-worker";
1516

@@ -41,6 +42,7 @@ function App() {
4142
<Home path="/" />
4243
<Login path="/login" />
4344
<Signup path="/signup" />
45+
<OwnerHome path="/owner" />
4446
</Router>
4547
</main>
4648
</>

0 commit comments

Comments
 (0)