Skip to content

Commit 7747fa7

Browse files
kyle-ssgkyle-ssg
authored
fix: Refactor toasts (#5720)
1 parent 58bdf04 commit 7747fa7

12 files changed

Lines changed: 92 additions & 57 deletions

File tree

‎frontend/web/components/CodeHelp.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const CodeHelp = class extends Component {
9696
const res = Clipboard.setString(s)
9797
toast(
9898
res ? 'Clipboard set' : 'Could not set clipboard :(',
99-
res ? '' : 'danger',
99+
res ? 'success' : 'danger',
100100
)
101101
}
102102

‎frontend/web/components/EditHealthProvider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const EditHealthProvider: FC<EditHealthProviderType> = ({
113113

114114
useEffect(() => {
115115
if (isDeleteSuccess) {
116-
toast('Provider deleted successfully', 'success')
116+
toast('Provider deleted successfully')
117117
}
118118
}, [isDeleteSuccess])
119119

‎frontend/web/components/XMLUpload.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const XMLUpload: FC<DropAreaType> = ({ onChange, value }) => {
1414
try {
1515
onChange(acceptedFiles[0], reader.result as string)
1616
} catch (e) {
17-
toast('File is not valid XML')
17+
toast('File is not valid XML', 'danger')
1818
}
1919
},
2020
false,

‎frontend/web/components/base/forms/Button.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const themeClassNames = {
1212
primary: 'btn-primary',
1313
project: 'btn-project',
1414
secondary: 'btn btn-secondary',
15+
success: 'btn btn-success',
1516
tertiary: 'btn-tertiary',
1617
text: 'btn-link',
1718
}

‎frontend/web/components/pages/AccountSettingsPage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// import propTypes from 'prop-types';
2-
import React, { Component } from 'react'
2+
import React, { Component, ReactNode } from 'react'
33
import Button from 'components/base/forms/Button'
44
import ErrorMessage from 'components/ErrorMessage'
55
import _data from 'common/data/base/_data'
@@ -287,7 +287,7 @@ class AccountSettingsPage extends Component {
287287
<Setting
288288
onChange={(v) => {
289289
flagsmith.setTrait('json_inspect', v).then(() => {
290-
toast('Updated')
290+
toast('Updated JSON References setting')
291291
})
292292
}}
293293
checked={flagsmith.getTrait('json_inspect')}

‎frontend/web/components/pages/UsersAndPermissionsPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -748,7 +748,7 @@ const UsersAndPermissionsInner: FC<UsersAndPermissionsInnerType> = ({
748748
})
749749
.catch((error) => {
750750
toast(
751-
'Error resent invite',
751+
'Error resending invite',
752752
'error',
753753
)
754754
console.error(error)

‎frontend/web/components/pages/UsersPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const removeIdentity = (
5858
if (res.error) {
5959
toast('Identity could not be removed', 'danger')
6060
} else {
61-
toast('Identity removed')
61+
toast('Identity successfully removed')
6262
}
6363
})
6464
},

‎frontend/web/components/pages/WidgetPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ const FeatureList = class extends Component<FeatureListType> {
176176
})
177177

178178
onSave = () => {
179-
toast('Saved')
179+
toast('Your feature has been updated')
180180
}
181181

182182
filter = () => {

‎frontend/web/project/toast.tsx‎

Lines changed: 66 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,11 @@ import { IonIcon } from '@ionic/react'
66
import Utils from 'common/utils/utils'
77
import Button from 'components/base/forms/Button'
88

9-
export type ThemeType = 'danger' | 'info' | 'success' | 'warning'
9+
export type ThemeType = 'danger' | 'success'
1010

1111
const themeClassNames: Record<ThemeType, string> = {
1212
danger: 'alert-danger',
13-
info: 'alert-info',
1413
success: 'alert',
15-
warning: 'alert-warning',
1614
}
1715

1816
export interface MessageProps {
@@ -24,58 +22,95 @@ export interface MessageProps {
2422
children?: React.ReactNode
2523
}
2624

25+
type ToastIconType = { theme: ThemeType }
26+
27+
const ToastIcon: FC<ToastIconType> = ({ theme }) => {
28+
return theme === 'danger' ? (
29+
<svg
30+
width='28'
31+
height='28'
32+
viewBox='0 0 28 28'
33+
fill='none'
34+
xmlns='http://www.w3.org/2000/svg'
35+
>
36+
<path
37+
fillRule='evenodd'
38+
clipRule='evenodd'
39+
d='M17.1582 15.5084C17.6144 15.9645 17.6144 16.7019 17.1582 17.158C16.9307 17.3855 16.632 17.4999 16.3334 17.4999C16.0347 17.4999 15.736 17.3855 15.5085 17.158L14 15.6495L12.4915 17.158C12.264 17.3855 11.9654 17.4999 11.6667 17.4999C11.368 17.4999 11.0694 17.3855 10.8419 17.158C10.3857 16.7019 10.3857 15.9645 10.8419 15.5084L12.3504 13.9999L10.8419 12.4914C10.3857 12.0352 10.3857 11.2979 10.8419 10.8417C11.298 10.3855 12.0354 10.3855 12.4915 10.8417L14 12.3502L15.5085 10.8417C15.9647 10.3855 16.702 10.3855 17.1582 10.8417C17.6144 11.2979 17.6144 12.0352 17.1582 12.4914L15.6497 13.9999L17.1582 15.5084ZM14 2.33319C7.56704 2.33319 2.33337 7.56686 2.33337 13.9999C2.33337 20.4329 7.56704 25.6665 14 25.6665C20.433 25.6665 25.6667 20.4329 25.6667 13.9999C25.6667 7.56686 20.433 2.33319 14 2.33319Z'
40+
fill='#EF4D56'
41+
/>
42+
</svg>
43+
) : (
44+
<svg
45+
width='28'
46+
height='28'
47+
viewBox='0 0 28 28'
48+
fill='none'
49+
xmlns='http://www.w3.org/2000/svg'
50+
>
51+
<path
52+
fillRule='evenodd'
53+
clipRule='evenodd'
54+
d='M19.0112 11.2064L13.6819 18.2064C13.4626 18.4946 13.1231 18.6649 12.7614 18.6673H12.7532C12.3951 18.6673 12.0567 18.5016 11.8351 18.2193L8.99774 14.5944C8.60107 14.0881 8.68974 13.3543 9.19724 12.9576C9.70357 12.5598 10.4386 12.6484 10.8352 13.1571L12.7404 15.5908L17.1551 9.79359C17.5447 9.28142 18.2762 9.18109 18.7907 9.57192C19.3029 9.96276 19.4021 10.6943 19.0112 11.2064ZM14.0004 2.33392C7.55691 2.33392 2.33374 7.55709 2.33374 14.0006C2.33374 20.4429 7.55691 25.6673 14.0004 25.6673C20.4439 25.6673 25.6671 20.4429 25.6671 14.0006C25.6671 7.55709 20.4439 2.33392 14.0004 2.33392Z'
55+
fill='#27AB95'
56+
/>
57+
</svg>
58+
)
59+
}
60+
2761
const Message: FC<MessageProps> = ({
2862
action,
2963
children,
3064
expiry = 5000,
3165
isRemoving = false,
3266
remove,
33-
theme = 'success',
67+
theme: _theme,
3468
}) => {
69+
const theme = _theme || 'success'
3570
useEffect(() => {
3671
const timeout = setTimeout(remove, expiry)
3772
return () => clearTimeout(timeout)
3873
}, [remove, expiry])
3974

4075
const className = cn(
76+
'alert toast-message',
4177
{
42-
'alert': true,
4378
'removing-out': isRemoving,
4479
'show': !isRemoving,
45-
'toast-message': true,
4680
},
4781
themeClassNames[theme],
4882
)
4983

5084
const hasAction = action?.onClick && action?.buttonText
5185

52-
const closeButton = (
53-
<a style={{ paddingTop: 2 }} onClick={remove}>
54-
<span className='icon'>
55-
<IonIcon icon={close} style={{ fontSize: '13px' }} />
56-
</span>
57-
</a>
58-
)
59-
6086
return (
6187
<div className={className}>
62-
<Row space className='flex-nowrap'>
63-
<div>{children} </div>
64-
{!hasAction && closeButton}
65-
{hasAction && (
66-
<Row className='flex-nowrap'>
67-
<Button
68-
className='text-wrap'
69-
size='xSmall'
70-
theme='text'
71-
onClick={action?.onClick}
72-
>
73-
{action?.buttonText}
74-
</Button>
75-
{closeButton}
76-
</Row>
77-
)}
78-
</Row>
88+
<div className='my-2 w-100 d-flex flex-nowrap text-body gap-2'>
89+
<ToastIcon theme={theme} />
90+
<div className='flex-1 flex-column'>
91+
<div className='text-body mb-1 fw-semibold'>
92+
{theme === 'success' ? 'Success' : 'Error'}
93+
</div>
94+
<div className='fw-normal mb-1'>{children} </div>
95+
{hasAction && (
96+
<div className='d-flex'>
97+
<Button
98+
className='text-wrap mt-2'
99+
size='xSmall'
100+
theme={theme}
101+
onClick={action?.onClick}
102+
>
103+
{action?.buttonText}
104+
</Button>
105+
</div>
106+
)}
107+
</div>
108+
<a style={{ paddingTop: 2 }} onClick={remove}>
109+
<span className='icon'>
110+
<IonIcon icon={close} style={{ fontSize: '16px' }} />
111+
</span>
112+
</a>
113+
</div>
79114
</div>
80115
)
81116
}

‎frontend/web/styles/_variables.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,9 @@ $btn-outline-focus-bg-dark: $primary-alfa-8;
144144
$btn-outline-active-bg: $primary-alfa-16;
145145
$btn-danger-hover: #cd384d;
146146
$btn-danger-active: #ac2646;
147+
$btn-success: $success400;
148+
$btn-success-hover: $success;
149+
$btn-success-active: $success600;
147150
$btn-border-width: 0;
148151

149152
$link-hover-color: $primary;

0 commit comments

Comments
 (0)