From af1745c338aeb7e245108daab793a5f976611cac Mon Sep 17 00:00:00 2001 From: JManion32 Date: Thu, 5 Mar 2026 19:40:09 -0500 Subject: [PATCH 1/3] Initial Commit --- src/components/Carousel.tsx | 21 +++++++++++++++++++++ src/components/Organization.tsx | 9 +++++++++ src/css/carousel.css | 24 ++++++++++++++++++++++++ src/css/organizations.css | 6 ++++++ 4 files changed, 60 insertions(+) create mode 100644 src/components/Carousel.tsx create mode 100644 src/components/Organization.tsx create mode 100644 src/css/carousel.css create mode 100644 src/css/organizations.css diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx new file mode 100644 index 0000000..dadd794 --- /dev/null +++ b/src/components/Carousel.tsx @@ -0,0 +1,21 @@ +import '../css/carousel.css'; +import Organization from './Organization.tsx'; + +type CarouselProps = { + type: string; +} + +export default function Carousel({ type }: CarouselProps) { + return ( + <> +
+

{type}

+
+ + + +
+
+ + ); +} diff --git a/src/components/Organization.tsx b/src/components/Organization.tsx new file mode 100644 index 0000000..3127b94 --- /dev/null +++ b/src/components/Organization.tsx @@ -0,0 +1,9 @@ +import '../css/organizations.css'; + +export default function Organization() { + return ( +
+ +
+ ); +} diff --git a/src/css/carousel.css b/src/css/carousel.css new file mode 100644 index 0000000..33cb048 --- /dev/null +++ b/src/css/carousel.css @@ -0,0 +1,24 @@ +.carousel-page-container { + display: flex; + flex-direction: column; + gap: 4rem; +} + +.carousel { + width: 100%; + background: #F1DEDE; + height: 20rem; + border-radius: 2rem; + padding: 1rem; + + display: flex; + flex-direction: row; + align-items: center; + gap: 2rem; +} + +.carousel-title { + margin: 0; + font-size: 1rem; + color: black; +} \ No newline at end of file diff --git a/src/css/organizations.css b/src/css/organizations.css new file mode 100644 index 0000000..0a3cc74 --- /dev/null +++ b/src/css/organizations.css @@ -0,0 +1,6 @@ +.org { + height: 18rem; + width: 22rem; + border-radius: 2rem; + background: #D9D9D9; +} \ No newline at end of file From e2ed2f0c6749ac9961d5b62e2a0ccf4a797530aa Mon Sep 17 00:00:00 2001 From: JManion32 Date: Thu, 5 Mar 2026 22:02:09 -0500 Subject: [PATCH 2/3] Initial carousel implementation Nothing too deep yet --- cypress/e2e/events/events.cy.ts | 2 +- cypress/e2e/organizations/organizations.cy.ts | 2 +- src/components/Carousel.tsx | 6 +- src/components/Event.tsx | 9 +++ src/components/Organization.tsx | 21 ++++++- src/components/navbar/Navbar.tsx | 6 +- src/css/app-layout.css | 2 +- src/css/carousel.css | 7 ++- src/css/colors.css | 37 ++++++++---- src/css/events.css | 0 src/css/navbar.css | 12 ++-- src/css/organizations.css | 58 ++++++++++++++++++- src/pages/Events.tsx | 7 ++- src/pages/Organizations.tsx | 7 ++- 14 files changed, 137 insertions(+), 39 deletions(-) create mode 100644 src/components/Event.tsx create mode 100644 src/css/events.css diff --git a/cypress/e2e/events/events.cy.ts b/cypress/e2e/events/events.cy.ts index 46e8baf..268c826 100644 --- a/cypress/e2e/events/events.cy.ts +++ b/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'); }); }); diff --git a/cypress/e2e/organizations/organizations.cy.ts b/cypress/e2e/organizations/organizations.cy.ts index 6597df7..343d61e 100644 --- a/cypress/e2e/organizations/organizations.cy.ts +++ b/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'); }); }); diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx index dadd794..d1f1705 100644 --- a/src/components/Carousel.tsx +++ b/src/components/Carousel.tsx @@ -11,9 +11,9 @@ export default function Carousel({ type }: CarouselProps) {

{type}

- - - + + +
diff --git a/src/components/Event.tsx b/src/components/Event.tsx new file mode 100644 index 0000000..1e623aa --- /dev/null +++ b/src/components/Event.tsx @@ -0,0 +1,9 @@ +import '../css/events.css'; + +export default function Event() { + return ( +
+ +
+ ); +} diff --git a/src/components/Organization.tsx b/src/components/Organization.tsx index 3127b94..c4a3795 100644 --- a/src/components/Organization.tsx +++ b/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 (
- +
+
+ {title} + {desc} +
+
+ + +
); } diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index 1a28a92..3e3f8bd 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -52,9 +52,9 @@ export default function Navbar() { width: `${indicator.width}px`, }} /> - - - + + + diff --git a/src/css/app-layout.css b/src/css/app-layout.css index 2fc949e..9b489f3 100644 --- a/src/css/app-layout.css +++ b/src/css/app-layout.css @@ -8,5 +8,5 @@ .app-content { padding: 3rem; - width: 100%; + width: 75%; } diff --git a/src/css/carousel.css b/src/css/carousel.css index 33cb048..523b812 100644 --- a/src/css/carousel.css +++ b/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; } \ No newline at end of file diff --git a/src/css/colors.css b/src/css/colors.css index 66f68f7..3505389 100644 --- a/src/css/colors.css +++ b/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 */ } diff --git a/src/css/events.css b/src/css/events.css new file mode 100644 index 0000000..e69de29 diff --git a/src/css/navbar.css b/src/css/navbar.css index db244f5..3f70d1c 100644 --- a/src/css/navbar.css +++ b/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); diff --git a/src/css/organizations.css b/src/css/organizations.css index 0a3cc74..2d5d4d5 100644 --- a/src/css/organizations.css +++ b/src/css/organizations.css @@ -1,6 +1,58 @@ .org { - height: 18rem; - width: 22rem; + height: 16rem; + width: 20rem; border-radius: 2rem; - background: #D9D9D9; + 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); } \ No newline at end of file diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx index d12f79d..b05928a 100644 --- a/src/pages/Events.tsx +++ b/src/pages/Events.tsx @@ -1,8 +1,11 @@ +import Carousel from '../components/Carousel.tsx'; + export default function Events() { return ( <> -
-

Events

+
+ +
); diff --git a/src/pages/Organizations.tsx b/src/pages/Organizations.tsx index 229f108..6d9e468 100644 --- a/src/pages/Organizations.tsx +++ b/src/pages/Organizations.tsx @@ -1,8 +1,11 @@ +import Carousel from '../components/Carousel.tsx'; + export default function Organizations() { return ( <> -
-

Organizations

+
+ +
); From 5ddaa395a9fe31061080a7688daa146b82f0049d Mon Sep 17 00:00:00 2001 From: JManion32 Date: Thu, 5 Mar 2026 22:06:46 -0500 Subject: [PATCH 3/3] Resolved failing tests --- cypress/e2e/events/events.cy.ts | 2 +- cypress/e2e/organizations/organizations.cy.ts | 2 +- src/components/Carousel.tsx | 19 ++++++++++++++----- src/components/Event.tsx | 8 +------- src/components/Organization.tsx | 12 ++++-------- src/css/carousel.css | 3 +-- src/css/colors.css | 6 +----- src/css/events.css | 0 src/css/organizations.css | 7 +++++-- src/pages/Events.tsx | 4 ++-- src/pages/Organizations.tsx | 4 ++-- 11 files changed, 32 insertions(+), 35 deletions(-) delete mode 100644 src/css/events.css diff --git a/cypress/e2e/events/events.cy.ts b/cypress/e2e/events/events.cy.ts index 268c826..1b0f756 100644 --- a/cypress/e2e/events/events.cy.ts +++ b/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.should('contain', 'my events'); + cy.contains('my events'); }); }); diff --git a/cypress/e2e/organizations/organizations.cy.ts b/cypress/e2e/organizations/organizations.cy.ts index 343d61e..61e4f53 100644 --- a/cypress/e2e/organizations/organizations.cy.ts +++ b/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.should('contain', 'my orgs'); + cy.contains('my orgs'); }); }); diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx index d1f1705..1b02341 100644 --- a/src/components/Carousel.tsx +++ b/src/components/Carousel.tsx @@ -3,7 +3,7 @@ import Organization from './Organization.tsx'; type CarouselProps = { type: string; -} +}; export default function Carousel({ type }: CarouselProps) { return ( @@ -11,10 +11,19 @@ export default function Carousel({ type }: CarouselProps) {

{type}

- - - -
+ + + +
); diff --git a/src/components/Event.tsx b/src/components/Event.tsx index 1e623aa..32f538c 100644 --- a/src/components/Event.tsx +++ b/src/components/Event.tsx @@ -1,9 +1,3 @@ -import '../css/events.css'; - export default function Event() { - return ( -
- -
- ); + return
; } diff --git a/src/components/Organization.tsx b/src/components/Organization.tsx index c4a3795..2b213b7 100644 --- a/src/components/Organization.tsx +++ b/src/components/Organization.tsx @@ -3,9 +3,9 @@ import '../css/organizations.css'; type OrganizationProps = { title: string; desc: string; -} +}; -export default function Organization({title, desc}:OrganizationProps) { +export default function Organization({ title, desc }: OrganizationProps) { return (
@@ -14,12 +14,8 @@ export default function Organization({title, desc}:OrganizationProps) { {desc}
- - + +
); diff --git a/src/css/carousel.css b/src/css/carousel.css index 523b812..9cb6043 100644 --- a/src/css/carousel.css +++ b/src/css/carousel.css @@ -10,7 +10,6 @@ height: 18rem; border-radius: 2rem; padding: 1rem; - display: flex; flex-direction: row; align-items: center; @@ -22,4 +21,4 @@ font-size: 1rem; color: var(--standard-bw-text); font-weight: 600; -} \ No newline at end of file +} diff --git a/src/css/colors.css b/src/css/colors.css index 3505389..f3f0422 100644 --- a/src/css/colors.css +++ b/src/css/colors.css @@ -18,7 +18,6 @@ section as well. --site-transition: 0.25s; --site-font: 'Asap', sans-serif; - /* CAPY COLOR SUITE ========================= */ /* All colors used on the site are found here */ @@ -31,10 +30,8 @@ section as well. --highlight: #f4f8f6; --off-black: #20201f; - /* MISC DEV VARIABLES ======================= */ - /* COLOR VARIABLES ========================== */ /* Global Styles: backgrounds, text */ @@ -54,7 +51,7 @@ section as well. --carousel-bg: #f2dede; /* Organizations */ - --org-bg: #D9D9D9; + --org-bg: #d9d9d9; --img-placeholder-bg: #b3807d; --general-org-btn-bg: #b3807d; --manage-org-btn-bg: #97bdc6; @@ -72,6 +69,5 @@ section as well. /* Navbar */ - /* Carousel */ } diff --git a/src/css/events.css b/src/css/events.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/css/organizations.css b/src/css/organizations.css index 2d5d4d5..c9b5613 100644 --- a/src/css/organizations.css +++ b/src/css/organizations.css @@ -30,7 +30,10 @@ flex-direction: row; } -.events-btn, .join-btn, .manage-btn, .home-btn { +.events-btn, +.join-btn, +.manage-btn, +.home-btn { font-size: 1rem; padding: 0.25rem 2rem; border-radius: 2rem; @@ -55,4 +58,4 @@ .home-btn { background: var(--general-org-btn-bg); -} \ No newline at end of file +} diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx index b05928a..f9cc039 100644 --- a/src/pages/Events.tsx +++ b/src/pages/Events.tsx @@ -4,8 +4,8 @@ export default function Events() { return ( <>
- - + +
); diff --git a/src/pages/Organizations.tsx b/src/pages/Organizations.tsx index 6d9e468..b2cf37a 100644 --- a/src/pages/Organizations.tsx +++ b/src/pages/Organizations.tsx @@ -4,8 +4,8 @@ export default function Organizations() { return ( <>
- - + +
);