From d95ca66ad3febe8257bd5f419e1dd896f0bc59fa Mon Sep 17 00:00:00 2001 From: KamilPawel <70412950+KamilPawel@users.noreply.github.com> Date: Mon, 7 Aug 2023 13:33:53 +0100 Subject: [PATCH] fix: added spacings and the copy to clipboard functionality (#127) * fix: added spacings and the copy to clipboard functionality - grey colours seem to be okay * fix: remove sx={{}} that is empty --- .../src/components/CopyToClipboardIcon.tsx | 19 +- .../newStudentsTable/NewStudentsTable.tsx | 308 +++++++++--------- .../teacherDashboard/classes/Classes.tsx | 59 ++-- .../student/resetStudent/ResetStudent.tsx | 53 ++- 4 files changed, 217 insertions(+), 222 deletions(-) diff --git a/frontend/src/components/CopyToClipboardIcon.tsx b/frontend/src/components/CopyToClipboardIcon.tsx index cc9bb06c..2c57903a 100644 --- a/frontend/src/components/CopyToClipboardIcon.tsx +++ b/frontend/src/components/CopyToClipboardIcon.tsx @@ -2,7 +2,7 @@ import { ContentCopy } from '@mui/icons-material'; import React from 'react'; import { styled } from '@mui/material/styles'; import { CopyToClipboard } from 'react-copy-to-clipboard'; -import { Tooltip } from '@mui/material'; +import { Tooltip, Box, BoxProps } from '@mui/material'; const CopyContentIconStyled = styled(ContentCopy)(({ theme }) => ({ color: theme.palette.info.dark, @@ -14,8 +14,9 @@ const CopyContentIconStyled = styled(ContentCopy)(({ theme }) => ({ })); const CopyToClipboardIcon: React.FC<{ - accessCode: string; -}> = ({ accessCode }) => { + stringToCopy: string; + sx?: BoxProps; +}> = ({ stringToCopy, sx }) => { const [copiedMessage, setCopiedMessage] = React.useState('Copy to clipboard'); const handleCopy: () => void = () => { setCopiedMessage('Copied to clipboard!'); @@ -24,11 +25,13 @@ const CopyToClipboardIcon: React.FC<{ setCopiedMessage('Copy to clipboard'); }; return ( - - - - - + + + + + + + ); }; diff --git a/frontend/src/features/newStudentsTable/NewStudentsTable.tsx b/frontend/src/features/newStudentsTable/NewStudentsTable.tsx index 6a4ea2a3..7e7b3eda 100644 --- a/frontend/src/features/newStudentsTable/NewStudentsTable.tsx +++ b/frontend/src/features/newStudentsTable/NewStudentsTable.tsx @@ -10,15 +10,17 @@ import { TableRowProps, TableCell, TableCellProps, - typographyClasses + typographyClasses, + useTheme, + Box } from '@mui/material'; import { Print as PrintIcon, SaveAlt as SaveAltIcon } from '@mui/icons-material'; -import { CopyIconButton } from 'codeforlife/lib/esm/components'; import { primary } from 'codeforlife/lib/esm/theme/colors'; +import CopyToClipboardIcon from '../../components/CopyToClipboardIcon'; const WhiteTableCell: React.FC = ({ style, @@ -34,13 +36,15 @@ const WhiteTableCell: React.FC = ({ ); const HeadRowTableCell: React.FC = (props) => ( - - - + +
+
@@ -48,12 +52,14 @@ const HeadRowTableCell: React.FC = (props) => ( ); const BodyRowTableCell: React.FC = (props) => ( - - + +
@@ -77,158 +83,152 @@ const NewStudentsTable: React.FC = ({ const nameCellWidth = '40%'; const passwordCellWidth = '60%'; - return <> - - The following credentials have been created for your class. When they log in for the first time, you may want students to change their passwords to something more memorable. You can reset these details for them at any time. - - - To log on, they will need to enter their name and passwords. Alternatively, you can provide them with a direct access link from the table below. - - - You will not be shown this page again, so please make sure you retain a copy of the passwords for your records. You can print the reminder cards from the button below. Please ensure you share student passwords securely. - -
- - - - - Option 1 Login details - - - - - - Option 2 Login links - - - - - - - - - - Class link: - - - {classLink} - - - - - - - OR - - - - - No class code or password required - - - - - - - - Name - + const theme = useTheme(); + return ( + + + + The following credentials have been created for your class. When they + log in for the first time, you may want students to change their + passwords to something more memorable. You can reset these details for + them at any time. + + + To log on, they will need to enter their name and passwords. + Alternatively, you can provide them with a direct access link from the + table below. + + + You will not be shown this page again, so please make sure you retain + a copy of the passwords for your records. You can print the reminder + cards from the button below. Please ensure you share student passwords + securely. + + +
+ + + + Option 1 Login details - - - Password - + + + Option 2 Login links - - - + + + + + + + Class link: + {classLink} + + + + + + OR + + - - Copy the links below and share with the student + + No class code or password required - - - {students.map((student) => ( - - + + + - - {student.name} - + Name - - {student.password} - + Password - + - + - - - {student.link} - - - + + Copy the links below and share with the student + - + - ))} - -
- {/* TODO: fix margin bottom */} - - - - - ; + {students.map((student) => ( + + + + {student.name} + + + {student.password} + + + + + + + + {student.link} + + + + + + + ))} + + + {/* TODO: fix margin bottom */} + + + + + + ); }; export default NewStudentsTable; diff --git a/frontend/src/pages/teacherDashboard/classes/Classes.tsx b/frontend/src/pages/teacherDashboard/classes/Classes.tsx index 50a6f464..4a3d21ef 100644 --- a/frontend/src/pages/teacherDashboard/classes/Classes.tsx +++ b/frontend/src/pages/teacherDashboard/classes/Classes.tsx @@ -1,14 +1,13 @@ import React from 'react'; -import { - useParams, - useNavigate, - generatePath -} from 'react-router-dom'; +import { useParams, useNavigate, generatePath } from 'react-router-dom'; import { Button, Typography, useTheme } from '@mui/material'; import { Add, Create, DoNotDisturb } from '@mui/icons-material'; import * as Yup from 'yup'; -import { AutocompleteField, SubmitButton } from 'codeforlife/lib/esm/components/form'; +import { + AutocompleteField, + SubmitButton +} from 'codeforlife/lib/esm/components/form'; import Page from 'codeforlife/lib/esm/components/page'; import { tryValidateSync } from 'codeforlife/lib/esm/helpers/yup'; @@ -56,7 +55,7 @@ const ClassTable: React.FC = () => { alignItems="center" > {accessCode} - + {teacher === `${firstName} ${lastName}` ? 'You' : teacher} @@ -64,10 +63,11 @@ const ClassTable: React.FC = () => { - @@ -98,7 +95,7 @@ const ExternalStudentsJoiningRequestsTable: React.FC = () => { const teacherData = getTeachersData(); return ( {teacherData.map( @@ -188,23 +185,23 @@ const Classes: React.FC = () => { ); if (params?.accessCode !== undefined) { - return ; + return ; } - return <> - - <_YourClasses /> - - - - - - - - - ; + return ( + <> + + <_YourClasses /> + + + + + + + + + + ); }; export default Classes; diff --git a/frontend/src/pages/teacherDashboard/classes/editClass/student/resetStudent/ResetStudent.tsx b/frontend/src/pages/teacherDashboard/classes/editClass/student/resetStudent/ResetStudent.tsx index 8fbf4d88..f492820a 100644 --- a/frontend/src/pages/teacherDashboard/classes/editClass/student/resetStudent/ResetStudent.tsx +++ b/frontend/src/pages/teacherDashboard/classes/editClass/student/resetStudent/ResetStudent.tsx @@ -1,6 +1,6 @@ import React from 'react'; import Page from 'codeforlife/lib/esm/components/page'; -import { Button, Stack, Typography } from '@mui/material'; +import { Button, Stack, Typography, useTheme } from '@mui/material'; import NewStudentsTable from '../../../../../../features/newStudentsTable/NewStudentsTable'; import { ChevronLeft } from '@mui/icons-material'; @@ -8,45 +8,40 @@ const ResetStudent: React.FC<{ accessCode: string; studentIds: number[]; goBack: () => void; -}> = ({ - accessCode, - studentIds, - goBack -}) => { +}> = ({ accessCode, studentIds, goBack }) => { // TODO: get from API and use params const classLink = 'https://www.codeforlife.education/'; const students: Array<{ name: string; password: string; link: string; - }> = ([ + }> = [ { name: 'John', password: 'ioykms', link: 'https://www.codeforlife.education/' } - ]); - - return <> - - - Students' passwords reset for class Class 1 ({accessCode}) - - - - - - - ; + ]; + const theme = useTheme(); + return ( + <> + + + Students' passwords reset for class Class 1 ({accessCode}) + + + + + + + + ); }; export default ResetStudent;