Skip to content

Commit 310c368

Browse files
antonnellantonnell
committed
Shutdown notice.
Signed-off-by: antonnell <[email protected]>
1 parent 25f6542 commit 310c368

File tree

4 files changed

+175
-1
lines changed

4 files changed

+175
-1
lines changed

‎components/shutdownNotice/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"main": "shutdownNotice.js"
3+
}

‎components/shutdownNotice/shutdownNotice.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Dialog, Typography, Button } from '@material-ui/core';
2+
import classes from "./shutdownNotice.module.css";
3+
import PowerSettingsNewIcon from "@material-ui/icons/PowerSettingsNew";
4+
5+
export default function shutdownNotice({ close }) {
6+
7+
return (
8+
<Dialog fullScreen open={ true } onClose={close} >
9+
<div className={ classes.dialogContainer }>
10+
<div className={classes.warningContainer}>
11+
<PowerSettingsNewIcon className={ classes.warningIcon } />
12+
<Typography className={classes.para2} align='center'>
13+
This service will no longer be available from 03 April 2022.
14+
</Typography>
15+
<Typography className={classes.para2} align='center'>
16+
The source code is open source, anyone that would like to continue hosting this service is welcome to.
17+
</Typography>
18+
<div className={ classes.buttonsContainer }>
19+
<Button
20+
fullWidth
21+
variant='contained'
22+
size='large'
23+
className={classes.primaryButton }
24+
onClick={close}>
25+
<Typography className={ classes.buttonTextPrimary }>Okay</Typography>
26+
</Button>
27+
</div>
28+
</div>
29+
</div>
30+
</Dialog>
31+
)
32+
}

‎components/shutdownNotice/shutdownNotice.module.css

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
.dialogContainer {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
min-width: 100vw;
6+
min-height: 100vh;
7+
}
8+
9+
.warningContainer {
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
flex-direction: column;
14+
max-width: 540px;
15+
}
16+
17+
.warningIcon {
18+
width: 140px !important;
19+
height: 140px !important;
20+
margin-bottom: 30px !important;
21+
font-size: 30px !important;
22+
fill: #646464 !important;
23+
}
24+
25+
.title1 {
26+
font: normal normal normal 23px/36px Inter !important;
27+
letter-spacing: 0px !important;
28+
}
29+
30+
.title2 {
31+
font: normal normal bold 29px/36px Inter !important;
32+
letter-spacing: 0px !important;
33+
margin-bottom: 36px !important;
34+
}
35+
36+
.para1 {
37+
text-align: center;
38+
font: normal normal bold 20px/28px Inter !important;
39+
letter-spacing: 0px !important;
40+
margin-bottom: 33px !important;
41+
}
42+
43+
.para2 {
44+
font: normal normal normal 16px/26px Inter !important;
45+
letter-spacing: 0px;
46+
color: #646464;
47+
margin-bottom: 32px !important;
48+
}
49+
50+
.buttonsContainer {
51+
padding: 0px 24px;
52+
}
53+
54+
.primaryButton {
55+
margin-bottom: 20px !important;
56+
background: transparent linear-gradient(180deg, #1C45F4 0%, #0F1DD3 100%) 0% 0% no-repeat padding-box !important;
57+
min-width: 457px !important;
58+
}
59+
60+
.secondaryButton {
61+
62+
}
63+
64+
.buttonTextPrimary {
65+
font: normal normal bold 16px/19px Inter !important;
66+
letter-spacing: 0px !important;
67+
color: #FFFFFF !important;
68+
text-transform: none;
69+
}
70+
71+
.buttonTextSecondary {
72+
font: normal normal bold 16px/19px Inter !important;
73+
letter-spacing: 0px !important;
74+
color: #000 !important;
75+
text-transform: none;
76+
}
77+
78+
@media screen and (max-width: 600px) {
79+
.warningContainer {
80+
max-width: 340px;
81+
}
82+
83+
.para1 {
84+
font: normal normal bold 16px/28px Inter !important;
85+
}
86+
87+
.warningIcon {
88+
height: 50px !important;
89+
margin-bottom: 30px !important;
90+
}
91+
92+
.buttonTextPrimary {
93+
font: normal normal bold 16px/19px Inter !important;
94+
}
95+
96+
.primaryButton {
97+
margin-bottom: 20px !important;
98+
background: transparent linear-gradient(180deg, #1C45F4 0%, #0F1DD3 100%) 0% 0% no-repeat padding-box !important;
99+
min-width: 320px !important;
100+
}
101+
}
102+
103+
@media screen and (max-width: 360px) {
104+
.warningContainer {
105+
max-width: 260px;
106+
}
107+
108+
.para1 {
109+
font: normal normal bold 15px/22px Inter !important;
110+
}
111+
112+
.para2 {
113+
font: normal normal bold 13px/18px Inter !important;
114+
}
115+
116+
.warningIcon {
117+
height: 40px !important;
118+
margin-bottom: 20px !important;
119+
}
120+
121+
.buttonTextPrimary {
122+
font: normal normal bold 13px/16px Inter !important;
123+
}
124+
125+
.primaryButton {
126+
margin-bottom: 20px !important;
127+
background: transparent linear-gradient(180deg, #1C45F4 0%, #0F1DD3 100%) 0% 0% no-repeat padding-box !important;
128+
min-width: 260px !important;
129+
}
130+
}

‎pages/_app.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ThemeProvider } from '@material-ui/core/styles';
33
import CssBaseline from '@material-ui/core/CssBaseline';
44

55
import SnackbarController from '../components/snackbar'
6+
import ShutdownNotice from '../components/shutdownNotice'
67

78
import stores from '../stores/index.js'
89

@@ -34,11 +35,19 @@ function MyApp({ Component, pageProps }) {
3435
stores.dispatcher.dispatch({ type: CONFIGURE })
3536
},[]);
3637

38+
const [shutdownNoticeOpen, setShutdownNoticeOpen] = useState(true);
39+
const closeShutdown = () => {
40+
setShutdownNoticeOpen(false)
41+
}
42+
3743
return (
3844
<ThemeProvider theme={ themeConfig }>
3945
<CssBaseline />
4046
<Component {...pageProps} changeTheme={ changeTheme } />
41-
<SnackbarController />
47+
<SnackbarController />
48+
{ shutdownNoticeOpen &&
49+
<ShutdownNotice close={ closeShutdown } />
50+
}
4251
</ThemeProvider>
4352
)
4453
}

0 commit comments

Comments
 (0)