feat: add Christmas logo and change show switcher (#77)

apps/js-machine-front/src/app/App.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import './firebase.conf';
 import { theme } from './theme';
 import { DynamicNavBar } from './components/NavBar';
+import { SnowSwitcher } from './components/SnowSwitcher';
 import { Events } from './scenes/communityEvents/CommunityEvents';
 import { News } from './scenes/news/News';
 import { About } from './scenes/about/About';
@@ -33,7 +34,7 @@ export const App: React.FC = observer(() => {
   return (
     <ThemeProvider theme={theme}>
       <Router history={history}>
-        <Snowflakes/>
+        <Snowflakes />
         <SnackbarProvider maxSnack={3}>
           <DynamicNavBar />
           <ErrorBoundary>
@@ -47,6 +48,7 @@ export const App: React.FC = observer(() => {
               <Redirect to="/" />
             </Switch>
           </ErrorBoundary>
+		      <SnowSwitcher />
         </SnackbarProvider>
       </Router>
     </ThemeProvider>

apps/js-machine-front/src/app/components/NavBar.tsx

@@ -20,6 +20,9 @@ const useStyles = makeStyles(theme => ({
     textDecoration: 'none',
     color: theme.palette.primary.contrastText,
   },
+  logo:{
+    width: '250px',
+  },
 }));
 
 const hiddenRoutes = ['digest'];
@@ -42,7 +45,9 @@ const NavBar = memo(function NavBar() {
       <Toolbar>
         <Box className={classes.titleContainer}>
           <NavLink exact to="/" className={classes.title}>
-            JS MACHINE
+            {/* JS MACHINE */}
+            {/* new logo for new year */}
+            <img className={classes.logo} src={'assets/logo-ny.png'} alt="logo"/>
           </NavLink>
         </Box>
         <Hidden smDown>

apps/js-machine-front/src/app/components/SnowSwitcher.tsx

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Fab from '@material-ui/core/Fab';
+import AcUnitIcon from '@material-ui/icons/AcUnit';
+import { useSnowflakes } from './hooks/useSnowflakes';
+import clsx from 'clsx';
+
+const useStyles = makeStyles(theme => ({
+  fab: {
+    position: 'absolute',
+    bottom: theme.spacing(2),
+    right: theme.spacing(3),
+    backgroundColor: 'white',
+  },
+  snowing: {
+    backgroundColor: '#F2E14C',
+  },
+}));
+
+export const SnowSwitcher = memo(function SnowSwitcher() {
+  const classes = useStyles();
+  const { isSnowing, handleSnowSwitch } = useSnowflakes();
+
+  return (
+    <Fab
+      className={clsx(classes.fab, { [classes.snowing]: isSnowing })}
+      size="medium"
+      onClick={handleSnowSwitch}
+    >
+      <AcUnitIcon />
+    </Fab>
+  );
+});

apps/js-machine-front/src/app/components/Snowflakes.tsx

@@ -1,89 +1,25 @@
 import React from 'react';
-
-import Switch from '@material-ui/core/Switch';
 import { makeStyles } from '@material-ui/core/styles';
 
-import { useSnowflakes } from './hooks/useSnowflakes';
-
-const MAIN_YELLOW = '#F2E14C';
-
-const useStyles = makeStyles( theme => ({
-    snow: {
-        position: 'fixed',
-        height: '100%',
-        width: '100%',
-        zIndex: 1,
-        pointerEvents: 'none',
-    },
-    snowSwitcher: {
-        display: 'flex',
-        color: 'white',
-        position: 'absolute',
-        zIndex: 1101,
-        [theme.breakpoints.up('md')]: {
-            top: '29px',
-            left: '38px',
-        },
-        [theme.breakpoints.down('sm')]: {
-            top: '18px',
-            left: '24px',
-        },
-        [theme.breakpoints.down('xs')]: {
-            top: '-2px',
-            left: '-4px',
-            flexDirection: 'row-reverse',
-        },
-    },
-    snowSwitcherLabel: {
-        fontSize: '0.9rem',
-    },
-
-    colorSecondary: {
-        '&$checked': {
-            color: MAIN_YELLOW,
-        },
-    },
-    switchBase: {
-        color: 'white',
-        '&$checked': {
-            color: 'white',
-            '& + $track': {
-                backgroundColor: MAIN_YELLOW,
-                opacity: 1,
-            },
-            "&:hover": {
-                backgroundColor: '#f2e14c4d',
-            },
-        },
-    },
-    track: {},
-    checked: {},
+const useStyles = makeStyles(theme => ({
+  snow: {
+    position: 'fixed',
+    height: '100%',
+    width: '100%',
+    zIndex: 1,
+    pointerEvents: 'none',
+  },
 }));
 
 export function Snowflakes() {
-
-    const {isSnowing, handleSnowSwitch} = useSnowflakes();
-
-    const classes = useStyles();
-
-    return (
-        <>
-            <div className={classes.snowSwitcher}>
-                <span className={classes.snowSwitcherLabel}>Happy New Year</span>
-                <Switch
-                    classes={{
-                        colorSecondary: classes.colorSecondary, 
-                        switchBase: classes.switchBase,
-                        track: classes.track,
-                        checked: classes.checked,
-                    }}
-                    size='small'
-                    checked={isSnowing}
-                    value={isSnowing}
-                    onClick={handleSnowSwitch}>
-                </Switch>
-            </div>
-            <canvas id='snow' className={classes.snow} width={window.innerWidth} height={window.innerHeight}></canvas>
-        </>
-    );
-}
+  const classes = useStyles();
+
+  return (
+    <canvas
+      id="snow"
+      className={classes.snow}
+      width={window.innerWidth}
+      height={window.innerHeight}
+    />
+  );
+}

apps/js-machine-front/src/app/theme.ts

@@ -28,13 +28,14 @@ export const theme: Theme = {
     },
     MuiToolbar: {
       gutters: {
-        paddingLeft: _theme.spacing(4),
+        // TODO: revert paddingLeft value after NY   
+        paddingLeft: _theme.spacing(2),
         [_theme.breakpoints.up('sm')]: {
-          paddingLeft: _theme.spacing(6),
+          paddingLeft: _theme.spacing(2),
           paddingRight: _theme.spacing(4),
         },
         [_theme.breakpoints.up('md')]: {
-          paddingLeft: _theme.spacing(8),
+          paddingLeft: _theme.spacing(2),
           paddingRight: _theme.spacing(8),
         },
       },