Merge branch 'develop' into update-editor-settings

Author: russtuck

public/images/gc_2pi_yellow_logo_56.png

@@ -60,6 +60,11 @@ a {
   }
 }
 
+.gc360_header {
+  background-color: var(--mui-palette-primary-main);
+  color: var(--mui-palette-primary-contrastText);
+}
+
 @media (max-width: $break-md) {
   .gc360_a_link {
     color: var(--mui-palette-secondary-main) !important;

public/images/gc_2pi_yellow_logo_64.png

@@ -21,6 +21,14 @@ import GordonNavButtonsRightCorner from './components/NavButtonsRightCorner';
 import GordonQuickSearch from './components/QuickSearch';
 import styles from './Header.module.css';
 
+// Define header logo image - special image for Pi Day
+const todaysDate = new Date(); // Months: 0 = Jan, 1 = Feb, 2 = Mar, etc.
+const isPiDay = todaysDate.getMonth() === 2 && todaysDate.getDate() === 14; // March 14 (3/14)
+const angleMode = isPiDay ? "2pi" : "360";
+const headerLogo72dpi = "images/gc_" + angleMode + "_yellow_logo_72.png";
+const headerLogo64dpi = "images/gc_" + angleMode + "_yellow_logo_64.png";
+const headerLogo56dpi = "images/gc_" + angleMode + "_yellow_logo_56.png";
+
 const ForwardNavLink = forwardRef((props, ref) => <NavLink innerRef={ref} {...props} />);
 
 // Tab url regular expressions must be listed in the same order as the tabs, since the
@@ -152,12 +160,11 @@ const GordonHeader = ({ onDrawerToggle }) => {
           </IconButton>
           <Link to="/" component={ForwardNavLink} value={tabIndex}>
             <picture>
-              <source srcset="images/gc_360_yellow_logo_72.png" media="(min-width: 900px)" />
-              <source srcset="images/gc_360_yellow_logo_64.png" media="(min-width: 600px)" />
-              <img src="images/gc_360_yellow_logo_56.png"></img>
+              <source srcset={headerLogo72dpi} media="(min-width: 900px)" />
+              <source srcset={headerLogo64dpi} media="(min-width: 600px)" />
+              <img src={headerLogo56dpi} alt="Gordon 360 Logo"></img>
             </picture>
           </Link>
-
           <Typography className={`disable_select ${styles.title}`} variant="h6" color="inherit">
             <Routes>
               {routes.map((route) => (

public/images/gc_2pi_yellow_logo_72.png

@@ -26,6 +26,7 @@ const LinksDialog = ({ links, createSnackbar, onClose, setLinks }) => {
     const { prefix, prefix2 } = socialMediaInfo[platform];
     const isValid =
       value === '' || value.indexOf(prefix) === 0 || (prefix2 && value.indexOf(prefix2) === 0);
+
     if (isValid) {
       setFormErrors(formErrors.filter((error) => error !== platform));
     } else if (!formErrors.includes(platform)) {

src/app.global.scss

@@ -1,20 +1,14 @@
-import { useState, Fragment } from 'react';
-import { Card, CardContent, CardHeader, Grid, List, Typography, IconButton } from '@mui/material';
+import { Card, CardContent, CardHeader, Grid, List, Typography } from '@mui/material';
 import ProfileInfoListItem from '../ProfileInfoListItem';
-import { Markup } from 'interweave';
 import styles from './OfficeInfoList.module.css';
-import { gordonColors } from 'theme';
 import UpdateOffice from './UpdateOfficeLocationDialog';
 import UpdateOfficeHours from './UpdateOfficeHoursDialog';
 import UpdateMail from './UpdateMailDestinationDialog';
 import GordonTooltip from 'components/GordonTooltip';
-import user from 'services/user';
-import EditIcon from '@mui/icons-material/Edit';
 
 const OfficeInfoList = ({
   myProf,
   profile: {
-    AD_Username,
     BuildingDescription,
     OnCampusDepartment,
     OnCampusRoom,
@@ -63,7 +57,7 @@ const OfficeInfoList = ({
       }
     />
   ) : office_hours ? (
-    <ProfileInfoListItem title="Office Hours:" contentText={`${office_hours}`} />
+    <ProfileInfoListItem title="Office Hours:" contentText={office_hours} />
   ) : null;
 
   const room = myProf ? (
@@ -83,7 +77,7 @@ const OfficeInfoList = ({
       }
     />
   ) : BuildingDescription || OnCampusRoom ? (
-    <ProfileInfoListItem title="Room:" contentText={({ BuildingDescription }, { OnCampusRoom })} />
+    <ProfileInfoListItem title="Room:" contentText={`${BuildingDescription}, ${OnCampusRoom}`} />
   ) : null;
 
   const mailstop = myProf ? (
@@ -110,24 +104,9 @@ const OfficeInfoList = ({
       }
     />
   ) : Mail_Location ? (
-    <ProfileInfoListItem title="Mailstop:" contentText={{ Mail_Location }} />
+    <ProfileInfoListItem title="Mailstop:" contentText={Mail_Location} />
   ) : null;
 
-  const updateOfficeInfo =
-    myProf && PersonType?.includes('fac') ? (
-      <Typography align="left" className={styles.note}>
-        NOTE: Update your office info{' '}
-        <a
-          href="https://go.gordon.edu/general/myaccount.cfm"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{ color: gordonColors.primary.blue }}
-        >
-          here
-        </a>
-      </Typography>
-    ) : null;
-
   return (
     <Grid item xs={12} lg={12}>
       <Card className={styles.office_info_list}>

src/components/Header/index.jsx

@@ -0,0 +1,5 @@
+.quick_links_dialog {
+  &_link_text {
+    color: var(--mui-palette-neutral-600);
+  }
+}

src/components/Profile/components/Identification/components/SocialMediaLinks/components/LinksDialog/index.jsx

@@ -1,11 +1,19 @@
 import GordonDialogBox from 'components/GordonDialogBox';
 import LinkIcon from '@mui/icons-material/InsertLink';
-import { ListItemIcon, ListItemText, ListSubheader, List, ListItem } from '@mui/material';
+import {
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  List,
+  ListItem,
+  CardHeader,
+} from '@mui/material';
 import CanvasIcon from './images/Canvas.ico';
 import GordonIcon from './images/favicon.ico';
 import GOIcon from './images/GoGordonFavicon.ico';
 import MyGordonIcon from './images/MyGordonFavicon.ico';
 import { PropsWithChildren } from 'react';
+import styles from './QuickLinksDialog.module.css';
 
 type ListItemProps = {
   name: string;
@@ -60,14 +68,19 @@ const GordonQuickLinksDialog = ({ linkopen, handleLinkClose }: Props) => {
     <GordonDialogBox
       aria-labelledby="useful-links"
       open={linkopen}
-      title="Useful Links"
+      title=""
       buttonClicked={handleLinkClose}
       buttonName="Close"
     >
+      <CardHeader title="Useful Links" className="gc360_header" />
       <List
         component="nav"
         subheader={
-          <ListSubheader component="div" disableSticky>
+          <ListSubheader
+            component="div"
+            className={styles.quick_links_dialog_link_text}
+            disableSticky
+          >
             Academics
           </ListSubheader>
         }
@@ -79,7 +92,11 @@ const GordonQuickLinksDialog = ({ linkopen, handleLinkClose }: Props) => {
       <List
         component="nav"
         subheader={
-          <ListSubheader component="div" disableSticky>
+          <ListSubheader
+            component="div"
+            className={styles.quick_links_dialog_link_text}
+            disableSticky
+          >
             Information
           </ListSubheader>
         }

src/components/Profile/components/OfficeInfoList/index.jsx

@@ -25,36 +25,33 @@ export type SocialMediaInfo = {
 };
 
 export const socialMediaInfo: {
-  [Platform.Facebook]: SocialMediaInfo;
-  [Platform.Twitter]: SocialMediaInfo;
-  [Platform.LinkedIn]: SocialMediaInfo;
-  [Platform.Instagram]: SocialMediaInfo;
-  [Platform.Handshake]: SocialMediaInfo;
-  [Platform.Calendar]: SocialMediaInfo;
+  [key in Platform]: SocialMediaInfo;
 } = {
   Facebook: {
     Icon: <FaFacebookF />,
-    prefix: 'https://www.facebook.com/',
+    prefix: 'https://facebook.com',
+    prefix2: 'https://www.facebook.com',
   },
   Twitter: {
     Icon: <FaTwitter />,
-    prefix: 'https://twitter.com/',
+    prefix: 'https://twitter.com',
+    prefix2: 'https://www.twitter.com',
   },
   LinkedIn: {
     Icon: <FaLinkedin />,
-    prefix: 'https://www.linkedin.com/in/',
+    prefix: 'https://linkedin.com/in/',
+    prefix2: 'https://www.linkedin.com/in/',
   },
   Instagram: {
     Icon: <FaInstagram />,
-    prefix: 'https://www.instagram.com/',
+    prefix: 'https://www.instagram.com',
+    prefix2: 'https://instagram.com',
   },
   Handshake: {
     Icon: <FaHandshake />,
-    prefix: 'https://gordon.joinhandshake.com/users/',
-    prefix2: 'https://app.joinhandshake.com/users/',
+    prefix: 'https://gordon.joinhandshake.com/',
+    prefix2: 'https://app.joinhandshake.com/',
   },
-  // TODO - Validation
-  // Maybe exclusively a certain URL
   Calendar: {
     Icon: <FaCalendar />,
     prefix: 'https://',