65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
import React from "react";
|
||
|
||
const NotificationBlocked = () => {
|
||
return (
|
||
<div style={styles.container}>
|
||
<h2 style={styles.header}>Heads Up! Notifications Are Off</h2>
|
||
<p style={styles.message}>
|
||
It looks like you’ve got notifications turned off. Turning them on will
|
||
make sure you get important updates, like new orders or alerts, right on
|
||
your device.
|
||
</p>
|
||
<h3 style={styles.instructionsHeader}>Here’s how to turn them on:</h3>
|
||
<ol style={styles.instructions}>
|
||
<li>Open Chrome and go to our café's website.</li>
|
||
<li>Tap the menu (three dots) in the top-right corner.</li>
|
||
<li>
|
||
Go to <strong>Settings</strong> > <strong>Site settings</strong>{" "}
|
||
> <strong>Notifications</strong>.
|
||
</li>
|
||
<li>
|
||
Find our café in the list and set it to <strong>Allow</strong>.
|
||
</li>
|
||
</ol>
|
||
<p style={styles.footer}>
|
||
Once you’ve turned on notifications, you’ll start getting updates
|
||
instantly. Need a hand? Just ask!
|
||
</p>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const styles = {
|
||
container: {
|
||
padding: "20px",
|
||
border: "1px solid #ddd",
|
||
borderRadius: "5px",
|
||
backgroundColor: "#f9f9f9",
|
||
boxShadow: "0 2px 5px rgba(0,0,0,0.1)",
|
||
maxWidth: "400px",
|
||
margin: "20px auto",
|
||
textAlign: "center",
|
||
},
|
||
header: {
|
||
color: "#e74c3c",
|
||
},
|
||
message: {
|
||
marginBottom: "20px",
|
||
},
|
||
instructionsHeader: {
|
||
marginTop: "20px",
|
||
fontWeight: "bold",
|
||
},
|
||
instructions: {
|
||
listStyleType: "decimal",
|
||
paddingLeft: "20px",
|
||
textAlign: "left",
|
||
},
|
||
footer: {
|
||
marginTop: "20px",
|
||
fontStyle: "italic",
|
||
},
|
||
};
|
||
|
||
export default NotificationBlocked;
|