From 4d8cb901f30ee88973be713a281a2ea6f463c723 Mon Sep 17 00:00:00 2001 From: SHS-Peb Date: Tue, 21 Apr 2026 19:59:06 +1000 Subject: [PATCH 1/6] updated Read Me --- README.md | 272 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 263 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index a36934d..a835c32 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,270 @@ -# React + Vite +# Your Product Name +> Your Group Name -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +> [!NOTE] +> This repo has been shared with your group. Use it to develop your group project. +> +> Your group will have received two identical repos - one for your project's back-end, and another for the front-end. Although they are identical right now they are about to diverge, because you'll be using one to create a DRF project and the other to create a React project! -Currently, two official plugins are available: +> [!IMPORTANT] +> Use this `README.md` file to document your MVP using Markdown. Feel free to duplicate the product description aspects between the front-end README and the back-end README, but consider splitting out the technical design aspects to the specific repo that implements them. +> +> An example MVP spec (containing both front- and back-end descriptions) is set out below - you should replace it with your own content! (Remember to delete any "admonition" blocks like this `IMPORTANT` section, the `CAUTION` and `NOTE` sections, etc.) -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) +> [!CAUTION] +> In order to set up your project, **one** member of the group should clone this repo down, initialise a new React/DRF project, commit, and push. +> +> If more than one group member performs the setup, you'll have Git problems. Check out [the Git collaboration content](https://github.com/SheCodesAus/PlusLessonContent?tab=readme-ov-file#26---group-project) for more on how to use Git as a team. -## React Compiler +## Table of Contents -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +- [Your Product Name](#your-product-name) + - [Table of Contents](#table-of-contents) + - [Mission Statement](#mission-statement) + - [Features](#features) + - [Summary](#summary) + - [Users](#users) + - [Sticky Notes](#sticky-notes) + - [Collections](#collections) + - [Pages/Endpoint Functionality](#pagesendpoint-functionality) + - [Nice To Haves](#nice-to-haves) + - [Technical Implementation](#technical-implementation) + - [Back-End](#back-end) + - [Front-End](#front-end) + - [Git \& Deployment](#git--deployment) + - [Target Audience](#target-audience) + - [Back-end Implementation](#back-end-implementation) + - [API Specification](#api-specification) + - [Object Definitions](#object-definitions) + - [Users](#users-1) + - [Sticky Notes](#sticky-notes-1) + - [Database Schema](#database-schema) + - [Front-end Implementation](#front-end-implementation) + - [Wireframes](#wireframes) + - [Home Page](#home-page) + - [Collection List Page](#collection-list-page) + - [Logo](#logo) + - [Colours](#colours) + - [Primary](#primary) + - [Secondary](#secondary) + - [Font](#font) -## Expanding the ESLint configuration -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. +## Mission Statement + +> [!NOTE] +> What is the purpose of your project? (approx 100-200 words). Example below. + +Win-Wall is an online collaboration tool that provides organisers of She Codes workshops as well as their attendees a visual workspace where they can add digital sticky notes to a blank digital wall in order to share wins with others during live events. +This tool offers an unlimited number of digital win walls which are organised by event collection in order to facilitate collaboration during live events and easily bring all attendees’ wins to light in real time. +Win-Wall comes packed full of features such as the ability to share a unique digital win wall to a live audience, easily approve and export win wall messages to upload on a WordPress website, manage user roles to give event organisers and attendees access to different functionalities, and many more. + +## Features + +> [!NOTE] +> Tell me the features your website will and will not have. Give detailed explanations, this is where you define the scope of your project. Example below. + + +### Summary +Provide Guest users ability to post sticky notes to a live event board. Once posted, users can view all posts for live event. Admin and approver access will allow events boards to be created, sticky notes to be edited, approved and exported. + +### Users + +| Type | Access | Role type assignment | +| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------- | +| Superuser or admin |
- All access
- Can log in
- Can log out
- Create and manage events
- Create and manage collections
- Create and manage other users
- Approve, archive and edit notes
- Export notes as CSV
- Can See and edit their details via profile page | Kate | +| Approver |
- Can log in
- Can log out
- Approve, archive and edit notes
- Can See and edit their details via profile page | Mentors, volunteers, shecodes11507 staff | +| Guest |
- Create post it notes
- Submit post it notes
- View Live event board with all post it notes
- can post with and without including their name | Public: Users who attend events, workshops, courses | + +### Sticky Notes + +| Feature | Access | Notes/Conditions | +| :--------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ | +| Create | Can be created by anyone with URL |
- Limit length of sticky note text
- option to add hashtag (TBC: as main text or additional field) | +| Post | Post as Guest |
- Submits Sticky note to Live event board | +| View | Guests, Approvers and Admin can view posts via Live event board Admin and Approvers can view once status updated from Live | | +| Edit | Can be edited by Admin and Approvers |
- Edit sticky note text, eg: for spelling errors before Status is set to approved | +| Statuses: Live, Unapproved, Approved, Archived |
- Auto status of notes will be ‘live’ based on linked event
- Auto status of notes will be unapproved based on closure of linked event
- Update to Approved and Archived by Admin and Approvers | | +| Export |
- Export as Admin only |
- CSV file
- Format: collection, event, sticky note text | +| Flag- Is Exported |
- Auto flag based on whether Admin has exported the sticky note |
- Boolean | +| Link to Collection |
- Controlled by Admin |
- Based on type of event, eg: she codes flash, plus, other event types. | +| Link to Event |
- Auto link based on event URL
- Link to event can be edited by Admin | | +| Link to Approver |
- Controlled by Admin and Approver who creates the event |
- Approver is User who is managing or associated with admin of the event | + +### Collections + +| Feature | Access | Notes/Conditions | +| :-------------------------------- | :------------------------- | :------------------------- | +| Assign events to a collection |
- Based on event type | | +| Assign approver to a collection |
- admin | | +| Default event board live duration |
- Admin |
- Based on event type | +| View event boards by collection |
- Admin, Approver | | +| Export notes by Collection |
- Admin | | + +### Pages/Endpoint Functionality + +| Endpoint | functionality | comments | +| :-------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- | +| Create and post notes |
- Available to anyone with URL
- Add sticky notes
- Post sticky notes |
- Sticky note ‘feel’ is preferred
- Easy to read and accessible
- Good contrast | +| Event board |
- Once note is posted, redirect to live session notes
- Able to post more notes (redirect back or add directly?)
- Live session ends at midnight – day of event |
- view live notes
- search notes by text/hashtag | +| Admin page | All admin functions
- can also create another admin account |
- Requires auth
- initial admin created by DB | +| Register as Approver |
- users can register as approvers
- once registered, approver can log in | Requires she codes email address to be used | +| Approver page | Approver functions | Requires auth Easy to read, accessible, easy to use for new users | +| Profile page |
- All registered users
- Can view their personal info
- Can update their info | Requires auth | + +### Nice To Haves + +- Register during or after event; Sign up for additional events: Email address, Name, Event +- History of my own notes as Registered user +- Events I have registered for as Registered user +- Be able to edit my own notes – as Registered user but only until its been approved +- Bulk update sticky note status +- QR code generation +- Use QR codes to access event as guest + +## Technical Implementation + +> [!NOTE] +> What languages and frameworks will you be using? What kind of database will you be using? How will you deploy the website? Example Below. + +### Back-End + +- Django / DRF API +- Python + +### Front-End + +- React / JavaScript +- HTML/CSS + +### Git & Deployment +- Heroku +- Netlify +- GitHub + +This application's back-end will be deployed to Heroku. The front-end will be deployed separately to Netlify. + +We will also use Insomnia to ensure API endpoints are working smoothly (we will utilise a local and deployed environment in Insomnia). + +## Target Audience + +> [!NOTE] +> Who is the website for? (approx 100 words). Example below. + +This website has two major target audiences: She Codes ‘Leaders, Volunteers & Mentors’, and ‘She Coders’ joining the one-day/short-term workshops. + +**She Codes Leaders, Volunteers and Mentors** (administrators) will use this website to assign one-day workshop coders to specific events and/or collections where they can fill-out a “sticky note” win and paste it on the WinsWall. The administrators will then be able to sort, authorise and delete these stickies and easily download the data in a CSV file. This website is targeted towards this group in order to automate a normally menial task. + +**She Coders** (laypeople) will use this website to post their Win on a WinWall board, keep track of what events they’ve attended and also view previously written wins. This website is targeted to this group in order to prevent loss of paper data (physical sticky notes) and also make the WinsWall more interactive. + +## Back-end Implementation +### API Specification + +| HTTP Method | URL | Purpose | Request Body | Successful Response Code | Authentication and Authorization | +| :---------- | :---------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------- | :----------------------- | :---------------------------------------------------- | +| POST | /login | Allow users to log in | ““Username”:”string”, “password”:”string” | 200 | Token auth | +| POST | /logout | Allow users to log out ( end active session) | ““Username”:”string”, “password”:”string” | 200 | Will clear user log in session \- remove stored token | +| POST | /Register | Create new student or approver user | “Username”:”string”, “FullName”: “string” “Email”:”string”,”Password”:”string”, ”Password2”:”string”, | 201 | Admin | +| PUT | /Profile/ID | Edit user | “Username”:”string”, “FullName”: “string” “Email”:”string”, “Avatar”:”string”, “Bio”:”string”, “Socials”:”string” | 200 | Admin, approver or student with matching ID | +| GET | /Profile/ID | View User profile | NA | 200 | Any | +| DELETE | /User/ID | Delete user | NA | 204 | Admin, approver or student with matching ID | +| POST | /EventCollection | Create new Event Collection | “Title”:”string”, “IsExported”:”boolean” “Approver”: integer | 201 | Admin | +| PUT | /EventCollection/Id | Update Event collection | “Title”:”string”, “IsExported”:”boolean” | 200 | Admin, Approver linked to event? | +| DELETE | /EventCollection/Id | Delete Event collection | NA | 204 | Admin | +| POST | /EventBoard/ | Create new Event board | “Title”: “string”, “StartDate”:”datetime”, “EndDate:”datetime” | 201 | Admin, approvers | +| PUT | /EventBoard/ID | Update Event board | “Title”: “string”, “StartDate”:”datetime”, “EndDate:”datetime” | 200 | Admin, approvers | +| DELETE | /EventBoard/ID | Delete Event board | NA | 204 | Admin or author of event | +| GET | /EventBoard/ID | Get Event board details | NA | 200 | Open access | +| POST | /stickyNote/ | Create a new sticky note as Guest user | “WinComment”:”string” | 201 | Open access | +| GET | /stickyNotes/?Status=Live\&Event.ID | Get Sticky notes for an event Use query params to filter by event ID and Status | NA | 200 | Open access | +| GET | /stickyNotes/?Event.ID | Get Sticky notes for an event | NA | 200 | Admin, approvers | +| GET | /stickyNotes/ | Export sticky notes as CSV (eg:response.setContentType("text/csv")) Can optionally filter by: event ID, Status, isexported, collectionId | NA | 200 | Admin | +| PUT | /stickyNotes/ID | Edit sticky note, update status of sticky note to Approved or Archived | “WinComment”:”string” | 200 | Admin, approvers | +| POST | /StickyStatus | Create available statuses for stickyNotes | “StatusName”:”string” | 201 | Admin | +| GET | /StickyStatus | Get all statuses | NA | 200 | Admin | + +### Object Definitions + +> [!NOTE] +> Define the actual objects that your API returns. The example GET method above says it returns “all projects”, so we need to define what a “project” looks like. Example below. + +#### Users +| Field | Data type | +| :----------------- | :-------- | +| *User\_ID (PK)* | | +| *Username* | string | +| FullName | string | +| *Email* | string | +| *Password* | string | +| *Password2* | string | +| Auth\_ID (FK) | integer | +| StickyNoteId (FK) | integer | +| Event\_Id (FK) | integer | +| Collection\_Id(FK) | integer | +| Avatar | string | +| Bio | string | +| SocialLink | string | + +#### Sticky Notes +| Field | Data Type | +| :---------------------- | :-------- | +| Sticky\_ID (PK) | integer | +| WinComment | string | +| Guest | boolean | +| UserId (FK) | integer | +| Event\_Id (FK) | integrer | +| Collection\_Id (FK) | integrer | +| Sticky\_Status\_ID (FK) | integrer | + +> [!NOTE] +> ... etc + +### Database Schema +> [!NOTE] +> Insert an image of your database schema (could be a photo of a hand-drawn schema or a screenshot of a schema created using a tool such as ​​https://drawsql.app/). Example below. + +![Our database schema](./img/schema.png) + +## Front-end Implementation + +### Wireframes + +> [!NOTE] +> Insert image(s) of your wireframes (could be a photo of hand-drawn wireframes or a screenshot of wireframes created using a tool such as https://www.mockflow.com/). + +See all wireframes and how Admins, Approvers and Students would see the Win Wall website: https://www.figma.com/file/cvP0Kc7lAX39Fvo12C5aLa/Win-Wall?node-id=22%3A1345 + +#### Home Page +![](./img/homepage.png) + +#### Collection List Page +![](./img/listpage.png) + +> [!NOTE] +> etc... + +### Logo +![](./img/logo.png) + +### Colours +#### Primary + +![](./img/primary.png) + +#### Secondary + +![](./img/secondary.png) + +### Font + +(We will create a ‘highlight-text’ font style in CSS with the glow effect as per the above - to use on hero section) +Raleway +Google fonts: + +```css +@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap'); +font-family: 'Raleway', sans-serif; +``` +(When Raleway is not available the standard font to be used is the Calibri font family) + +![](./img/fonts.png) \ No newline at end of file From 9e7c8c7294066f08df54b635546273c09bcea4c3 Mon Sep 17 00:00:00 2001 From: SHS-Peb Date: Mon, 18 May 2026 00:38:49 +1000 Subject: [PATCH 2/6] added requested links to footer and adjusted CSS --- package-lock.json | 49 ++++---- package.json | 1 + src/App.css | 187 +++++++++++++++++++++++++++++++ src/App.jsx | 4 +- src/components/shared/Footer.jsx | 31 ++++- src/pages/Homepage.jsx | 3 + 6 files changed, 245 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index fe81dd9..e274ed5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "qrcode.react": "^4.2.0", "react": "^19.2.5", "react-dom": "^19.2.5", + "react-icons": "^5.6.0", "react-router-dom": "^7.14.1", "recharts": "^3.8.1" }, @@ -58,6 +59,7 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -267,31 +269,6 @@ "node": ">=6.9.0" } }, - "node_modules/@emnapi/core": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz", - "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@emnapi/wasi-threads": "1.2.1", - "tslib": "^2.4.0" - } - }, - "node_modules/@emnapi/runtime": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz", - "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, "node_modules/@emnapi/wasi-threads": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz", @@ -1034,6 +1011,7 @@ "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1086,6 +1064,7 @@ "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1211,6 +1190,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -1652,6 +1632,7 @@ "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -2787,6 +2768,7 @@ "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2866,6 +2848,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz", "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -2875,6 +2858,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz", "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -2882,6 +2866,15 @@ "react": "^19.2.5" } }, + "node_modules/react-icons": { + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz", + "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "19.2.5", "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.5.tgz", @@ -2894,6 +2887,7 @@ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "license": "MIT", + "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -2980,7 +2974,8 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -3251,6 +3246,7 @@ "integrity": "sha512-t7g7GVRpMXjNpa67HaVWI/8BWtdVIQPCL2WoozXXA7LBGEFK4AkkKkHx2hAQf5x1GZSlcmEDPkVLSGahxnEEZw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", @@ -3375,6 +3371,7 @@ "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/package.json b/package.json index 804154e..04b79e3 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "qrcode.react": "^4.2.0", "react": "^19.2.5", "react-dom": "^19.2.5", + "react-icons": "^5.6.0", "react-router-dom": "^7.14.1", "recharts": "^3.8.1" }, diff --git a/src/App.css b/src/App.css index f354cce..6c9046f 100644 --- a/src/App.css +++ b/src/App.css @@ -570,4 +570,191 @@ body { flex-direction: column; } +} + +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; +} + +.section-header p { + color: #c7c3f4; +} + +.section-header button, +.poll-form button, +.launch-poll-button { + border: none; + border-radius: 12px; + padding: 10px 14px; + background: linear-gradient(135deg, #8b5cf6, #ec4899); + color: white; + font-weight: 700; + cursor: pointer; +} + +.poll-form { + display: grid; + gap: 12px; + margin-top: 18px; +} + +.poll-form input { + width: 100%; + padding: 14px; + border-radius: 14px; + border: 1px solid rgba(199, 195, 244, 0.3); + background: rgba(255, 255, 255, 0.08); + color: white; +} + +.poll-form input::placeholder { + color: #c7c3f4; +} + +.live-poll-card, +.queued-poll-card { + margin-top: 14px; + padding: 16px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(199, 195, 244, 0.25); +} + +.live-poll-summary { + width: 100%; + display: flex; + align-items: center; + gap: 14px; + background: none; + border: none; + color: white; + text-align: left; + cursor: pointer; +} + +.poll-info { + flex: 1; +} + +.poll-info h3, +.queued-poll-info h3 { + margin: 0 0 6px; +} + +.poll-info p, +.queued-poll-info p { + margin: 0; + color: #c7c3f4; +} + +.active-badge { + background: rgba(34, 197, 94, 0.28); + color: #86efac; + padding: 6px 10px; + border-radius: 999px; + font-size: 13px; + font-weight: 700; +} + +.poll-arrow.open { + transform: rotate(90deg); +} + +.poll-results { + margin-top: 16px; +} + +.poll-result-row { + margin-top: 12px; +} + +.poll-result-label { + display: flex; + justify-content: space-between; + margin-bottom: 6px; +} + +.poll-result-bar { + height: 8px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.1); + overflow: hidden; +} + +.poll-result-fill { + height: 100%; + border-radius: 999px; + background: linear-gradient(135deg, #8b5cf6, #ec4899); +} + +.queued-poll-card { + display: flex; + justify-content: space-between; + align-items: center; +} + +/* FOOTER */ +.app-footer { + margin-top: 4rem; + padding: 2.5rem 1.5rem; + background: rgba(10, 10, 25, 0.95); + border-top: 1px solid rgba(255, 255, 255, 0.08); + text-align: center; +} + +.footer-brand h3 { + color: white; + margin-bottom: 0.4rem; +} + +.footer-brand p { + color: #b6b6d6; + font-size: 0.95rem; + margin-bottom: 1.8rem; +} + +.footer-socials { + display: flex; + justify-content: center; + gap: 1rem; + margin-bottom: 1.5rem; +} + +.footer-socials a { + width: 48px; + height: 48px; + border: 2px solid #ff4fa3; + border-radius: 14px; + display: flex; + align-items: center; + justify-content: center; + color: #ff4fa3; + font-size: 1.4rem; + transition: 0.2s ease; +} + +.footer-socials a:hover { + background: #ff4fa3; + color: white; + transform: translateY(-2px); +} + +.footer-links { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; +} + +.footer-links a { + color: #cfcfe7; + text-decoration: none; + font-size: 0.95rem; +} + +.footer-links a:hover { + color: #ff4fa3; } \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 6c52300..cf499a2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,6 +9,7 @@ import LoginPage from "./pages/LoginPage"; import CreateEventPage from "./pages/CreateEventPage"; import "./App.css"; import EventDetailsPage from "./pages/EventDetailsPage"; +import FacilitatorEventDetailsPage from "./pages/FacilitatorEventDetailsPage"; function App() { return ( @@ -31,7 +32,8 @@ function App() { } /> {/* EVENT DETAILS */} - } /> + } /> + } /> {/* RESULTS */} } /> diff --git a/src/components/shared/Footer.jsx b/src/components/shared/Footer.jsx index 8f92b90..c1b467f 100644 --- a/src/components/shared/Footer.jsx +++ b/src/components/shared/Footer.jsx @@ -1,7 +1,32 @@ +import { FaInstagram, FaLinkedin } from "react-icons/fa"; + function Footer() { return ( diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx index 56986c8..c95f054 100644 --- a/src/pages/Homepage.jsx +++ b/src/pages/Homepage.jsx @@ -1,5 +1,6 @@ import { useState } from "react"; import { useNavigate } from "react-router-dom"; +import Footer from "../components/shared/Footer"; function HomePage() { @@ -111,7 +112,9 @@ function HomePage() { +