Merge pull request #188 from m2mathew/chore/home_and_about_updates

Chore/home and about updates

Author: m2mathew

src/components/about/AboutCommunity.tsx

@@ -3,6 +3,8 @@ import Typography from '@mui/material/Typography';
 import React, { FC } from 'react';
 import styled from 'styled-components';
 
+import { appTagLine } from '../../utils/app-constants';
+
 // Local Variables
 const StyledRoot = styled.section(({ theme }) => ({
   '&& .MuiTypography-root': {
@@ -42,10 +44,8 @@ const StyledRoot = styled.section(({ theme }) => ({
 const AboutCommunity: FC = () => {
   return (
     <StyledRoot>
-      <Typography component="h1">
-        Creating a community of
-        <br />
-        fine arts administrators
+      <Typography component="h1" sx={{ maxWidth: 640 }}>
+        {appTagLine}
       </Typography>
     </StyledRoot>
   );

src/components/about/AboutInfo.tsx

@@ -48,7 +48,8 @@ const AboutInfo: FC = () => {
         conferences, workshops, trainings, and resources for
         Fine Arts administrators. Our goal is to help Fine Arts
         educational leaders thrive by providing a space where
-        they can grow, collaborate, and support one another.
+        they can grow, collaborate, and support one another.{'  '}
+        {appNameShort} is committed to…
       </Typography>
 
       <div className="aboutVirtuesContainer">

src/components/about/AreaReps.tsx

@@ -10,7 +10,7 @@ import PeopleItem from './PeopleItem';
 
 // Local Typings
 type Office = 'President' | 'Vice-President' | 'Executive Secretary' | 'Secretary' | 'Past-President';
-type Area = 'North Texas' | 'Central Texas' | 'South Texas' | 'Southeast Texas' | 'West Texas';
+type Area = 'North Texas' | 'Northwest Texas' | 'Central Texas' | 'South Texas' | 'Southeast Texas' | 'West Texas';
 export interface TfaaPerson {
   districtTitle: string;
   email: string;
@@ -46,6 +46,7 @@ const AreaReps: FC = () => {
   const { edges } = useAreaRepsData();
 
   const north = edges.find(({ node }: OfficerList) => node.title === 'North Texas').node;
+  const northwest = edges.find(({ node }: OfficerList) => node.title === 'Northwest Texas').node;
   const central = edges.find(({ node }: OfficerList) => node.title === 'Central Texas').node;
   const south = edges.find(({ node }: OfficerList) => node.title === 'South Texas').node;
   const southeast = edges.find(({ node }: OfficerList) => node.title === 'Southeast Texas').node;
@@ -62,6 +63,7 @@ const AreaReps: FC = () => {
 
       <div className="areaRepsContainer">
         <PeopleItem peopleData={north} />
+        <PeopleItem peopleData={northwest} />
         <PeopleItem peopleData={central} />
         <PeopleItem peopleData={south} />
         <PeopleItem peopleData={southeast} />

src/components/about/People.tsx

@@ -35,6 +35,12 @@ const StyledRoot = styled.section(({ theme }) => ({
   },
 
   '.peopleSectionTitle': {
+    [theme.breakpoints.up('lg')]: {
+      marginTop: theme.spacing(5),
+    },
+    [theme.breakpoints.up('xl')]: {
+      marginTop: theme.spacing(8),
+    },
     fontWeight: 900,
     marginBottom: theme.spacing(4),
   },

src/components/about/about-constants.ts

@@ -1,5 +1,5 @@
 // Internal Dependencies
-import { appName, appNameShort } from '../../utils/app-constants';
+import { appName, appNameOldShort, appNameShort } from '../../utils/app-constants';
 import AdvocatingIconSvg from './about-icons/AdvocatingIconSvg';
 import CollaboratingIconSvg from './about-icons/CollaboratingIconSvg';
 import DevelopingIconSvg from './about-icons/DevelopingIconSvg';
@@ -37,13 +37,13 @@ export const ABOUT_VIRTUES_DATA = [
 export const WHERE_WE_HAVE_BEEN_DATA = [
   {
     imgSrc: 'https://res.cloudinary.com/tmac/image/upload/v1670856123/bearded-man-looking-at-paintings-in-art-gallery.png',
-    subtitle: `View a list of all past ${appName} Presidents going back to 1983.`,
+    subtitle: `View a list of all Past Presidents going back to 1983.`,
     title: `${appNameShort} Past Presidents`,
     to: '/about/past-presidents',
   },
   {
     imgSrc: 'https://res.cloudinary.com/tmac/image/upload/v1670856123/joyful-young-female-artist-painting-on-canvas.png',
-    subtitle: `View a list of all ${appName} Outstanding Administrators since ${appNameShort} started awarding this honor in 1999.`,
+    subtitle: `View a list of all ${appNameOldShort}/${appNameShort} Outstanding Administrators since 1999.`,
     title: `${appNameShort} Past Oustanding Administrators`,
     to: '/about/past-outstanding-administrators',
   }

src/components/footer/FooterFollowUs.tsx

@@ -38,7 +38,7 @@ const FooterFollowUs: FC = () => {
           rel="noreferrer noopener"
           target="_blank"
         >
-          Twitter
+          Twitter/X
         </a>
       </Box>
     </div>

src/components/footer/FooterTopper.tsx

@@ -0,0 +1,35 @@
+// External Dependencies
+import React from 'react';
+import styled from 'styled-components';
+
+// Local Typings
+type FooterTopperColor = 'about' | 'events' | 'membership' | 'resources';
+interface Props {
+  color: FooterTopperColor;
+}
+interface StyledRootProps {
+  $color: FooterTopperColor;
+}
+
+// Local Variables
+const StyledRoot = styled.section<StyledRootProps>(({
+  $color = 'about',
+  theme,
+}) => ({
+  [theme.breakpoints.down('mobile')]: {
+    padding: theme.spacing(6, 0),
+  },
+  backgroundColor: theme.palette.tfaa[$color],
+  content: '""',
+  padding: theme.spacing(8,0 ),
+  width: '100%',
+}));
+
+// Component Definition
+const FooterTopper: React.FC<Props> = ({ color }) => {
+  return (
+    <StyledRoot $color={color} />
+  );
+};
+
+export default FooterTopper;

src/components/home/HomeBanner.tsx

@@ -1,8 +1,11 @@
 // External Dependencies
 import { Link } from 'gatsby-theme-material-ui';
+import Box from '@mui/material/Box';
 import React from 'react';
 import styled from 'styled-components';
 
+import { appTagLine } from '../../utils/app-constants';
+
 // Local Variables
 const StyledRoot = styled.section(({ theme }) => ({
   '.bannerLeft': {
@@ -142,12 +145,15 @@ const HomeBanner: React.FC = () => {
       <div className="bannerLeft">
         <div>
           <h2>
-            We nurture and grow leaders in Fine Arts Education
+            {appTagLine}
           </h2>
 
-          <Link to="/about">
-            Read more about how TFAA can help you
-          </Link>
+          <Box marginTop={1}>
+            <Link to="/about">
+              Read more about how TFAA can help you
+            </Link>
+
+          </Box>
         </div>
       </div>
 

src/components/members/MemberContent/index.tsx

@@ -7,10 +7,10 @@ import { ADMIN_USER_EMAIL_LIST } from '../../../utils/member-constants';
 import { TfaaAuthUser } from '../../layout';
 import { TfaaMemberData, useGetAllMembers } from '../../../utils/hooks/useGetAllMembers';
 import { getFullName } from '../../../utils/getFullName';
+import FooterTopper from '../../footer/FooterTopper';
 import MemberContentBanner from './MemberContentBanner';
 import WelcomeBanner from './WelcomeBanner';
 import MemberInfo from './MemberInfo';
-import WhereWeHaveBeen from '../../about/WhereWeHaveBeen';
 
 // Local Typings
 interface Props {
@@ -70,7 +70,7 @@ const MemberContent: React.FC<Props> = ({ currentAuthUser }) => {
         onUpdateShouldRefetchUserList={handleUpdateShouldRefetchUserList}
       />
 
-      <WhereWeHaveBeen color="membership" />
+      <FooterTopper color="membership" />
     </>
   );
 };

src/components/members/NonMemberContent/index.tsx

@@ -2,12 +2,12 @@
 import React from 'react';
 
 // Internal Dependencies
+import FooterTopper from '../../footer/FooterTopper';
 import MemberInfoList from './MemberInfoList';
 import MembersBanner from './MembersBanner';
 import MembersHeroBannerImage from './MembersHeroBannerImage';
 import MembersInfoBanner from './MembersInfoBanner';
 import MembersOneTwoThree from './MembersOneTwoThree';
-import WhereWeHaveBeen from '../../about/WhereWeHaveBeen';
 
 // Component Definition
 const NonMemberContent: React.FC = () => {
@@ -23,7 +23,7 @@ const NonMemberContent: React.FC = () => {
 
       <MemberInfoList />
 
-      <WhereWeHaveBeen color="membership" />
+      <FooterTopper color="membership" />
     </>
   );
 };

src/pages/events/index.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 // Internal Dependencies
 import EventsBanner from '../../components/events/EventsBanner';
 import EventsList from '../../components/events/EventsList';
-import WhereWeHaveBeen from '../../components/about/WhereWeHaveBeen';
+import FooterTopper from '../../components/footer/FooterTopper';
 import Layout from '../../components/layout';
 
 // Local Typings
@@ -41,7 +41,7 @@ const Events: FC<Props> = ({ location }) => (
 
       <EventsList />
 
-      <WhereWeHaveBeen color="events" />
+      <FooterTopper color="events" />
     </StyledRoot>
   </Layout>
 );

src/pages/members/login.tsx

@@ -10,6 +10,7 @@ import styled from 'styled-components';
 import { ReCaptchaProvider } from '../../components/shared/ReCaptchaProvider';
 import { useIsAuthenticated } from '../../utils/hooks/useIsAuthenticated';
 import DrumBanner from '../../components/shared/DrumBanner';
+import FooterTopper from '../../components/footer/FooterTopper';
 import Layout from '../../components/layout';
 import LoginForm from '../../components/register/login-form';
 import Motifs from '../../components/shared/Motifs';
@@ -89,6 +90,8 @@ const Login: React.FC<Props> = ({ location }) => {
           </div>
         </StyledRoot>
       </ReCaptchaProvider>
+
+      <FooterTopper color="membership" />
     </Layout>
   );
 };

src/pages/resources/index.tsx

@@ -3,12 +3,12 @@ import React, { FC } from 'react';
 import styled from 'styled-components';
 
 // Internal Dependencies
+import FooterTopper from '../../components/footer/FooterTopper';
 import Layout from '../../components/layout';
 import ResourcesBanner from '../../components/resources/ResourcesBanner';
 import ResourcesHeroBannerImage from '../../components/resources/ResourcesHeroBannerImage';
 import ResourcesList from '../../components/resources/ResourcesList';
 import ResourcesInfoBanner from '../../components/resources/ResourcesInfoBanner';
-import WhereWeHaveBeen from '../../components/about/WhereWeHaveBeen';
 
 // Local Typings
 interface Props {
@@ -40,7 +40,7 @@ const Resources: FC<Props> = ({ location }) => {
 
         <ResourcesList />
 
-        <WhereWeHaveBeen color="resources" />
+        <FooterTopper color="resources" />
       </StyledRoot>
     </Layout>
   );

src/pages/sponsors/index.tsx

@@ -4,11 +4,11 @@ import styled from 'styled-components';
 
 // Internal Dependencies
 import { ReCaptchaProvider } from '../../components/shared/ReCaptchaProvider';
+import FooterTopper from '../../components/footer/FooterTopper';
 import Layout from '../../components/layout';
 import SponsorsBanner from '../../components/sponsors/SponsorsBanner';
 import SponsorsHeroBannerImage from '../../components/sponsors/SponsorsHeroBannerImage';
 import SponsorsList from '../../components/sponsors/SponsorsList';
-import WhereWeHaveBeen from '../../components/about/WhereWeHaveBeen';
 
 // Local Typings
 interface Props {
@@ -39,7 +39,7 @@ const Sponsors: React.FC<Props> = ({ location }) => {
 
           <SponsorsList />
 
-          <WhereWeHaveBeen color="membership" />
+          <FooterTopper color="membership" />
         </StyledRoot>
       </ReCaptchaProvider>
     </Layout>

src/pages/sponsors/sponsors-table.tsx

@@ -4,9 +4,9 @@ import styled from 'styled-components';
 
 // Internal Dependencies
 import DrumBanner from '../../components/shared/DrumBanner';
+import FooterTopper from '../../components/footer/FooterTopper';
 import Layout from '../../components/layout';
 import SponsorsTableContent from '../../components/sponsors/SponsorsTable/SponsorsTableContent';
-import WhereWeHaveBeen from '../../components/about/WhereWeHaveBeen';
 
 // Local Typings
 interface Props {
@@ -43,7 +43,7 @@ const SponsorsTable: React.FC<Props> = ({ location }) => {
 
         <SponsorsTableContent />
 
-        <WhereWeHaveBeen color="resources" />
+        <FooterTopper color="membership" />
       </StyledRoot>
     </Layout>
   );

src/utils/app-constants.js

@@ -2,6 +2,7 @@ export const appName = 'Texas Fine Arts Administrators';
 export const appNameShort = 'TFAA';
 export const appNameOld = 'Texas Music Administrators Conference';
 export const appNameOldShort = 'TMAC';
+export const appTagLine = `${appNameShort} equips leaders to advance high quality fine arts education for all.`;
 
 export const mailingAddress = {
   addressOne: '4107 Natural Bridge Court',