Merge pull request #267 from acm-ucr/felix/finalchanges

migrate to predef classes, fragment, reduce bloat

Author: stanleylew5

src/app/gallery/page.tsx

@@ -3,7 +3,7 @@ import Gallery from "@/components/gallery/Gallery";
 import Image from "next/image";
 import pinkFlower from "@/public/gallery/pinkFlower.webp";
 import blueFlower from "@/public/gallery/blueFlower.webp";
-import CarouselGallery from "@/components/gallery/CaroGallery";
+import CarouselGallery from "@/components/gallery/CarouselGallery";
 
 const Page = () => {
   return (

src/components/about/FourPillars.tsx

@@ -6,7 +6,7 @@ import gradCap from "@/public/about/gradCap.webp";
 
 const FourPillars = () => {
   return (
-    <div>
+    <>
       <div className="mt-10 flex flex-col">
         <p className="ml-[7%] mr-[6%] text-right text-5xl font-semibold text-csa-red-100">
           Four Pillars
@@ -53,11 +53,11 @@ const FourPillars = () => {
           <Image
             src={gradCap}
             alt="gradCap"
-            className="absolute w-[42vw] translate-x-[40%] translate-y-[-12%] sm:translate-x-[40%] sm:translate-y-[-9%] md:w-[28vw] md:translate-x-[60%] md:translate-y-[-9%] lg:w-[18vw] lg:translate-x-[120%]"
+            className="absolute translate-x-[40%] translate-y-[-9%] md:w-[70%] md:translate-x-[40%]"
           />
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/components/about/WhoWeAre.tsx

@@ -1,14 +1,12 @@
 const WhoWeAre = () => {
   return (
-    <div>
-      <div>
-        <p className="ml-[6%] text-left text-5xl font-medium text-csa-red-100">
-          Who we are
-        </p>
-        <div className="ml-[7%] mr-auto h-2 w-[9%] bg-csa-tan-300" />
-      </div>
+    <>
+      <p className="ml-[6%] text-left text-5xl font-medium text-csa-red-100">
+        Who we are
+      </p>
+      <div className="ml-[7%] mr-auto h-2 w-[9%] bg-csa-tan-300" />
       <div className="ml-[4%] mr-[4%] flex justify-center">
-        <p className="font-lora mt-8 w-11/12 text-left text-xl text-csa-gray-100 md:text-4xl">
+        <p className="font-lora mt-8 w-11/12 text-left text-xl text-csa-gray-100 md:text-3xl">
           The Chinese Student Association (CSA) at UC Riverside is a social,
           cultural, and service orientated organization that strives to promote
           the Chinese American culture throughout the UCR and Riverside
@@ -20,7 +18,7 @@ const WhoWeAre = () => {
           experience and beyond!
         </p>
       </div>
-    </div>
+    </>
   );
 };
 

src/components/events/CalendarDay.tsx renamed to src/components/events/Day.tsx

@@ -1,6 +1,6 @@
 import { GoogleEventProps } from "@/components/events/CalendarCall";
 import { useState, useEffect } from "react";
-import CalendarEventPopover from "./CalendarEventPopover";
+import CalendarEventPopover from "./EventPopover";
 import {
   Popover,
   PopoverContent,

src/components/events/CalendarEventPopover.tsx renamed to src/components/events/EventPopover.tsx

@@ -10,16 +10,16 @@ const CarouselGallery = () => {
       <Image
         src={rabbit}
         alt="rabbit"
-        className="absolute bottom-[-13%] left-[2%] z-40 h-[50%] w-[30%] md:left-[12%]"
+        className="absolute bottom-[-13%] left-[2%] z-40 h-1/2 w-[30%] md:left-[12%]"
       />
       <Image
         src={bamboo}
         alt="bamboo"
         className="absolute bottom-[13%] left-[54%] z-40 h-[87%] w-[40%] md:left-[46.5%]"
       />
-      <div className="top-50 absolute -left-2 z-20 hidden h-full w-[20%] bg-csa-tan-100 md:flex" />
+      <div className="top-50 absolute -left-2 z-20 hidden h-full w-1/5 bg-csa-tan-100 md:flex" />
       <CarouselCSA photos={carouselGallery} />
-      <div className="top-50 absolute z-20 hidden h-full w-[20%] bg-csa-tan-100 md:flex" />
+      <div className="top-50 absolute z-20 hidden h-full w-1/5 bg-csa-tan-100 md:flex" />
     </div>
   );
 };

src/components/events/CalendarTop.tsx renamed to src/components/events/Top.tsx

@@ -7,8 +7,8 @@ import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 import { useState } from "react";
 import { GoogleEventProps } from "@/components/events/CalendarCall";
-import CalendarTop from "@/components/events/CalendarTop";
-import CalendarDay from "@/components/events/CalendarDay";
+import CalendarTop from "@/components/events/Top";
+import CalendarDay from "@/components/events/Day";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
   events: GoogleEventProps[];