Leaf/a6.1 input change occupation

meshapp/src/components/home-logged-in/homePage.tsx

@@ -3,17 +3,14 @@ import ErrorOutline from "@mui/icons-material/ErrorOutline";
 import group_image from "../../assets/media/group_image.png";
 import { paths } from "../../Routing/RoutePaths";
 import { Link as RouterLink } from "react-router-dom";
+
 export default function homePage() {
   /*-----------------Group image container------------*/
 
   const imgContainer = (
     <Grid container display="flex" justifyContent="center" bgcolor="#CCCCCC">
       <Grid item>
-        <img
-          alt="group_image"
-          srcSet={`${group_image} 500w`}
-          sizes="(min-width: 1450px) 740px, (min-width: 1200px) 590px, (min-width: 900px) 430px, (min-width: 600px) 280px, 220px"
-        ></img>
+        <img alt="group_image" srcSet={`${group_image} 1050w`}></img>
       </Grid>
     </Grid>
   );
@@ -54,7 +51,7 @@ export default function homePage() {
 
   const topText = () => {
     return (
-      <Grid item>
+      <Grid item xs={11}>
         <Typography
           color="#F2E8DE"
           fontFamily="cocogoose"
@@ -73,7 +70,7 @@ export default function homePage() {
 
   const bottomTextItem = () => {
     return (
-      <Grid item>
+      <Grid item xs={9}>
         <Typography
           color="#F2E8DE"
           fontFamily="cocogoose"
@@ -125,27 +122,25 @@ export default function homePage() {
         sx={{
           minHeight: "100vh",
         }}
+        gap="10px"
       >
         {imgAlertItem()}
 
         <Grid
           item
           container
-          sm={5}
           xs={10}
+          sm={5}
           gap="45px"
           display="flex"
           justifyContent="center"
           mb="75px"
         >
           {topText()}
-
           {/*-----------Grid item for bottom text & swipe button----------------*/}
-          <Grid item xs={9}>
-            <Grid container gap="20px" display="flex" justifyContent="center">
-              {bottomTextItem()}
-              {swipeButton()}
-            </Grid>
+          <Grid container gap="20px" display="flex" justifyContent="center">
+            {bottomTextItem()}
+            {swipeButton()}
           </Grid>
         </Grid>
       </Grid>

meshapp/src/home/logged-in/LoggedInHome.tsx

@@ -25,13 +25,13 @@ function homeTheme() {
       fontSize: "23px",
     },
     "@media (min-width:600px)": {
-      fontSize: "20px",
+      fontSize: "24px",
     },
     "@media (min-width:900px)": {
       fontSize: "31px",
     },
     "@media (min-width:1200px)": {
-      fontSize: "42px",
+      fontSize: "43px",
     },
     "@media (min-width: 1536px)": {
       fontSize: "55px",
@@ -46,13 +46,13 @@ function homeTheme() {
       fontSize: "20px",
     },
     "@media (min-width:600px)": {
-      fontSize: "13px",
+      fontSize: "17px",
     },
     "@media (min-width:900px)": {
       fontSize: "23px",
     },
     "@media (min-width:1200px)": {
-      fontSize: "25px",
+      fontSize: "29px",
     },
     "@media (min-width: 1536px)": {
       fontSize: "38px",
@@ -70,9 +70,9 @@ function homeTheme() {
       fontSize: "10px",
     },
     "@media (min-width:900px)": {
-      fontSize: "15px",
+      fontSize: "14px",
     },
-    "@media (min-width:1000px)": {
+    "@media (min-width:1200px)": {
       fontSize: "16px",
     },
     "@media (min-width: 1536px)": {

meshapp/src/index.tsx

@@ -13,7 +13,6 @@ root.render(
     <ThemeContextProvider>
       <MainThemeProvider>
         <TwoFactorAuthReminders />
-        <ProfilePage {...exampleProfile} />
         <AppRoutes />
       </MainThemeProvider>
     </ThemeContextProvider>

meshapp/src/profile/profile-occupation.tsx

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { Grid, Typography, createTheme, ThemeProvider } from "@mui/material";
+
+import EditIcon from "@mui/icons-material/Edit";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+
+import ProfileTextField from "./profile-textfield";
+
+const theme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#0b7d66",
+    },
+  },
+  typography: {
+    h1: {
+      fontFamily: "cocogoose",
+      fontWeight: "bold",
+      color: "#26383A",
+    },
+  },
+});
+
+/**
+ * Displays the user's current occupation.
+ *
+ * @param props - Properties of the component
+ * @param {string} props.occupationTitle - Title of user's occupation
+ * @param {string} props.occupationBusiness - Name of business/org the user affiliates with
+ */
+export default function ProfileOccupation(props: {
+  occupationTitle: string;
+  occupationBusiness: string;
+}) {
+  const [editMode, setEditMode] = useState(false);
+  const [occupationTitle, setOccupationTitle] = useState(props.occupationTitle);
+  const [occupationBusiness, setOccupationBusiness] = useState(
+    props.occupationBusiness
+  );
+
+  const handleEditClick = () => {
+    setEditMode(true);
+  };
+
+  const handleBackClick = () => {
+    setEditMode(false);
+  };
+
+  //TODO: Retrieve and store occupation
+  function saveTitle(text: string) {
+    setOccupationTitle(text);
+  }
+
+  function saveBusiness(text: string) {
+    setOccupationBusiness(text);
+  }
+
+  /**
+   * Displays the user's occupation in edit mode.
+   */
+  const EditOccupation = () => {
+    return (
+      <Grid container gap="20px">
+        <Grid xs={5.8}>
+          <ProfileTextField
+            variant="outlined"
+            label="Occupation"
+            placeholder=""
+            text={occupationTitle}
+            charLimit={50}
+            handleSave={saveTitle}
+          />
+        </Grid>
+        <Grid xs={5.8}>
+          <ProfileTextField
+            variant="outlined"
+            label="Organization"
+            placeholder=""
+            text={occupationBusiness}
+            charLimit={50}
+            handleSave={saveBusiness}
+          />
+        </Grid>
+      </Grid>
+    );
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Grid className="profile-page-occupations">
+        {editMode ? (
+          <Grid container gap="10px" alignItems="center">
+            <ArrowBackIosIcon
+              color="primary"
+              onClick={handleBackClick}
+              sx={{
+                "&:hover": {
+                  color: "#0A6B57",
+                },
+              }}
+            />
+            <Grid item xs={11.5}>
+              <EditOccupation />
+            </Grid>
+          </Grid>
+        ) : (
+          <Grid container gap="10px" alignItems="center">
+            <Typography variant="h1" sx={{ fontSize: "24px" }}>
+              {occupationTitle}, {occupationBusiness}
+            </Typography>
+            <EditIcon
+              color="disabled"
+              onClick={handleEditClick}
+              sx={{
+                "&:hover": {
+                  color: "#0b7d66",
+                },
+              }}
+            />
+          </Grid>
+        )}
+      </Grid>
+    </ThemeProvider>
+  );
+}

meshapp/src/profile/profile-page.tsx

@@ -8,6 +8,7 @@ import {
   Chip,
 } from "@mui/material";
 
+import ProfileOccupation from "./profile-occupation";
 import ProfileTextField from "./profile-textfield";
 import ProfilePicture from "./profile-picture";
 import { Education, Profile } from "./types/profile";
@@ -139,28 +140,6 @@ const ProfilePage = (props: Profile) => {
  * @param {string} props.pronouns - Pronouns used by user
  */
 
-/**
- * Displays the user's current occupation.
- *
- * @param props - Properties of the component
- * @param {string} props.occupationTitle - Title of user's occupation
- * @param {string} props.occupationBusiness - Name of business/org the user affiliates with
- */
-const ProfileOccupation = (props: {
-  occupationTitle: string;
-  occupationBusiness: string;
-}) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <Box className="profile-page-occupations">
-        <Typography variant="h1" sx={{ fontSize: "24px" }}>
-          {props.occupationTitle}, {props.occupationBusiness}
-        </Typography>
-      </Box>
-    </ThemeProvider>
-  );
-};
-
 /**
  * Displays the user's biography. It also has a max character limit of 300.
  *
@@ -212,8 +191,9 @@ const ProfileBiography = (props: { biography: string; accountID: number }) => {
     <ThemeProvider theme={theme}>
       <Box className="profile-page-biography">
         <ProfileTextField
-          label={"Biography"}
-          placeholder={"Share your background and experiences"}
+          variant="outlined"
+          label="Biography"
+          placeholder="Share your background and experiences"
           text={biography}
           charLimit={300}
           handleSave={saveBiography}
@@ -386,9 +366,10 @@ const ProfileInterests = () => {
 const TestComponent = (props: any) => {
   return (
     <ProfileTextField
-      label={"Test"}
-      placeholder={"Test"}
-      text={"Test"}
+      variant="outlined"
+      label="Test"
+      placeholder="Test"
+      text="Test"
       charLimit={200}
       handleSave={() => {
         return;

meshapp/src/profile/profile-textfield.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { TextField, Box } from "@mui/material";
+import { TextField, Box, TextFieldVariants } from "@mui/material";
 
 import EditIcon from "@mui/icons-material/Edit";
 import SaveIcon from "@mui/icons-material/Save";
@@ -18,6 +18,7 @@ import SaveIcon from "@mui/icons-material/Save";
  * @param {function} props.handleSave - Callback to save data
  */
 const ProfileTextField = (props: {
+  variant: TextFieldVariants;
   label: string;
   placeholder: string;
   text: string;
@@ -47,7 +48,7 @@ const ProfileTextField = (props: {
       label={props.label}
       placeholder={props.placeholder}
       InputLabelProps={{ shrink: true }}
-      variant={"standard"}
+      variant={props.variant}
       InputProps={{
         endAdornment: editMode ? (
           <Box paddingLeft={2}>
@@ -90,7 +91,7 @@ const ProfileTextField = (props: {
       value={text}
       onChange={handleTextChange}
       sx={{
-        "& .MuiOutlinedInput-root": {
+        "& .MuiInputBase-root": {
           "& fieldset": {
             transition: "border 0.10s ease-in-out",
           },