Skip to content
Snippets Groups Projects
Commit b10b9c07 authored by Rafael László's avatar Rafael László :speech_balloon:
Browse files

Merge branch 'footer' into 'dev'

Footer, Page layout fix and theme restructure

See merge request !14
parents af3515dc ae690b2b
No related branches found
No related tags found
2 merge requests!19fix type imports,!14Footer, Page layout fix and theme restructure
...@@ -4,7 +4,7 @@ import { ClientContextProvider } from './context'; ...@@ -4,7 +4,7 @@ import { ClientContextProvider } from './context';
import ThemeProvider from './context/ThemeProvider'; import ThemeProvider from './context/ThemeProvider';
import { UserStateProvider } from './context/UserContext'; import { UserStateProvider } from './context/UserContext';
import Routes from './Routes'; import Routes from './Routes';
import { darkTheme } from './theme'; import darkTheme from './styles/darkTheme';
function App(): React.ReactElement { function App(): React.ReactElement {
return ( return (
......
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 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; export default Footer;
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;
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;
...@@ -6,17 +6,16 @@ import { ...@@ -6,17 +6,16 @@ import {
} from '@material-ui/core/styles'; } from '@material-ui/core/styles';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { ThemeProvider as SCThemeProvider } from 'styled-components'; import { ThemeProvider as SCThemeProvider } from 'styled-components';
import { theme as defaultTheme } from '../theme'; import lightTheme from '../styles/lightTheme';
export interface ThemeProviderProps { export interface ThemeProviderProps {
theme?: Theme; theme?: Theme;
} }
const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme: themeProp, children }) => { const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme: themeProp, children }) => {
const theme = useMemo( const theme = useMemo(() => (themeProp ? createMuiTheme(lightTheme, themeProp) : lightTheme), [
() => (themeProp ? createMuiTheme(defaultTheme, themeProp) : defaultTheme), themeProp,
[themeProp], ]);
);
return ( return (
<StylesProvider injectFirst> <StylesProvider injectFirst>
<MUIThemeProvider theme={theme}> <MUIThemeProvider theme={theme}>
......
import { Theme, useMediaQuery } from '@material-ui/core'; import { Box, makeStyles, Theme, useMediaQuery } from '@material-ui/core';
import React from 'react'; import React from 'react';
import styled from 'styled-components';
import DrawerMenu from '../components/DrawerMenu'; import DrawerMenu from '../components/DrawerMenu';
import Footer from '../components/Footer'; import Footer from '../components/Footer';
import Header from '../components/Header'; import Header from '../components/Header';
import MobileHeader from '../components/MobileHeader'; import MobileHeader from '../components/MobileHeader';
import { useToggle } from '../hooks/useToggle'; import { useToggle } from '../hooks/useToggle';
const Container = styled.div( const useStyles = makeStyles((theme) => ({
(props) => ` root: {
height: 100%; display: 'flex',
display: flex; flexDirection: 'column',
flex-direction: column; minHeight: '100vh',
justify-content: space-between; background: theme.palette.background.default,
},
background-color: ${props.theme.palette.background.default}; }));
`,
);
const MainContent = styled.div`
height: 100%;
`;
const Page: React.FC = ({ children }) => { const Page: React.FC = ({ children }) => {
const [openDrawer, { toggleOn, toggleOff }] = useToggle(false); const [openDrawer, { toggleOn, toggleOff }] = useToggle(false);
const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('xs')); const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('xs'));
const classes = useStyles();
return ( return (
<Container> <Box className={classes.root}>
{isMobile ? ( {isMobile ? (
<MobileHeader onMenuClick={toggleOn} /> <MobileHeader onMenuClick={toggleOn} />
) : ( ) : (
...@@ -35,9 +30,11 @@ const Page: React.FC = ({ children }) => { ...@@ -35,9 +30,11 @@ const Page: React.FC = ({ children }) => {
{isMobile && ( {isMobile && (
<DrawerMenu open={openDrawer} toggleOpen={toggleOff} handleLogout={(): void => {}} /> <DrawerMenu open={openDrawer} toggleOpen={toggleOff} handleLogout={(): void => {}} />
)} )}
<MainContent>{children}</MainContent> <Box flexGrow={1} flexShrink={0} flexBasis="auto">
{children}
</Box>
<Footer /> <Footer />
</Container> </Box>
); );
}; };
......
import { createMuiTheme } from '@material-ui/core'; import { createMuiTheme } from '@material-ui/core';
// eslint-disable-next-line import/prefer-default-export const darkTheme = createMuiTheme({
export const theme = createMuiTheme({ footer: {
// TODO: Create default theme background: '#222222',
/* palette: {
primary: {},
secondary: {},
error: {},
success: {},
info: {},
warning: {},
grey: {},
text: {},
}, */
typography: {
fontFamily: 'Roboto',
}, },
});
export const darkTheme = createMuiTheme({
palette: { palette: {
primary: { primary: {
main: '#1A6B97', main: '#1A6B97',
...@@ -36,6 +20,7 @@ export const darkTheme = createMuiTheme({ ...@@ -36,6 +20,7 @@ export const darkTheme = createMuiTheme({
default: '#2A2A28', default: '#2A2A28',
paper: '#202020', paper: '#202020',
}, },
divider: '#444444', divider: '#444444',
/* success: {}, /* success: {},
info: {}, info: {},
...@@ -49,3 +34,5 @@ export const darkTheme = createMuiTheme({ ...@@ -49,3 +34,5 @@ export const darkTheme = createMuiTheme({
fontFamily: 'Roboto', fontFamily: 'Roboto',
}, },
}); });
export default darkTheme;
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;
import '@material-ui/core/styles/createMuiTheme';
declare module '@material-ui/core/styles/createMuiTheme' {
interface Theme {
footer: {
background: React.CSSProperties['background'];
};
}
interface ThemeOptions extends Theme {}
}
File moved
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment