diff --git a/src/App.tsx b/src/App.tsx
index 5279e89bd76752473dd481d4087c9d71a3644806..85d6d601470498af53191f831d3af3b2403aa570 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,7 @@ import { ClientContextProvider } from './context';
import ThemeProvider from './context/ThemeProvider';
import { UserStateProvider } from './context/UserContext';
import Routes from './Routes';
-import { darkTheme } from './theme';
+import darkTheme from './styles/darkTheme';
function App(): React.ReactElement {
return (
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 23bc3e2fab51c1e4464a64ba5d630da394961d41..15df3a1c58b0bc71d9e11a0501e6eb8b8539b120 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,222 @@
+import {
+ Box,
+ IconButton,
+ makeStyles,
+ Typography,
+ useMediaQuery,
+ useTheme,
+} from '@material-ui/core';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import MailIcon from '@material-ui/icons/Mail';
import React from 'react';
+import DevTeamIcon from './svg/DevTeamIcon';
+import SchdesignIcon from './svg/SchdesignIcon';
-const Footer: React.FC = () => <div>Footer</div>;
+const useMobileStyles = makeStyles((theme) => ({
+ footer: {
+ background: theme.footer.background,
+ padding: theme.spacing(1),
+ },
+ contactText: {
+ color: theme.palette.primary.contrastText,
+ fontSize: '1.7rem',
+ fontWeight: 500,
+ marginBottom: theme.spacing(1),
+ marginTop: theme.spacing(1),
+ },
+ social: {
+ color: theme.palette.secondary.main,
+ marginLeft: theme.spacing(3),
+ marginRight: theme.spacing(3),
+ marginBottom: theme.spacing(1),
+ marginTop: theme.spacing(1),
+ fontSize: '2rem',
+ },
+ socialButton: {
+ margin: 0,
+ padding: 0,
+ },
+ devteam: {
+ color: '#3051bf',
+ fontSize: '1.5rem',
+ paddingLeft: theme.spacing(1),
+ fontWeight: 500,
+ },
+ schdesign: {
+ marginTop: '0.65rem',
+ },
+ groups: {
+ marginTop: theme.spacing(1),
+ },
+ groupButton: {
+ paddingTop: '0.1rem',
+ paddingBottom: '0.1rem',
+ },
+}));
+
+const useDesktopStyles = makeStyles((theme) => ({
+ footer: {
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2),
+ },
+ contactText: {
+ fontSize: '1.8rem',
+ },
+ devteam: {
+ fontSize: '1.7rem',
+ paddingLeft: theme.spacing(1),
+ },
+ schdesignButton: {
+ paddingTop: '0.55rem',
+ },
+ contact: {
+ marginRight: theme.spacing(3),
+ },
+ social: {
+ fontSize: '1.5rem',
+ margin: '0',
+ marginRight: theme.spacing(1),
+ marginTop: theme.spacing(0.5),
+ marginBottom: theme.spacing(0.5),
+ },
+ socialText: {
+ color: theme.palette.secondary.main,
+ },
+}));
+
+const Footer: React.FC = () => {
+ const mClasses = useMobileStyles();
+ const dClasses = useDesktopStyles();
+ const theme = useTheme();
+
+ const isSmallScreen = useMediaQuery(theme.breakpoints.down('xs'));
+
+ const SmallScreen: React.FC = () => (
+ <Box display="flex" justifyContent="center" flexDirection="column">
+ <Typography align="center" className={mClasses.contactText}>
+ Kapcsolat
+ </Typography>
+ <Box display="flex" justifyContent="center">
+ <IconButton
+ className={mClasses.socialButton}
+ onClick={(): void => {
+ window.open('https://www.facebook.com/groups/schbody/');
+ }}
+ >
+ <FacebookIcon className={mClasses.social} />
+ </IconButton>
+ <IconButton
+ className={mClasses.socialButton}
+ onClick={(): void => {
+ window.location.href = 'mailto:body@sch.bme.hu';
+ }}
+ >
+ <MailIcon className={mClasses.social} />
+ </IconButton>
+ </Box>
+ <Box display="flex" justifyContent="space-around" className={mClasses.groups}>
+ <IconButton
+ className={mClasses.groupButton}
+ onClick={(): void => {
+ window.open('https://kszk.bme.hu/');
+ }}
+ >
+ <Box display="flex" justifyContent="center" alignItems="center">
+ <DevTeamIcon width="1.8rem" height="1.8rem" />
+ <Typography className={mClasses.devteam}>DevTeam</Typography>
+ </Box>
+ </IconButton>
+ <IconButton
+ className={mClasses.groupButton}
+ onClick={(): void => {
+ window.open('https://schdesign.hu/');
+ }}
+ >
+ <Box className={mClasses.schdesign}>
+ <SchdesignIcon
+ width="7.5rem"
+ height="2.5rem"
+ color1={theme.palette.primary.contrastText}
+ />
+ </Box>
+ </IconButton>
+ </Box>
+ </Box>
+ );
+
+ const LargeScreen: React.FC = () => (
+ <Box display="flex" justifyContent="space-between">
+ <Box
+ display="flex"
+ justifyContent="space-around"
+ alignItems="center"
+ className={mClasses.groups}
+ >
+ <IconButton
+ className={mClasses.groupButton}
+ onClick={(): void => {
+ window.open('https://kszk.bme.hu/');
+ }}
+ >
+ <Box display="flex" justifyContent="center" alignItems="center">
+ <DevTeamIcon width="2.25rem" height="2.25rem" />
+ <Typography className={`${mClasses.devteam} ${dClasses.devteam}`}>DevTeam</Typography>
+ </Box>
+ </IconButton>
+ <IconButton
+ className={`${mClasses.groupButton} ${dClasses.schdesignButton}`}
+ onClick={(): void => {
+ window.open('https://schdesign.hu/');
+ }}
+ >
+ <SchdesignIcon
+ width="8.75rem"
+ height="3.125rem"
+ color1={theme.palette.primary.contrastText}
+ />
+ </IconButton>
+ </Box>
+ <Box
+ display="flex"
+ flexDirection="column"
+ alignItems="flex-start"
+ className={dClasses.contact}
+ >
+ <Typography align="center" className={`${mClasses.contactText} ${dClasses.contactText}`}>
+ Kapcsolat
+ </Typography>
+ <Box display="flex" flexDirection="column" alignItems="flex-start">
+ <IconButton
+ className={mClasses.socialButton}
+ onClick={(): void => {
+ window.open('https://www.facebook.com/groups/schbody/');
+ }}
+ >
+ <Box display="flex" alignItems="center" justifyContent="center">
+ <FacebookIcon className={`${mClasses.social} ${dClasses.social}`} />
+ <Typography className={dClasses.socialText}>Facebook</Typography>
+ </Box>
+ </IconButton>
+
+ <IconButton
+ className={mClasses.socialButton}
+ onClick={(): void => {
+ window.location.href = 'mailto:body@sch.bme.hu';
+ }}
+ >
+ <MailIcon className={`${mClasses.social} ${dClasses.social}`} />
+ <Typography className={dClasses.socialText}>body@sch.bme.hu</Typography>
+ </IconButton>
+ </Box>
+ </Box>
+ </Box>
+ );
+
+ return (
+ <Box component="footer" className={`${mClasses.footer} ${!isSmallScreen && dClasses.footer}`}>
+ {isSmallScreen ? <SmallScreen /> : <LargeScreen />}
+ </Box>
+ );
+};
export default Footer;
diff --git a/src/components/svg/DevTeamIcon.tsx b/src/components/svg/DevTeamIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4aa9a8137d71b36646825c5a90e361153b4af2f2
--- /dev/null
+++ b/src/components/svg/DevTeamIcon.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+interface IDevTeamIconProps extends React.SVGProps<SVGSVGElement> {
+ color1?: string;
+ color2?: string;
+}
+
+const DevTeamIcon: React.FC<IDevTeamIconProps> = ({
+ height = '1.5rem',
+ width = '1.5rem',
+ color1 = '#3051bf',
+ color2 = '#a806c9',
+ ...props
+}) => {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ height={height}
+ width={width}
+ viewBox="0 0 1024 1024"
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...props}
+ >
+ <title>devteam</title>
+ <g id="prefix__Layer_2" data-name="Layer 2">
+ <path
+ id="prefix__path4536"
+ d="M550.27 281.1L433.38 631.8a577.52 577.52 0 0067 30.16l119.25-357.74z"
+ fill={color2}
+ />
+ <path
+ d="M511.22 1023.85A511.83 511.83 0 11611.18 10c117.09 23.11 223.44 86 299.46 177 77.74 93 117.85 209 113 326.55 0 .86-.1 1.72-.19 2.58C1010.52 630 954 713.64 860.07 758.1c-71.2 33.68-160.89 43.27-259.39 27.72-89.68-14.17-180.26-48.58-254.93-96.91l-.41-.27L126 542.41a36.56 36.56 0 010-60.83l219.34-146.22 40.55 60.83L212.18 512l173.51 115.67c121.63 78.64 312.82 126 443.11 64.34 70.56-33.38 111.53-94.88 121.8-182.83 7.75-202.4-144-386-353.61-427.51-204.84-40.54-411.24 70.18-490.77 263.27s-11 417 163 532.53C442.85 992.73 675.38 969 822.15 821.06l51.9 51.49a510.56 510.56 0 01-362.83 151.3z"
+ fill={color1}
+ />
+ <path
+ d="M678.34 688.64l-40.55-60.84L811.5 512 637.79 396.19l40.55-60.83 219.34 146.22a36.55 36.55 0 010 60.83z"
+ fill={color1}
+ />
+ </g>
+ </svg>
+ );
+};
+
+export default DevTeamIcon;
diff --git a/src/components/svg/SchdesignIcon.tsx b/src/components/svg/SchdesignIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..81ce7204c0f74b4bd70295a56e5294bdf3d390de
--- /dev/null
+++ b/src/components/svg/SchdesignIcon.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+interface ISchdesignIconProps extends React.SVGProps<SVGSVGElement> {
+ color1?: string;
+ color2?: string;
+}
+
+const SchdesignIcon: React.FC<ISchdesignIconProps> = ({
+ height = '2.5rem',
+ width = '6.25rem',
+ color1 = '#3d3d3d',
+ color2 = '#f8485e',
+ ...props
+}) => {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 1259.51 337.41"
+ height={height}
+ width={width}
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...props}
+ >
+ <title>{'logoEszk\xF6z 2'}</title>
+ <g id="prefix__R\xE9teg_2" data-name="R\xE9teg 2">
+ <g id="prefix__Layer_1" data-name="Layer 1">
+ <path
+ d="M563 0v93.23l-.08-.06a70 70 0 00-113.35 52.55v4.77A69.6 69.6 0 00460 184.93a71 71 0 0010 12.68 70 70 0 0092.87 5.39h.13a68.51 68.51 0 006-5.37A70.46 70.46 0 00579 185a69.61 69.61 0 0010.51-36.2V78h.15V0zm-43.49 191.42a43.39 43.39 0 1143.36-44.87v2.98a43.39 43.39 0 01-43.36 41.89zM919.66 78.53h26.49V218.1h-26.49zM1249.08 111.15a70 70 0 00-129.59 34.35v5a69.86 69.86 0 0020.51 47.11 70.64 70.64 0 006.15 5.45v-52.83c0-.76-.06-1.52-.06-2.29s0-1.52.06-2.28a43.12 43.12 0 016.41-20.52 43.77 43.77 0 016.25-7.88 43.38 43.38 0 0161.32 0 43.78 43.78 0 016.27 7.93 43.06 43.06 0 016.43 21.28V218h26.67v-70.78a69.63 69.63 0 00-10.42-36.07zM745 134.63a70 70 0 00-138.73 11v4.9a70 70 0 00119.47 47.11L707 178.77a43.39 43.39 0 01-72-17.28h110a69.82 69.82 0 001.28-12.69v-1.45a70.06 70.06 0 00-1.28-12.72zm-110 0a43.4 43.4 0 0182.52 0zM1092.4 111.1a71 71 0 00-10.12-12.76 71.82 71.82 0 00-6.12-5.44 70 70 0 00-86.68 0 68.35 68.35 0 00-6.18 5.48A69.89 69.89 0 00963.21 140c-.2 1.8-.34 3.61-.4 5.45v4.89a69.67 69.67 0 0010.45 34.45 70.91 70.91 0 0010.07 12.67 70 70 0 0098.95 0 69.91 69.91 0 0020.55-48.83v-1.45a69.66 69.66 0 00-10.43-36.08zm-59.6 80.19a43.37 43.37 0 01-43.32-41.11q-.06-1.12-.06-2.28t.06-2.28a43.38 43.38 0 0186.68.79v2.98a43.29 43.29 0 01-6.49 21.4 43.9 43.9 0 01-6.22 7.82 43.26 43.26 0 01-30.65 12.68zM1102.83 267.38a69.89 69.89 0 01-20.55 49.55 69.77 69.77 0 01-49.48 20.48 69.71 69.71 0 01-43.32-15 70.83 70.83 0 01-6.15-5.45l6.15-6.16 12.68-12.71a43.37 43.37 0 0074-29.21v-1.49-1.49a43.25 43.25 0 00-12.71-29.21l12.71-12.69 6.12-6.13a70.65 70.65 0 0110.12 12.76 69.75 69.75 0 0110.43 36.75z"
+ fill={color2}
+ />
+ <path
+ d="M276.15 197.63a70 70 0 01-119.47-47.11v-4.9a70 70 0 01119.47-47.11l-18.83 18.86a43.39 43.39 0 100 61.4zM412.31 98.48a68.9 68.9 0 00-6.14-5.48 70.06 70.06 0 00-86.67 0V0h-26.69v150.46a69.77 69.77 0 0020.52 47.12 70.51 70.51 0 006.14 5.45v-52.71q-.06-1.14-.06-2.28t.06-2.28a43.13 43.13 0 016.42-20.53 43.39 43.39 0 0180.25 20.88v71.99h26.69V148a69.83 69.83 0 00-20.52-49.52zM138.73 134.63h-110A43.39 43.39 0 0170 104.69a43.22 43.22 0 0130.65 12.68l18.83-18.86a70 70 0 00-92.8-5.46 68.35 68.35 0 00-6.18 5.48 70.33 70.33 0 00-10.07 12.7A69.83 69.83 0 000 145.62v4.9a70.69 70.69 0 001.24 11h110a43.39 43.39 0 01-71.91 17.29l-12.68 12.7-6.15 6.16a70 70 0 0099 0A69.79 69.79 0 00140 148.8v-1.45a71 71 0 00-1.27-12.72zM70 148.13l-.16.1.12-.12.07.07z"
+ fill={color1}
+ />
+ <circle cx={932.35} cy={13.33} r={13.33} fill={color2} />
+ <path
+ d="M901.72 134.63h-110a43.68 43.68 0 014.35-9.37 44.48 44.48 0 016.25-7.88 43.4 43.4 0 0161.32 0l18.82-18.86a70 70 0 00-92.8-5.46 68.23 68.23 0 00-6.17 5.48A69.66 69.66 0 00763 145.62v4.9a69.49 69.49 0 001.24 11h110a43.39 43.39 0 01-71.91 17.29l-12.68 12.7-6.15 6.16a70.76 70.76 0 006.15 5.46 70.06 70.06 0 0092.81-5.47 70.55 70.55 0 0010-12.64A69.79 69.79 0 00903 148.8v-1.45a70.06 70.06 0 00-1.28-12.72zM833 148.13l-.17.1.13-.12.06.07z"
+ fill={color2}
+ />
+ </g>
+ </g>
+ </svg>
+ );
+};
+
+export default SchdesignIcon;
diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx
index a32c2249373bd7826f228c0c1251a6631e180453..49bdd30dbe98d2a3ea1e4d71e905e5403efcd952 100644
--- a/src/context/ThemeProvider.tsx
+++ b/src/context/ThemeProvider.tsx
@@ -6,17 +6,16 @@ import {
} from '@material-ui/core/styles';
import React, { useMemo } from 'react';
import { ThemeProvider as SCThemeProvider } from 'styled-components';
-import { theme as defaultTheme } from '../theme';
+import lightTheme from '../styles/lightTheme';
export interface ThemeProviderProps {
theme?: Theme;
}
const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme: themeProp, children }) => {
- const theme = useMemo(
- () => (themeProp ? createMuiTheme(defaultTheme, themeProp) : defaultTheme),
- [themeProp],
- );
+ const theme = useMemo(() => (themeProp ? createMuiTheme(lightTheme, themeProp) : lightTheme), [
+ themeProp,
+ ]);
return (
<StylesProvider injectFirst>
<MUIThemeProvider theme={theme}>
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 8ea7c411a8fe6d8eea45020929e8e2549e335ed3..c0e23b076a7b286fac1f120201c1aebd7a3dd1b5 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -1,32 +1,27 @@
-import { Theme, useMediaQuery } from '@material-ui/core';
+import { Box, makeStyles, Theme, useMediaQuery } from '@material-ui/core';
import React from 'react';
-import styled from 'styled-components';
import DrawerMenu from '../components/DrawerMenu';
import Footer from '../components/Footer';
import Header from '../components/Header';
import MobileHeader from '../components/MobileHeader';
import { useToggle } from '../hooks/useToggle';
-const Container = styled.div(
- (props) => `
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- background-color: ${props.theme.palette.background.default};
-`,
-);
-
-const MainContent = styled.div`
- height: 100%;
-`;
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: '100vh',
+ background: theme.palette.background.default,
+ },
+}));
const Page: React.FC = ({ children }) => {
const [openDrawer, { toggleOn, toggleOff }] = useToggle(false);
const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('xs'));
+ const classes = useStyles();
+
return (
- <Container>
+ <Box className={classes.root}>
{isMobile ? (
<MobileHeader onMenuClick={toggleOn} />
) : (
@@ -35,9 +30,11 @@ const Page: React.FC = ({ children }) => {
{isMobile && (
<DrawerMenu open={openDrawer} toggleOpen={toggleOff} handleLogout={(): void => {}} />
)}
- <MainContent>{children}</MainContent>
+ <Box flexGrow={1} flexShrink={0} flexBasis="auto">
+ {children}
+ </Box>
<Footer />
- </Container>
+ </Box>
);
};
diff --git a/src/theme.ts b/src/styles/darkTheme.ts
similarity index 58%
rename from src/theme.ts
rename to src/styles/darkTheme.ts
index fa689322dcdba61fbc1417c69ebc8b9e7678585d..719abe9478baa6319bb395fdcc517b8f922cecd5 100644
--- a/src/theme.ts
+++ b/src/styles/darkTheme.ts
@@ -1,25 +1,9 @@
import { createMuiTheme } from '@material-ui/core';
-// eslint-disable-next-line import/prefer-default-export
-export const theme = createMuiTheme({
- // TODO: Create default theme
- /* palette: {
- primary: {},
- secondary: {},
- error: {},
- success: {},
- info: {},
- warning: {},
- grey: {},
-
- text: {},
- }, */
- typography: {
- fontFamily: 'Roboto',
+const darkTheme = createMuiTheme({
+ footer: {
+ background: '#222222',
},
-});
-
-export const darkTheme = createMuiTheme({
palette: {
primary: {
main: '#1A6B97',
@@ -36,6 +20,7 @@ export const darkTheme = createMuiTheme({
default: '#2A2A28',
paper: '#202020',
},
+
divider: '#444444',
/* success: {},
info: {},
@@ -49,3 +34,5 @@ export const darkTheme = createMuiTheme({
fontFamily: 'Roboto',
},
});
+
+export default darkTheme;
diff --git a/src/styles/lightTheme.ts b/src/styles/lightTheme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..157b6cfeb25b2e724111ca3330fc735e65777f1f
--- /dev/null
+++ b/src/styles/lightTheme.ts
@@ -0,0 +1,24 @@
+import { createMuiTheme } from '@material-ui/core';
+
+const lightTheme = createMuiTheme({
+ // TODO: Create default theme
+ /* palette: {
+ primary: {},
+ secondary: {},
+ error: {},
+ success: {},
+ info: {},
+ warning: {},
+ grey: {},
+
+ text: {},
+ }, */
+ footer: {
+ background: '#E0E0E0',
+ },
+ typography: {
+ fontFamily: 'Roboto',
+ },
+});
+
+export default lightTheme;
diff --git a/src/styles/material-ui.d.ts b/src/styles/material-ui.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93c7b56235c73cd6cc11933e9de3347372a4b2a3
--- /dev/null
+++ b/src/styles/material-ui.d.ts
@@ -0,0 +1,10 @@
+import '@material-ui/core/styles/createMuiTheme';
+
+declare module '@material-ui/core/styles/createMuiTheme' {
+ interface Theme {
+ footer: {
+ background: React.CSSProperties['background'];
+ };
+ }
+ interface ThemeOptions extends Theme {}
+}
diff --git a/src/styled-components.d.ts b/src/styles/styled-components.d.ts
similarity index 100%
rename from src/styled-components.d.ts
rename to src/styles/styled-components.d.ts