Skip to content

Commit 5bda34a

Browse files
alaaltorosalaaltoros
committed
Contribute page component skeleton
1 parent 40dd198 commit 5bda34a

File tree

15 files changed

+472
-20
lines changed

15 files changed

+472
-20
lines changed

‎UIcode/README.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@ npm install
1010
cd client
1111
npm install
1212

13+
# Create .env.development file as follows
14+
touch .env.development
15+
16+
# set API url i.e. http://localhost:4080
17+
echo "REACT_APP_API_URL=http://localhost:4080" >> .env.development
18+
19+
#set google client id i.e. 119469794689-hhq7rpcmd88c7r5gkiom0u2pakfka3cd.apps.googleusercontent.com
20+
echo "REACT_APP_GOOGLE_CLIENT_ID=119469794689-hhq7rpcmd88c7r5gkiom0u2pakfka3cd.apps.googleusercontent.com" >> .env.development
21+
1322
# Serve on localhost:3000
14-
npm run dev
23+
cd client
24+
npm start
1525
```

‎UIcode/client/package-lock.json‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎UIcode/client/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@
55
"dependencies": {
66
"axios": "^0.18.1",
77
"bootstrap": "^4.4.1",
8+
"date-fns": "^2.11.1",
89
"js-cookie": "^2.2.1",
910
"react": "^16.8.6",
1011
"react-bootstrap": "^1.0.0",
12+
"react-day-picker": "^7.4.0",
1113
"react-dom": "^16.8.6",
1214
"react-google-login": "^5.1.2",
1315
"react-router": "^5.1.2",

‎UIcode/client/src/Components/Common/Button/index.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ const StyledButton = styled.button`
3636
box-sizing: content-box;
3737
cursor: pointer;
3838
font-weight: bold;
39-
margin: 0 9px;
4039
4140
${props => colorStyles[props.color]}
4241
`;

‎UIcode/client/src/Components/DatePicker/index.jsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from "react";
2+
import DayPickerInput from "react-day-picker/DayPickerInput";
3+
4+
import "./style.css";
5+
import styled from "styled-components";
6+
import colors from "Theme/colors";
7+
import dateFnsFormat from "date-fns/format";
8+
import dateFnsParse from "date-fns/parse";
9+
import { DateUtils } from "react-day-picker";
10+
11+
const DATE_FORMAT = "L/d/yyyy";
12+
const formatDate = (date, format, locale) =>
13+
dateFnsFormat(date, format, { locale });
14+
15+
const parseDate = (str, format, locale) => {
16+
const parsed = dateFnsParse(str, format, new Date(), { locale });
17+
if (DateUtils.isDate(parsed)) {
18+
return parsed;
19+
}
20+
return undefined;
21+
};
22+
23+
const DatePicker = ({ className, ...props }) => (
24+
<DayPickerInput
25+
{...props}
26+
classNames={{ container: className, overlay: "" }}
27+
format={DATE_FORMAT}
28+
parseDate={parseDate}
29+
formatDate={formatDate}
30+
placeholder="MM/DD/YYYY"
31+
dayPickerProps={{
32+
fromMonth: new Date(2019, 11, 1),
33+
toMonth: new Date(),
34+
disabledDays: {
35+
before: new Date(2019, 11, 1),
36+
after: new Date()
37+
}
38+
}}
39+
/>
40+
);
41+
42+
const StyledDayPicker = styled(DatePicker)`
43+
height: 60px;
44+
position: relative;
45+
46+
& > input {
47+
border: 1px solid ${colors.grey.light};
48+
height: 60px;
49+
width: 100%;
50+
padding: 10px;
51+
border-radius: 6px;
52+
background: white;
53+
cursor: pointer;
54+
transition .5s;
55+
&:active,
56+
&:focus {
57+
outline: none;
58+
border-color: ${colors.primary.main}
59+
}
60+
}
61+
`;
62+
63+
export default StyledDayPicker;

‎UIcode/client/src/Components/DatePicker/style.css‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
/* DayPicker styles */
2+
3+
.DayPicker {
4+
position: absolute;
5+
display: inline-block;
6+
font-size: 1rem;
7+
line-height: 1;
8+
max-height: 60px;
9+
}
10+
11+
.DayPicker-wrapper {
12+
border-radius: 6px;
13+
border: 1px solid #d0d0d0;
14+
top: 0;
15+
left: 0;
16+
margin-top: 6px;
17+
background: white;
18+
}
19+
20+
.DayPicker-Months {
21+
display: flex;
22+
flex-wrap: wrap;
23+
justify-content: center;
24+
}
25+
26+
.DayPicker-Month {
27+
display: table;
28+
margin: 0 1em;
29+
margin-top: 1em;
30+
border-spacing: 0;
31+
border-collapse: collapse;
32+
33+
-webkit-user-select: none;
34+
35+
-moz-user-select: none;
36+
37+
-ms-user-select: none;
38+
39+
user-select: none;
40+
}
41+
42+
.DayPicker-NavButton {
43+
position: absolute;
44+
top: 1em;
45+
right: 1.5em;
46+
left: auto;
47+
48+
display: inline-block;
49+
margin-top: 2px;
50+
width: 1.25em;
51+
height: 1.25em;
52+
background-position: center;
53+
background-size: 50%;
54+
background-repeat: no-repeat;
55+
color: #8b9898;
56+
cursor: pointer;
57+
}
58+
59+
.DayPicker-NavButton:hover {
60+
opacity: 0.8;
61+
}
62+
63+
.DayPicker-NavButton--prev {
64+
margin-right: 1.5em;
65+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC");
66+
}
67+
68+
.DayPicker-NavButton--next {
69+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==");
70+
}
71+
72+
.DayPicker-NavButton--interactionDisabled {
73+
display: none;
74+
}
75+
76+
.DayPicker-Caption {
77+
display: table-caption;
78+
margin-bottom: 0.5em;
79+
padding: 0 0.5em;
80+
text-align: left;
81+
}
82+
83+
.DayPicker-Caption > div {
84+
font-weight: 500;
85+
font-size: 1.15em;
86+
}
87+
88+
.DayPicker-Weekdays {
89+
display: table-header-group;
90+
margin-top: 1em;
91+
}
92+
93+
.DayPicker-WeekdaysRow {
94+
display: table-row;
95+
}
96+
97+
.DayPicker-Weekday {
98+
display: table-cell;
99+
padding: 0.5em;
100+
color: #8b9898;
101+
text-align: center;
102+
font-size: 0.875em;
103+
}
104+
105+
.DayPicker-Weekday abbr[title] {
106+
border-bottom: none;
107+
text-decoration: none;
108+
}
109+
110+
.DayPicker-Body {
111+
display: table-row-group;
112+
}
113+
114+
.DayPicker-Week {
115+
display: table-row;
116+
}
117+
118+
.DayPicker-Day {
119+
display: table-cell;
120+
padding: 0.5em;
121+
border-radius: 50%;
122+
vertical-align: middle;
123+
text-align: center;
124+
cursor: pointer;
125+
}
126+
127+
.DayPicker-WeekNumber {
128+
display: table-cell;
129+
padding: 0.5em;
130+
min-width: 1em;
131+
border-right: 1px solid #eaecec;
132+
color: #8b9898;
133+
vertical-align: middle;
134+
text-align: right;
135+
font-size: 0.75em;
136+
cursor: pointer;
137+
}
138+
139+
.DayPicker--interactionDisabled .DayPicker-Day {
140+
cursor: default;
141+
}
142+
143+
.DayPicker-Footer {
144+
padding-top: 0.5em;
145+
}
146+
147+
.DayPicker-TodayButton {
148+
border: none;
149+
background-color: transparent;
150+
background-image: none;
151+
box-shadow: none;
152+
color: #4a90e2;
153+
font-size: 0.875em;
154+
cursor: pointer;
155+
}
156+
157+
/* Default modifiers */
158+
159+
.DayPicker-Day--today {
160+
color: #d0021b;
161+
font-weight: 700;
162+
}
163+
164+
.DayPicker-Day--outside {
165+
color: #8b9898;
166+
cursor: default;
167+
}
168+
169+
.DayPicker-Day--disabled {
170+
color: #dce0e0;
171+
cursor: default;
172+
/* background-color: #eff1f1; */
173+
}
174+
175+
/* Example modifiers */
176+
177+
.DayPicker-Day--sunday {
178+
background-color: #f7f8f8;
179+
}
180+
181+
.DayPicker-Day--sunday:not(.DayPicker-Day--today) {
182+
color: #dce0e0;
183+
}
184+
185+
.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
186+
position: relative;
187+
188+
background-color: #4a90e2;
189+
color: #f0f8ff;
190+
}
191+
192+
.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
193+
background-color: #51a0fa;
194+
}
195+
196+
.DayPicker:not(.DayPicker--interactionDisabled)
197+
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
198+
background-color: #f0f8ff;
199+
}
200+
201+
/* DayPickerInput */
202+
203+
.DayPickerInput {
204+
display: inline-block;
205+
}
206+
207+
.DayPickerInput-OverlayWrapper {
208+
position: relative;
209+
}
210+
211+
.DayPickerInput-Overlay {
212+
position: absolute;
213+
left: 0;
214+
z-index: 1;
215+
216+
background: white;
217+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
218+
}

‎UIcode/client/src/Components/Grid/Col.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import styled from "styled-components";
32

43
const Col = styled.div`

‎UIcode/client/src/Components/Grid/Hr.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import styled from "styled-components";
2+
3+
const Hr = styled.hr`
4+
margin-top: 0;
5+
`;
6+
7+
export default Hr;

‎UIcode/client/src/Components/Grid/Row.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import React from "react";
21
import styled from "styled-components";
32

43
const Col = styled.div`
54
display: flex;
65
flex-direction: row;
76
padding: 12px 0;
7+
& > button:not(:first-child) {
8+
margin: 0 10px;
9+
}
810
`;
911

1012
export default Col;

0 commit comments

Comments
 (0)