Initial carousel implementation

Nothing too deep yet

Author: JManion32

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.should('contain', '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.should('contain', 'my orgs');
     });
 });

src/components/Carousel.tsx

@@ -11,9 +11,9 @@ export default function Carousel({ type }: CarouselProps) {
             <div>
                 <h2 className="carousel-title">{type}</h2>
                 <div className="carousel">
-                    <Organization />
-                    <Organization />
-                    <Organization />
+                    <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,9 @@
+import '../css/events.css';
+
+export default function Event() {
+    return (
+        <div className="org">
+            
+        </div>
+    );
+}

src/components/Organization.tsx

@@ -1,9 +1,26 @@
 import '../css/organizations.css';
 
-export default function Organization() {
+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

@@ -6,8 +6,8 @@
 
 .carousel {
     width: 100%;
-    background: #F1DEDE;
-    height: 20rem;
+    background: var(--carousel-bg);
+    height: 18rem;
     border-radius: 2rem;
     padding: 1rem;
 
@@ -20,5 +20,6 @@
 .carousel-title {
     margin: 0;
     font-size: 1rem;
-    color: black;
+    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,7 +18,6 @@ mode section as well.
     --site-transition: 0.25s;
     --site-font: 'Asap', sans-serif;
 
-    /* ========================================== */
 
     /* CAPY COLOR SUITE ========================= */
 
@@ -32,7 +31,9 @@ mode section as well.
     --highlight: #f4f8f6;
     --off-black: #20201f;
 
-    /* ========================================== */
+
+    /* MISC DEV VARIABLES ======================= */
+
 
     /* COLOR VARIABLES ========================== */
 
@@ -41,11 +42,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 +68,10 @@ 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 */
 }