-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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
Conversation
✅ Deploy Preview for mcss-website ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Btw the PR title should be MCSS-83: Refactor About Section and the ticket should be moved to in testing
components/Home/AboutUsSection.tsx
Outdated
const theme = createTheme({ | ||
typography: { | ||
fontFamily: ['Segoe UI'].join(','), | ||
}, | ||
}); | ||
|
||
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> | ||
<ThemeProvider theme={theme}> | ||
<Container |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
as for the theme, we already have a theme defined in the themes file so we can unify the theming throughout the app
Fixed all the mentioned issues |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
a few small comments
</div> | ||
</div> | ||
</div> | ||
<ThemeProvider theme={aboutSectionTheme}> |
There was a problem hiding this comment.
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
FOR THE STUDENTS | ||
</Typography> | ||
</Box> | ||
<Box className="md:block w-1/4 md:w-1/6 m-auto hidden"> |
There was a problem hiding this comment.
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
What's Inside
... full details of acceptance criteria documented in the linked GitHub issue