desktop footer

src/components/Footer.tsx

-import { Box, IconButton, makeStyles, Typography, useTheme } from '@material-ui/core';
+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 useStyles = makeStyles((theme) => ({
+const useMobileStyles = makeStyles((theme) => ({
   footer: {
     background: theme.footer.background,
     padding: '0.3rem',
     paddingTop: '0.6rem',
   },
-  contact: {
+  contactText: {
     color: theme.palette.primary.contrastText,
     fontSize: '1.7rem',
     fontWeight: 500,
@@ -49,47 +56,76 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+const useDesktopStyles = makeStyles((theme) => ({
+  footer: {
+    padding: '0.4rem',
+  },
+  devteam: {
+    fontSize: '1.8rem',
+    paddingLeft: '0.6rem',
+  },
+  schdesignButton: {
+    paddingTop: '0.5rem',
+  },
+  contact: {
+    paddingRight: '2rem',
+  },
+  social: {
+    fontSize: '1.5rem',
+    margin: '0',
+    marginRight: '0.3rem',
+    marginTop: '0.2rem',
+    marginBottom: '0.2rem',
+  },
+  socialText: {
+    color: theme.palette.secondary.main,
+  },
+}));
+
 const Footer: React.FC = () => {
-  const classes = useStyles();
+  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={classes.contact}>
+      <Typography align="center" className={mClasses.contactText}>
         Kapcsolat
       </Typography>
       <Box display="flex" justifyContent="center">
         <IconButton
-          className={classes.socialButton}
+          className={mClasses.socialButton}
           onClick={(): void => {
             window.open('https://www.facebook.com/groups/schbody/');
           }}
         >
-          <FacebookIcon className={classes.social} />
+          <FacebookIcon className={mClasses.social} />
         </IconButton>
         <IconButton
-          className={classes.socialButton}
+          className={mClasses.socialButton}
           onClick={(): void => {
             window.location.href = 'mailto:body@sch.bme.hu';
           }}
         >
-          <MailIcon className={classes.social} />
+          <MailIcon className={mClasses.social} />
         </IconButton>
       </Box>
-      <Box display="flex" justifyContent="space-around" className={classes.groups}>
+      <Box display="flex" justifyContent="space-around" className={mClasses.groups}>
         <IconButton
-          className={classes.groupButton}
+          className={mClasses.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>
+            <Typography className={mClasses.devteam}>DevTeam</Typography>
           </Box>
         </IconButton>
         <IconButton
-          className={classes.groupButton}
+          className={mClasses.groupButton}
           onClick={(): void => {
             window.open('https://schdesign.hu/');
           }}
@@ -99,9 +135,74 @@ const Footer: React.FC = () => {
       </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="36px" height="36px" />
+            <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="140px" height="50px" color1={theme.palette.primary.contrastText} />
+        </IconButton>
+      </Box>
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-start"
+        className={dClasses.contact}
+      >
+        <Typography align="center" className={mClasses.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={classes.footer}>
-      <SmallScreen />
+    <Box component="footer" className={`${mClasses.footer} ${!isSmallScreen && dClasses.footer}`}>
+      {isSmallScreen ? <SmallScreen /> : <LargeScreen />}
     </Box>
   );
 };