Skip to content

Commit 9944d9a

Browse files
BartoszSzatkowskiBartoszSzatkowski
committed
style: styles in the night part 2
1 parent 79e3338 commit 9944d9a

11 files changed

Lines changed: 108 additions & 71 deletions

File tree

‎client/src/Assets/solo-check.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎client/src/Assets/solo-cross.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎client/src/Components/Calendar/CheckboxListHistory.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { ReactComponent as CheckBoxChecked } from '../../Assets/chekcbox-checked.svg';
3-
import { ReactComponent as CheckBoxCrossed } from '../../Assets/chekcbox-cross.svg';
2+
import { ReactComponent as CheckIcon } from '../../Assets/solo-check.svg';
3+
import { ReactComponent as CrossIcon } from '../../Assets/solo-cross.svg';
44

55
import { useSessionAttendanceQuery } from '../../generated/graphql';
66
import User from '../../Types/user';
@@ -32,9 +32,17 @@ const CheckboxListHistory: React.FC<Props> = ({ studentList }) => {
3232
(attendee) => attendee?.email === student?.email
3333
)
3434
) {
35-
return <CheckBoxChecked className="w-10 h-10" />;
35+
return (
36+
<div className='flex justify-center items-center w-16 h-16'>
37+
<CheckIcon className='w-7 h-7' />
38+
</div>
39+
);
3640
}
37-
return <CheckBoxCrossed className="w-10 h-10" />;
41+
return (
42+
<div className='flex justify-center items-center w-16 h-16'>
43+
<CrossIcon className='w-7 h-7' />
44+
</div>
45+
);
3846
})}
3947
</div>
4048
);

‎client/src/Components/Calendar/Overview.tsx‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,9 @@ import { useCourseOverviewQuery } from '../../generated/graphql';
44
//package for date format
55
import moment from 'moment';
66

7-
const overviewStyle =
8-
'flex flex-col m-auto bg-green w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 mt-8 h-1/2 lg:h-3/4 px-2 pb-2';
7+
const overviewStyle = 'flex flex-col bg-green w-11/12 mt-4 self-center';
98

10-
const historyStyle =
11-
'flex flex-row flex-wrap justify-start bg-white w-full overflow-scroll h-6/7';
9+
const historyStyle = 'grid grid-cols-6 bg-white w-full h-6/7';
1210

