From 12e9d0e0285cd9df88e90c31abde2892b51f6a8c Mon Sep 17 00:00:00 2001 From: Darren52BT Date: Wed, 17 Jul 2024 13:32:22 -0700 Subject: [PATCH 1/2] implemented view only profile page --- meshapp/src/models/profile.d.ts | 1 + meshapp/src/pages/Profiles/Page.tsx | 49 ++++- .../src/pages/Profiles/ProfileAccordion.tsx | 198 ++++++++++-------- .../Profiles/ProfileAccordionCombobox.tsx | 7 +- .../Profiles/ProfileAccordionTextfield.tsx | 116 ++++++---- .../pages/Profiles/ProfileGroupAccordion.tsx | 56 ++--- meshapp/src/pages/Profiles/ProfileHeader.tsx | 24 ++- .../src/pages/Profiles/ProfileInterests.tsx | 50 +++-- meshapp/src/pages/Profiles/ProfilePicture.tsx | 49 +++-- .../src/pages/Profiles/ProfileTextfield.tsx | 122 +++++++---- .../pages/Profiles/tests/profile-examples.ts | 2 + meshapp/src/themes/dark.ts | 5 +- meshapp/src/themes/light.ts | 5 +- meshapp/src/themes/theme.d.ts | 10 +- 14 files changed, 426 insertions(+), 268 deletions(-) diff --git a/meshapp/src/models/profile.d.ts b/meshapp/src/models/profile.d.ts index 871f736a..be8ba248 100644 --- a/meshapp/src/models/profile.d.ts +++ b/meshapp/src/models/profile.d.ts @@ -1,6 +1,7 @@ // TODO: Update order of fields to match order in the Profile schema // NOTE: Add/modify/remove fields as needed, but consider what needs to be refactored in ../profile-page.tsx export type Profile = { + viewOnly:boolean; name: string; pronouns: string; occupationTitle: string; diff --git a/meshapp/src/pages/Profiles/Page.tsx b/meshapp/src/pages/Profiles/Page.tsx index 3dcb8a0e..e4ccd3ef 100644 --- a/meshapp/src/pages/Profiles/Page.tsx +++ b/meshapp/src/pages/Profiles/Page.tsx @@ -17,6 +17,7 @@ import ProfileHeader from "./ProfileHeader"; * Displays a user's personal, professional, and educational information. * * @param props - Properties of the component + * @param {boolean} props.viewOnly - whether profile is view only or not * @param {string} props.name - Name of user * @param {string} props.pronouns - Pronouns used by user * @param {string} props.occupationTitle - Title of user's occupation @@ -28,6 +29,7 @@ import ProfileHeader from "./ProfileHeader"; * @param {Education} props.education - an array containing objects that each contain a degree,school, and description * @param {Experience} props.experience - an array contains objects that each contain a occupation name, organization, and description * @param {number} props.accountID - ID of Profile account + * @param {boolean} props.viewOnly - whether profile is view only or not */ const ProfilePage = (props: Profile) => { @@ -48,6 +50,7 @@ const ProfilePage = (props: Profile) => { text={props.name} charLimit={15} fontSize={"60px"} + viewOnly={props.viewOnly} /> { text={props.pronouns} charLimit={8} fontSize={"30px"} + viewOnly={props.viewOnly} /> @@ -72,6 +76,7 @@ const ProfilePage = (props: Profile) => { { marginBottom: "-125px", // Adjusts container height to match transform }} > - + @@ -94,10 +103,16 @@ const ProfilePage = (props: Profile) => { - + - + { borderColor: "divider", }} > - + @@ -158,8 +173,13 @@ const ProfileOccupation = (props: { * @param props - Properties of the component * @param {string} props.biography - The initial text content of the bio * @param {number} props.accountID - accountID associated with the profile + * @param {boolean} props.viewOnly - whether profile is view only or not */ -const ProfileBiography = (props: { biography: string; accountID: number }) => { +const ProfileBiography = (props: { + biography: string; + accountID: number; + viewOnly: boolean; +}) => { const [biography, setBiography] = useState(props.biography); const [isLoading, setLoading] = useState(true); @@ -208,6 +228,7 @@ const ProfileBiography = (props: { biography: string; accountID: number }) => { charLimit={300} handleSave={saveBiography} variant="outlined" + viewOnly={props.viewOnly} /> ); @@ -253,9 +274,13 @@ const ProfileRole = (props: { isMentor: boolean; isMentee: boolean }) => { * * @param props - Properties of the component * @param {Experience} props.experience - Array of objects that each represent a single occupation + * @param {boolean} props.viewOnly - whether profile is view only or not * */ -const ProfileExperience = (props: { experience: Experience }) => { +const ProfileExperience = (props: { + experience: Experience; + viewOnly: boolean; +}) => { //starting error validation functions const isEmpty = (inputName: string) => (val: string) => val.length > 0 || `${inputName} cannot be empty.`; @@ -363,6 +388,7 @@ const ProfileExperience = (props: { experience: Experience }) => { charLimit("Description"), ]} addAccordHandler={addExperienceHandler} + viewOnly={props.viewOnly} /> ); @@ -373,9 +399,13 @@ const ProfileExperience = (props: { experience: Experience }) => { * * @param props - Properties of the component * @param {Education} props.education - Array of objects that represent a single education + * @param {boolean} props.viewOnly - whether profile is view only or not * */ -const ProfileEducation = (props: { education: Education }) => { +const ProfileEducation = (props: { + education: Education; + viewOnly: boolean; +}) => { //starting error validation functions const isEmpty = (inputName: string) => (val: string) => val.length > 0 || `${inputName} cannot be empty.`; @@ -484,6 +514,7 @@ const ProfileEducation = (props: { education: Education }) => { charLimit("Description"), ]} addAccordHandler={AddEducationHandler} + viewOnly={props.viewOnly} /> ); @@ -494,8 +525,9 @@ const ProfileEducation = (props: { education: Education }) => { /** * Displays the user's interest tags and supports editing them. + * @param {boolean} props.viewOnly - whether profile is view only or not */ -const ProfileInterests = () => { +const ProfileInterests = (props: { viewOnly: boolean }) => { // NOTE: Used to simulate future HTTP requests - remove when API is implemented const [testCurrentSelected, setTestCurrentSelected] = React.useState< string[] @@ -529,6 +561,7 @@ const ProfileInterests = () => { currentTags={testCurrentSelected} recommendedTags={testRecommended} setTags={setTestCurrentSelected} + viewOnly={props.viewOnly} /> ); diff --git a/meshapp/src/pages/Profiles/ProfileAccordion.tsx b/meshapp/src/pages/Profiles/ProfileAccordion.tsx index 36ea55f4..d4fd672b 100644 --- a/meshapp/src/pages/Profiles/ProfileAccordion.tsx +++ b/meshapp/src/pages/Profiles/ProfileAccordion.tsx @@ -48,8 +48,8 @@ import { Delete } from "@mui/icons-material"; * @param {boolean} props.alwaysOpen - if this is set true, then the accordion will be permanently open and the expand icon will disappear * @param {Function} props.editHandler - function for saving edit on backend (is optional since this component can be used for adding or editing/deleting accordion) * @param {Function} props.deleteHandler - function for deleting on backend (is optional since this component can be used for adding or editing/deleting accordion) - -*/ + * @param {boolean} props.viewOnly - whether profile is view only or not + */ export default function ProfileAccordion(props: { comboOneVal: string; comboTwoVal: string; @@ -68,6 +68,7 @@ export default function ProfileAccordion(props: { alwaysOpen?: boolean; editHandler?: Function; deleteHandler?: Function; + viewOnly?: boolean | undefined; }) { //controls whether accordion is expanded to show description or not const [expanded, setExpanded] = React.useState(false); @@ -204,54 +205,64 @@ export default function ProfileAccordion(props: { return ( <> {/*Modal for confirming deletion*/} - - - - Are you sure you want to delete this? - - - - - - - + + Yes + + + + + + + )} + {/*Accordion*/} {/*Second combobox */} @@ -289,60 +301,65 @@ export default function ProfileAccordion(props: { options={props.comboTwoValOptions} onChange={comboTwoValOnChange} errValidations={props.comboTwoValErrValidations} + viewOnly={props.viewOnly} + isSecond /> - - { - //conditional rendering for edit/save icons based on edit mode - editMode ? ( - { - event.stopPropagation(); - handleSaveClick(); - }} - sx={{ - "&:hover": { - color: "#0A6B57", - }, - cursor: "pointer", - transition: "color 0.15s ease-in-out", - }} - /> - ) : ( - { - event.stopPropagation(); - handleEditClick(); - }} + + {!props.viewOnly && ( + + { + //conditional rendering for edit/save icons based on edit mode + editMode ? ( + { + event.stopPropagation(); + handleSaveClick(); + }} + sx={{ + "&:hover": { + color: "#0A6B57", + }, + cursor: "pointer", + transition: "color 0.15s ease-in-out", + }} + /> + ) : ( + { + event.stopPropagation(); + handleEditClick(); + }} + sx={{ + "&:hover": { + color: "#0b7d66", + }, + cursor: "pointer", + transition: "color 0.15s ease-in-out", + }} + /> + ) + } + + {props.deleteHandler ? ( + - ) - } - - {props.deleteHandler ? ( - - ) : null} - + ) : null} + + )} {/*Description Text Field */} @@ -353,6 +370,7 @@ export default function ProfileAccordion(props: { errValidations={props.descErrValidations} onChange={descOnChange} editHandler={props.editHandler} + viewOnly={props.viewOnly} /> diff --git a/meshapp/src/pages/Profiles/ProfileAccordionCombobox.tsx b/meshapp/src/pages/Profiles/ProfileAccordionCombobox.tsx index c0ecbdc1..40c86113 100644 --- a/meshapp/src/pages/Profiles/ProfileAccordionCombobox.tsx +++ b/meshapp/src/pages/Profiles/ProfileAccordionCombobox.tsx @@ -28,7 +28,8 @@ export type option = { * @param {function} props.onChange -callback to edit group accordion data for this specific combobox * @param {string} props.value - the current state value of this specific combobox for this accordion within the group accordion's state * @param {Array} props.errValidations - an array of functions to evaluate the current value for errors (takes in the string value as a parameter, returns True if there was no error or the error message if there is) - * + * @param {boolean} props.viewOnly - whether profile is view only or not + * @param {boolean} props.isSecond = whether this is the second combobox */ export function ProfileAccordionComboBox(props: { disabled: boolean; @@ -40,6 +41,8 @@ export function ProfileAccordionComboBox(props: { ) => void; value: string; errValidations: Array<(value: string) => boolean | string>; + viewOnly?: boolean | undefined; + isSecond?: boolean | undefined; }) { //keeps track of whether we show error or not const [hasError, setHasError] = useState(false); @@ -137,7 +140,7 @@ export function ProfileAccordionComboBox(props: { freeSolo fullWidth readOnly={props.disabled} - disabled={props.disabled} + disabled={props.isSecond || (!props.viewOnly && props.disabled)} filterOptions={filterOptionHandler} renderOption={(props, option) => ( {option.label} diff --git a/meshapp/src/pages/Profiles/ProfileAccordionTextfield.tsx b/meshapp/src/pages/Profiles/ProfileAccordionTextfield.tsx index 7ce4fc6e..81abf740 100644 --- a/meshapp/src/pages/Profiles/ProfileAccordionTextfield.tsx +++ b/meshapp/src/pages/Profiles/ProfileAccordionTextfield.tsx @@ -1,5 +1,12 @@ import { ChangeEvent, useState } from "react"; -import { TextField, Box, Tooltip } from "@mui/material"; +import { + TextField, + Box, + Tooltip, + SxProps, + Theme, + useTheme, +} from "@mui/material"; import EditIcon from "@mui/icons-material/Edit"; import SaveIcon from "@mui/icons-material/Save"; @@ -18,7 +25,8 @@ import ErrorIcon from "@mui/icons-material/Error"; * @param {function} props.onChange - function that takes in a new text value to change the corresponding state entry * @param {Array} props.errValidations - an array of functions to evaluate the current value for errors (takes in the string value as a parameter, returns True if there was no error or the error message if there is) * @param {Function} props.editHandler - function for saving edit on backend (is optional since this component can be used for adding or editing/deleting accordion) - + * @param {boolean} props.viewOnly - whether profile is view only or not + */ const ProfileAccordionTextField = (props: { label: string; @@ -27,6 +35,7 @@ const ProfileAccordionTextField = (props: { onChange: (newValue: string) => void; errValidations: Array<(value: string) => boolean | string>; editHandler?: Function; + viewOnly?: boolean | undefined; }) => { //used to set edit mode const [editMode, setEditMode] = useState(false); @@ -83,6 +92,33 @@ const ProfileAccordionTextField = (props: { //for storing the error message const [errorMessage, setErrorMessage] = useState(""); const [text, setText] = useState(props.text); + + const theme = useTheme(); + const viewOnlyStyles: SxProps | undefined = props.viewOnly + ? { + "& .MuiInputBase-root": { + "& .Mui-disabled fieldset": { + borderColor: "primary.main", + }, + "& .Mui-disabled": { + color: theme.palette.text.primary, + WebkitTextFillColor: theme.palette.text.primary, + }, + }, + } + : { + "& .MuiOutlinedInput-root": { + "& fieldset": { + transition: "border 0.10s ease-in-out", + }, + "& .Mui-focused fieldset": { + borderColor: "primary.main", + }, + "&:not(.Mui-disabled):hover fieldset": { + borderColor: "primary.main", + }, + }, + }; return ( ), //conditionally renders edit/save icons based on edit mode - endAdornment: editMode ? ( - - - - ) : ( - - - - ), - readOnly: !editMode, + endAdornment: + !props.viewOnly && + (editMode ? ( + + + + ) : ( + + + + )), + readOnly: !editMode || props.viewOnly, inputProps: { style: { fontSize: 15, caretColor: "#0b7d66" }, }, @@ -140,22 +178,10 @@ const ProfileAccordionTextField = (props: { maxRows={3} fullWidth multiline - disabled={!editMode} + disabled={!editMode && !props.viewOnly} onChange={handleTextChange} variant="standard" - sx={{ - "& .MuiOutlinedInput-root": { - "& fieldset": { - transition: "border 0.10s ease-in-out", - }, - "&.Mui-focused fieldset": { - borderColor: "primary.main", - }, - "&:not(.Mui-disabled):hover fieldset": { - borderColor: "primary.main", - }, - }, - }} + sx={viewOnlyStyles} /> ); }; diff --git a/meshapp/src/pages/Profiles/ProfileGroupAccordion.tsx b/meshapp/src/pages/Profiles/ProfileGroupAccordion.tsx index eabeb518..3143ab0c 100644 --- a/meshapp/src/pages/Profiles/ProfileGroupAccordion.tsx +++ b/meshapp/src/pages/Profiles/ProfileGroupAccordion.tsx @@ -42,6 +42,7 @@ export type setGroupAccordionState = (newState: groupAccordionState) => void; * @param {Array} props.comboOneValErrValidations - an array of functions to evaluate the first combobox value for each accordion for errors (takes in the string value as a parameter, returns True if there was no error or the error message if there is) * @param {Array} props.comboTwoValErrValidations - an array of functions to evaluate the second combobox value for each accordion for errors (takes in the string value as a parameter, returns True if there was no error or the error message if there is) * @param {Array} props.descErrValidations - an array of functions to evaluate the description text value for each accordion for errors (takes in the string value as a parameter, returns True if there was no error or the error message if there is) + * @param {boolean} props.viewOnly - whether profile is view only or not */ export function ProfileGroupAccordion(props: { groupAccordState: groupAccordionState; @@ -57,6 +58,7 @@ export function ProfileGroupAccordion(props: { comboTwoValErrValidations: Array<(value: string) => boolean | string>; descErrValidations: Array<(value: string) => boolean | string>; addAccordHandler: Function; + viewOnly?: boolean | undefined; }) { //state to control whether new accordion modal is open or not const [addOpen, setAddOpen] = useState(false); @@ -97,34 +99,40 @@ export function ProfileGroupAccordion(props: { setGroupState={props.setGroupAccordState} editHandler={props.editAccordHandler(accordArgs.accordionId)} deleteHandler={props.deleteAccordHandler(accordArgs.accordionId)} + viewOnly={props.viewOnly} /> ); })} - - } - onClick={showModal} - /> - + + {!props.viewOnly && ( + <> + + } + onClick={showModal} + /> + + + )} ); } diff --git a/meshapp/src/pages/Profiles/ProfileHeader.tsx b/meshapp/src/pages/Profiles/ProfileHeader.tsx index d3c0fa9d..6e9c560a 100644 --- a/meshapp/src/pages/Profiles/ProfileHeader.tsx +++ b/meshapp/src/pages/Profiles/ProfileHeader.tsx @@ -20,6 +20,7 @@ import MuiAlert from "@mui/material/Alert"; * @param {string} props.text - The initial text content * @param {number} props.charLimit - The max number of characters allowed * @param {string} props.fontSize - The font size + * @param {boolean} props.viewOnly - whether profile is view only or not */ const ProfileHeader = (props: { @@ -28,6 +29,7 @@ const ProfileHeader = (props: { text: string; charLimit: number; fontSize: string; + viewOnly: boolean; }) => { const [text, setText] = useState(props.text); const [editMode, setEditMode] = useState(false); @@ -119,16 +121,18 @@ const ProfileHeader = (props: { }} > {text} - + {!props.viewOnly && ( + + )} diff --git a/meshapp/src/pages/Profiles/ProfileInterests.tsx b/meshapp/src/pages/Profiles/ProfileInterests.tsx index 9a605bb1..d8095233 100644 --- a/meshapp/src/pages/Profiles/ProfileInterests.tsx +++ b/meshapp/src/pages/Profiles/ProfileInterests.tsx @@ -33,8 +33,11 @@ import "./styling/ProfilePage.css"; * @param {string[]} props.currentTags - User's current tags * @param {string[]} props.recommendedTags - Recommended tags from backend * @param {function} props.setTags - Callback to save edit-mode changes + * @param {boolean} props.viewOnly - whether profile is view only or not */ -const ProfileInterestsComponent = (props: ProfileInterests) => { +const ProfileInterestsComponent = ( + props: ProfileInterests & { viewOnly: boolean } +) => { const [open, setOpen] = useState(false); return ( @@ -42,26 +45,31 @@ const ProfileInterestsComponent = (props: ProfileInterests) => { {props.currentTags.map((tag: any, index: any) => ( ))} - { - setOpen(true); - }} - sx={{ - color: "text.disabled", - "&:hover": { - color: "#0b7d66", - }, - cursor: "pointer", - transition: "color 0.15s ease-in-out", - }} - /> - setOpen(false)} - recommendedTags={props.recommendedTags} - onSelectedTagsChange={props.setTags} - currentSelectedTags={props.currentTags} - /> + {!props.viewOnly && ( + <> + { + setOpen(true); + }} + sx={{ + color: "text.disabled", + "&:hover": { + color: "#0b7d66", + }, + cursor: "pointer", + transition: "color 0.15s ease-in-out", + }} + /> + + setOpen(false)} + recommendedTags={props.recommendedTags} + onSelectedTagsChange={props.setTags} + currentSelectedTags={props.currentTags} + /> + + )} ); }; diff --git a/meshapp/src/pages/Profiles/ProfilePicture.tsx b/meshapp/src/pages/Profiles/ProfilePicture.tsx index b5af7ac8..048ff137 100644 --- a/meshapp/src/pages/Profiles/ProfilePicture.tsx +++ b/meshapp/src/pages/Profiles/ProfilePicture.tsx @@ -43,8 +43,13 @@ const tooltipErrorTheme = createTheme({ * @param props - Properties of the component * @param {string} props.image - A URL to user's profile image * @param {number} props.accountID - accountID associated with the profile + * @param {boolean} props.viewOnly - whether profile is view only or not */ -const ProfilePicture = (props: { image: string; accountID: number }) => { +const ProfilePicture = (props: { + image: string; + accountID: number; + viewOnly: boolean; +}) => { const [image, setImage] = useState(props.image); const [showError, setShowError] = useState(false); @@ -78,22 +83,25 @@ const ProfilePicture = (props: { image: string; accountID: number }) => { profile - - - {open && ( - - )} - + + {!props.viewOnly && ( + + + {open && ( + + )} + + )} ); }; @@ -103,7 +111,8 @@ const ProfilePicture = (props: { image: string; accountID: number }) => { * Displays buttons that allow profile picture editing */ const ProfilePictureEdit = (props: any) => { - const { handleClose, image, setImage, showError, setShowError, accountID } = props; + const { handleClose, image, setImage, showError, setShowError, accountID } = + props; const DEFAULT_IMAGE: string = ""; // TODO: Update this when a default image is setup // Prevents entire container from closing when clicking on it @@ -192,8 +201,8 @@ const ProfilePictureEdit = (props: any) => { axiosInstance .delete("profiles/profile-picture", { data: { - accountID: accountID - } + accountID: accountID, + }, }) .then((response) => { console.log(response); diff --git a/meshapp/src/pages/Profiles/ProfileTextfield.tsx b/meshapp/src/pages/Profiles/ProfileTextfield.tsx index af724653..2d11faa1 100644 --- a/meshapp/src/pages/Profiles/ProfileTextfield.tsx +++ b/meshapp/src/pages/Profiles/ProfileTextfield.tsx @@ -1,5 +1,12 @@ import { useState } from "react"; -import { TextField, Box, TextFieldVariants } from "@mui/material"; +import { + TextField, + Box, + TextFieldVariants, + SxProps, + Theme, + useTheme, +} from "@mui/material"; import EditIcon from "@mui/icons-material/Edit"; import SaveIcon from "@mui/icons-material/Save"; @@ -17,6 +24,7 @@ import SaveIcon from "@mui/icons-material/Save"; * @param {number} props.charLimit - The max number of characters allowed * @param {function} props.handleSave - Callback to save data * @param {TextFieldVariants | undefined} props.variant - the variant of the textfield, default is standard + * @param {boolean} props.viewOnly - whether profile is view only or not */ const ProfileTextField = (props: { label: string; @@ -25,6 +33,7 @@ const ProfileTextField = (props: { charLimit: number; handleSave: (text: string) => void; variant?: TextFieldVariants | undefined; + viewOnly?: boolean | undefined; }) => { const [text, setText] = useState(props.text); const [editMode, setEditMode] = useState(false); @@ -44,6 +53,42 @@ const ProfileTextField = (props: { props.handleSave(text); }; + const theme = useTheme(); + const viewOnlyStyles: SxProps | undefined = props.viewOnly + ? { + "& .MuiInputBase-root.MuiOutlinedInput-root": { + color: "text.primary", + WebkitTextFillColor: "text.primary", + }, + "& .MuiOutlinedInput-root": { + "&.Mui-disabled fieldset": { + borderColor: "input.borderActive", + }, + }, + "& .MuiInputBase-input.Mui-disabled": { + WebkitTextFillColor: theme.palette.text.primary, + }, + "& .MuiFormLabel-root": { + color: "text.secondary", + }, + } + : { + "& .MuiOutlinedInput-root": { + "& fieldset": { + transition: "border 0.10s ease-in-out", + }, + "&.Mui-focused fieldset": { + borderColor: "primary.main", + }, + "&:not(.Mui-disabled):hover fieldset": { + borderColor: "primary.main", + }, + "& .Mui-disabled": { + WebkitTextFillColor: "text.main", + }, + }, + }; + return ( - - - ) : ( - - - - ), + endAdornment: + !props.viewOnly && + (editMode ? ( + + + + ) : ( + + + + )), readOnly: !editMode, inputProps: { style: { fontSize: 15, caretColor: "#0b7d66" }, @@ -91,22 +138,7 @@ const ProfileTextField = (props: { disabled={!editMode} value={text} onChange={handleTextChange} - sx={{ - "& .MuiOutlinedInput-root": { - "& fieldset": { - transition: "border 0.10s ease-in-out", - }, - "&.Mui-focused fieldset": { - borderColor: "primary.main", - }, - "&:not(.Mui-disabled):hover fieldset": { - borderColor: "primary.main", - }, - "& .Mui-disabled": { - WebkitTextFillColor: "text.main", - }, - }, - }} + sx={viewOnlyStyles} /> ); }; diff --git a/meshapp/src/pages/Profiles/tests/profile-examples.ts b/meshapp/src/pages/Profiles/tests/profile-examples.ts index ec28a118..2932da3c 100644 --- a/meshapp/src/pages/Profiles/tests/profile-examples.ts +++ b/meshapp/src/pages/Profiles/tests/profile-examples.ts @@ -2,6 +2,7 @@ import { Profile } from "src/models/profile"; export const exampleProfile: Profile = { accountID: 1, + viewOnly:true, name: "Bob Yomom", pronouns: "she/her", image: "https://picsum.photos/200/300", @@ -38,6 +39,7 @@ export const exampleProfile: Profile = { }; export const exampleProfile2: Profile = { + viewOnly: false, accountID: 2, name: "Lysander Maximilian Bartholomew Fitzwilliam III Esquire IV", pronouns: "he/he", diff --git a/meshapp/src/themes/dark.ts b/meshapp/src/themes/dark.ts index fd284b95..d673d916 100644 --- a/meshapp/src/themes/dark.ts +++ b/meshapp/src/themes/dark.ts @@ -36,7 +36,7 @@ export const darkTheme = createTheme({ primary: "#F1E8DF", secondary: "#F2E8DE", disabled: "#F2E8DE61", - main:"#F2E8DE" + main: "#F2E8DE", }, messageBackground: { main: "#247C67", @@ -56,6 +56,9 @@ export const darkTheme = createTheme({ buttonBackground: { main: "#247C67", }, + input: { + borderActive: "#F2E8DE3B", + }, }, components: { ...componentsUniversalStyles, diff --git a/meshapp/src/themes/light.ts b/meshapp/src/themes/light.ts index dbddaf31..2d523ec1 100644 --- a/meshapp/src/themes/light.ts +++ b/meshapp/src/themes/light.ts @@ -38,7 +38,7 @@ export const lightTheme = createTheme({ primary: "#000000DE", secondary: "#00000099", disabled: "#00000061", - main:"#26383A" + main: "#26383A", }, messageBackground: { main: "#74D194", @@ -58,6 +58,9 @@ export const lightTheme = createTheme({ buttonBackground: { main: "#74D194", }, + input: { + borderActive: "#0000003B", + }, }, components: { ...componentsUniversalStyles, diff --git a/meshapp/src/themes/theme.d.ts b/meshapp/src/themes/theme.d.ts index b08ff03a..2334e5fe 100644 --- a/meshapp/src/themes/theme.d.ts +++ b/meshapp/src/themes/theme.d.ts @@ -1,5 +1,5 @@ import { PaletteColor, PaletteColorOptions } from "@mui/material"; -import { TypeText } from '@mui/material/styles'; +import { TypeText } from "@mui/material/styles"; declare module "@mui/material/styles" { interface Theme {} interface ThemeOptions {} @@ -15,6 +15,7 @@ declare module "@mui/material/styles" { mailIconColor?: PaletteColor; signUpDivider?: PaletteColor; buttonBackground?: PaletteColor; + input?: PaletteColor; } interface PaletteOptions { @@ -29,9 +30,16 @@ declare module "@mui/material/styles" { mailIconColor?: PaletteColorOptions; signUpDivider?: PaletteColorOptions; buttonBackground?: PaletteColorOptions; + input?: PaletteColorOptions; } interface TypeText { main?: string; } } +declare module "@mui/material/styles/createPalette" { + interface SimplePaletteColorOptions { + main?: string; + borderActive?: string; + } +} From 61caaf2600d0196b6a2f9b499a78e92154d308d1 Mon Sep 17 00:00:00 2001 From: Darren52BT Date: Wed, 14 Aug 2024 10:56:39 -0700 Subject: [PATCH 2/2] minor fixes for formatting and comments --- meshapp/src/models/profile.d.ts | 6 ++---- meshapp/src/pages/Profiles/Page.tsx | 1 - meshapp/src/pages/Profiles/tests/profile-examples.ts | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/meshapp/src/models/profile.d.ts b/meshapp/src/models/profile.d.ts index be8ba248..5813b5be 100644 --- a/meshapp/src/models/profile.d.ts +++ b/meshapp/src/models/profile.d.ts @@ -1,7 +1,7 @@ // TODO: Update order of fields to match order in the Profile schema // NOTE: Add/modify/remove fields as needed, but consider what needs to be refactored in ../profile-page.tsx export type Profile = { - viewOnly:boolean; + viewOnly: boolean; name: string; pronouns: string; occupationTitle: string; @@ -14,7 +14,7 @@ export type Profile = { experience: Experience; accountID: number; }; - + export type ProfileInterests = { currentTags: string[]; recommendedTags: string[]; @@ -34,5 +34,3 @@ export type Experience = Array<{ }>; // TODO: Include Experience and Education props as they get implemented // Maybe separate these into their own types? - - diff --git a/meshapp/src/pages/Profiles/Page.tsx b/meshapp/src/pages/Profiles/Page.tsx index e4ccd3ef..f5c0cfe3 100644 --- a/meshapp/src/pages/Profiles/Page.tsx +++ b/meshapp/src/pages/Profiles/Page.tsx @@ -29,7 +29,6 @@ import ProfileHeader from "./ProfileHeader"; * @param {Education} props.education - an array containing objects that each contain a degree,school, and description * @param {Experience} props.experience - an array contains objects that each contain a occupation name, organization, and description * @param {number} props.accountID - ID of Profile account - * @param {boolean} props.viewOnly - whether profile is view only or not */ const ProfilePage = (props: Profile) => { diff --git a/meshapp/src/pages/Profiles/tests/profile-examples.ts b/meshapp/src/pages/Profiles/tests/profile-examples.ts index 2932da3c..5c28d4b4 100644 --- a/meshapp/src/pages/Profiles/tests/profile-examples.ts +++ b/meshapp/src/pages/Profiles/tests/profile-examples.ts @@ -2,7 +2,7 @@ import { Profile } from "src/models/profile"; export const exampleProfile: Profile = { accountID: 1, - viewOnly:true, + viewOnly: true, name: "Bob Yomom", pronouns: "she/her", image: "https://picsum.photos/200/300",