Winter is coming

package.json

@@ -22,6 +22,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
+    "react-snowfall": "^2.2.0",
     "semver": "^7.6.3",
     "url-join": "^5.0.0"
   },

src/App.js

@@ -34,6 +34,7 @@ import { FeatureProvider } from './feature'
 import { auth } from './api'
 import { isTokenExpired } from './util'
 import SnackbarWithDetails from './components/util/SnackbarWithDetails'
+import Snowfall from 'react-snowfall'
 
 
 export let originalGetContrastText
@@ -47,6 +48,7 @@ export const SearchParamContext = React.createContext()
 const App = () => {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
   const [themeMode, setThemeMode] = React.useState(prefersDarkMode)
+  const [showSnowflakes, setShowSnowflakes] = React.useState(true)
 
   React.useEffect(() => {
     setThemeMode(prefersDarkMode)
@@ -120,6 +122,14 @@ const App = () => {
       lightRed: {
         main: '#d32f2f',
       },
+      snowflake: {
+        main: themeMode ? '#ffffff' : '#6994b7',
+      },
+      snowflakeIcon: palette.augmentColor({
+        color: {
+          main: '#65adff',
+        }
+      }),
       mode: themeMode ? 'dark' : 'light',
     },
     bomButton: {
@@ -134,6 +144,8 @@ const App = () => {
     prefersDarkMode: themeMode,
     switchThemeMode: switchThemeMode,
     getContrastText: theme.palette.getContrastText,
+    toggleSnowflakes: () => setShowSnowflakes(prev => !prev),
+    showSnowflakes: showSnowflakes,
   }
 
   const featureListenerRegistrationHandler = (state, action) => {
@@ -225,6 +237,12 @@ const App = () => {
               <FeatureProvider/>
               <CssBaseline/>
               <Router/>
+              {showSnowflakes && <Snowfall
+                color={theme.palette.snowflake.main}
+                snowflakeCount={80}
+                speed={[2.0, 4.0]}
+                radius={[1.0, 4.0]}
+              />}
             </FeatureRegistrationContext.Provider>
           </FeatureContext.Provider>
         </ConfigContext.Provider>

src/components/util/SettingsMenu.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Logout, Login, Settings } from '@mui/icons-material'
+import { Logout, Login, Settings, AcUnit } from '@mui/icons-material'
 import MenuBookIcon from '@mui/icons-material/MenuBook'
 
 import {
@@ -15,7 +15,9 @@ import {
   ListItemButton,
   ListItemText,
   Popover,
+  Switch,
   Tooltip,
+  Typography,
 } from '@mui/material'
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'
 
@@ -27,13 +29,14 @@ import { features, TOKEN_KEY, errorSnackbarProps } from '../../consts.js'
 import { auth } from '../../api.js'
 import DarkModeSwitch from './DarkModeSwitch.js'
 import FeatureDependent from './FeatureDependent.js'
-import { FeatureRegistrationContext } from '../../App.js'
+import { ConfigContext, FeatureRegistrationContext } from '../../App.js'
 import { registerCallbackHandler } from '../../feature.js'
 
 
 export const SettingsMenu = () => {
   const theme = useTheme()
   const featureRegistrationContext = React.useContext(FeatureRegistrationContext)
+  const context = React.useContext(ConfigContext)
 
   const [dashboardCreateIssueUrlFeature, setDashboardCreateIssueUrlFeature] = React.useState()
   const [anchorElement, setAnchorElement] = React.useState(null)
@@ -97,6 +100,25 @@ export const SettingsMenu = () => {
     >
       <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
         <List>
+          <ListItem
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Typography>Winter is coming</Typography>
+            <Switch
+              checked={context.showSnowflakes}
+              onChange={context.toggleSnowflakes}
+              icon={<AcUnit
+                color='snowflakeIcon'
+              />}
+              checkedIcon={<AcUnit
+                color='snowflakeIcon'
+              />}
+            />
+          </ListItem>
           <ListItem
             sx={{
               display: 'flex',