Added Event and Org Carousels

cypress/e2e/events/events.cy.ts

@@ -2,6 +2,6 @@ describe('Event Page', () => {
     it('displays the correct main title', () => {
         cy.visit('localhost:5173/events');
 
-        cy.get('h1').should('contain', 'Events');
+        cy.contains('my events');
     });
 });

cypress/e2e/organizations/organizations.cy.ts

@@ -2,6 +2,6 @@ describe('Organizations Page', () => {
     it('displays the correct main title', () => {
         cy.visit('localhost:5173/organizations');
 
-        cy.get('h1').should('contain', 'Organizations');
+        cy.contains('my orgs');
     });
 });

src/components/Carousel.tsx

@@ -0,0 +1,30 @@
+import '../css/carousel.css';
+import Organization from './Organization.tsx';
+
+type CarouselProps = {
+    type: string;
+};
+
+export default function Carousel({ type }: CarouselProps) {
+    return (
+        <>
+            <div>
+                <h2 className="carousel-title">{type}</h2>
+                <div className="carousel">
+                    <Organization
+                        title="Math Club"
+                        desc="The RPI Math Faculty approved and Union affiliated math club!"
+                    />
+                    <Organization
+                        title="Math Club"
+                        desc="The RPI Math Faculty approved and Union affiliated math club!"
+                    />
+                    <Organization
+                        title="Math Club"
+                        desc="The RPI Math Faculty approved and Union affiliated math club!"
+                    />
+                </div>
+            </div>
+        </>
+    );
+}

src/components/Event.tsx

@@ -0,0 +1,3 @@
+export default function Event() {
+    return <div className="org"></div>;
+}

src/components/Organization.tsx

@@ -0,0 +1,22 @@
+import '../css/organizations.css';
+
+type OrganizationProps = {
+    title: string;
+    desc: string;
+};
+
+export default function Organization({ title, desc }: OrganizationProps) {
+    return (
+        <div className="org">
+            <div className="org-metadata">
+                <div className="image-placeholder"></div>
+                <span className="org-title">{title}</span>
+                <span>{desc}</span>
+            </div>
+            <div className="org-btns">
+                <button className="events-btn">Events</button>
+                <button className="manage-btn">Manage</button>
+            </div>
+        </div>
+    );
+}

src/components/navbar/Navbar.tsx

@@ -52,9 +52,9 @@ export default function Navbar() {
                     width: `${indicator.width}px`,
                 }}
             />
-            <NavbarLink label="profile" nav="/" />
-            <NavbarLink label="home" nav="/events" />
-            <NavbarLink label="events" nav="/insights" />
+            <NavbarLink label="profile" nav="/profile" />
+            <NavbarLink label="home" nav="/" />
+            <NavbarLink label="events" nav="/events" />
             <NavbarLink label="orgs" nav="/organizations" />
             <NavbarLink label="test" nav="/testing" />
         </div>

src/css/app-layout.css

@@ -8,5 +8,5 @@
 
 .app-content {
     padding: 3rem;
-    width: 100%;
+    width: 75%;
 }

src/css/carousel.css

@@ -0,0 +1,24 @@
+.carousel-page-container {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+}
+
+.carousel {
+    width: 100%;
+    background: var(--carousel-bg);
+    height: 18rem;
+    border-radius: 2rem;
+    padding: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2rem;
+}
+
+.carousel-title {
+    margin: 0;
+    font-size: 1rem;
+    color: var(--standard-bw-text);
+    font-weight: 600;
+}

src/css/colors.css

@@ -8,8 +8,8 @@ abstracted to a single file.
 HOW TO USE: All variables in the CAPY COLOR SUITE should be treated 
 as constants. These constants should NOT be found in other CSS files. 
 Instead, create variables in the COLOR VARIABLES section, and use those. 
-COLOR VARIABLES should be duplicated and properly adjusted in the dark 
-mode section as well.
+COLOR VARIABLES should be duplicated and adjusted in the dark mode 
+section as well.
 
 */
 
@@ -18,8 +18,6 @@ mode section as well.
     --site-transition: 0.25s;
     --site-font: 'Asap', sans-serif;
 
-    /* ========================================== */
-
     /* CAPY COLOR SUITE ========================= */
 
     /* All colors used on the site are found here */
@@ -32,7 +30,7 @@ mode section as well.
     --highlight: #f4f8f6;
     --off-black: #20201f;
 
-    /* ========================================== */
+    /* MISC DEV VARIABLES ======================= */
 
     /* COLOR VARIABLES ========================== */
 
