From 1e4c335249c7c451d445a7186104bfc63a6dffab Mon Sep 17 00:00:00 2001
From: miaravioli <mia.sravishankar@gmail.com>
Date: Sun, 12 Jan 2025 23:01:40 -0800
Subject: [PATCH 1/2] shrink each person for smaller screens

---
 src/components/Team.tsx | 174 +++++++++++++++++++++++++++-------------
 1 file changed, 120 insertions(+), 54 deletions(-)

diff --git a/src/components/Team.tsx b/src/components/Team.tsx
index e7d78a1..fcd9513 100644
--- a/src/components/Team.tsx
+++ b/src/components/Team.tsx
@@ -1,15 +1,13 @@
 import Table from '@mui/joy/Table';
 import Typography from '@mui/joy/Typography';
-import Button from "@mui/joy/Button";
-import blank from "../images/Team/blank.jpeg";
-import e from "../images/email.png";
-import g from "../images/github.png";
+import Button from '@mui/joy/Button';
+import blank from '../images/Team/blank.jpeg';
+import e from '../images/email.png';
+import g from '../images/github.png';
 
 function addPerson(name: string, image: string, role: string, link: string, type: string) {
-
     let typeImage = type === "Github" ? g : e;
     return { name, image, role, link, type, typeImage};
-
 }
 
 const directors = [
@@ -49,48 +47,118 @@ const sponsorship = [
 ];
 
 const teams = [
-    { name: "Directors", members: directors },
-    { name: "Tech", members: tech },
-    { name: "Outreach", members: outreach },
-    { name: "Sponsorship", members: sponsorship }
+    { name:"Directors", members: directors },
+    { name:"Tech", members: tech },
+    { name:"Outreach", members: outreach },
+    { name:"Sponsorship", members: sponsorship }
 ];
 
 export default function Team() {
     return (
-        <div style={{ padding: '5%' }}>
+        <div style={{ padding:'5%' }}>
             <Typography
-                level="h2"
+                level='h2'
                 sx={{
-                    color: '#ffffff',
-                    marginBottom: '2%',
-                    textAlign: "center"
+                    color:'#ffffff',
+                    marginBottom:'2%',
+                    textAlign:'center'
                 }}
             >
                 TEAM
             </Typography>
 
             {teams.map((team) => (
-
                 <Table
+                    key={team.name}
                     sx={{
-                        backgroundColor: '#221a46',
-                        marginTop: '2%',
-                        color: 'white',
-                        border: '6px solid #c6add4',
-                        overflow: 'hidden',
+                        backgroundColor:'#221a46',
+                        marginTop:'2%',
+                        color:'white',
+                        border:'6px solid #c6add4',
+                        overflow:'hidden',
                         '& td, & th': { 
-                            padding: '12px 16px', 
-                            fontSize: '1.1rem', 
-                            wordWrap: 'break-word', 
-                            whiteSpace: 'normal' }
+                            padding:'12px 16px', 
+                            fontSize:'1.1rem', 
+                            wordWrap:'break-word', 
+                            whiteSpace:'normal' 
+                        },
+                        '@media (max-width: 1200px)': {
+                            '& td, & th': { 
+                                fontSize:'1rem',
+                                padding:'10px 14px'
+                            },
+                            '& img#member': {
+                                height:'150px',
+                                width:'150px'
+                            },
+                            '& #link': { 
+                                width:'150px',
+                                fontSize:'0.9rem', 
+                                height:'25px' 
+                            },
+                            '& #link > img': { 
+                                height:'20px', 
+                                width:'20px',
+                                paddingRight:'5px' 
+                            },
+                            '& tr > td > div': { 
+                                gap:'10px' 
+                            }
+                        },
+                        '@media (max-width: 900px)': {
+                            '& td, & th': { 
+                                fontSize:'0.9rem',
+                                padding:'8px 12px'
+                            },
+                            '& img#member': {
+                                height:'130px',
+                                width:'130px'
+                            },
+                            '& #link': { 
+                                width:'130px',
+                                fontSize:'0.8rem', 
+                                height:'22px' 
+                            },
+                            '& #link > img': {
+                                height:'18px',
+                                width:'18px',
+                                paddingRight:'3px'
+                            },
+                            '& tr > td > div': { 
+                                gap:'5px' 
+                            }
+                        },
+                        '@media (max-width: 600px)': {
+                            '& td, & th': { 
+                                fontSize:'0.8rem',
+                                padding:'6px 10px'
+                            },
+                            '& img#member': {
+                                height:'110px',
+                                width:'110px'
+                            },
+                            '& #link': { 
+                                width:'110px',
+                                fontSize:'0.7rem', 
+                                height:'20px' 
+                            },
+                            '& #link > img': { 
+                                height:'16px', 
+                                width:'16px',
+                                paddingRight:'2px'
+                            },
+                            '& tr > td > div': { 
+                                gap:'2px' 
+                            }
+                        }
                     }}
                 >
-                    <tbody key={team.name}> 
+                    <tbody> 
                         <tr>
                             <td style={{ 
-                                fontSize: '20px', 
-                                textTransform: 'uppercase', 
-                                padding: '12px 16px' 
+                                fontSize:'20px', 
+                                textTransform:'uppercase', 
+                                padding:'12px 16px' 
                             }}>  
                                 {team.name}
                             </td>
@@ -98,18 +166,18 @@ export default function Team() {
                         <tr>
                             <td> 
                                 <div style={{ 
-                                    display: 'flex', 
-                                    flexWrap: 'wrap', 
-                                    justifyContent: 'left',
-                                    gap: '16px' 
+                                    display:'flex', 
+                                    flexWrap:'wrap', 
+                                    justifyContent:'center',
+                                    gap:'16px' 
                                 }}>
 
                                 {team.members.map((member, i) => (
                                     <div key={i} style={{ 
-                                        width: '180px', 
-                                        textAlign: 'center', 
-                                        justifyContent: 'center', 
-                                        alignItems: 'center' 
+                                        width:'180px', 
+                                        textAlign:'center', 
+                                        justifyContent:'center', 
+                                        alignItems:'center' 
                                     }}>
                                         <img 
                                             src={member.image} 
@@ -117,7 +185,7 @@ export default function Team() {
                                             width="170px" 
                                             id="member" 
                                             alt="member-image" 
-                                            style={{ objectFit: "cover"}} 
+                                            style={{ objectFit:'cover' }} 
                                         />
                                         <div style={{ 
                                             fontSize: '17px', 
@@ -135,24 +203,24 @@ export default function Team() {
                                         <div>
                                             <Button
                                                 sx={{ 
-                                                    borderRadius: "10px", 
-                                                    marginTop: "3%", 
-                                                    backgroundColor: '#c6add4', 
-                                                    height: "30px", 
-                                                    width:"170px",
-                                                    '&:hover': {backgroundColor: '#bb97cf'}
+                                                    borderRadius:'10px', 
+                                                    marginTop:'3%', 
+                                                    backgroundColor:'#c6add4', 
+                                                    height:'30px', 
+                                                    width:'170px',
+                                                    '&:hover': {backgroundColor:'#bb97cf'}
                                                 }}
-                                                id="link"
-                                                component="a"
+                                                id='link'
+                                                component='a'
                                                 href={member.link}
                                             >
                                                 <img 
                                                     src={member.typeImage} 
-                                                    height="25" 
-                                                    width="25" 
-                                                    id="member" 
-                                                    alt="member-link" 
-                                                    style={{paddingRight: "10px"}}
+                                                    height='25'
+                                                    width='25'
+                                                    id='member' 
+                                                    alt='member-link' 
+                                                    style={{paddingRight:'10px'}}
                                                 />
                                                 {member.type}
                                             </Button>
@@ -164,10 +232,8 @@ export default function Team() {
                             </td>
                         </tr>
                     </tbody>
-            </Table>
-
+                </Table>
             ))}
-            
         </div>
     );
 }
\ No newline at end of file

From 268a5282aca1951f138cd7d47585cfa90251b1c0 Mon Sep 17 00:00:00 2001
From: miaravioli <mia.sravishankar@gmail.com>
Date: Tue, 14 Jan 2025 01:32:24 -0800
Subject: [PATCH 2/2] mobile edits

---
 src/components/Team.tsx | 244 +++++++++++++++++++---------------------
 1 file changed, 114 insertions(+), 130 deletions(-)

diff --git a/src/components/Team.tsx b/src/components/Team.tsx
index fcd9513..87b6e8e 100644
--- a/src/components/Team.tsx
+++ b/src/components/Team.tsx
@@ -82,152 +82,136 @@ export default function Team() {
                             wordWrap:'break-word', 
                             whiteSpace:'normal' 
                         },
-                        '@media (max-width: 1200px)': {
-                            '& td, & th': { 
-                                fontSize:'1rem',
-                                padding:'10px 14px'
+                        '@media (max-width: 700px)': {
+                            '& tr > td > div': {
+                                display:'flex',
+                                flexWrap:'wrap',
+                                justifyContent:'space-evenly',
+                                gap:'12px' 
                             },
-                            '& img#member': {
-                                height:'150px',
-                                width:'150px'
+                            '& tr > td > div > div': {
+                                width:'46% !important',
+                                margin:'0px !important',
+                                display:'flex',
+                                flexDirection:'column',
+                                alignItems:'center',
+                                gap:'2px'
                             },
-                            '& #link': { 
-                                width:'150px',
-                                fontSize:'0.9rem', 
-                                height:'25px' 
+                            '& tr > td > div > div img': {
+                                height:'90px',
+                                width:'90px',
+                                objectFit:'cover'
                             },
-                            '& #link > img': { 
-                                height:'20px', 
-                                width:'20px',
-                                paddingRight:'5px' 
+                            '& tr > td > div > div > div:first-of-type': {
+                                fontSize:'13px !important',
+                                fontWeight:'bold',
+                                color:'white',
                             },
-                            '& tr > td > div': { 
-                                gap:'10px' 
-                            }
-                        },
-                        '@media (max-width: 900px)': {
-                            '& td, & th': { 
-                                fontSize:'0.9rem',
-                                padding:'8px 12px'
-                            },
-                            '& img#member': {
-                                height:'130px',
-                                width:'130px'
-                            },
-                            '& #link': { 
-                                width:'130px',
-                                fontSize:'0.8rem', 
-                                height:'22px' 
-                            },
-                            '& #link > img': {
-                                height:'18px',
-                                width:'18px',
-                                paddingRight:'3px'
-                            },
-                            '& tr > td > div': { 
-                                gap:'5px' 
-                            }
-                        },
-                        '@media (max-width: 600px)': {
-                            '& td, & th': { 
-                                fontSize:'0.8rem',
-                                padding:'6px 10px'
-                            },
-                            '& img#member': {
-                                height:'110px',
-                                width:'110px'
-                            },
-                            '& #link': { 
-                                width:'110px',
-                                fontSize:'0.7rem', 
-                                height:'20px' 
-                            },
-                            '& #link > img': { 
-                                height:'16px', 
-                                width:'16px',
-                                paddingRight:'2px'
-                            },
-                            '& tr > td > div': { 
-                                gap:'2px' 
+                            '& tr > td > div > div > div:nth-of-type(2)': {
+                                fontSize:'10px !important',
+                                color:'grey',
                             }
                         }
                     }}
                 >
                     <tbody> 
                         <tr>
-                            <td style={{ 
-                                fontSize:'20px', 
-                                textTransform:'uppercase', 
-                                padding:'12px 16px' 
-                            }}>  
+                            <td
+                                style={{
+                                    fontSize:'20px',
+                                    textTransform:'uppercase',
+                                    padding:'12px 16px'
+                                }}
+                            >
                                 {team.name}
                             </td>
                         </tr>
                         <tr>
-                            <td> 
-                                <div style={{ 
-                                    display:'flex', 
-                                    flexWrap:'wrap', 
-                                    justifyContent:'center',
-                                    gap:'16px' 
-                                }}>
-
-                                {team.members.map((member, i) => (
-                                    <div key={i} style={{ 
-                                        width:'180px', 
-                                        textAlign:'center', 
-                                        justifyContent:'center', 
-                                        alignItems:'center' 
-                                    }}>
-                                        <img 
-                                            src={member.image} 
-                                            height="170px" 
-                                            width="170px" 
-                                            id="member" 
-                                            alt="member-image" 
-                                            style={{ objectFit:'cover' }} 
-                                        />
-                                        <div style={{ 
-                                            fontSize: '17px', 
-                                            fontWeight: 'bold',
-                                             color: 'white'
-                                        }}>
-                                            {member.name}
-                                        </div>
-                                        <div style={{ 
-                                            fontSize: '15px', 
-                                            color: 'grey'
-                                        }}>
-                                            {member.role}
-                                        </div>
-                                        <div>
-                                            <Button
-                                                sx={{ 
-                                                    borderRadius:'10px', 
-                                                    marginTop:'3%', 
-                                                    backgroundColor:'#c6add4', 
-                                                    height:'30px', 
-                                                    width:'170px',
-                                                    '&:hover': {backgroundColor:'#bb97cf'}
+                            <td>
+                                <div
+                                    style={{
+                                        display:'flex',
+                                        flexWrap:'wrap',
+                                        justifyContent:'center',
+                                        gap:'16px'
+                                    }}
+                                >
+                                    {team.members.map((member, i) => (
+                                        <div
+                                            key={i}
+                                            style={{
+                                                textAlign:'center',
+                                                justifyContent:'center',
+                                                alignItems:'center',
+                                                width:'45%',
+                                                maxWidth:'180px',
+                                                margin:'5px'
+                                            }}
+                                        >
+                                            <img
+                                                src={member.image}
+                                                height="170px"
+                                                width="170px"
+                                                id="member"
+                                                alt="member-image"
+                                                style={{ objectFit: 'cover' }}
+                                            />
+                                            <div
+                                                style={{
+                                                    fontSize:'17px',
+                                                    fontWeight:'bold',
+                                                    color:'white'
                                                 }}
-                                                id='link'
-                                                component='a'
-                                                href={member.link}
                                             >
-                                                <img 
-                                                    src={member.typeImage} 
-                                                    height='25'
-                                                    width='25'
-                                                    id='member' 
-                                                    alt='member-link' 
-                                                    style={{paddingRight:'10px'}}
-                                                />
-                                                {member.type}
-                                            </Button>
+                                                {member.name}
+                                            </div>
+                                            <div
+                                                style={{
+                                                    fontSize:'15px',
+                                                    color:'grey'
+                                                }}
+                                            >
+                                                {member.role}
+                                            </div>
+                                            <div>
+                                                <Button
+                                                    sx={{
+                                                        borderRadius:'10px',
+                                                        marginTop:'3%',
+                                                        backgroundColor:'#c6add4',
+                                                        height:'30px',
+                                                        width:'170px',
+                                                        '&:hover': {
+                                                            backgroundColor:'#bb97cf'
+                                                        },
+                                                        '@media (max-width: 700px)': {
+                                                            height:'20px', 
+                                                            width:'90px',
+                                                            fontSize:'13px',
+                                                            padding:'0 8px',
+                                                            '& img': {
+                                                                height:'18px !important',
+                                                                width:'18px !important'
+                                                            }
+                                                        }
+                                                    }}
+                                                    id="link"
+                                                    component="a"
+                                                    href={member.link}
+                                                >
+                                                    <img
+                                                        src={member.typeImage}
+                                                        height="25"
+                                                        width="25"
+                                                        id="member"
+                                                        alt="member-link"
+                                                        style={{ paddingRight: '10px' }} 
+                                                    />
+                                                    {member.type}
+                                                </Button>
+                                            </div>
                                         </div>
-                                    </div>
-                                ))}
-
+                                    ))}
                                 </div>
                             </td>
                         </tr>
@@ -236,4 +220,4 @@ export default function Team() {
             ))}
         </div>
     );
-}
\ No newline at end of file
+}