Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changed the success toast to reflect Lazim's design #512

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Changed the success toast to reflect Lazim's design #512

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5e4d9e3
Changed the success toast to reflect Lazim's design
namanhboi Apr 13, 2024
4bc96f2
ran prettier
namanhboi Apr 14, 2024
384ae89
Greyed out background of success modal and made it unclickable but st…
namanhboi Apr 26, 2024
b651536
Merge branch 'master' into nd433/successModal
namanhboi Oct 2, 2024
ebcd5cf
got it to compile, encountered a bug where clicking on employeee goes…
namanhboi Oct 2, 2024
d1c8ce2
ran prettier
namanhboi Oct 2, 2024
dfc092f
ran prettier
namanhboi Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion frontend/src/components/AuthManager/AuthManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ const AuthManager = () => {
};
}

const { visible, message, toastType } = useToast();
const { visible, message, toastType, setVisible } = useToast();

if (!signedIn) {
return (
Expand Down Expand Up @@ -207,6 +207,8 @@ const AuthManager = () => {
<Toast
message={message}
toastType={toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR}
onClose={() => setVisible(false)}
isOpen={visible}
/>,
document.body
)}
Expand Down
93 changes: 80 additions & 13 deletions frontend/src/components/ConfirmationToast/ConfirmationToast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,92 @@
import React from 'react';
import { check, block } from '../../icons/other/index';
import React, { useState, useEffect } from 'react';

Check warning on line 1 in frontend/src/components/ConfirmationToast/ConfirmationToast.tsx

View workflow job for this annotation

GitHub Actions / check 

'useState' is defined but never used
import { green_check, block, close } from '../../icons/other';

Check warning on line 2 in frontend/src/components/ConfirmationToast/ConfirmationToast.tsx

View workflow job for this annotation

GitHub Actions / check 

'block' is defined but never used
import styles from './confirmationtoast.module.css';
import { ToastStatus } from '../../context/toastContext';
import FocusTrap from 'focus-trap-react';
import { createPortal } from 'react-dom';

type toastProps = {
message: string;
toastType?: ToastStatus;
onClose: () => void;
isOpen: boolean;
};

const Toast = ({ message, toastType }: toastProps) => {
return typeof toastType === 'undefined' ||
toastType == ToastStatus.SUCCESS ? (
<div className={`${styles.toast} ${styles.successToast}`}>
<img alt="toast check" src={check} />
<p className={styles.toasttext}>{message}</p>
</div>
const Toast = ({ message, toastType, onClose, isOpen }: toastProps) => {
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'initial';
}
}, [isOpen]);
return toastType == ToastStatus.SUCCESS ? (

Check warning on line 23 in frontend/src/components/ConfirmationToast/ConfirmationToast.tsx

View workflow job for this annotation

GitHub Actions / check 

Expected '===' and instead saw '=='
<>
{isOpen &&
createPortal(
<FocusTrap
focusTrapOptions={{
onDeactivate: onClose,
returnFocusOnDeactivate: true,
}}
>
<div className={styles.background}>
<div
className={`${styles.toast} ${styles.successToast}`}
id="bruh"
>
<button
onClick={() => {
onClose();
}}
className={styles.closeButton}
>
<img src={close} className={styles.closeImg}></img>

Check warning on line 44 in frontend/src/components/ConfirmationToast/ConfirmationToast.tsx

View workflow job for this annotation

GitHub Actions / check 

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images
</button>
<div className={styles.toastContent}>
<img alt="toast check" src={green_check} />
<p className={styles.toasttext}>{message}</p>
</div>
<button
onClick={() => {
onClose();
}}
className={styles.continueButton}
>
<p className={styles.continueText}>Continue</p>
</button>
</div>
</div>
</FocusTrap>,
document.body
)}
</>
) : (
<div className={`${styles.toast} ${styles.errorToast}`}>
<img alt="toast block" src={block} />
<p className={styles.toasttext}>{message}</p>
</div>
<>
{isOpen &&
createPortal(
<FocusTrap
focusTrapOptions={{
onDeactivate: onClose,
returnFocusOnDeactivate: true,
}}
>
<div className={`${styles.toast} ${styles.errorToast}`}>
<button onClick={onClose} className={styles.closeButton}>
<img src={close} className={styles.closeImg}></img>

Check warning on line 76 in frontend/src/components/ConfirmationToast/ConfirmationToast.tsx

View workflow job for this annotation

GitHub Actions / check 

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images
</button>
<div className={styles.toastContent}>
<img alt="toast check" src={green_check} />
<p className={styles.toasttext}>{message}</p>
</div>
<button onClick={onClose} className={styles.continueButton}>
<p className={styles.continueText}>Continue</p>
</button>
</div>
</FocusTrap>,
document.body
)}
</>
);
};

