Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MCSS-83: Refactor About Section #86

Closed
wants to merge 5 commits into from
Closed

MCSS-83: Refactor About Section #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dbf9b90
Updated Mobile Look and changed components to MUI
NoeljToms Oct 1, 2023
0865359
Updated Linting
NoeljToms Oct 1, 2023
795aa9c
Updated Mobile Look and changed components to MUI
NoeljToms Oct 1, 2023
f558f02
Merge remote-tracking branch 'origin/master' into 83-refactor-about-s…
NoeljToms Dec 18, 2023
5fad7d1
fixed eslint issue
NoeljToms Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 128 additions & 43 deletions components/Home/AboutUsSection.tsx
View file
Open in desktop
anthonytedja marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,52 +1,137 @@
import { FC } from 'react';

import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Divider from '@mui/material/Divider';
import { ThemeProvider } from '@mui/material/styles';
import Typography from '@mui/material/Typography';

import Image from 'next/image';
import Deerfield from 'public/deerfield.png'; // image from https://www.soundsolutions.ca/projects/featured-exterior-cladding-projects/deerfield-hall-univeristy-of-toronto-mississauga-campus
import Experience from 'public/experience.png';

import { aboutSectionTheme } from '../../style/theme';

const AboutUsSection: FC = () => (
<div
id="about"
className="about-us-section flex flex-col items-center lg:items-stretch lg:flex-row gap-8"
>
<div className="header-img w-full lg:w-1/3 lg:min-h-full hidden lg:block">
<Image
src={Deerfield}
alt="Deerfield Hall"
className="min-h-full rounded-lg overflow-hidden"
draggable="false"
/>
</div>
<div className="w-4/5 mt-10 lg:mt-0 lg:w-2/3 flex flex-col justify-between xl:justify-center">
<span>
<p className="inline-block h-1/3 mr-5 text-2xl">ABOUT US</p>
<hr className="inline-block h-1 w-56 bg-purple-600" />
</span>
<div className="flex items-center my-5 lg:my-0">
<div className="w-1/2">
<p className="text-2xl md:text-4xl mt-3 mb-3 lg:text-6xl font-bold">FOR THE STUDENTS</p>
<p className="lg:hidden text-lg text-purple-700 font-semibold">Academic Society</p>
</div>
<div className="w-1/4 md:w-1/6 m-auto">
<Image src={Experience} alt="Experience" draggable="false" />
</div>
</div>
<p className="hidden lg:inline-block text-lg text-purple-700 font-semibold xl:pb-5">
Academic Society
</p>
<div className="flex">
<p className="text-med lg:text-justify">
Hello students and welcome! UTM Mathematical and Computational Sciences Society (MCSS) is
the official academic society for the Mathematics and Computational Sciences Department.
The purpose of the club is to officially represent the students, promote and achieve the
common interests of the students, encourage academic, social, and career related support
for the students, maintain open lines of communication between the students and the
department's faculty and staff, as well as maintain communication between the students
themselves, and encourage faculty and student interaction outside of the formal lecture,
tutorial, and lab settings.
</p>
</div>
</div>
</div>
<ThemeProvider theme={aboutSectionTheme}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should be using / modifying the 1 theme that we use throughout the app instead of creating multiple theme instances

<Container
maxWidth={false}
disableGutters
id="about"
sx={{
display: 'flex',
flexDirection: { lg: 'row' },
alignItems: { md: 'center', lg: 'stretch' },
gap: '2rem',
}}
>
<Box
sx={{
width: { lg: 1 / 3, md: 'full' },
minHeight: { lg: 'full' },
display: { xs: 'none', lg: 'block' },
}}
>
<Image
src={Deerfield}
alt="Deerfield Hall"
className="min-h-full rounded-lg overflow-hidden"
draggable="false"
/>
</Box>

<Box
sx={{
marginTop: 0,
width: { md: 4 / 5, lg: 2 / 3 },
display: 'flex',
flexDirection: 'column',
justifyContent: { lg: 'space-between', xl: 'center' },
textAlign: { md: 'left' },
}}
>
<Box sx={{ textAlign: { xs: 'center', sm: 'left' } }}>
<Typography
sx={{
fontSize: { lg: 23.5, xs: 35 },
display: { md: 'inline-block' },
flexDirection: 'column',
height: { md: '1/3' },
marginRight: { lg: 2 },
textAlign: { lg: 'center' },
}}
>
ABOUT US
</Typography>
<Divider
sx={{
display: 'inline-block',
height: '0.25rem',
width: '14rem',
backgroundColor: '#805ad5',
}}
/>
</Box>

<Box
sx={{
display: 'flex',
alignItems: 'center',
marginY: { xs: 5, lg: 0 },
}}
>
<Box sx={{ width: 1 / 2 }}>
<Typography
sx={{
display: { xs: 'none', md: 'block' },
fontSize: { md: '2.25rem', lg: '3.75rem' },
lineHeight: { md: '2.5rem', lg: '1' },
marginTop: '0.75rem',
marginBottom: '0.75rem',
fontWeight: 'bold',
}}
>
FOR THE STUDENTS
</Typography>
</Box>
<Box className="md:block w-1/4 md:w-1/6 m-auto hidden">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the end goal is to remove tailwind and use the theme styling / sx inline overrides so we should remove references to tailwind classes

<Image src={Experience} alt="Experience" draggable="false" />
</Box>
</Box>
<Typography
sx={{
display: { xs: 'none', md: 'block', lg: 'inline-block' },
fontWeight: 600,
paddingBottom: { xl: '1.25rem' },
fontSize: '1.125rem',
lineHeight: '1.75rem',
color: '#7E22CE',
}}
>
Academic Society
</Typography>
<Box sx={{ display: 'flex' }}>
<Typography
sx={{
paddingX: { xs: 2, sm: 0, md: 0, lg: 0 },
fontWeight: 400,
fontSize: '1rem',
textAlign: 'left',
}}
paragraph
>
Hello students and welcome! UTM Mathematical and Computational Sciences Society (MCSS)
is the official academic society for the Mathematics and Computational Sciences
Department. The purpose of the club is to officially represent the students, promote and
achieve the common interests of the students, encourage academic, social, and career
related support for the students, maintain open lines of communication between the
students and the department's faculty and staff, as well as maintain communication
between the students themselves, and encourage faculty and student interaction outside
of the formal lecture, tutorial, and lab settings.
</Typography>
</Box>
</Box>
</Container>
</ThemeProvider>
);
export default AboutUsSection;
2 changes: 1 addition & 1 deletion pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { store } from '@store/store';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import type { AppProps } from 'next/app';
import Script from 'next/script';
import theme from 'style/theme';
import { theme } from 'style/theme';

import { APIProvider } from '../contexts/useAPI';

Expand Down
8 changes: 7 additions & 1 deletion style/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import { createTheme } from '@mui/material/styles';

import COLORS from 'style/colors';

const aboutSectionTheme = createTheme({
typography: {
fontFamily: ['Segoe UI'].join(','),
},
});

const base = createTheme({
palette: {
primary: {
Expand Down Expand Up @@ -164,4 +170,4 @@ const theme = createTheme(base, {
},
});

export default theme;
export { theme, aboutSectionTheme };
Loading