From a40c707879761990b365d445d79aab1bb4027798 Mon Sep 17 00:00:00 2001 From: inolasv <57074850+inolasv@users.noreply.github.com> Date: Wed, 24 Jul 2024 20:41:50 -0400 Subject: [PATCH] Merge in Final Resources Page (#298) * add external ops section * preliminary resources page * add description * added email link * delete placeholder --------- Co-authored-by: Saloni Vaishnav Co-authored-by: Firmiana Wang --- public/assets/design-vectors/cloud.svg | 8 +- src/components/CloudComponent.js | 50 +++++++ src/components/OfficerModal.js | 7 +- src/components/Sponsor.js | 4 +- src/components/StayInTouchKey.js | 4 +- src/data/gethelp.json | 1 + src/data/resources.json | 133 ++++++++++++++++++ src/pages/dev.js | 3 +- src/pages/resources.js | 24 +++- src/sections/ExternalOpportunitiesSection.js | 49 +++++++ src/sections/GetHelpSection.js | 45 ++++++ src/sections/Navbar.js | 13 +- src/sections/NavbarMobile.js | 4 +- src/sections/SponsorsSection.js | 4 +- src/sections/UpcomingEventsSection.js | 4 +- src/styles/globals.css | 6 + src/styles/pages/Resources.module.css | 9 ++ .../ExternalOpportunitiesSection.module.css | 39 +++++ src/styles/sections/GetHelpSection.module.css | 48 +++++++ 19 files changed, 422 insertions(+), 33 deletions(-) create mode 100644 src/components/CloudComponent.js create mode 100644 src/data/gethelp.json create mode 100644 src/data/resources.json create mode 100644 src/sections/ExternalOpportunitiesSection.js create mode 100644 src/sections/GetHelpSection.js create mode 100644 src/styles/pages/Resources.module.css create mode 100644 src/styles/sections/ExternalOpportunitiesSection.module.css create mode 100644 src/styles/sections/GetHelpSection.module.css diff --git a/public/assets/design-vectors/cloud.svg b/public/assets/design-vectors/cloud.svg index bc4bf6bb..5a80d8f0 100644 --- a/public/assets/design-vectors/cloud.svg +++ b/public/assets/design-vectors/cloud.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/components/CloudComponent.js b/src/components/CloudComponent.js new file mode 100644 index 00000000..43b680c1 --- /dev/null +++ b/src/components/CloudComponent.js @@ -0,0 +1,50 @@ +/** + * Cloud Component + * @param color "pink" or "blue" + * @param size "small" or "medium" or "large" + */ +export default function Cloud({ color, size }) { + let lightColor; + let darkColor; + if (color === 'pink') { + lightColor = '#FDC8CC'; + darkColor = '#F65563'; + } else { + lightColor = '#B1F0F2'; + darkColor = '#31CACE'; + } + + let width; + if (size === 'small') { + width = '263'; + } else if (size === 'medium') { + width = '357'; + } else { + width = '457'; + } + + return ( + + + + + + ); +} diff --git a/src/components/OfficerModal.js b/src/components/OfficerModal.js index 78dbec8e..941f2bd8 100644 --- a/src/components/OfficerModal.js +++ b/src/components/OfficerModal.js @@ -26,11 +26,8 @@ function OfficerInformation(

- {name} - {' '} - - - {' '} - {position} + {/* eslint-disable-next-line react/jsx-one-expression-per-line */} + {name} - {position}{' '}

diff --git a/src/components/Sponsor.js b/src/components/Sponsor.js index 687c0ed0..eaeeaa97 100644 --- a/src/components/Sponsor.js +++ b/src/components/Sponsor.js @@ -4,8 +4,8 @@ import styles from '@/styles/components/Sponsor.module.css'; export default function Sponsor({ sponsor, url, tier }) { const link = url ? () => { - window.open(url, '_blank').focus(); - } + window.open(url, '_blank').focus(); // eslint-disable-line indent + } // eslint-disable-line indent : null; return ( diff --git a/src/components/StayInTouchKey.js b/src/components/StayInTouchKey.js index 5e131283..0eea7859 100644 --- a/src/components/StayInTouchKey.js +++ b/src/components/StayInTouchKey.js @@ -3,8 +3,8 @@ import styles from '@/styles/components/Key.module.css'; export default function Key({ children, url }) { const link = url ? () => { - window.open(url, '_blank').focus(); - } + window.open(url, '_blank').focus(); // eslint-disable-line indent + } // eslint-disable-line indent : null; return ( diff --git a/src/data/gethelp.json b/src/data/gethelp.json new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/src/data/gethelp.json @@ -0,0 +1 @@ +{} diff --git a/src/data/resources.json b/src/data/resources.json new file mode 100644 index 00000000..3ae55212 --- /dev/null +++ b/src/data/resources.json @@ -0,0 +1,133 @@ +[ + { + "type": "Mental Health, External", + "items": [ + { + "name": "National Suicide Prevention Lifeline", + "description": "988 to speak with a trained crisis counselor." + }, + + { + "name": "Crisis Text Line", + "description": "Text 741-741 to connect with a trained crisis counselor to receive crisis support via text message." + }, + + { + "name": "Champaign-Urbana Crisis Line", + "description": "This is similar to the national crisis line but specifically for those in the local area. This one is especially useful in that a crisis counselor can help you access local resources or help. Phone: (217) 359-4141" + }, + + { + "name": "911 Emergency", + "description": "You can also call 911 if the crisis is a life-threatening emergency. Make sure to notify the operator that it is a psychiatric emergency and ask for an officer trained in crisis intervention or trained to assist people experiencing a psychiatric emergency." + }, + + { + "name": "National Domestic Violence Hotline", + "description": "Call 800-799-SAFE (7233) to speak with trained experts who provide confidential support to anyone experiencing domestic violence or seeking resources and information." + }, + + { + "name": "Disaster Distress Helpline", + "description": "Call 1-800-985-5990 or text “TalkWithUs” to 66746. The disaster distress helpline provides immediate crisis counseling for people who are experiencing emotional distress related to any natural or human-caused disaster. The helpline is free, multilingual, confidential, and available 24 hours a day, seven days a week." + }, + + { + "name": "Rosecrance Substance/Mental Health Helpline", + "description": "Call 1-866-330-8729. This group does mental health triage at hospitals and offers partial hospitalization, mental health recovery services, and recovery living. They also have substance abuse centers (with one located in Champaign). Website: https://rosecrance.org" + }, + + { + "name": "Social Media Support", + "description": "If you are worried about someone on social media, you can contact the safety team on various social media sites (Facebook, Twitter, Instagram, Snapchat, YouTube, and Periscope) to ensure that they are connected with the help they need Support on Social Media." + }, + + { + "name": "Illinois WarmLine", + "description": "Website: http://illinoismentalhealthcollaborative.com, Phone: (866) 359-7953" + } + ] + }, + { + "type": "Mental Health, UIUC Specific", + "items": [ + { + "name": "Dean of Students Office", + "description": "A catch-all for general issues. Reach out to them for helping you advocate for yourself with staff, faculty, students, and other organizations on campus. Website: https://odos.illinois.edu/" + }, + + { + "name": "Counseling Center", + "description": "The UIUC Counseling Center is committed to providing a range of resources intended to help students develop improved coping skills to address emotional, interpersonal, and academic concerns. Website: https://www.counselingcenter.illinois.edu/" + }, + + { + "name": "Office of Access and Equity", + "description": "For reporting descrimination and barrier to access on campus. Website https://oae.illinois.edu/our-services/events/" + }, + + { + "name": "Telehelp", + "description": "Online counseling for students with United Healthcare. Website: http://telehelp4students.com" + }, + + { + "name": "McKinley Health Center Mental Health", + "description": "Website: https://mckinley.illinois.edu/medical-services/mental-health" + }, + + { + "name": "Psychological Services Center", + "description": "Website: http://psc.illinois.edu/, Phone: (217) 333-0041" + }, + + { + "name": "College of Engineering Embedded Counselor: Juvenal George, Psy.D", + "description": "Contact: juvegeor@illinois.edu" + }, + + { + "name": "College of LAS Embedded Counselor: Andrew Novinska, LCPC", + "description": "Contact: anovinsk@illinois.edu" + }, + + { + "name": "Full List of embedded counselors", + "description": "Website: https://counselingcenter.illinois.edu/about-us/embedded-counselors" + } + ] + }, + { + "type": "Academic", + "items": [ + { + "name": "Computer Science Undergraduate Advising", + "description": "Website: https://cs.illinois.edu/academics/undergraduate/undergraduate-advising, Phone: (217) 333-4428" + }, + + { + "name": "Grainger CARE (Center for Academic Resources In Engineering)", + "description": "Website: https://care.grainger.illinois.edu/, Phone: (217) 244-2678, Email: engr-care@illinois.edu" + }, + + { + "name": "UIUC Disability Resources and Educational Services", + "description": "Website: https://dres.illinois.edu/" + } + ] + }, + { + "type": "Other", + "items": [ + { + "name": "Women’s Resource Center", + "description": "A completely no-strings-attached*, anonymous resource center for women with a wide variety of resources. Website: https://wrc.illinois.edu/, *The WRC has 4 confidential advisors not mandated to report to the Title IX office. Pursuing accountability/safety options requires a report to the Title IX Coordinator in a survivor-led, well-informed, guided manner. More info at FAQs about Employee Reporting Obligations, At Illinois We Care and at Policy Definitions & Key Terms, At Illinois We Care" + }, + + { + "name": "National Sexual Assault Hotline", + "description": "Call 800-656-HOPE (4673) to connect with a trained staff member from a sexual assault service provider in your area that offers access to a range of free services. Crisis chat support is also available at Online Hotline." + } + ] + } +] diff --git a/src/pages/dev.js b/src/pages/dev.js index 6f4cbdda..212919ac 100644 --- a/src/pages/dev.js +++ b/src/pages/dev.js @@ -26,8 +26,7 @@ export default function Dev() { target="_blank" rel="noopener noreferrer" > - By - {' '} + By {/* eslint-disable-line react/jsx-one-expression-per-line */} Vercel Logo

Resources

-
- {/* */} -
-
-

Get Help

+ +
+

+ We've compiled some helpful resources for our members to utilize, + from external opportunities like job postings and scholarships, to + mental health and academic help. See something missing? Reach out to + us at illinoiswcs@gmail.com. +

+ +

External Opportunities

+ + +

Get Help

+ ); } diff --git a/src/sections/ExternalOpportunitiesSection.js b/src/sections/ExternalOpportunitiesSection.js new file mode 100644 index 00000000..2bd8f062 --- /dev/null +++ b/src/sections/ExternalOpportunitiesSection.js @@ -0,0 +1,49 @@ +import Cloud from '../components/CloudComponent'; +import styles from '@/styles/sections/ExternalOpportunitiesSection.module.css'; + +export default function ExternalOpportunitiesSection() { + return ( +
+
+ +
+ +
+

+ Coming soon! +
+ {/* eslint-disable-next-line react/jsx-one-expression-per-line */} + Check out {/* eslint-disable-next-line react/jsx-no-target-blank */} + + this link + {/* eslint-disable-next-line react/jsx-one-expression-per-line */} + {' '} + for now. +

+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ ); +} diff --git a/src/sections/GetHelpSection.js b/src/sections/GetHelpSection.js new file mode 100644 index 00000000..c737913c --- /dev/null +++ b/src/sections/GetHelpSection.js @@ -0,0 +1,45 @@ +import ComputerWindow from '../components/general/ComputerWindowComponent'; +import styles from '@/styles/sections/GetHelpSection.module.css'; +import resourcesData from '@/data/resources.json'; + +export default function GetHelpSection() { + return ( + +
+
+

Mental Health

+ {resourcesData[0].items.map((resource, index) => ( +
+

{resource.name}

+
  • {resource.description}
    • +
    + ))} + {resourcesData[1].items.map((resource, index) => ( +
    +

    {resource.name}

    +
  • {resource.description}
    • +
    + ))} +
    +
    +

    Academic

    + {resourcesData[2].items.map((resource, index) => ( +
    +

    {resource.name}

    +
  • {resource.description}
    • +
    + ))} +
    +
    +

    Other

    + {resourcesData[3].items.map((resource, index) => ( +
    +

    {resource.name}

    +
  • {resource.description}
    • +
    + ))} +
    +
    +     + ); +} diff --git a/src/sections/Navbar.js b/src/sections/Navbar.js index 4a54fd14..77e664b5 100644 --- a/src/sections/Navbar.js +++ b/src/sections/Navbar.js @@ -44,12 +44,7 @@ export default function WCSNavbar() { return (
    - wcs logo + wcs logo
    - {/* */} +
    ) ); diff --git a/src/sections/SponsorsSection.js b/src/sections/SponsorsSection.js index 8af5b980..1b575286 100644 --- a/src/sections/SponsorsSection.js +++ b/src/sections/SponsorsSection.js @@ -7,8 +7,8 @@ export default function SponsorsSection() {

    Our Sponsors

    - If you are interested in sponsoring us, please email - {' '} + {/* eslint-disable-next-line react/jsx-one-expression-per-line */} + If you are interested in sponsoring us, please email{' '} { const fetchEvents = async () => { try { - const eventsUrl = 'https://script.google.com/macros/s/AKfycbzXcTVpPJoRs2nCW_i9NEzG_sd_qpBcPofW_-8FVUZzTUzz8HPH4ab-RmkNNxNVDZOk/exec'; + // eslint-disable-next-line operator-linebreak + const eventsUrl = + 'https://script.google.com/macros/s/AKfycbzXcTVpPJoRs2nCW_i9NEzG_sd_qpBcPofW_-8FVUZzTUzz8HPH4ab-RmkNNxNVDZOk/exec'; const res = await fetch(eventsUrl); const { events: fetchedEvents } = await res.json(); setEvents( diff --git a/src/styles/globals.css b/src/styles/globals.css index 604aa746..a43d6815 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -43,6 +43,12 @@ --callout-border-rgb: 172, 175, 176; --card-rgb: 180, 185, 188; --card-border-rgb: 131, 134, 135; + + --wcs-pink: #f65563; + --wcs-blue: #31cace; + --light-pink: #fdc8cc; + --light-blue: #b1f0f2; + --light-light-pink: #fff8f9; } @media (prefers-color-scheme: dark) { diff --git a/src/styles/pages/Resources.module.css b/src/styles/pages/Resources.module.css new file mode 100644 index 00000000..501ea83e --- /dev/null +++ b/src/styles/pages/Resources.module.css @@ -0,0 +1,9 @@ +.descriptionContainer { + display: flex; +} + +.description { + display: inline; + padding: 2em; + text-align: center; +} diff --git a/src/styles/sections/ExternalOpportunitiesSection.module.css b/src/styles/sections/ExternalOpportunitiesSection.module.css new file mode 100644 index 00000000..0ce2e5a6 --- /dev/null +++ b/src/styles/sections/ExternalOpportunitiesSection.module.css @@ -0,0 +1,39 @@ +.container { + display: grid; + padding-bottom: 3em; +} + +.mainCloud { + grid-column: 2; + grid-row: 3; +} + +.cloudText { + grid-column: 2; + grid-row: 3; + justify-self: center; + align-self: center; + text-align: center; +} + +.cloud1 { + grid-column: 1; + grid-row: 1; +} + +.cloud2 { + grid-column: 4; + grid-row: 1; +} +.cloud3 { + grid-column: 1; + grid-row: 4; +} +.cloud4 { + grid-column: 2; + grid-row: 5; +} +.cloud5 { + grid-column: 4; + grid-row: 4; +} diff --git a/src/styles/sections/GetHelpSection.module.css b/src/styles/sections/GetHelpSection.module.css new file mode 100644 index 00000000..bb5a36df --- /dev/null +++ b/src/styles/sections/GetHelpSection.module.css @@ -0,0 +1,48 @@ +.container { + display: flex; + flex-direction: row; + width: 70em; +} + +.mentalhContainer { + display: flex; + flex-grow: 0; + flex-direction: column; + + border-left: 10px; + border-color: var(--light-pink); + background-color: var(--light-light-pink); + padding: 2em; +} + +.academicContainer { + display: flex; + flex-grow: 0; + flex-direction: column; + padding: 2em; +} + +.otherContainer { + display: flex; + flex-grow: 0; + flex-direction: column; + + border-right: 10px; + border-color: var(--light-pink); + background-color: var(--light-light-pink); + padding: 2em; +} + +.resourceItem { + flex-grow: 0; + padding: 1em; +} + +.resourceText { + font-size: small; +} + +.resourceName { + font-size: small; + text-decoration: underline; +}