Skip to content

#677 UI Updates #679

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

Open
AnilKumar3494 wants to merge 4 commits into
base: upgrade-react-19
Choose a base branch
from
+53 −48
Open

#677 UI Updates #679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e65309e
#677 UI Updates
AnilKumar3494 Dec 3, 2025
9674590
Fix TODO comment syntax in Contact.tsx
AnilKumar3494 Dec 3, 2025
5ad62e5
cleanup: removed unused ack component and comments
AnilKumar3494 Dec 3, 2025
feaba88
cleanup: removed unused ack component and comments
AnilKumar3494 Dec 3, 2025
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
6 changes: 3 additions & 3 deletions src/components/ContributorsList/ContributorsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import type { Contributor } from 'types/Contributor';
import ContributorsListItem from './ContributorsListItem';

type ContributorsListProps = {
items: Contributor[];
title: string;
items: Contributor[];
};

const ContributorsList = ({
items = [],
title = 'Contributors'
title = 'Contributors',
items = []
}: ContributorsListProps) => (
<Grid>
<Typography variant="h6" color="#73839E">
Expand Down
2 changes: 1 addition & 1 deletion src/components/Pages/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ const About = () => (
</p>
<div>
<h2 className={styles.pageSubheader}>Our story</h2>
<p>
<p className={styles.pageText}>
This app was officially launched in 2020 with support from Code for
Philly. Conceived in 2017 as a Social Practice art project, PHLASK
uses technology as an artistic medium to cultivate social cohesion and
Expand Down
15 changes: 0 additions & 15 deletions src/components/Pages/Acknowledgements.tsx
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/components/Pages/Contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ const Contact = () => {
<CircularProgress />
</Box>
)}

<iframe
title="Contact Us"
className="airtable-embed"
Expand Down
77 changes: 49 additions & 28 deletions src/components/Pages/Join.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ReactElement, useEffect } from 'react';
import { useEffect } from 'react';
import type { ReactElement } from 'react';

import Grid from '@mui/material/Grid';
import CivicIcon from 'icons/JoinCivicIcon';
Expand Down Expand Up @@ -64,6 +65,39 @@ const Circle = ({ icon, title, description }: CircleProps) => (
</div>
);

const ROLE_CARDS = [
{
id: 'dev',
title: 'Development',
description: 'Coding and Programming',
icon: <DevelopmentIcon />
},
{
id: 'data',
title: 'Data',
description: 'Collecting and organizing app data',
icon: <DataIcon />
},
{
id: 'mgmt',
title: 'Project Management',
description: 'Task management',
icon: <ManagementIcon />
},
{
id: 'design',
title: 'Design',
description: 'UX/UI Design and Research',
icon: <DesignIcon />
},
{
id: 'civic',
title: 'Civic',
description: 'Publicity and Community Engagement',
icon: <CivicIcon />
}
];

const Join = () => {
const dispatch = useAppDispatch();
const currentContributors = useAppSelector(
Expand All @@ -89,38 +123,22 @@ const Join = () => {
into &quot;circles&quot; by job function:
</p>
</div>

<div
style={{
height: 'fit-content',
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))'
}}
>
<Circle
icon={<DevelopmentIcon />}
title="Development"
description="Coding and Programming"
/>
<Circle
icon={<DataIcon />}
title="Data"
description="Collecting and organizing app data"
/>
<Circle
icon={<ManagementIcon />}
title="Project Management"
description="Task management"
/>
<Circle
icon={<DesignIcon />}
title="Design"
description="UX/UI Design and Resarch"
/>
<Circle
icon={<CivicIcon />}
title="Civic"
description="Publicity and Community Engagement"
/>
{ROLE_CARDS.map(card => (
Copy link
Contributor

@RNR1 RNR1 Dec 14, 2025

Choose a reason for hiding this comment

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

While this approach reduces repetition in the JSX, it makes the component's flow less intuitive, as you have to scroll up to see which circles we render. It also results in more lines of code. I'm not too concerned about mapping these circle components and would rather use this approach for dynamic data, where we don't know what data we receive, rather than for static data that doesn't change.

<Circle
key={card.id}
icon={card.icon}
title={card.title}
description={card.description}
/>
))}
</div>

<div>
Expand All @@ -133,7 +151,7 @@ const Join = () => {
>
<div
style={{
width: '55%',
width: '80%',
padding: '20px',
border: '2px solid #F4D85B',
borderRadius: '10px',
Expand All @@ -149,6 +167,7 @@ const Join = () => {
</p>
</div>
</div>

<div>
<p className={styles.pageText}>
To join the team, visit{' '}
Expand Down Expand Up @@ -185,12 +204,14 @@ const Join = () => {
</li>
</ol>
</div>

<div id="acknowledgements-section">
<h2>Acknowledgements</h2>
<p>
<p className={styles.pageText}>
This project was made possible by the time, mentorship, and
expertise of our dedicated team of volunteers.
</p>

<Grid container className="contributors" spacing={6}>
<ContributorsList
title="Current Contributors"
Expand Down
Loading