@@ -41,11 +39,22 @@ mode section as well.
     --standard-white: var(--off-white);
     --standard-black: var(--off-black);
     --standard-text: var(--primary);
+    --standard-bw-text: var(--off-black);
+
+    /* Navbar */
+    --nav-bg: #e6e6e6;
+    --navlink-hover-bg: rgb(0 0 0 / 5%);
+    --navlink-color: #444;
+    --nav-indicator-bg: #d0d0d0;
 
-    /* Sidebar */
-    --sidebar-bg: var(--highlight);
-    --sidebar-link-hover-bg: var(--off-white);
-    --sidebar-active-link-bg: var(--primary-light);
+    /* Carousel */
+    --carousel-bg: #f2dede;
+
+    /* Organizations */
+    --org-bg: #d9d9d9;
+    --img-placeholder-bg: #b3807d;
+    --general-org-btn-bg: #b3807d;
+    --manage-org-btn-bg: #97bdc6;
 }
 
 [data-theme='dark'] {
@@ -56,9 +65,9 @@ mode section as well.
     --standard-white: var(--off-black);
     --standard-black: var(--off-white);
     --standard-text: var(--off-white);
+    --standard-bw-text: var(--off-white);
+
+    /* Navbar */
 
-    /* Sidebar */
-    --sidebar-bg: var(--primary-extra-dark);
-    --sidebar-link-hover-bg: var(--accent);
-    --sidebar-active-link-bg: var(--accent);
+    /* Carousel */
 }

src/css/navbar.css

@@ -2,10 +2,10 @@
     position: relative;
     display: inline-flex;
     gap: 0.5rem;
-    background: #e6e6e6;
+    background: var(--nav-bg);
     border-radius: 999px;
     width: fit-content;
-    margin: 40px auto 0;
+    margin: 6rem auto 0;
 }
 
 .navlink {
@@ -14,15 +14,15 @@
     padding: 0.5rem 1rem;
     border-radius: 999px;
     text-decoration: none;
-    color: #444;
+    color: var(--navlink-color);
 }
 
 .navlink:hover {
-    background: rgb(0 0 0 / 5%);
+    background: var(--navlink-hover-bg);
 }
 
 .active-navlink {
-    color: #111;
+    color: var(--standard-bw-text);
 }
 
 .nav-indicator {
@@ -31,7 +31,7 @@
     left: 0;
     height: 100%;
     border-radius: 999px;
-    background: #d0d0d0;
+    background: var(--nav-indicator-bg);
     transition:
         transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
         width 0.28s cubic-bezier(0.4, 0, 0.2, 1);

src/css/organizations.css

@@ -0,0 +1,61 @@
+.org {
+    height: 16rem;
+    width: 20rem;
+    border-radius: 2rem;
+    background: var(--org-bg);
+    padding: 1.25rem;
+    color: var(--standard-bw-text);
+}
+
+.org-metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.org-title {
+    font-size: 1.1rem;
+}
+
+.image-placeholder {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 1rem;
+    background: var(--img-placeholder-bg);
+}
+
+.org-btns {
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: row;
+}
+
+.events-btn,
+.join-btn,
+.manage-btn,
+.home-btn {
+    font-size: 1rem;
+    padding: 0.25rem 2rem;
+    border-radius: 2rem;
+    border: none;
+    cursor: pointer;
+    color: var(--standard-bw-text);
+}
+
+.events-btn {
+    background: var(--general-org-btn-bg);
+}
+
+.join-btn {
+    margin-left: auto;
+    background: var(--general-org-btn-bg);
+}
+
+.manage-btn {
+    margin-left: auto;
+    background: var(--manage-org-btn-bg);
+}
+
+.home-btn {
+    background: var(--general-org-btn-bg);
+}

src/pages/Events.tsx

@@ -1,8 +1,11 @@
+import Carousel from '../components/Carousel.tsx';
+
 export default function Events() {
     return (
         <>
-            <div>
-                <h1>Events</h1>
+            <div className={`carousel-page-container`}>
+                <Carousel type="my events" />
+                <Carousel type="recommended" />
             </div>
         </>
     );

src/pages/Organizations.tsx

@@ -1,8 +1,11 @@
+import Carousel from '../components/Carousel.tsx';
+
 export default function Organizations() {
     return (
         <>
-            <div>
-                <h1>Organizations</h1>
+            <div className={`carousel-page-container`}>
+                <Carousel type="my orgs" />
+                <Carousel type="recommended" />
             </div>
         </>
     );