1311
const Overview: React.FC = () => {
1412
const courseId = Number(useParams().courseId);
@@ -26,35 +24,35 @@ const Overview: React.FC = () => {
2624

2725
console.log('history: ', history);
2826
return (
29-
<div className="h-screen">
30-
<div className={overviewStyle}>
31-
<article className='flex flex-col justify-center h-full'>
32-
<p className='m-auto text-xl text-white pb-2 h-8 flex'>Attendance</p>
33-
<section className={historyStyle}>
34-
{!!sessions &&
35-
sessions.map((session) => {
36-
if (session) {
37-
const date = new Date(Number(session.createdAt));
38-
const UTCdate = date.toUTCString();
39-
return (
40-
<div className='h-20 p-2 w-32 text-center border-2 border-black m-1 hover:bg-green-xlight'>
41-
<Link to={`/homepage/classes/${courseId}/${session.id}`}>
42-
<div>
43-
<h5 className='text-lg sm:text-xl'>
44-
{session.attendance}
45-
</h5>
46-
<p className='text-sm sm:text-md'>
47-
{moment(UTCdate).format('L')}
48-
</p>
49-
</div>
50-
</Link>
51-
</div>
52-
);
53-
}
54-
})}
55-
</section>
56-
</article>
57-
</div>
27+
<div className={overviewStyle}>
28+
<article className='flex flex-col justify-center h-full'>
29+
<p className='flex justify-center items-center text-4xl text-white h-16'>
30+
Sessions Attendance
31+
</p>
32+
<section className={historyStyle}>
33+
{!!sessions &&
34+
sessions.map((session) => {
35+
if (session) {
36+
const date = new Date(Number(session.createdAt));
37+
const UTCdate = date.toUTCString();
38+
return (
39+
<div className='flex items-center justify-center h-32 w-32 text-center border-2 border-white hover:border-green'>
40+
<Link to={`/homepage/classes/${courseId}/${session.id}`}>
41+
<div>
42+
<h5 className='font-bold text-6xl text-green'>
43+
{session.attendance}
44+
</h5>
45+
<p className='text-sm sm:text-md text-black'>
46+
{moment(UTCdate).format('L')}
47+
</p>
48+
</div>
49+
</Link>
50+
</div>
51+
);
52+
}
53+
})}
54+
</section>
55+
</article>
5856
</div>
5957
);
6058
};

‎client/src/Components/Calendar/SessionHistory.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { useParams } from 'react-router';
55
import { useNavigate } from 'react-router-dom';
66
import StudentsList from '../ClassView/StudentsList';
77

8-
const btnStyle = 'flex bg-green text-white p-4 shadow-lg m-auto my-8';
8+
const btnStyle =
9+
'flex justify-center items-center bg-green text-white text-lg p-4 h-16 w-1/3 shadow-lg mb-8 mx-11 self-end';
910

1011
const SessionHistory: React.FC = () => {
1112
const courseId = Number(useParams().courseId);
@@ -19,12 +20,16 @@ const SessionHistory: React.FC = () => {
1920
}
2021

2122
return (
22-
<div>
23-
<footer className="flex justify-center my-4"></footer>
24-
<StudentsList courseId={courseId} />
23+
<div className='flex flex-col'>
2524
<button className={btnStyle} onClick={handleClick}>
2625
Back to history overview
2726
</button>
27+
<div className='w-5/12 self-start ml-8'>
28+
<h2 className='font-bold text-2xl px-8 mb-4'>
29+
Session ADD SESSION DATE TO REDUX:
30+
</h2>
31+
<StudentsList courseId={courseId} />
32+
</div>
2833
</div>
2934
);
3035
};

‎client/src/Components/Calendar/StudentHistory.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { useIndividualAttendanceQuery } from '../../generated/graphql';
33
import { useParams } from 'react-router';
44
import { useNavigate } from 'react-router-dom';
55
import { useSelector, useDispatch } from 'react-redux';
6-
import { ReactComponent as CheckBoxChecked } from '../../Assets/chekcbox-checked.svg';
7-
import { ReactComponent as CheckBoxCrossed } from '../../Assets/chekcbox-cross.svg';
6+
import { ReactComponent as CheckIcon } from '../../Assets/solo-check.svg';
7+
import { ReactComponent as CrossIcon } from '../../Assets/solo-cross.svg';
88
import moment from 'moment';
99
import Student from '../../Types/student';
1010

@@ -47,24 +47,24 @@ const StudentHistory: React.FC = () => {
4747
if (indivHistory) {
4848
return (
4949
<div>
50-
<h1 className="flex justify-center text-lg md:text-xl">
51-
{name} {lastname}
52-
</h1>
5350
<button className={btnStyle} onClick={handleClick}>
5451
Back to session overview
5552
</button>
56-
<section className="flex justify-center h-1/4 md:h-1/2 lg:h-5/6 xl:h-screen p-4">
57-
<div className=" flex flex-row flex-wrap justify-start bg-white w-11/12 md:h-2/3 lx:w-9/12 overflow-scroll border-green border-8">
53+
<h1 className='flex justify-center text-lg md:text-xl'>
54+
{name} {lastname}
55+
</h1>
56+
<section className='flex justify-center h-1/4 md:h-1/2 lg:h-5/6 xl:h-screen p-4'>
57+
<div className=' flex flex-row flex-wrap justify-start bg-white w-11/12 md:h-2/3 lx:w-9/12 overflow-scroll border-green border-8'>
5858
{indivHistory.map((session) => {
5959
const date = new Date(Number(session!.date));
6060
const UTCdate = date.toUTCString();
6161

6262
return (
63-
<div className="flex flex-col justify-center w-26 p-2 md:w-32 items-center border-2 border-black m-1 hover:bg-green-xlight">
63+
<div className='flex flex-col justify-center w-26 p-2 md:w-32 items-center border-2 border-black m-1 hover:bg-green-xlight'>
6464
{session!.attended ? (
65-
<CheckBoxChecked className="w-10 h-10" />
65+
<CheckIcon className='w-10 h-10' />
6666
) : (
67-
<CheckBoxCrossed className="w-10 h-10" />
67+
<CrossIcon className='w-10 h-10' />
6868
)}
6969
<p>{moment(UTCdate).format('L')}</p>
7070
</div>

‎client/src/Components/ClassView/ClassView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const headerStyle =
1212
const attendanceStyle =
1313
'flex justify-center bg-black py-4 rounded-sm text-lg w-1/3 text-white mb-4 h-16';
1414
const listHeader =
15-
'flex items-center w-1/2 bg-green p-2 px-6 text-white text-lg rounded-t-sm h-16';
15+
'flex items-center w-1/2 p-2 px-6 border-2 text-black text-lg rounded-t-sm h-16';
1616

1717
const ClassView: React.FC = () => {
1818
const dispatch = useDispatch();

‎client/src/Components/ClassView/StudentElement.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface Props {
88
const StudentElement: React.FC<Props> = ({ name, lastname }) => {
99
return (
1010
<div className='flex flex-col justify-center h-16'>
11-
<h3 className='mt-2 text-xl'>
11+
<h3 className='text-xl'>
1212
{lastname} {name}
1313
</h3>
1414
</div>

‎client/src/Components/ClassView/StudentElementHistory.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ const StudentElementHistory: React.FC<Props> = ({
3030
}
3131

3232
return (
33-
<button className="flex place-items-center h-10" onClick={handleClick}>
34-
<h3 className="mx-4">
33+
<button className='flex place-items-center h-16' onClick={handleClick}>
34+
<h3 className='text-xl'>
3535
{lastname} {name}
3636
</h3>
3737
</button>

‎client/src/Components/TeacherHomepage/Instruction.tsx‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,63 @@ import startImg from '../../Assets/startsession.png';
44
import attendanceImg from '../../Assets/classdata.png';
55
import studentData from '../../Assets/studentdata.png';
66

7-
const imgStyle = "bg-white rounded-full h-16 w-16 flex justify-center items-center"
8-
const info = "w-2/3 text-2xl h-20 flex md:pl-8 pl-1 pr-2 items-center rounded-full justify-between"
7+
const imgStyle =
8+
'bg-white rounded-full h-16 w-16 flex justify-center items-center';
9+
const info =
10+
'w-2/3 text-2xl h-20 flex md:pl-8 pl-1 pr-2 items-center rounded-full justify-between';
911

1012
const Instruction = () => {
1113
return (
12-
<div className="h-screen flex flex-col items-center">
13-
<h1 className="text-5xl my-8">Quick start</h1>
14+
<div className='flex flex-col items-center'>
15+
<h1 className='text-5xl my-8'>Quick start</h1>
1416
<p className={`${info} mb-4 bg-shades-one`}>
1517
Create or open a class
1618
<div className={imgStyle}>
17-
<img src={openOrCreate} alt="Open or create class" className="h-10 w-10" />
19+
<img
20+
src={openOrCreate}
21+
alt='Open or create class'
22+
className='h-10 w-10'
23+
/>
1824
</div>
1925
</p>
2026
<p className={`${info} my-4 bg-shades-two`}>
2127
Register students
2228
<div className={imgStyle}>
23-
<img src={registerImg} alt="Open or create class" className="h-10 w-10" />
29+
<img
30+
src={registerImg}
31+
alt='Open or create class'
32+
className='h-10 w-10'
33+
/>
2434
</div>
2535
</p>
2636
<p className={`${info} my-4 bg-shades-three`}>
2737
Start a session
2838
<div className={imgStyle}>
29-
<img src={startImg} alt="Open or create class" className="h-10 w-10" />
39+
<img
40+
src={startImg}
41+
alt='Open or create class'
42+
className='h-10 w-10'
43+
/>
3044
</div>
3145
</p>
3246
<p className={`${info} my-4 bg-shades-four`}>
3347
Access attendance data
3448
<div className={imgStyle}>
35-
<img src={attendanceImg} alt="Open or create class" className="h-10 w-10" />
49+
<img
50+
src={attendanceImg}
51+
alt='Open or create class'
52+
className='h-10 w-10'
53+
/>
3654
</div>
3755
</p>
3856
<p className={`${info} my-4 bg-shades-five`}>
3957
Check individual student data
4058
<div className={imgStyle}>
41-
<img src={studentData} alt="Open or create class" className="h-10 w-10" />
59+
<img
60+
src={studentData}
61+
alt='Open or create class'
62+
className='h-10 w-10'
63+
/>
4264
</div>
4365
</p>
4466
</div>

0 commit comments

Comments
 (0)