Merge pull request #116 from JumboCode/johnny/applyfonts

Johnny Apply font loader on top level layout

src/app/layout.tsx

@@ -29,6 +29,7 @@ export const metadata: Metadata = {
 const merriweather = Merriweather({
   weight: "400",
   style: "normal",
+  variable: "--font-merriweather",
   subsets: ["latin"],
 });
 

src/app/private/[uid]/admin/home/chapters/[chapterId]/users/[userId]/page.tsx

@@ -34,7 +34,7 @@ const UserPage = async ({ params }: Params) => {
       {/* TODO(nickbar01234) - Add pronouns */}
       <CardGrid
         title={
-          <div className="font-merriweather text-2xl font-bold text-[#002]">
+          <div className="text-2xl font-bold text-[#002]">
             {user.name ?? ""}
           </div>
         }

src/app/private/[uid]/user/home/page.tsx

@@ -26,7 +26,7 @@ const UserHomePage = async ({ params }: UserHomePageParams) => {
 
   return (
     <div className="mt-6 flex flex-col gap-y-6">
-      <div className="font-merriweather text-2xl font-bold text-[#000022]">
+      <div className="text-2xl font-bold text-[#000022]">
         {chapter.chapterName}
       </div>
       <DisplayChapterInfo
@@ -37,11 +37,7 @@ const UserHomePage = async ({ params }: UserHomePageParams) => {
         dateCreated={chapter.dateCreated}
       />
       <CardGrid
-        title={
-          <div className="font-merriweather text-xl font-bold">
-            Executive Board
-          </div>
-        }
+        title={<div className="text-xl font-bold">Executive Board</div>}
         tiles={chapter.students
           .filter((user) => user.role == "CHAPTER_LEADER")
           .map((user) => (

src/app/public/page.tsx

@@ -24,18 +24,18 @@ const HomePage = () => {
           {/* Hero Section and Action Items Buttons */}
           <div className="flex w-full flex-row items-center md:px-[40px] lg:px-[60px]">
             <div className="flex flex-col items-center gap-[20px] lg:mr-[20px] lg:items-start">
-              <h1 className="mb-[10px] text-center font-serif text-3xl font-semibold lg:text-left lg:text-4xl">
+              <h1 className="mb-[10px] text-center text-3xl font-semibold lg:text-left lg:text-4xl">
                 Everyone has a story that&apos;s worth preserving.
               </h1>
-              <p className="text-md text-center font-serif tracking-easy md:text-lg lg:text-left xl:text-xl">
+              <p className="text-md text-center tracking-easy md:text-lg lg:text-left xl:text-xl">
                 The Legacy Project, Inc. (TLP) connects college students with
                 local elders in their community with the purpose of building
                 strong intergenerational relationships and documenting the life
                 histories of seniors, ensuring that their legacies are preserved
                 for years to come.
               </p>
 
-              <p className="text-md text-center font-serif tracking-easy md:text-lg lg:text-left xl:text-xl">
+              <p className="text-md text-center tracking-easy md:text-lg lg:text-left xl:text-xl">
                 Join an ever-growing network of college students across the
                 country passionate about telling stories, and form a Legacy
                 Project chapter at your school or university today. Fill out the
@@ -79,10 +79,10 @@ const HomePage = () => {
           </div>
         </FlowerBox>
         <div className="flex w-full flex-col justify-center gap-y-4 px-[40px] py-[20px]">
-          <span className="text-center font-serif text-3xl font-semibold sm:text-left sm:text-4xl">
+          <span className="text-center text-3xl font-semibold sm:text-left sm:text-4xl">
             About Us
           </span>
-          <p className="font-serif leading-7">
+          <p className="leading-7">
             The concept of The Legacy Project (TLP) began in 2018, when Arielle
             Galinsky, a high school junior at the time, spent her time working
             at a local senior community in her Massachusetts hometown. Her role
@@ -103,7 +103,7 @@ const HomePage = () => {
             life accounts, both for the seniors themselves and their families.
           </p>
 
-          <p className="font-serif leading-7">
+          <p className="leading-7">
             Little did she know that, in the state right next over, Katie Furey,
             a sophomore in college home for the pandemic, started a similar
             project of her own. Katie had always been close with her
@@ -125,7 +125,7 @@ const HomePage = () => {
           </p>
 
           <div className="flex flex-col gap-y-4 bg-light-moss p-[20px]">
-            <p className="font-serif leading-7">
+            <p className="leading-7">
               Arielle and Katie met in 2020, quickly connecting over their
               aligned passions to build intergenerational connections provide a
               platform for local seniors to share their stories, and preserve
@@ -143,7 +143,7 @@ const HomePage = () => {
               with the platform to amplify their stories.
             </p>
 
-            <p className="font-serif leading-7">
+            <p className="leading-7">
               Having watched the Tufts chapter grow over the past two years,
               Arielle, Katie, and Wanda decided to establish TLP as a nonprofit
               organization with the goal of spreading TLP’s mission across the

src/components/AddFile.tsx

@@ -18,9 +18,7 @@ const TagSelector = ({
 }) => {
   return (
     <div>
-      <div className="text-neutral-600 mb-1 h-[34px] w-full font-sans text-lg">
-        Tags
-      </div>
+      <div className="text-neutral-600 mb-1 h-[34px] w-full text-lg">Tags</div>
       <FilterDropdown<TagProps>
         items={tagList}
         filterMatch={(tag, text) => tag.name.indexOf(text) != -1}
@@ -76,11 +74,8 @@ const AddFile = ({
           {!confirm && !error ? (
             <div className="mt-20 flex min-h-[650px] w-1/2 flex-col justify-between rounded-lg bg-white p-10">
               <div>
-                <div className="mb-8 font-serif text-3xl">
-                  {" "}
-                  Create New File{" "}
-                </div>
-                <div className="text-neutral-600 mb-1 h-[34px] w-full font-sans text-lg">
+                <div className="mb-8 text-3xl"> Create New File </div>
+                <div className="text-neutral-600 mb-1 h-[34px] w-full text-lg">
                   File name
                 </div>
                 <input
@@ -129,7 +124,7 @@ const AddFile = ({
                   <span>File added successfully!</span>
                   <div className="flex w-full flex-row justify-center">
                     <button
-                      className="bg-legacy-teal text-md mx-1 w-full max-w-[10rem] rounded p-3 font-serif font-normal text-white hover:bg-dark-teal"
+                      className="bg-legacy-teal text-md mx-1 w-full max-w-[10rem] rounded p-3 font-normal text-white hover:bg-dark-teal"
                       onClick={() => setShowAddFilePopUp(false)}
                     >
                       Confirm
@@ -144,7 +139,7 @@ const AddFile = ({
                   </span>
                   <div className="flex w-full flex-row justify-center">
                     <button
-                      className="bg-legacy-teal text-md mx-1 w-full max-w-[10rem] rounded p-3 font-serif font-normal text-white hover:bg-dark-teal"
+                      className="bg-legacy-teal text-md mx-1 w-full max-w-[10rem] rounded p-3 font-normal text-white hover:bg-dark-teal"
                       onClick={() => setShowAddFilePopUp(false)}
                     >
                       Confirm

src/components/AddSenior.tsx

@@ -34,7 +34,7 @@ export const AddSeniorTile = ({
 
   return (
     <button onClick={handlePopUp}>
-      <div className="font-merriweather transition-background flex h-[217px] w-[160px] flex-col items-center justify-center gap-[10px] rounded-[8px] border-[1px] border-solid border-dark-teal bg-tan font-['Merriweather'] text-dark-teal duration-300 hover:bg-[#E5E0DA]">
+      <div className=" transition-background flex h-[217px] w-[160px] flex-col items-center justify-center gap-[10px] rounded-[8px] border-[1px] border-solid border-dark-teal bg-tan text-dark-teal duration-300 hover:bg-[#E5E0DA]">
         <div className="text-4xl font-semibold">+</div>
         <div className="text-lg">New Senior</div>
       </div>
@@ -53,7 +53,7 @@ const StudentSelector = ({
 }) => {
   return (
     <div>
-      <div className="text-neutral-600 font-merriweather mb-1 h-[34px] w-full text-lg">
+      <div className="text-neutral-600  mb-1 h-[34px] w-full text-lg">
         Assign students
       </div>
       <FilterDropdown<User>
@@ -216,7 +216,7 @@ const AddSenior = ({
         >
           <div
             className={cn(
-              "top-5% font-merriweather flex h-[85%] w-[60%] max-w-[495px] flex-col justify-between overflow-auto rounded-lg bg-dark-teal px-6 py-9 text-white",
+              "top-5%  flex h-[85%] w-[60%] max-w-[495px] flex-col justify-between overflow-auto rounded-lg bg-dark-teal px-6 py-9 text-white",
               confirm || error
                 ? "top-[5.5%] w-2/5"
                 : "top-[2.5%] sm:w-4/5 md:w-1/2"
@@ -225,7 +225,7 @@ const AddSenior = ({
             {!confirm && !error ? (
               <>
                 <div>
-                  <div className="mb-5 font-serif text-xl font-extrabold sm:text-center md:text-left">
+                  <div className="mb-5 text-xl font-extrabold sm:text-center md:text-left">
                     {seniorPatch ? "Update" : "Add New"} Senior
                   </div>
                   <div>
@@ -247,7 +247,7 @@ const AddSenior = ({
                   later as seniorData.name propgates to backend*/}
                   <div className="flex">
                     <div className="mr-2 flex-1 flex-col">
-                      <div className="font-merriweather mb-2 h-[19px] w-full text-base text-white">
+                      <div className=" mb-2 h-[19px] w-full text-base text-white">
                         {" "}
                         First name{" "}
                       </div>
@@ -264,7 +264,7 @@ const AddSenior = ({
                     </div>
 
                     <div className="ml-2 flex-1 flex-col">
-                      <div className="font-merriweather mb-2 h-[19px] w-full text-base text-white">
+                      <div className=" mb-2 h-[19px] w-full text-base text-white">
                         {" "}
                         Last name{" "}
                       </div>
@@ -281,7 +281,7 @@ const AddSenior = ({
                     </div>
                   </div>
 
-                  <div className="font-merriweather mb-2 h-5 w-full text-base text-white">
+                  <div className=" mb-2 h-5 w-full text-base text-white">
                     {" "}
                     Location{" "}
                   </div>
@@ -338,7 +338,7 @@ const AddSenior = ({
               <>
                 {confirm ? (
                   <div className="flex flex-col items-center">
-                    <div className="mb-8 text-center font-serif text-3xl">
+                    <div className="mb-8 text-center text-3xl">
                       {seniorPatch ? "Updated" : "Added"} successfully!
                     </div>
                     <button
@@ -350,7 +350,7 @@ const AddSenior = ({
                   </div>
                 ) : (
                   <div className="flex flex-col items-center break-words">
-                    <div className="mb-8 text-center font-serif text-xl">
+                    <div className="mb-8 text-center text-xl">
                       There was an error adding your senior. Please reach out to
                       your club administrator for help.
                     </div>

src/components/Button.tsx

@@ -2,39 +2,38 @@ import { MouseEventHandler } from "react";
 import Link from "next/link";
 
 type ButtonProps = {
-  text: string,
-  color: string,
-  hover: string
-  action?: MouseEventHandler<HTMLButtonElement>
-  link?: string
-}
+  text: string;
+  color: string;
+  hover: string;
+  action?: MouseEventHandler<HTMLButtonElement>;
+  link?: string;
+};
 
-const Button = ({ text, color, hover, action, link } : ButtonProps) => {
+const Button = ({ text, color, hover, action, link }: ButtonProps) => {
   if (link) {
     return (
       <Link href={link ?? "/"}>
         <button
-            className={`w-auto h-[40px] ${color} rounded duration-150 ${hover} hover:-translate-y-0.5`}
-          >
-            <span className="m-[10px] w-auto align-center font-serif text-md tracking-easy text-white">
-              {text}
-            </span>
+          className={`h-[40px] w-auto ${color} rounded duration-150 ${hover} hover:-translate-y-0.5`}
+        >
+          <span className="align-center text-md m-[10px]  w-auto tracking-easy text-white">
+            {text}
+          </span>
         </button>
       </Link>
     );
-  }
-  else {
+  } else {
     return (
       <button
-          className={`w-auto h-[40px] ${color} rounded duration-150 ${hover} hover:-translate-y-0.5`}
-          onClick={action ?? undefined}
-        >
-          <span className="m-[10px] w-auto align-center font-serif text-md tracking-easy text-white">
-            {text}
-          </span>
+        className={`h-[40px] w-auto ${color} rounded duration-150 ${hover} hover:-translate-y-0.5`}
+        onClick={action ?? undefined}
+      >
+        <span className="align-center text-md m-[10px]  w-auto tracking-easy text-white">
+          {text}
+        </span>
       </button>
     );
   }
-}
+};
 
 export default Button;

src/components/DisplayChapterInfo.tsx

@@ -1,5 +1,3 @@
-
-
 interface DisplayChapterInfoParams {
   location: string;
   noMembers: number;
@@ -12,7 +10,7 @@ const DisplayChapterInfo = ({
   dateCreated,
 }: DisplayChapterInfoParams) => {
   return (
-    <div className="font-merriweather flex h-1/5 w-5/6 flex-col justify-between space-y-2 rounded-md bg-white p-8">
+    <div className=" flex h-1/5 w-5/6 flex-col justify-between space-y-2 rounded-md bg-white p-8">
       <div className="flex flex-row text-start">
         <div>Location: </div>
         <div className="ml-2 font-bold">{location}</div>
@@ -23,7 +21,9 @@ const DisplayChapterInfo = ({
       </div>
       <div className="flex flex-row text-start">
         <div>Years Active: </div>
-        <div className="ml-2 font-bold">{new Date().getFullYear() - dateCreated.getFullYear()}</div>
+        <div className="ml-2 font-bold">
+          {new Date().getFullYear() - dateCreated.getFullYear()}
+        </div>
       </div>
     </div>
   );

src/components/LandingFooter.tsx

@@ -54,11 +54,11 @@ const LandingFooter = () => {
   return (
     <div className="mb-[40px]">
       <FlowerBox>
-        <p className="self-center font-serif text-3xl font-semibold xl:text-4xl">
+        <p className="self-center text-3xl font-semibold xl:text-4xl">
           There are millions of stories waiting to be told. It&apos;s your
           moment to change that.
         </p>
-        <p className="w-3/4 self-center font-serif text-lg">
+        <p className="w-3/4 self-center text-lg">
           Leave a lasting legacy on your college or university campus by
           founding a chapter of The Legacy Project at your school today. Reach
           us at{" "}
@@ -89,7 +89,7 @@ const LandingFooter = () => {
             className={`h-[40px] w-auto ${buttonStyle} rounded duration-150`}
             type="submit"
           >
-            <span className="align-center text-md m-[10px] w-auto font-serif tracking-easy text-white">
+            <span className="align-center text-md m-[10px] w-auto tracking-easy text-white">
               {buttonText}
             </span>
           </button>

src/components/Navbar.tsx

@@ -71,13 +71,13 @@ const Navbar = () => {
         }
       >
         <Link href="/public/team" onClick={() => setDropdownVisible(false)}>
-          <div className="font-merriweather m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
+          <div className=" m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
             Meet TLP
           </div>
         </Link>
 
         <Link href="/public/about" onClick={() => setDropdownVisible(false)}>
-          <div className="font-merriweather m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
+          <div className=" m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
             Our Story
           </div>
         </Link>
@@ -86,13 +86,13 @@ const Navbar = () => {
           href="/public/start-chapter"
           onClick={() => setDropdownVisible(false)}
         >
-          <div className="font-merriweather m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
+          <div className=" m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
             Start a Chapter
           </div>
         </Link>
 
         <button onClick={onSignIn}>
-          <div className="font-merriweather m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
+          <div className=" m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
             {status === "authenticated" ? "Home" : "Sign In"}
           </div>
         </button>

src/components/PathNav.tsx

@@ -24,7 +24,7 @@ const PathNav = ({ pathInfo }: PathNavParams) => {
   };
 
   return (
-    <div className="font-merriweather flex flex-row">
+    <div className="flex flex-row">
       {pathInfo.map((currPath, index, array) => (
         <React.Fragment key={index}>
           {index !== 0 && <div className="px-2">&gt;</div>}