Expand Down
71 changes: 61 additions & 10 deletions frontend/src/components/ConfirmationToast/confirmationtoast.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,79 @@
.toast {
position: fixed;
top: 2rem;
background-color: black;
top: 50%;
left: 50%;
transform: translate(-50%, 0);
transform: translate(-50%, -50%);
margin: auto;
padding: 0.75rem 1rem;
width: 38.5rem;
height: 25.125rem;
padding: 1.5rem 1.5rem;
box-shadow: 4px 6px 30px 5px rgba(0, 0, 0, 0.15);
border-radius: 0.625rem;
z-index: 999;
border-radius: 1rem;
z-index: 1000;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
}
.background {
position: fixed;
background-color: rgba(13, 13, 13, 0.6);
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1000;
}
.toastContent {
margin-bottom: 4rem;
display: flex;
align-items: center;
flex-direction: column;
}

.toasttext {
font-size: 1.0625rem;
height: 100%;
margin-left: 0.625rem;
color: white;
color: #00c48c;
text-align: center;
font-size: 1.75rem;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top: 1.5rem;
}

.successToast {
background-color: #00c48c;
background-color: white;
}

.errorToast {
background-color: #ff0000;
}

.continueButton {
background-color: #00c48c;
border: none;
border-radius: 9px;
padding: 0.4rem 2.5rem;
margin-bottom: 2.5rem;
}

.continueText {
color: #fff;
text-align: center;
font-size: 0.938rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}

.closeButton {
background-color: white;
border: none;
align-self: flex-end;
border: none;
cursor: pointer;
background: none;
padding: 0;
margin-bottom: 1rem;
}
14 changes: 7 additions & 7 deletions frontend/src/components/UserDetail/UserDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const UserDetail = ({
const { refreshUser } = useContext(AuthContext);
const [showingToast, setToast] = useState(false);
const { refreshRiders } = useRiders();
const { toastType } = useToast();
const { toastType, showToast } = useToast();
const [confirmationModalisOpen, setConfirmationModalisOpen] = useState(false);

const openConfirmationModal = () => {
Expand All @@ -97,14 +97,14 @@ const UserDetail = ({
});
}
};
if (isShowing && rider) {
showToast(
`Rider ${rider.active ? 'activated' : 'deactivated'}.`,
toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR
namanhboi marked this conversation as resolved.
Show resolved Hide resolved
);
}
return (
<div className={cn(styles.userDetail, { [styles.rider]: isRider })}>
{isShowing && rider ? (
<Toast
message={`Rider ${rider.active ? 'activated' : 'deactivated'}.`}
toastType={toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR}
/>
) : null}
<div className={styles.imgContainer}>
{photoLink && photoLink !== '' ? (
<img
Expand Down
22 changes: 19 additions & 3 deletions frontend/src/context/toastContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@ type toastStat = {
message: string;
showToast: (message: string, currentToastType: ToastStatus) => void;
toastType: boolean;
namanhboi marked this conversation as resolved.
Show resolved Hide resolved
setVisible: React.Dispatch<React.SetStateAction<boolean>>;
};

const initalState: toastStat = {
visible: false,
message: '',
showToast: function () {},
namanhboi marked this conversation as resolved.
Show resolved Hide resolved
toastType: false,
setVisible: function () {},
namanhboi marked this conversation as resolved.
Show resolved Hide resolved
};

const ToastContext = React.createContext(initalState);
Expand All @@ -35,14 +37,27 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
const showToast = (inputMessage: string, currentToastType: ToastStatus) => {
setMessage(inputMessage);
setVisible(true);

if (currentToastType == ToastStatus.ERROR) {
setToastType(false);
setTimeout(() => {
namanhboi marked this conversation as resolved.
Show resolved Hide resolved
setVisible(false);
}, 2000);
} else {
if (currentToastType == ToastStatus.SUCCESS) {
setToastType(true);
} else {
new Error('Invalid Toast type');
}
}
currentToastType == ToastStatus.ERROR
? setToastType(false)
: currentToastType == ToastStatus.SUCCESS
? setToastType(true)
: new Error('Invalid Toast type');
setTimeout(() => {
setVisible(false);
}, 2000);
// setTimeout(() => {
// setVisible(false);
// }, 2000);
};

namanhboi marked this conversation as resolved.
Show resolved Hide resolved
return (
Expand All @@ -52,6 +67,7 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
message,
showToast,
toastType,
setVisible,
}}
>
{children}
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/icons/other/green-check.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/icons/other/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@ export { default as chevronLeft } from './chevron-left.svg';
export { default as block } from './blocked.svg';
export { default as red_trash } from './red-trash.svg';
export { default as search_icon } from './search.svg';
export { default as green_check } from './green-check.svg';
Loading