diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ff9a53e18f62990c015ec140a6c3b3545c576dd2..19000616bec9473e132221335f1f5c1052738a32 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,17 +1,107 @@
-import { Box, makeStyles } from '@material-ui/core';
+import { Box, IconButton, makeStyles, Typography, 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 useStyles = makeStyles((theme) => ({
footer: {
background: theme.footer.background,
+ padding: '0.3rem',
+ paddingTop: '0.6rem',
+ },
+ contact: {
+ color: theme.palette.primary.contrastText,
+ fontSize: '1.7rem',
+ fontWeight: 500,
+ marginBottom: '0.3rem',
+ marginTop: '0.3rem',
+ },
+ social: {
+ color: theme.palette.secondary.main,
+ marginLeft: '1rem',
+ marginRight: '1rem',
+ marginBottom: '0.3rem',
+ marginTop: '0.5rem',
+ fontSize: '2rem',
+ },
+ socialButton: {
+ margin: 0,
+ padding: 0,
+ },
+ devteam: {
+ color: '#3051bf',
+ fontSize: '1.4rem',
+ paddingLeft: '0.3rem',
+ fontWeight: 500,
+ },
+ schdesign: {
+ paddingTop: '0.4rem',
+ },
+ groups: {
+ marginTop: '0.7rem',
+ marginBottom: '0.3rem',
+ },
+ groupButton: {
+ paddingTop: '0.1rem',
+ paddingBottom: '0.1rem',
},
}));
const Footer: React.FC = () => {
const classes = useStyles();
+ const theme = useTheme();
+
+ const SmallScreen: React.FC = () => (
+ <Box display="flex" justifyContent="center" flexDirection="column">
+ <Typography align="center" className={classes.contact}>
+ Kapcsolat
+ </Typography>
+ <Box display="flex" justifyContent="center">
+ <IconButton
+ className={classes.socialButton}
+ onClick={(): void => {
+ window.open('https://www.facebook.com/schbody');
+ }}
+ >
+ <FacebookIcon className={classes.social} />
+ </IconButton>
+ <IconButton
+ className={classes.socialButton}
+ onClick={(): void => {
+ window.location.href = 'mailto:body@sch.bme.hu';
+ }}
+ >
+ <MailIcon className={classes.social} />
+ </IconButton>
+ </Box>
+ <Box display="flex" justifyContent="space-around" className={classes.groups}>
+ <IconButton
+ className={classes.groupButton}
+ onClick={(): void => {
+ window.open('https://kszk.bme.hu/');
+ }}
+ >
+ <Box display="flex" justifyContent="center" alignItems="center">
+ <DevTeamIcon width="28px" height="28px" />
+ <Typography className={classes.devteam}>DevTeam</Typography>
+ </Box>
+ </IconButton>
+ <IconButton
+ className={classes.groupButton}
+ onClick={(): void => {
+ window.open('https://schdesign.hu/');
+ }}
+ >
+ <SchdesignIcon width="120px" height="35px" color1={theme.palette.primary.contrastText} />
+ </IconButton>
+ </Box>
+ </Box>
+ );
return (
<Box component="footer" className={classes.footer}>
- a
+ <SmallScreen />
</Box>
);
};
diff --git a/src/components/svg/DevTeamIcon.tsx b/src/components/svg/DevTeamIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9e8ffb0a6aa8d6afda13573bf7d11ffe57bbb44f
--- /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 = '24px',
+ width = '24px',
+ 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..70e81fb6e707bd46b0dbe4148f85ff75cb0075d9
--- /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 = '100px',
+ width = '40px',
+ 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;