From 843bf9595476c417fe5483440b4188f96ba3b6bc Mon Sep 17 00:00:00 2001 From: kaxada Date: Mon, 16 Oct 2023 18:36:48 +0300 Subject: [PATCH] fixed linting --- .github/workflows/firebase.yml | 8 +- .husky/pre-commit | 4 + .lintstagedrc | 3 + DEI.md | 103 +-- Guide.DEI.md | 117 ++-- README.md | 21 +- Template.DEI.md | 20 +- firebase.json | 6 +- package-lock.json | 2 +- package.json | 17 +- src/App.js | 76 +-- src/assets/images/icons/Apply.js | 38 +- src/assets/images/icons/GetBadged.js | 48 +- src/assets/images/icons/Review.js | 46 +- src/assets/images/index.js | 94 +-- src/assets/styles/global.scss | 179 +++--- src/assets/styles/variables.scss | 104 +-- .../AboutDeiBadging/AboutDeiMobile.js | 32 +- .../AboutDeiBadging/ApplicationProcess.js | 126 ++-- src/components/AboutDeiBadging/DeiBadge.js | 4 +- src/components/AboutDeiBadging/DeiFile.js | 70 +- src/components/AboutDeiBadging/Sidebar.js | 6 +- .../AboutDeiBadging/WhatIsDeiBadging.js | 76 +-- .../AboutDeiBadging/about-dei-mobile.scss | 112 ++-- src/components/ActiveNav/ActiveNav.js | 60 +- src/components/Carousel/CardCarousel.js | 26 +- src/components/Carousel/carousel.scss | 2 +- src/components/Faq/Faq.js | 92 +-- src/components/Faq/data.js | 8 +- src/components/Faq/faq.scss | 112 ++-- src/components/Footer/Footer.js | 18 +- src/components/Footer/footer.scss | 102 +-- src/components/Header/Header.js | 48 +- src/components/Header/header.scss | 2 +- src/components/HowItWorks/Card.js | 4 +- src/components/Jumbotron/Jumbotron.js | 30 +- src/components/Layout/Layout.js | 8 +- src/components/Layout/Layout.scss | 2 +- src/components/RandomString.js | 21 - src/components/SelectProject/SearchBar.js | 190 +++--- .../SelectProject/SelectedProjects.js | 64 +- src/components/SelectProject/searchbar.scss | 111 ++-- src/components/index.js | 34 +- src/components/loader/Loader.js | 32 +- src/components/loader/Spinner.js | 2 +- src/components/loader/loader.scss | 62 +- src/contexts/DataContext.js | 66 +- src/contexts/DesktopContext.js | 24 +- src/hooks/fetchProjects.js | 4 +- src/pages/AboutDeiBadging/About.js | 64 +- src/pages/AboutDeiBadging/about.scss | 540 ++++++++-------- .../GetStartedBadging/GetStartedBadging.js | 14 +- .../GetStartedBadging/getStartedBadging.scss | 2 +- src/pages/Home/Home.js | 20 +- src/pages/Home/data.js | 20 +- src/pages/Home/home.scss | 2 +- .../NewBadgingRequirements/LatestBadging.scss | 2 +- .../LatestBadgingSample.js | 14 +- .../ProjectBadgingSuccess.js | 120 ++-- .../ProjectBadgingSuccess.scss | 194 +++--- src/pages/Projects/Projects.js | 390 ++++++----- src/pages/Projects/project.scss | 605 +++++++++--------- .../SelectProjectRepo/SelectProjectRepo.js | 248 +++---- .../SelectProjectRepo/selectProjectRepo.scss | 319 ++++----- src/pages/index.js | 24 +- webpack.config.js | 140 ++-- 66 files changed, 2612 insertions(+), 2542 deletions(-) create mode 100755 .husky/pre-commit create mode 100644 .lintstagedrc delete mode 100644 src/components/RandomString.js diff --git a/.github/workflows/firebase.yml b/.github/workflows/firebase.yml index a4cec78..d74e50f 100644 --- a/.github/workflows/firebase.yml +++ b/.github/workflows/firebase.yml @@ -1,14 +1,14 @@ name: Deploy to Firebase Hosting on PR -'on': pull_request +"on": pull_request jobs: build_and_preview: - if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}' + if: "${{ github.event.pull_request.head.repo.full_name == github.repository }}" runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - run: npm ci && npm run build - uses: FirebaseExtended/action-hosting-deploy@v0 with: - repoToken: '${{ secrets.GITHUB_TOKEN }}' - firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BADGING_PROJECT }}' + repoToken: "${{ secrets.GITHUB_TOKEN }}" + firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_BADGING_PROJECT }}" projectId: badging-project diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..3e1cef8 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npm run precommit diff --git a/.lintstagedrc b/.lintstagedrc new file mode 100644 index 0000000..b99a070 --- /dev/null +++ b/.lintstagedrc @@ -0,0 +1,3 @@ +{ + "*.{js,jsx,ts,tsx,json,md,html,css,scss}": ["npm run format"] +} diff --git a/DEI.md b/DEI.md index 902a14b..bd5b03d 100644 --- a/DEI.md +++ b/DEI.md @@ -10,63 +10,66 @@ The DEI.md file was originally created in the CHAOSS project. This comment provi ### _Include a description of the scope of the DEI.md file. For example, does this DEI.md file cover one particular repository, a collection of repositories, or an entire organization?_ - -[Project Name] prioritizes and reflects on DEI through a regular review of project policies and performance based on the ever-evolving [CHAOSS project](https://chaoss.community) DEI metrics and information in the [All In DEI Resource Hub](https://allinopensource.org/maintainers/DEI-resources/). +[Project Name] prioritizes and reflects on DEI through a regular review of project policies and performance based on the ever-evolving [CHAOSS project](https://chaoss.community) DEI metrics and information in the [All In DEI Resource Hub](https://allinopensource.org/maintainers/DEI-resources/). [Project Name] has reflected on DEI related to: 1. [Project Access](https://chaoss.community/?p=4953) -* Description of how your project addresses project access. A sample description is provided in the following points. These points are not required for your project but are meant to help consider things you could be doing or are already doing. The points could also include efforts that your project is doing but are not listed here: - - * Project access is addressed in the [Project Name] through various efforts. Through these efforts, we aim to support access for all. Specific efforts in our project include: - 1. All virtual meetings are transcribed via the Zoom annotation tool, and members can join via their computer or phone. Video is not required to participate in virtual meetings. - 2. Virtual meetings are attentive to global time zones. While most of our meetings occur during times that are most easily accessed by members in North America, South America, Western Europe, and Africa, virtual meetings are also held to support [Project Name] members in Asia-Pacific and Eastern Europe. - 3. [Project Name] project maintainers and merge request coaches span global time zones and work asynchronously with contributors across the world. - 4. Translation services are provided for all website pages. - 5. All areas of [Project Name] are considered open to community contributions. A stated goal of our project is that “everyone can contribute." - 6. The [Project Name] SaaS product is conformant with the [Voluntary Product Accessibility Template (VPAT 2.4)](https://www.section508.gov/sell/vpat/) revised in June 2023 as well as to level AA of the [World Wide Web Consortium (W3C) Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/). - 7. [Project Name] is developing a unified contributor program that recognizes and rewards non-code contributors, including contributions through events, blog posts, and comments in issues and merge requests. + +- Description of how your project addresses project access. A sample description is provided in the following points. These points are not required for your project but are meant to help consider things you could be doing or are already doing. The points could also include efforts that your project is doing but are not listed here: + + - Project access is addressed in the [Project Name] through various efforts. Through these efforts, we aim to support access for all. Specific efforts in our project include: + 1. All virtual meetings are transcribed via the Zoom annotation tool, and members can join via their computer or phone. Video is not required to participate in virtual meetings. + 2. Virtual meetings are attentive to global time zones. While most of our meetings occur during times that are most easily accessed by members in North America, South America, Western Europe, and Africa, virtual meetings are also held to support [Project Name] members in Asia-Pacific and Eastern Europe. + 3. [Project Name] project maintainers and merge request coaches span global time zones and work asynchronously with contributors across the world. + 4. Translation services are provided for all website pages. + 5. All areas of [Project Name] are considered open to community contributions. A stated goal of our project is that “everyone can contribute." + 6. The [Project Name] SaaS product is conformant with the [Voluntary Product Accessibility Template (VPAT 2.4)](https://www.section508.gov/sell/vpat/) revised in June 2023 as well as to level AA of the [World Wide Web Consortium (W3C) Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/). + 7. [Project Name] is developing a unified contributor program that recognizes and rewards non-code contributors, including contributions through events, blog posts, and comments in issues and merge requests. 2. [Communication Transparency](https://chaoss.community/?p=4957) -* Description of how your project addresses communication transparency. A sample description is provided in the following points. These points are not required for your project but are meant to help consider things you could be doing or are already doing. The points could also include efforts that your project is doing but are not listed here: - - * Communication Transparency is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support transparency for all. Specific efforts in our project include: - 1. All project documentation is publicly available via Google Docs and shared via our [Project Name] community handbook. - 2. Appropriate documentation is shared at the start of every working group meeting. - 3. Slack channels are regularly reviewed to determine if they should be public or private channels as well as considering if a channel is needed any longer. - 4. All virtual meetings are recorded and uploaded to our project YouTube channel. - 5. Decisions that impact the project are shared across numerous working groups meetings and associated Slack channels to ensure that as many project members can participate in the process. - 6. Any information that cannot be made public (e.g. security and abuse vulnerabilities, financial information, private data) is marked as internal to the project. All of the internal information is listed publicly by name and any other information not marked as internal are available externally to the public. - 7. [Project Name] operates using a single source of truth for all community members. - 8. [Project Name]'s handbook is public and open to contribution. - 9. [Project Name] operates an unfiltered YouTube channel that shares all publicly available meetings, recordings, and community pairing sessions. - + +- Description of how your project addresses communication transparency. A sample description is provided in the following points. These points are not required for your project but are meant to help consider things you could be doing or are already doing. The points could also include efforts that your project is doing but are not listed here: + + - Communication Transparency is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support transparency for all. Specific efforts in our project include: + 1. All project documentation is publicly available via Google Docs and shared via our [Project Name] community handbook. + 2. Appropriate documentation is shared at the start of every working group meeting. + 3. Slack channels are regularly reviewed to determine if they should be public or private channels as well as considering if a channel is needed any longer. + 4. All virtual meetings are recorded and uploaded to our project YouTube channel. + 5. Decisions that impact the project are shared across numerous working groups meetings and associated Slack channels to ensure that as many project members can participate in the process. + 6. Any information that cannot be made public (e.g. security and abuse vulnerabilities, financial information, private data) is marked as internal to the project. All of the internal information is listed publicly by name and any other information not marked as internal are available externally to the public. + 7. [Project Name] operates using a single source of truth for all community members. + 8. [Project Name]'s handbook is public and open to contribution. + 9. [Project Name] operates an unfiltered YouTube channel that shares all publicly available meetings, recordings, and community pairing sessions. + 3. [Newcomer Experiences](https://chaoss.community/?p=4891) -* Description of how your project addresses the newcomer experience. A sample description is provided in the following points. These points are not required for your project but are meant to help consider things you could be doing or are already doing. The points could also include efforts that your project is doing but are not listed here: - - * The newcomer experience is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support the newcomer experience for all new members. Specific efforts in our project include: - 1. Newcomer events are held on a weekly basis in the [Project Name]. These events include newcomer orientation sessions and office hours open to all with an interest. - 2. [Project Name] has a dedicated #newcomer channel on Slack where newcomers can join and learn about different ways to connect with the project. In the channel, we have a newcomer bot that provides detailed information on how to engage with the [Project Name]. The bot is available by typing ‘newbie’ in the #newcomer Slack channel. - 3. A quickstart guide for newcomers is posted on our website and made available through the main website navigation. - 4. [Project Name] uses weekly triage reports on first time contributors who are awaiting a response to a merge request. This ensures newcomers always hear back from a real person about their merge request. - 5. [Project Name] reviews contributor documentation for inclusivity of newcomers, including improvements to documentation navigation, technical content and jargon, and improving workflow processes for newcomers. - 6. [Project Name] automatically applies a 1st contribution label to first-time contributors who open a merge request so they may be better identified and assisted by reviewers and coaches. - 7. [Project Name]'s contributor documentation includes a full walkthrough tutorial for newcomers to make their first contribution. This includes setting up the development environment, making code changes, documentation updates and ways to find support. - 8. [Project Name] has a dedicated Contributor Success team to facilitate newcomer onboarding, help newcomers find issues, assist newcomers through merge requests and communicate to reviewers on the behalf of contributors to ensure a smoother review experience. - 9. [Project Name] offers a community fork which helps newcomers collaborate with other contributors under a shared fork. This means newcomers do not have to maintain and update a personal fork. - 10. [Project Name] tracks metrics for new contributors with the goal of increasing total contributors to the project and helping convert new contributors into returning contributors. + +- Description of how your project addresses the newcomer experience. A sample description is provided in the following points. These points are not required for your project but are meant to help consider things you could be doing or are already doing. The points could also include efforts that your project is doing but are not listed here: + + - The newcomer experience is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support the newcomer experience for all new members. Specific efforts in our project include: + 1. Newcomer events are held on a weekly basis in the [Project Name]. These events include newcomer orientation sessions and office hours open to all with an interest. + 2. [Project Name] has a dedicated #newcomer channel on Slack where newcomers can join and learn about different ways to connect with the project. In the channel, we have a newcomer bot that provides detailed information on how to engage with the [Project Name]. The bot is available by typing ‘newbie’ in the #newcomer Slack channel. + 3. A quickstart guide for newcomers is posted on our website and made available through the main website navigation. + 4. [Project Name] uses weekly triage reports on first time contributors who are awaiting a response to a merge request. This ensures newcomers always hear back from a real person about their merge request. + 5. [Project Name] reviews contributor documentation for inclusivity of newcomers, including improvements to documentation navigation, technical content and jargon, and improving workflow processes for newcomers. + 6. [Project Name] automatically applies a 1st contribution label to first-time contributors who open a merge request so they may be better identified and assisted by reviewers and coaches. + 7. [Project Name]'s contributor documentation includes a full walkthrough tutorial for newcomers to make their first contribution. This includes setting up the development environment, making code changes, documentation updates and ways to find support. + 8. [Project Name] has a dedicated Contributor Success team to facilitate newcomer onboarding, help newcomers find issues, assist newcomers through merge requests and communicate to reviewers on the behalf of contributors to ensure a smoother review experience. + 9. [Project Name] offers a community fork which helps newcomers collaborate with other contributors under a shared fork. This means newcomers do not have to maintain and update a personal fork. + 10. [Project Name] tracks metrics for new contributors with the goal of increasing total contributors to the project and helping convert new contributors into returning contributors. 4. [Inclusive Leadership](https://chaoss.community/?p=3522) -* Description of how your project addresses inclusive leadership. A sample description is provided in the following points. These points are not required for your project but are meant to help consider things you could be doing or are already doing. The points could also include efforts that your project is doing but are not listed here: - - * Inclusive leadership is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support leadership opportunities for project members with an interest. Specific efforts in our project include: - 1. Our [Project Name] governance document is reviewed and affirmed on a yearly basis to identify and articulate roles within the project that help guide the strategic direction of the project. - 2. Global chapters of our project are led by people from those regions. Chapter leads help set the strategic direction of the [Project Name] as best suited in different global settings. - 3. Working group meetings provide the opportunity to be led by different people at each meeting. While each working group has identified ‘chairs’, leading a meeting provides an opportunity to lead for all members. - 4. Our projects ensures a diverse candidate slate and interview panel when selecting new maintainers. - 5. All of our project maintainers have completed neurodiversity and other DEI training. - 6. One or more of our project maintainers are a member of a working group related to a DEI initiative. - 7. One or more of our project maintainers participate in DEI group meetings or events. + +- Description of how your project addresses inclusive leadership. A sample description is provided in the following points. These points are not required for your project but are meant to help consider things you could be doing or are already doing. The points could also include efforts that your project is doing but are not listed here: + + - Inclusive leadership is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support leadership opportunities for project members with an interest. Specific efforts in our project include: + 1. Our [Project Name] governance document is reviewed and affirmed on a yearly basis to identify and articulate roles within the project that help guide the strategic direction of the project. + 2. Global chapters of our project are led by people from those regions. Chapter leads help set the strategic direction of the [Project Name] as best suited in different global settings. + 3. Working group meetings provide the opportunity to be led by different people at each meeting. While each working group has identified ‘chairs’, leading a meeting provides an opportunity to lead for all members. + 4. Our projects ensures a diverse candidate slate and interview panel when selecting new maintainers. + 5. All of our project maintainers have completed neurodiversity and other DEI training. + 6. One or more of our project maintainers are a member of a working group related to a DEI initiative. + 7. One or more of our project maintainers participate in DEI group meetings or events. [Project Name] recognizes that the inclusion of the DEI.md file and the provided reflection on the four DEI metrics does not ensure community safety nor community inclusiveness. The inclusion of the DEI.md file and CHAOSS DEI review statement signals that we are committed to continually improving our DEI by regularly reviewing and reflecting on our project DEI practices, and on a regular and annual basis, updating this statement and project policies in-line with the review findings. @@ -76,6 +79,6 @@ Last Reviewed: [Enter Date] ## Additional Recommendations Regarding the DEI.md File -1. If using a development platform, place the DEI.md file in an organizationally available repository, similar to your CODE_OF_CONDUCT.md file +1. If using a development platform, place the DEI.md file in an organizationally available repository, similar to your CODE_OF_CONDUCT.md file 2. If an organizationally availble folder is not available or used, place the DEI.md file in a community repository -3. If you have a project website, provide a link to your DEI.md file from the main project navigation +3. If you have a project website, provide a link to your DEI.md file from the main project navigation diff --git a/Guide.DEI.md b/Guide.DEI.md index 8727938..4f9b5d7 100644 --- a/Guide.DEI.md +++ b/Guide.DEI.md @@ -1,75 +1,84 @@ # Authoring Your Project's DEI.md File -1. If using a development platform, place the DEI.md file in a public, organizationally available repository, similar to your CODE_OF_CONDUCT.md file +1. If using a development platform, place the DEI.md file in a public, organizationally available repository, similar to your CODE_OF_CONDUCT.md file 2. If an organizationally availble folder is not available or used, place the DEI.md file in a public community repository 3. If you have a project website, provide a link to your DEI.md file from the main project navigation 4. The Sample DEI Project Statement indicates required statements (Required) and sample statements (Sample). - - (__Required:Changes Needed__) indicates that the author provide information specific to their project. - - (__Required:No Changes__) indicates that the statement should be included with no changes made. - - (__Sample__) indicates that the statement contains information that may or may not be useful to the author. Sample statements can be modified and should only be included if they are applicable to your project. - + + - (**Required:Changes Needed**) indicates that the author provide information specific to their project. + - (**Required:No Changes**) indicates that the statement should be included with no changes made. + - (**Sample**) indicates that the statement contains information that may or may not be useful to the author. Sample statements can be modified and should only be included if they are applicable to your project. + 5. Your project must attend to all metrics described below and must include at least one described effort associated with each metric. -6. Always replace [Project Name] with the name of your project. - -7. Do not use this file to create your DEI.md file. This file is only serves as a guide. Please download and use the [DEI.md Template](https://github.com/AllInOpenSource/ProjectBadging/blob/main/Template.DEI.md) when creating your own DEI.md file. - -*** +6. Always replace [Project Name] with the name of your project. + +7. Do not use this file to create your DEI.md file. This file is only serves as a guide. Please download and use the [DEI.md Template](https://github.com/AllInOpenSource/ProjectBadging/blob/main/Template.DEI.md) when creating your own DEI.md file. + +--- # (Required:No Changes) DEI Project Statement -(__Required:Changes Needed__) Include Your Project Name/Logo Here +(**Required:Changes Needed**) Include Your Project Name/Logo Here -(__Required:Changes Needed__) Include a description of the scope of the DEI.md file. For example, does this DEI.md file cover one particular repository, a collection of repositories, or an entire organization? +(**Required:Changes Needed**) Include a description of the scope of the DEI.md file. For example, does this DEI.md file cover one particular repository, a collection of repositories, or an entire organization? -(__Required:No Changes__) [Project Name] prioritizes and reflects on DEI through a regular review of project policies and performance. This reflection is documented, in part, in the following DEI.md file based on specific [CHAOSS](https://chaoss.community) DEI metrics. +(**Required:No Changes**) [Project Name] prioritizes and reflects on DEI through a regular review of project policies and performance. This reflection is documented, in part, in the following DEI.md file based on specific [CHAOSS](https://chaoss.community) DEI metrics. ### (Required:No Changes) [Project Access](https://chaoss.community/?p=4953) -(__Required:No Changes__) Project access is addressed in the [Project Name] through various efforts. Through these efforts, we aim to support access for all. Specific efforts in our project include: - 1. (__Sample__) All virtual meetings are transcribed via the Zoom annotation tool, and members can join via their computer or phone. Video is not required to participate in virtual meetings. - 2. (__Sample__) Virtual meetings are attentive to global time zones. While most of our meetings occur during times that are most easily accessed by members in North America, South America, Western Europe, and Africa, virtual meetings are also held to support [Project Name] members in Asia-Pacific and Eastern Europe. - 3. (__Sample__) [Project Name] project maintainers and merge request coaches span global time zones and work asynchronously with contributors across the world. - 4. (__Sample__) Translation services are provided for all website pages. - 5. (__Sample__) All areas of [Project Name] are considered open to community contributions. A stated goal of our project is that “everyone can contribute." - 6. (__Sample__) The [Project Name] SaaS product is conformant with the [Voluntary Product Accessibility Template (VPAT 2.4)](https://www.section508.gov/sell/vpat/) revised in June 2023 as well as to level AA of the [World Wide Web Consortium (W3C) Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/). - 7. (__Sample__) [Project Name] is developing a unified contributor program that recognizes and rewards non-code contributors, including contributions through events, blog posts, and comments in issues and merge requests. + +(**Required:No Changes**) Project access is addressed in the [Project Name] through various efforts. Through these efforts, we aim to support access for all. Specific efforts in our project include: + +1. (**Sample**) All virtual meetings are transcribed via the Zoom annotation tool, and members can join via their computer or phone. Video is not required to participate in virtual meetings. +2. (**Sample**) Virtual meetings are attentive to global time zones. While most of our meetings occur during times that are most easily accessed by members in North America, South America, Western Europe, and Africa, virtual meetings are also held to support [Project Name] members in Asia-Pacific and Eastern Europe. +3. (**Sample**) [Project Name] project maintainers and merge request coaches span global time zones and work asynchronously with contributors across the world. +4. (**Sample**) Translation services are provided for all website pages. +5. (**Sample**) All areas of [Project Name] are considered open to community contributions. A stated goal of our project is that “everyone can contribute." +6. (**Sample**) The [Project Name] SaaS product is conformant with the [Voluntary Product Accessibility Template (VPAT 2.4)](https://www.section508.gov/sell/vpat/) revised in June 2023 as well as to level AA of the [World Wide Web Consortium (W3C) Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG21/). +7. (**Sample**) [Project Name] is developing a unified contributor program that recognizes and rewards non-code contributors, including contributions through events, blog posts, and comments in issues and merge requests. ### (Required:No Changes) [Communication Transparency](https://chaoss.community/?p=4957) -(__Required:No Changes__) Communication Transparency is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support transparency for all. Specific efforts in our project include: - 1. (__Sample__) All project documentation is publicly available via Google Docs and shared via our [Project Name] community handbook. - 2. (__Sample__) Appropriate documentation is shared at the start of every working group meeting. - 3. (__Sample__) Slack channels are regularly reviewed to determine if they should be public or private channels as well as considering if a channel is needed any longer. - 4. (__Sample__) All virtual meetings are recorded and uploaded to our project YouTube channel. - 5. (__Sample__) Decisions that impact the project are shared across numerous working groups meetings and associated Slack channels to ensure that as many project members can participate in the process. - 6. (__Sample__) Any information that cannot be made public (e.g., security and abuse vulnerabilities, financial information, private data) is marked as internal to the project. All of the internal information is listed publicly by name and any other information not marked as internal are available externally to the public. - 7. (__Sample__) [Project Name] operates using a single source of truth for all community members. - 8. (__Sample__) [Project Name]'s handbook is public and open to contribution. - 9. (__Sample__) [Project Name] operates an unfiltered YouTube channel that shares all publicly available meetings, recordings, and community pairing sessions. - + +(**Required:No Changes**) Communication Transparency is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support transparency for all. Specific efforts in our project include: + +1. (**Sample**) All project documentation is publicly available via Google Docs and shared via our [Project Name] community handbook. +2. (**Sample**) Appropriate documentation is shared at the start of every working group meeting. +3. (**Sample**) Slack channels are regularly reviewed to determine if they should be public or private channels as well as considering if a channel is needed any longer. +4. (**Sample**) All virtual meetings are recorded and uploaded to our project YouTube channel. +5. (**Sample**) Decisions that impact the project are shared across numerous working groups meetings and associated Slack channels to ensure that as many project members can participate in the process. +6. (**Sample**) Any information that cannot be made public (e.g., security and abuse vulnerabilities, financial information, private data) is marked as internal to the project. All of the internal information is listed publicly by name and any other information not marked as internal are available externally to the public. +7. (**Sample**) [Project Name] operates using a single source of truth for all community members. +8. (**Sample**) [Project Name]'s handbook is public and open to contribution. +9. (**Sample**) [Project Name] operates an unfiltered YouTube channel that shares all publicly available meetings, recordings, and community pairing sessions. + ### (Required:No Changes) [Newcomer Experiences](https://chaoss.community/?p=4891) -(__Required:No Changes__) The newcomer experience is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support the newcomer experience for all new members. Specific efforts in our project include: -1. (__Sample__) Newcomer events are held on a weekly basis in the [Project Name]. These events include newcomer orientation sessions and office hours open to all with an interest. -2. (__Sample__) [Project Name] has a dedicated #newcomer channel on Slack where newcomers can join and learn about different ways to connect with the project. In the channel, we have a newcomer bot that provides detailed information on how to engage with the [Project Name]. The bot is available by typing ‘newbie’ in the #newcomer Slack channel. -3. (__Sample__) A quick start guide for newcomers is posted on our website and made available through the main website navigation. -4. (__Sample__) [Project Name] uses weekly triage reports on first time contributors who are awaiting a response to a merge request. This ensures newcomers always hear back from a real person about their merge request. -5. (__Sample__) [Project Name] reviews contributor documentation for inclusivity of newcomers, including improvements to documentation navigation, technical content and jargon, and improving workflow processes for newcomers. -6. (__Sample__) [Project Name] automatically applies a 1st contribution label to first-time contributors who open a merge request so they may be better identified and assisted by reviewers and coaches. -7. (__Sample__) [Project Name]'s contributor documentation includes a full walkthrough tutorial for newcomers to make their first contribution. This includes setting up the development environment, making code changes, documentation updates and ways to find support. -8. (__Sample__) [Project Name] has a dedicated Contributor Success team to facilitate newcomer onboarding, help newcomers find issues, assist newcomers through merge requests and communicate to reviewers on the behalf of contributors to ensure a smoother review experience. -9. (__Sample__) [Project Name] offers a community fork which helps newcomers collaborate with other contributors under a shared fork. This means newcomers do not have to maintain and update a personal fork. -10. (__Sample__) [Project Name] tracks metrics for new contributors with the goal of increasing total contributors to the project and helping convert new contributors into returning contributors. + +(**Required:No Changes**) The newcomer experience is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support the newcomer experience for all new members. Specific efforts in our project include: + +1. (**Sample**) Newcomer events are held on a weekly basis in the [Project Name]. These events include newcomer orientation sessions and office hours open to all with an interest. +2. (**Sample**) [Project Name] has a dedicated #newcomer channel on Slack where newcomers can join and learn about different ways to connect with the project. In the channel, we have a newcomer bot that provides detailed information on how to engage with the [Project Name]. The bot is available by typing ‘newbie’ in the #newcomer Slack channel. +3. (**Sample**) A quick start guide for newcomers is posted on our website and made available through the main website navigation. +4. (**Sample**) [Project Name] uses weekly triage reports on first time contributors who are awaiting a response to a merge request. This ensures newcomers always hear back from a real person about their merge request. +5. (**Sample**) [Project Name] reviews contributor documentation for inclusivity of newcomers, including improvements to documentation navigation, technical content and jargon, and improving workflow processes for newcomers. +6. (**Sample**) [Project Name] automatically applies a 1st contribution label to first-time contributors who open a merge request so they may be better identified and assisted by reviewers and coaches. +7. (**Sample**) [Project Name]'s contributor documentation includes a full walkthrough tutorial for newcomers to make their first contribution. This includes setting up the development environment, making code changes, documentation updates and ways to find support. +8. (**Sample**) [Project Name] has a dedicated Contributor Success team to facilitate newcomer onboarding, help newcomers find issues, assist newcomers through merge requests and communicate to reviewers on the behalf of contributors to ensure a smoother review experience. +9. (**Sample**) [Project Name] offers a community fork which helps newcomers collaborate with other contributors under a shared fork. This means newcomers do not have to maintain and update a personal fork. +10. (**Sample**) [Project Name] tracks metrics for new contributors with the goal of increasing total contributors to the project and helping convert new contributors into returning contributors. ### (Required:No Changes) [Inclusive Leadership](https://chaoss.community/?p=3522) -(__Required:No Changes__) Inclusive leadership is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support leadership opportunities for project members with an interest. Specific efforts in our project include: - 1. (__Sample__) Our [Project Name] governance document is reviewed and affirmed on a yearly basis to identify and articulate roles within the project that help guide the strategic direction of the project. - 2. (__Sample__) Global chapters of our project are led by people from those regions. Chapter leads help set the strategic direction of the [Project Name] as best suited in different global settings. - 3. (__Sample__) Working group meetings provide the opportunity to be led by different people at each meeting. While each working group has identified ‘chairs’, leading a meeting provides an opportunity to lead for all members. - 4. (__Sample__) Our projects ensures a diverse candidate slate and interview panel when selecting new maintainers. - 5. (__Sample__) All of our project maintainers have completed neurodiversity and other DEI training. - 6. (__Sample__) One or more of our project maintainers are a member of a working group related to a DEI initiative. - 7. (__Sample__) One or more of our project maintainers participate in DEI group meetings or events. -(__Required:No Changes__) We recognize that the inclusion of the DEI.md file and the provided reflection on the specific DEI metrics does not ensure community safety nor community inclusiveness. The inclusion of the DEI.md file signals that we, as a project, are committed to centering DEI in our project and regularly reviewing and reflecting on our project DEI practices. +(**Required:No Changes**) Inclusive leadership is addressed in the [Project Name] through a variety of different efforts. Through these efforts, we aim to support leadership opportunities for project members with an interest. Specific efforts in our project include: + +1. (**Sample**) Our [Project Name] governance document is reviewed and affirmed on a yearly basis to identify and articulate roles within the project that help guide the strategic direction of the project. +2. (**Sample**) Global chapters of our project are led by people from those regions. Chapter leads help set the strategic direction of the [Project Name] as best suited in different global settings. +3. (**Sample**) Working group meetings provide the opportunity to be led by different people at each meeting. While each working group has identified ‘chairs’, leading a meeting provides an opportunity to lead for all members. +4. (**Sample**) Our projects ensures a diverse candidate slate and interview panel when selecting new maintainers. +5. (**Sample**) All of our project maintainers have completed neurodiversity and other DEI training. +6. (**Sample**) One or more of our project maintainers are a member of a working group related to a DEI initiative. +7. (**Sample**) One or more of our project maintainers participate in DEI group meetings or events. + +(**Required:No Changes**) We recognize that the inclusion of the DEI.md file and the provided reflection on the specific DEI metrics does not ensure community safety nor community inclusiveness. The inclusion of the DEI.md file signals that we, as a project, are committed to centering DEI in our project and regularly reviewing and reflecting on our project DEI practices. -(__Required:Changes Needed__) If you do not feel that the DEI.md file appropriately addresses concerns you have about community safety and inclusiveness, please let us know in the [Project Name]. You can do this by checking out our Code of Conduct (provide a link to your code of conduct) to raise concerns you have with the Code of Conduct team. +(**Required:Changes Needed**) If you do not feel that the DEI.md file appropriately addresses concerns you have about community safety and inclusiveness, please let us know in the [Project Name]. You can do this by checking out our Code of Conduct (provide a link to your code of conduct) to raise concerns you have with the Code of Conduct team. -(__Required:Changes Needed__) Last Reviewed: [Enter Date] +(**Required:Changes Needed**) Last Reviewed: [Enter Date] diff --git a/README.md b/README.md index acdfd38..6d200ec 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,13 @@ # DEI Project Badging ## About DEI Project Badging + The DEI Project Badging Initiative is a collaboration between [AllIn](https://allinopensource.org/) and [CHAOSS](https://chaoss.community/) that awards badges to open-source projects that demonstrate diversity and inclusion. This initiative promotes leadership, self-reflection, and self-improvement on issues critical to building the Internet as a social good. The DEI project badges help open source project maintainers showcase their ongoing commitment to improving and supporting diversity, equity, and inclusion. - ## How does DEI Project Badging work? + - Open Source projects submit their project repository containing a DEI.md file. Check out what a DEI.md file entails and how to create one [here](https://github.com/AllInOpenSource/All-In/blob/main/DEI.md). - The project badging scanner bot will search through the DEI.md file in the specified repository for evidence of required metrics. @@ -14,25 +15,27 @@ The DEI project badges help open source project maintainers showcase their ongoi - Once the scan is complete, the project will receive a markdown snippet that can be included in the README.md as an image of the DEI Project Badge earned. - Upon the conclusion of each badging level, the project receives an inclusive language report on how to improve its DEI efforts in order to apply for and earn the next badging level. -Badging process - + Badging process ## Badging Levels + Currently, the DEI Project Badges are available in four levels -| Level | Badge | Requirements Met -|--------------|--------------|------------------------------------- -| Bronze | ![Bronze-Badge](https://github.com/Anita-ihuman/ProjectBadging/assets/62384659/804cf75b-0c58-4fef-bf3d-a8d6f88c9f1f) | Presence of DEI.md File -| Silver | ![Silver-Badge](https://github.com/Anita-ihuman/ProjectBadging/assets/62384659/952bb182-a652-49bc-890a-1c75aab7c8f4) | Comming soon -| Gold | ![Gold-Badge](https://github.com/Anita-ihuman/ProjectBadging/assets/62384659/0471a7a5-46c0-4056-ada1-c7ad09f31d55) | Comming soon -| Platinum | ![Platinum](https://github.com/Anita-ihuman/ProjectBadging/assets/62384659/9de89540-ae31-4197-91b7-c978fcaac204) | Comming soon +| Level | Badge | Requirements Met | +| -------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------- | +| Bronze | ![Bronze-Badge](https://github.com/Anita-ihuman/ProjectBadging/assets/62384659/804cf75b-0c58-4fef-bf3d-a8d6f88c9f1f) | Presence of DEI.md File | +| Silver | ![Silver-Badge](https://github.com/Anita-ihuman/ProjectBadging/assets/62384659/952bb182-a652-49bc-890a-1c75aab7c8f4) | Comming soon | +| Gold | ![Gold-Badge](https://github.com/Anita-ihuman/ProjectBadging/assets/62384659/0471a7a5-46c0-4056-ada1-c7ad09f31d55) | Comming soon | +| Platinum | ![Platinum](https://github.com/Anita-ihuman/ProjectBadging/assets/62384659/9de89540-ae31-4197-91b7-c978fcaac204) | Comming soon | ## Contributing to this Project + This project is still in pilot phase and will commence call for contributor soon. Don't forget to give the project a star! Thanks again! ### Acknowledgments + Our heartfelt gratitude to all the maintainers of this project. Thank you for your ongoing efforts to maintain and nurture this project. - [Tochukwu Odeme](https://github.com/Teek-tech) diff --git a/Template.DEI.md b/Template.DEI.md index 2e79af3..9a249f4 100644 --- a/Template.DEI.md +++ b/Template.DEI.md @@ -8,19 +8,23 @@ Project Name/Logo Here Scope of the DEI.md File -[Project Name] prioritizes and reflects on DEI through a regular review of project policies and performance. This reflection is documented in the following DEI.md file based on specific [CHAOSS project](https://chaoss.community) DEI metrics. +[Project Name] prioritizes and reflects on DEI through a regular review of project policies and performance. This reflection is documented in the following DEI.md file based on specific [CHAOSS project](https://chaoss.community) DEI metrics. ### [Project Access](https://chaoss.community/?p=4953) -* Specific points on how your project addresses project access. - + +- Specific points on how your project addresses project access. + ### [Communication Transparency](https://chaoss.community/?p=4957) -* Specific points on how your project addresses communication transparency. - + +- Specific points on how your project addresses communication transparency. + ### [Newcomer Experiences](https://chaoss.community/?p=4891) -* Specific points on how your project addresses the newcomer experience. - + +- Specific points on how your project addresses the newcomer experience. + ### [Inclusive Leadership](https://chaoss.community/?p=3522) -* Specific points on how your project addresses inclusive leadership. + +- Specific points on how your project addresses inclusive leadership. [Project Name] recognizes that the inclusion of the DEI.md file and the provided reflection on the specific DEI metrics does not ensure community safety nor community inclusiveness. The inclusion of the DEI.md file signals that we, as a project, are committed to centering DEI in our project and regularly reviewing and reflecting on our project DEI practices. diff --git a/firebase.json b/firebase.json index 340ed5b..cfbc74c 100644 --- a/firebase.json +++ b/firebase.json @@ -1,11 +1,7 @@ { "hosting": { "public": "build", - "ignore": [ - "firebase.json", - "**/.*", - "**/node_modules/**" - ], + "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "rewrites": [ { "source": "**", diff --git a/package-lock.json b/package-lock.json index 75c9296..64ded6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,7 @@ "": { "name": "project-badging", "version": "1.0.0", - "license": "ISC", + "license": "MIT", "dependencies": { "@emotion/react": "11.11.0", "@emotion/styled": "11.11.0", diff --git a/package.json b/package.json index ce69895..000bc06 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,12 @@ "description": "Website for DEI Project Badging with CHAOSS & All In", "main": "index.js", "scripts": { - "lint": "npx eslint .", - "lint:fix": "npm run lint -- --fix", + "eslint": "npx eslint .", + "eslint:fix": "npm run eslint -- --fix", "prettier": "npx prettier . --check", "prettier:fix": "npm run prettier -- --write", "stylelint": "npx stylelint \"**/*.css\" --fix --allow-empty-input", - "format": "npm run prettier:fix && npm run lint:fix && npm run stylelint", + "format": "npm run prettier:fix && npm run eslint:fix && npm run stylelint", "build": "webpack --mode production", "dev": "webpack serve", "test": "echo \"Error: no test specified\"", @@ -76,16 +76,5 @@ }, "engines": { "node": ">= 16.15.0" - }, - "lint-staged": { - "*.{js,jsx,ts,tsx,json,md,html,css,scss}": [ - "npm run format -v", - "git add -v" - ] - }, - "husky": { - "hooks": { - "pre-commit": "npm run precommit -v" - } } } diff --git a/src/App.js b/src/App.js index 8dd91a4..f70273a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,48 +1,52 @@ import { Route, Routes } from "react-router-dom"; import { - Home, - About, - Projects, - GetStartedBadging, - SelectProjectRepo, - ErrorPage, - SuccessfullyBadged, + Home, + About, + Projects, + GetStartedBadging, + SelectProjectRepo, + ErrorPage, + SuccessfullyBadged, } from "./pages"; import { - WhatIsDeiBadging, - ApplicationProcess, - DeiBadge, - DeiFile, + WhatIsDeiBadging, + ApplicationProcess, + DeiBadge, + DeiFile, } from "./components"; import { DataProvider } from "./contexts/DataContext"; import { DesktopProvider } from "./contexts/DesktopContext"; const App = () => { - return ( - <> - - - - } /> - }> - } /> - } - /> - } /> - } /> - - } /> - } /> - } /> - } /> - } /> - - - - - ); + return ( + <> + + + + } /> + }> + } /> + } + /> + } /> + } /> + + } /> + } /> + } /> + } + /> + } /> + + + + + ); }; export default App; diff --git a/src/assets/images/icons/Apply.js b/src/assets/images/icons/Apply.js index 2e5c3c7..33c2f1a 100644 --- a/src/assets/images/icons/Apply.js +++ b/src/assets/images/icons/Apply.js @@ -1,22 +1,22 @@ const ApplySvgComponent = (props) => ( - - - - - - - - - + + + + + + + + + ); export default ApplySvgComponent; diff --git a/src/assets/images/icons/GetBadged.js b/src/assets/images/icons/GetBadged.js index 8a1e37d..935f8c1 100644 --- a/src/assets/images/icons/GetBadged.js +++ b/src/assets/images/icons/GetBadged.js @@ -1,28 +1,28 @@ const GetBadgedSvgComponent = (props) => ( - - - - - - - - - + + + + + + + + + ); export default GetBadgedSvgComponent; diff --git a/src/assets/images/icons/Review.js b/src/assets/images/icons/Review.js index 4f408c1..b92b62d 100644 --- a/src/assets/images/icons/Review.js +++ b/src/assets/images/icons/Review.js @@ -1,28 +1,28 @@ const ReviewSvgComponent = (props) => ( - - - - - - - - + viewBox="0 0 28 22" + fill="none" + xmlns="http://www.w3.org/2000/svg" + {...props} + > + + + + + + + + ); export default ReviewSvgComponent; diff --git a/src/assets/images/index.js b/src/assets/images/index.js index 46ed281..c4796bc 100644 --- a/src/assets/images/index.js +++ b/src/assets/images/index.js @@ -1,55 +1,55 @@ -import mail from './icons/mail.svg'; -import twitter from './icons/twitter.svg'; -import reddit from './icons/reddit.svg'; -import linkedin from './icons/linkedin.svg'; -import search from './icons/search.svg'; -import info from './icons/info.svg'; +import mail from "./icons/mail.svg"; +import twitter from "./icons/twitter.svg"; +import reddit from "./icons/reddit.svg"; +import linkedin from "./icons/linkedin.svg"; +import search from "./icons/search.svg"; +import info from "./icons/info.svg"; -import ApplySvgComponent from './icons/Apply.js'; -import ReviewSvgComponent from './icons/Review.js'; -import GetBadgedSvgComponent from './icons/GetBadged.js'; -import DefaultMobileNavIcon from './icons/DefaultMobileNavIcon.svg'; -import OpenMobileNavIcon from './icons/OpenMobileNavIcon.svg'; -import MobileLogo from './icons/MobileLogo.svg'; -import xMarkPink from './icons/x-mark-pink.svg'; +import ApplySvgComponent from "./icons/Apply.js"; +import ReviewSvgComponent from "./icons/Review.js"; +import GetBadgedSvgComponent from "./icons/GetBadged.js"; +import DefaultMobileNavIcon from "./icons/DefaultMobileNavIcon.svg"; +import OpenMobileNavIcon from "./icons/OpenMobileNavIcon.svg"; +import MobileLogo from "./icons/MobileLogo.svg"; +import xMarkPink from "./icons/x-mark-pink.svg"; -import github from './logos/github_logo.svg'; -import loom from './logos/loom_logo.svg'; -import discord from './logos/discord_logo.svg'; -import dropbox from './logos/dropbox_logo.svg'; -import badgingLogo from './logos/all-in-chaoss-logo.svg'; -import badgingLogoMobile from './logos/all-in-chaoss-logo-mobile.svg'; -import githubIcon from './icons/github.svg'; -import curlyBraces from './logos/curlyBraces.svg'; -import file from './icons/file.svg'; -import fileLink from './icons/fileLink.svg'; -import team from './icons/team.svg'; -import arrowRight from './icons/arrowRight.svg'; +import github from "./logos/github_logo.svg"; +import loom from "./logos/loom_logo.svg"; +import discord from "./logos/discord_logo.svg"; +import dropbox from "./logos/dropbox_logo.svg"; +import badgingLogo from "./logos/all-in-chaoss-logo.svg"; +import badgingLogoMobile from "./logos/all-in-chaoss-logo-mobile.svg"; +import githubIcon from "./icons/github.svg"; +import curlyBraces from "./logos/curlyBraces.svg"; +import file from "./icons/file.svg"; +import fileLink from "./icons/fileLink.svg"; +import team from "./icons/team.svg"; +import arrowRight from "./icons/arrowRight.svg"; -import goldBadge from './badges/gold-badge.svg'; -import silverBadge from './badges/silver-badge.svg'; -import bronzeBadge from './badges/bronze-badge.svg'; -import platinumBadge from './badges/platinum-badge.svg'; -import badge from './badges/badge.svg'; +import goldBadge from "./badges/gold-badge.svg"; +import silverBadge from "./badges/silver-badge.svg"; +import bronzeBadge from "./badges/bronze-badge.svg"; +import platinumBadge from "./badges/platinum-badge.svg"; +import badge from "./badges/badge.svg"; -import howItWorksBgMobile from './others/bg-how-it-works-mobile.svg'; +import howItWorksBgMobile from "./others/bg-how-it-works-mobile.svg"; // import heroImage from "./others/hero-background.svg"; -import getStartedArrow from './others/get-started.svg'; -import loginArrow from './icons/loginArrow.svg'; -import getBadgedFullBG from './others/get-badged-full-bg.svg'; -import howItWorksBgWeb from './others/bg-how-it-works-web.svg'; -import faqBgWeb from './others/bg-faq-web.svg'; -import heroSectionBgWeb from './others/bg-hero-section-web.svg'; -import faqBgMobile from './others/bg-faq-mobile.svg'; -import heroSectionBgMobile from './others/bg-hero-section-mobile.svg'; +import getStartedArrow from "./others/get-started.svg"; +import loginArrow from "./icons/loginArrow.svg"; +import getBadgedFullBG from "./others/get-badged-full-bg.svg"; +import howItWorksBgWeb from "./others/bg-how-it-works-web.svg"; +import faqBgWeb from "./others/bg-faq-web.svg"; +import heroSectionBgWeb from "./others/bg-hero-section-web.svg"; +import faqBgMobile from "./others/bg-faq-mobile.svg"; +import heroSectionBgMobile from "./others/bg-hero-section-mobile.svg"; -import getBadgedMobile from './others/get-badged-mobile.svg'; +import getBadgedMobile from "./others/get-badged-mobile.svg"; -import Filter from './icons/Filter.svg' -import SearchIcon from './icons/SearchIcon.svg' -import ScheduleIcon from './icons/ScheduleIcon.svg' -import DateIcon from './icons/DateIcon.svg' -import AZicon from './icons/AZIcon.svg' +import Filter from "./icons/Filter.svg"; +import SearchIcon from "./icons/SearchIcon.svg"; +import ScheduleIcon from "./icons/ScheduleIcon.svg"; +import DateIcon from "./icons/DateIcon.svg"; +import AZicon from "./icons/AZIcon.svg"; export { badgingLogo, @@ -89,7 +89,9 @@ export { getBadgedMobile, Filter, SearchIcon, - ScheduleIcon, DateIcon, AZicon, + ScheduleIcon, + DateIcon, + AZicon, howItWorksBgWeb, howItWorksBgMobile, faqBgWeb, diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss index 087e219..3c7de4d 100644 --- a/src/assets/styles/global.scss +++ b/src/assets/styles/global.scss @@ -1,109 +1,109 @@ @import "variables"; * > * { - margin: 0px; - padding: 0px; - box-sizing: border-box; - font-family: $font-family_2; - color: $primaryTextColor; + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: $font-family_2; + color: $primaryTextColor; } a { - text-decoration: none; - color: $primaryTextColor; + text-decoration: none; + color: $primaryTextColor; } li { - list-style: none; + list-style: none; } body { - background-color: $primaryBackgroundColor; + background-color: $primaryBackgroundColor; } .container { - max-width: 100%; - margin: auto; - padding: 10px 119px; - // background-color: #fff; + max-width: 100%; + margin: auto; + padding: 10px 119px; + // background-color: #fff; } .loading, .info { - color: $headingColor; - margin-top: 20px; + color: $headingColor; + margin-top: 20px; } .error { - color: $chaossPink; - margin-top: 20px; + color: $chaossPink; + margin-top: 20px; } h2 { - font-size: 3rem; - background: linear-gradient(164deg, #e9e9e9 41.39%, #bababa 80.66%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; - font-family: $font-family_1; + font-size: 3rem; + background: linear-gradient(164deg, #e9e9e9 41.39%, #bababa 80.66%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; + font-family: $font-family_1; } h3 { - background: $cardTitleBackground; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; - margin: 1rem 0 0.5rem; - font-family: $font-family_1, sans-serif; - line-height: 2; + background: $cardTitleBackground; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; + margin: 1rem 0 0.5rem; + font-family: $font-family_1, sans-serif; + line-height: 2; } main { - // max-width: 100%; - height: auto; - // padding: 0px 40px; + // max-width: 100%; + height: auto; + // padding: 0px 40px; } .jumbotron { - max-width: 1340px; - margin: auto; - height: auto; - display: flex; - flex-direction: column; - gap: 20px; - justify-content: center; - padding: 180px 0px 70px 40px; - p { - font-family: $font-family_2; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 180%; - color: $secondaryTextColor; - max-width: 840px; - } + max-width: 1340px; + margin: auto; + height: auto; + display: flex; + flex-direction: column; + gap: 20px; + justify-content: center; + padding: 180px 0px 70px 40px; + p { + font-family: $font-family_2; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 180%; + color: $secondaryTextColor; + max-width: 840px; + } } nav .mobileNav.toggleDesctiptionButton { - .getStarted-button button { - display: none !important; - background-color: red; - } + .getStarted-button button { + display: none !important; + background-color: red; + } } @media screen and (max-width: 768px) { - h2 { - font-size: 1.9rem; - } - .faq { - h2 { - text-align: left !important; - } - } - .jumbotron { - width: 100% !important; - padding: 180px 20px 70px 30px; - } + h2 { + font-size: 1.9rem; + } + .faq { + h2 { + text-align: left !important; + } + } + .jumbotron { + width: 100% !important; + padding: 180px 20px 70px 30px; + } } // @media screen and (max-width: 1030px) { @@ -127,31 +127,30 @@ nav .mobileNav.toggleDesctiptionButton { // } @media screen and (max-width: 1030px) { - nav { - .web { - display: none !important; - } - } - - // .get-started { - // // display: none; - // } - .logo { - width: auto; - } - .container { - padding: 30px 30px; - } - .hero-section { - padding: 0px 20px; - } - + nav { + .web { + display: none !important; + } + } + + // .get-started { + // // display: none; + // } + .logo { + width: auto; + } + .container { + padding: 30px 30px; + } + .hero-section { + padding: 0px 20px; + } } @media screen and (max-width: 650px) { - .get-started { - display: none; - } + .get-started { + display: none; + } } // .faq { diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 4d3df5e..392a1c0 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -1,70 +1,70 @@ /* ==================== START IMPORT FONTS ======================= */ @font-face { - font-family: "Theinhardt"; - src: url("../fonts/Theinhardt/Theinhardt-Light.otf") format("opentype"); - font-style: normal; - font-weight: lighter; - font-display: swap; + font-family: "Theinhardt"; + src: url("../fonts/Theinhardt/Theinhardt-Light.otf") format("opentype"); + font-style: normal; + font-weight: lighter; + font-display: swap; } @font-face { - font-family: "Theinhardt"; - src: url("../fonts/Theinhardt/Theinhardt-Regular.otf") format("opentype"); - font-style: normal; - font-weight: normal; - font-display: swap; + font-family: "Theinhardt"; + src: url("../fonts/Theinhardt/Theinhardt-Regular.otf") format("opentype"); + font-style: normal; + font-weight: normal; + font-display: swap; } @font-face { - font-family: "Theinhardt"; - src: url("../fonts/Theinhardt/TheinhardtMed.otf") format("opentype"); - font-style: normal; - font-weight: bold; - font-display: swap; + font-family: "Theinhardt"; + src: url("../fonts/Theinhardt/TheinhardtMed.otf") format("opentype"); + font-style: normal; + font-weight: bold; + font-display: swap; } @font-face { - font-family: "Theinhardt"; - src: url("../fonts/Theinhardt/Theinhardt-Bold.otf") format("opentype"); - font-style: normal; - font-weight: bolder; - font-display: swap; + font-family: "Theinhardt"; + src: url("../fonts/Theinhardt/Theinhardt-Bold.otf") format("opentype"); + font-style: normal; + font-weight: bolder; + font-display: swap; } @font-face { - font-family: "JetBrains Mono"; - src: url("../fonts/JetBrainsMono-1.0.0/JetBrainsMono-Regular.ttf") - format("truetype"); - font-style: normal; - font-weight: normal; - font-display: swap; + font-family: "JetBrains Mono"; + src: url("../fonts/JetBrainsMono-1.0.0/JetBrainsMono-Regular.ttf") + format("truetype"); + font-style: normal; + font-weight: normal; + font-display: swap; } @font-face { - font-family: "JetBrains Mono"; - src: url("../fonts/JetBrainsMono-1.0.0/JetBrainsMono-Medium.ttf") - format("truetype"); - font-style: normal; - font-weight: 500; - font-display: swap; + font-family: "JetBrains Mono"; + src: url("../fonts/JetBrainsMono-1.0.0/JetBrainsMono-Medium.ttf") + format("truetype"); + font-style: normal; + font-weight: 500; + font-display: swap; } @font-face { - font-family: "JetBrains Mono"; - src: url("../fonts/JetBrainsMono-1.0.0/JetBrainsMono-Bold.ttf") - format("truetype"); - font-style: normal; - font-weight: bold; - font-display: swap; + font-family: "JetBrains Mono"; + src: url("../fonts/JetBrainsMono-1.0.0/JetBrainsMono-Bold.ttf") + format("truetype"); + font-style: normal; + font-weight: bold; + font-display: swap; } @font-face { - font-family: "JetBrains Mono"; - src: url("../fonts/JetBrainsMono-1.0.0/JetBrainsMono-ExtraBold.ttf") - format("truetype"); - font-style: normal; - font-weight: bolder; - font-display: swap; + font-family: "JetBrains Mono"; + src: url("../fonts/JetBrainsMono-1.0.0/JetBrainsMono-ExtraBold.ttf") + format("truetype"); + font-style: normal; + font-weight: bolder; + font-display: swap; } /* ==================== END IMPORT FONTS ======================= */ @@ -72,9 +72,9 @@ $font-family_1: "JetBrains Mono"; $font-family_2: "Theinhardt", sans-serif; $sectionTitleBackground: radial-gradient( - 34.77% 34.77% at 50% 50%, - rgba(29, 232, 98, 0.2) 0%, - rgba(29, 232, 98, 0) 100% + 34.77% 34.77% at 50% 50%, + rgba(29, 232, 98, 0.2) 0%, + rgba(29, 232, 98, 0) 100% ); $primaryTextColor: #fff; $textColor2: #24292e; @@ -90,9 +90,9 @@ $projectsBackgroundColor: #090909; $heroTitleBackground: linear-gradient(184deg, #69c7b9 0%, #e1b1ee 100%); $heroTitleBackground2: linear-gradient(164deg, #e9e9e9 41.39%, #bababa 80.66%); $cardTitleBackground: linear-gradient( - 123.52deg, - #ffffff -36.16%, - rgba(255, 255, 255, 0) 219.41% + 123.52deg, + #ffffff -36.16%, + rgba(255, 255, 255, 0) 219.41% ); $borderHoverGradient: linear-gradient(to top, rgba(40, 47, 55, 0), #aeadab) 1; $secondaryBtnColor: #04e28a; @@ -100,7 +100,7 @@ $secondaryBtnColor2: #06f395; $chaossBlue: #199ad6; $chaossPink: #d61b5e; $congratulationTextColor: linear-gradient( - rgba(233, 233, 233, 1), - rgba(186, 186, 186, 1) + rgba(233, 233, 233, 1), + rgba(186, 186, 186, 1) ); $disabledBtnColor: #f3f5f6; diff --git a/src/components/AboutDeiBadging/AboutDeiMobile.js b/src/components/AboutDeiBadging/AboutDeiMobile.js index 3c579b4..4ac97f3 100644 --- a/src/components/AboutDeiBadging/AboutDeiMobile.js +++ b/src/components/AboutDeiBadging/AboutDeiMobile.js @@ -1,16 +1,16 @@ -import './about-dei-mobile.scss'; -import '../../assets/styles/global.scss'; -import Accordion from '@mui/material/Accordion'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import Typography from '@mui/material/Typography'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import "./about-dei-mobile.scss"; +import "../../assets/styles/global.scss"; +import Accordion from "@mui/material/Accordion"; +import AccordionSummary from "@mui/material/AccordionSummary"; +import AccordionDetails from "@mui/material/AccordionDetails"; +import Typography from "@mui/material/Typography"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import { goldBadge, silverBadge, bronzeBadge, platinumBadge, -} from '../../assets/images'; +} from "../../assets/images"; const AboutDeiMobile = () => { return ( @@ -21,13 +21,13 @@ const AboutDeiMobile = () => { aria-controls="panel1a-content" id="panel1a-header" > - + What is All in CHAOSS
DEI Badging - +

The All In CHAOSS DEI Project Badging is an initiative developed @@ -79,13 +79,13 @@ const AboutDeiMobile = () => { How It Works - +

Self-Assessment and Documentation:

Before applying for a DEI badge, maintainers or project admins are encouraged to conduct a self-assessment of their - project's DEI efforts based on the following{' '} + project's DEI efforts based on the following{" "} CHAOSS DEI metrics: Project Access, Inclusive Leadership, Communication Transparency, and Newcomer Experience. After the reflective process, maintainers can document how the @@ -154,7 +154,7 @@ const AboutDeiMobile = () => { DEI.md File - +

The DEI.md file is an essential component of the All In CHAOSS DEI badging initiative. It serves as a benchmark for open source @@ -175,7 +175,7 @@ const AboutDeiMobile = () => {

  • If using a development platform, place the DEI.md file in an - organizationally available repository, similar to your{' '} + organizationally available repository, similar to your{" "} CODE_OF_CONDUCT.md file
  • @@ -200,7 +200,7 @@ const AboutDeiMobile = () => { DEI Badge - +
    Bronze badge Silver badge @@ -246,7 +246,7 @@ const AboutDeiMobile = () => { join us in our open and collaborative conversations when considering what CHAOSS metrics would be best suited as indicators of these badges. You can join the CHAOSS project - through their{' '} + through their{" "} Slack workspace diff --git a/src/components/AboutDeiBadging/ApplicationProcess.js b/src/components/AboutDeiBadging/ApplicationProcess.js index 78b4a59..add4414 100644 --- a/src/components/AboutDeiBadging/ApplicationProcess.js +++ b/src/components/AboutDeiBadging/ApplicationProcess.js @@ -1,69 +1,69 @@ import React from "react"; const ApplicationProcess = () => { - return ( -
    -

    How It Works

    -
    -

    Self-Assessment and Documentation:

    -

    - Before applying for a DEI badge, maintainers or project admins are - encouraged to conduct a self-assessment of their project's DEI - efforts based on the following CHAOSS DEI metrics:{" "} - Project Access, Inclusive Leadership, Communication Transparency, and - Newcomer Experience. After the reflective process, maintainers can - document how the project attends to and prioritizes DEI around these - areas in a markdown file called the DEI.md file. This - DEI.md file should exist within the project's repository for easy - feedback from the community. -

    -
    -
    -

    All in CHAOSS DEI Badge Application:

    -

    - Once the DEI.md file is published and publicly available, project - maintainers can proceed to apply here. The applicant must be an admin - or maintainer of the project, and the repository that holds the DEI.md - file must be specified. -

    -
    -
    -

    Badging Evaluation:

    -

    - The review follows an automated process in which a CHAOSS bot scans - the project repository for the presence of a DEI.md file. The bot will - review the DEI.md file for relevant information provided by the - maintainer and its alignment with the CHAOSS DEI metrics stated in the{" "} - DEI.md template to determine eligibility for the - badge. Upon successful review of the DEI.md file, a project badge will - be issued. The four CHAOSS metrics used in the DEI.md file include: -

    -
    -
    -

    Recognition and Badging:

    -

    - Projects that meet the established criteria will receive the All In - CHAOSS DEI badge, which can be prominently displayed on the - project's website, documentation, or other relevant platforms. The - badge signifies the project's commitment to DEI and highlights its - adherence to DEI best practices. -

    -
    -
    -

    Continued Engagement:

    -

    - Once the badging process is completed, we provide, as an additional - service, a report for maintainers to enable them to further reflect on - their DEI efforts. This supplemental report will enable maintainers to - identify areas of improvement and opportunity. The report may prove - helpful as the project badging program evolves to include support for - subsequent badges. Maintainers who receive the DEI badge are - encouraged to continue their DEI efforts, share experiences, and learn - from others in the community. -

    -
    -
    - ); + return ( +
    +

    How It Works

    +
    +

    Self-Assessment and Documentation:

    +

    + Before applying for a DEI badge, maintainers or project admins are + encouraged to conduct a self-assessment of their project's DEI + efforts based on the following CHAOSS DEI metrics:{" "} + Project Access, Inclusive Leadership, Communication Transparency, and + Newcomer Experience. After the reflective process, maintainers can + document how the project attends to and prioritizes DEI around these + areas in a markdown file called the DEI.md file. This + DEI.md file should exist within the project's repository for easy + feedback from the community. +

    +
    +
    +

    All in CHAOSS DEI Badge Application:

    +

    + Once the DEI.md file is published and publicly available, project + maintainers can proceed to apply here. The applicant must be an admin + or maintainer of the project, and the repository that holds the DEI.md + file must be specified. +

    +
    +
    +

    Badging Evaluation:

    +

    + The review follows an automated process in which a CHAOSS bot scans + the project repository for the presence of a DEI.md file. The bot will + review the DEI.md file for relevant information provided by the + maintainer and its alignment with the CHAOSS DEI metrics stated in the{" "} + DEI.md template to determine eligibility for the + badge. Upon successful review of the DEI.md file, a project badge will + be issued. The four CHAOSS metrics used in the DEI.md file include: +

    +
    +
    +

    Recognition and Badging:

    +

    + Projects that meet the established criteria will receive the All In + CHAOSS DEI badge, which can be prominently displayed on the + project's website, documentation, or other relevant platforms. The + badge signifies the project's commitment to DEI and highlights its + adherence to DEI best practices. +

    +
    +
    +

    Continued Engagement:

    +

    + Once the badging process is completed, we provide, as an additional + service, a report for maintainers to enable them to further reflect on + their DEI efforts. This supplemental report will enable maintainers to + identify areas of improvement and opportunity. The report may prove + helpful as the project badging program evolves to include support for + subsequent badges. Maintainers who receive the DEI badge are + encouraged to continue their DEI efforts, share experiences, and learn + from others in the community. +

    +
    +
    + ); }; export default ApplicationProcess; diff --git a/src/components/AboutDeiBadging/DeiBadge.js b/src/components/AboutDeiBadging/DeiBadge.js index 08a237c..c4fe2c7 100644 --- a/src/components/AboutDeiBadging/DeiBadge.js +++ b/src/components/AboutDeiBadging/DeiBadge.js @@ -3,7 +3,7 @@ import { // goldBadge, // silverBadge, // platinumBadge, -} from '../../assets/images'; +} from "../../assets/images"; const DeiBadge = () => { return ( @@ -51,7 +51,7 @@ const DeiBadge = () => { Silver, Gold and Platinum Badges will be coming soon. Please join us in our open and collaborative conversations when considering what CHAOSS metrics would be best suited as indicators of these badges. - You can join the CHAOSS project through their{' '} + You can join the CHAOSS project through their{" "} Slack workspace diff --git a/src/components/AboutDeiBadging/DeiFile.js b/src/components/AboutDeiBadging/DeiFile.js index 2047864..2f386e1 100644 --- a/src/components/AboutDeiBadging/DeiFile.js +++ b/src/components/AboutDeiBadging/DeiFile.js @@ -1,43 +1,43 @@ import React from "react"; const DeiFile = () => { - return ( -
    -

    DEI.md File

    -

    - The DEI.md file is an essential component of the All In CHAOSS DEI - badging initiative. It serves as a benchmark for open source projects to - openly acknowledge and showcase their dedication to diversity, equity, - and inclusion (DEI). -

    + return ( +
    +

    DEI.md File

    +

    + The DEI.md file is an essential component of the All In CHAOSS DEI + badging initiative. It serves as a benchmark for open source projects to + openly acknowledge and showcase their dedication to diversity, equity, + and inclusion (DEI). +

    -

    - The DEI.md file can be used by maintainers to explicitly express and - self-reflect on their project's approach to DEI. Maintainers are - encouraged to include relevant content that reflects their project's - specific approaches and initiatives regarding diversity, equity, and - inclusion within the DEI.md file. This may include outlining strategies, - policies, and practices to foster a welcoming environment for all - contributors. -

    +

    + The DEI.md file can be used by maintainers to explicitly express and + self-reflect on their project's approach to DEI. Maintainers are + encouraged to include relevant content that reflects their project's + specific approaches and initiatives regarding diversity, equity, and + inclusion within the DEI.md file. This may include outlining strategies, + policies, and practices to foster a welcoming environment for all + contributors. +

    -
      -
    • - If using a development platform, place the DEI.md file in an - organizationally available repository, similar to your{" "} - CODE_OF_CONDUCT.md file -
      • -
    • - If an organizational-level folder is not available, place the DEI.md - file in a community repository -
      • -
    • - Use the following DEI.md template to develop your - project DEI.md file. -
      • -
    -
    - ); +
      +
    • + If using a development platform, place the DEI.md file in an + organizationally available repository, similar to your{" "} + CODE_OF_CONDUCT.md file +
      • +
    • + If an organizational-level folder is not available, place the DEI.md + file in a community repository +
      • +
    • + Use the following DEI.md template to develop your + project DEI.md file. +
      • +
    +
    + ); }; export default DeiFile; diff --git a/src/components/AboutDeiBadging/Sidebar.js b/src/components/AboutDeiBadging/Sidebar.js index 6638c1d..a0750ef 100644 --- a/src/components/AboutDeiBadging/Sidebar.js +++ b/src/components/AboutDeiBadging/Sidebar.js @@ -1,6 +1,6 @@ -import { NavLink } from 'react-router-dom'; -import { arrowRight } from '../../assets/images'; -import { useState } from 'react'; +import { NavLink } from "react-router-dom"; +import { arrowRight } from "../../assets/images"; +import { useState } from "react"; const Sidebar = () => { const [isActive, setIsActive] = useState(1); diff --git a/src/components/AboutDeiBadging/WhatIsDeiBadging.js b/src/components/AboutDeiBadging/WhatIsDeiBadging.js index 1530d8f..d9ea080 100644 --- a/src/components/AboutDeiBadging/WhatIsDeiBadging.js +++ b/src/components/AboutDeiBadging/WhatIsDeiBadging.js @@ -1,42 +1,42 @@ const WhatIsDeiBadging = () => { - return ( -
    -

    - What is All in CHAOSS DEI Badging -

    -
    -

    - The All In CHAOSS DEI Project Badging is an initiative developed in - partnership between All In and the CHAOSS project to recognize open - source projects that exemplify best practices for diversity, equity, - and inclusion (DEI) work within their respective communities. -

    -

    - The initiative uses CHAOSS DEI metrics as a benchmark to reflect on - DEI efforts in an open source project. All CHAOSS DEI metrics are - developed in an open and collaborative setting. More information about - the CHAOSS DEI metrics development process can be found{" "} - here. -

    -
    -
    -

    DEI Project Badging Objective

    -

    - The primary objective of the All In CHAOSS DEI Badging Initiative is - to enable open source maintainers to signal their ongoing efforts in - improving and prioritizing DEI within their communities. -

    -
      -
    • To assess and address DEI standards in open source projects
      • -
    • Recognize projects and communities for their DEI efforts
      • -
    • - Enable organizations to make informed decisions and take targeted - actions to create a more inclusive and equitable environment -
      • -
    -
    -
    - ); + return ( +
    +

    + What is All in CHAOSS DEI Badging +

    +
    +

    + The All In CHAOSS DEI Project Badging is an initiative developed in + partnership between All In and the CHAOSS project to recognize open + source projects that exemplify best practices for diversity, equity, + and inclusion (DEI) work within their respective communities. +

    +

    + The initiative uses CHAOSS DEI metrics as a benchmark to reflect on + DEI efforts in an open source project. All CHAOSS DEI metrics are + developed in an open and collaborative setting. More information about + the CHAOSS DEI metrics development process can be found{" "} + here. +

    +
    +
    +

    DEI Project Badging Objective

    +

    + The primary objective of the All In CHAOSS DEI Badging Initiative is + to enable open source maintainers to signal their ongoing efforts in + improving and prioritizing DEI within their communities. +

    +
      +
    • To assess and address DEI standards in open source projects
      • +
    • Recognize projects and communities for their DEI efforts
      • +
    • + Enable organizations to make informed decisions and take targeted + actions to create a more inclusive and equitable environment +
      • +
    +
    +
    + ); }; export default WhatIsDeiBadging; diff --git a/src/components/AboutDeiBadging/about-dei-mobile.scss b/src/components/AboutDeiBadging/about-dei-mobile.scss index c013a34..0ed0b3d 100644 --- a/src/components/AboutDeiBadging/about-dei-mobile.scss +++ b/src/components/AboutDeiBadging/about-dei-mobile.scss @@ -1,70 +1,70 @@ @import "../../assets/styles/variables"; .about-dei { - .MuiAccordion-root { - box-shadow: 0px 4px 32px 5px rgba(0, 0, 0, 0.05); - border-radius: 0.25rem; - border: none; + .MuiAccordion-root { + box-shadow: 0px 4px 32px 5px rgba(0, 0, 0, 0.05); + border-radius: 0.25rem; + border: none; - &:not(.Mui-expanded) { - height: 5rem; - } + &:not(.Mui-expanded) { + height: 5rem; + } - &:not(:first-child) { - margin-top: 0.25rem; - } + &:not(:first-child) { + margin-top: 0.25rem; + } - &::before { - background-color: transparent; - } + &::before { + background-color: transparent; + } - // Accordion active state - &.Mui-expanded { - .MuiAccordionSummary-root { - padding-top: 32px; - .MuiAccordionSummary-content { - .MuiTypography-root { - font-size: 1.5rem; - color: $chaossPink; - } - } + // Accordion active state + &.Mui-expanded { + .MuiAccordionSummary-root { + padding-top: 32px; + .MuiAccordionSummary-content { + .MuiTypography-root { + font-size: 1.5rem; + color: $chaossPink; + } + } - .MuiSvgIcon-root { - color: $chaossPink; - } - } - } + .MuiSvgIcon-root { + color: $chaossPink; + } + } + } - .MuiAccordionSummary-root { - padding: 12px 23px; - justify-content: space-between; - align-items: center; - height: 100%; - gap: 0 2rem; + .MuiAccordionSummary-root { + padding: 12px 23px; + justify-content: space-between; + align-items: center; + height: 100%; + gap: 0 2rem; - .MuiAccordionSummary-content { - margin: 0; + .MuiAccordionSummary-content { + margin: 0; - .MuiTypography-root { - font-size: 1.125rem; - font-weight: bolder; - font-family: $font-family_1; - line-height: normal; - } - } + .MuiTypography-root { + font-size: 1.125rem; + font-weight: bolder; + font-family: $font-family_1; + line-height: normal; + } + } - .MuiSvgIcon-root { - font-size: 1.8rem; - color: $headingColor; - } - } + .MuiSvgIcon-root { + font-size: 1.8rem; + color: $headingColor; + } + } - .MuiAccordionDetails-root { - padding: 0.75rem 1.4rem 2rem; + .MuiAccordionDetails-root { + padding: 0.75rem 1.4rem 2rem; - .MuiTypography-root { - font-family: $font-family_2; - } - } - } -} \ No newline at end of file + .MuiTypography-root { + font-family: $font-family_2; + } + } + } +} diff --git a/src/components/ActiveNav/ActiveNav.js b/src/components/ActiveNav/ActiveNav.js index f2283b1..728650c 100644 --- a/src/components/ActiveNav/ActiveNav.js +++ b/src/components/ActiveNav/ActiveNav.js @@ -1,39 +1,39 @@ const PropTypes = require("prop-types"); const ActiveNav = ({ pathname }) => { - return ( - <> - - - - {pathname} - - - - - ); + return ( + <> + + + + {pathname} + + + + + ); }; ActiveNav.propTypes = { - pathname: PropTypes.string, + pathname: PropTypes.string, }; export default ActiveNav; diff --git a/src/components/Carousel/CardCarousel.js b/src/components/Carousel/CardCarousel.js index 068da70..7e036d0 100644 --- a/src/components/Carousel/CardCarousel.js +++ b/src/components/Carousel/CardCarousel.js @@ -1,6 +1,6 @@ -import React, { useState, useCallback } from 'react'; -import { loginArrow } from '../../assets/images'; -import './carousel.scss'; +import React, { useState, useCallback } from "react"; +import { loginArrow } from "../../assets/images"; +import "./carousel.scss"; const cardItems = [ { @@ -11,7 +11,7 @@ const cardItems = [ Step I: Project Demographics

    ), - copy: '', + copy: "", // button: , blankDiv: (
    @@ -89,7 +89,7 @@ const cardItems = [ Step II: Project Review

    ), - copy: '', + copy: "", blankDiv: (
    @@ -163,11 +163,11 @@ const cardItems = [ hidden_title:

    Step III

    , title: (

    - {' '} - Step III: DEI Badge{' '} + {" "} + Step III: DEI Badge{" "}

    ), - copy: '', + copy: "", blankDiv: (
    @@ -239,13 +239,13 @@ const cardItems = [ ]; function determineClasses(indexes, cardIndex) { if (indexes.currentIndex === cardIndex) { - return 'active'; + return "active"; } else if (indexes.nextIndex === cardIndex) { - return 'next'; + return "next"; } else if (indexes.previousIndex === cardIndex) { - return 'prev'; + return "prev"; } - return 'inactive'; + return "inactive"; } const CardCarousel = () => { const [indexes, setIndexes] = useState({ @@ -278,7 +278,7 @@ const CardCarousel = () => {
    - Copyright ©{' '} + Copyright ©{" "} Allin - {' '} - &{' '} + {" "} + &{" "} CHAOSS - {' '} + {" "} Project.
    All rights reserved
    diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss index 3b8341c..4cad701 100644 --- a/src/components/Footer/footer.scss +++ b/src/components/Footer/footer.scss @@ -1,62 +1,62 @@ @import "../../assets/styles/variables"; footer { - bottom: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 15px; - font-family: $font-family_2; - font-style: regular; - font-weight: 400; - font-size: 16px; - line-height: 150%; - letter-spacing: 0.02em; - color: $primaryTextColor; - text-align: center; - - .social { - display: flex; - gap: 20px; - - img { - width: 40px; - height: 40px; - transition: transform 0.3s; - - /* Apply the zoom effect on hover */ - &:hover { - transform: scale(1.2); - } - } - } - - .copyright { - a { - text-decoration: underline; - } - - a:nth-child(1) { - color: #06f395; - } - - a:nth-child(2) { - color: #69c7b9; - } - } + bottom: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 15px; + font-family: $font-family_2; + font-style: regular; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0.02em; + color: $primaryTextColor; + text-align: center; + + .social { + display: flex; + gap: 20px; + + img { + width: 40px; + height: 40px; + transition: transform 0.3s; + + /* Apply the zoom effect on hover */ + &:hover { + transform: scale(1.2); + } + } + } + + .copyright { + a { + text-decoration: underline; + } + + a:nth-child(1) { + color: #06f395; + } + + a:nth-child(2) { + color: #69c7b9; + } + } } footer.container { - padding: 3.5rem 3.9rem; + padding: 3.5rem 3.9rem; } @media screen and (min-width: 769px) { - br { - display: none; - } + br { + display: none; + } - footer.container { - padding: 2.5rem 7.5rem; - } + footer.container { + padding: 2.5rem 7.5rem; + } } diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index ff26886..4875b70 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -1,20 +1,19 @@ -import React, { useEffect, useState } from 'react'; -import { Link } from 'react-router-dom'; -import '../../assets/styles/global.scss'; -import './header.scss'; +/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */ + +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import "../../assets/styles/global.scss"; +import "./header.scss"; import { DefaultMobileNavIcon, OpenMobileNavIcon, - MobileLogo, badgingLogo, badgingLogoMobile, - GetStartedArrrow, -} from '../../assets/images'; -import { useMediaQuery } from 'react-responsive'; -import ActiveNav from '../ActiveNav/ActiveNav'; -import { Home } from '@mui/icons-material'; -import { useLocation } from 'react-router-dom'; +} from "../../assets/images"; +import { useMediaQuery } from "react-responsive"; +import ActiveNav from "../ActiveNav/ActiveNav"; +import { useLocation } from "react-router-dom"; const Header = () => { // eslint-disable-next-line no-unused-vars const [navbarOpen, setNavbarOpen] = useState(false); @@ -29,26 +28,24 @@ const Header = () => { src={isMobile ? badgingLogoMobile : badgingLogo} className="logo" alt="all-in-chaoss-logo" - // width={250} - // srcSet={`${MobileLogo} 1200w`} />
      - {pathname === '/' ? : 'Home'} + {pathname === "/" ? : "Home"} - {pathname === '/about' ? ( + {pathname === "/about" ? ( ) : ( - 'AboutDEIBadging' + "AboutDEIBadging" )} - {pathname === '/projects' ? ( + {pathname === "/projects" ? ( ) : ( - 'Projects' + "Projects" )}
    @@ -61,7 +58,7 @@ const Header = () => { height="14" viewBox="0 0 18 14" fill="none" - style={{ marginLeft: '20px' }} + style={{ marginLeft: "20px" }} > { fill="#06F395" /> - {/* 2jekl */} setNavbarOpen((prev) => !prev)} + onKeyUp={(e) => { + if (e.key === "Enter" || e.key === "Space") { + setNavbarOpen((prev) => !prev); + } + }} + role="button" + tabIndex={0} src={navbarOpen ? OpenMobileNavIcon : DefaultMobileNavIcon} alt="open" className="mobileNav" - // className={`mobileNav ${navbarOpen ? 'toggleDesctiptionButton' : ''}`} /> {navbarOpen ? ( @@ -95,12 +97,12 @@ const Header = () => {
- {' '} + {" "} Get Started
) : ( - '' + "" )} ); diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss index 436fe77..483010f 100644 --- a/src/components/Header/header.scss +++ b/src/components/Header/header.scss @@ -1,4 +1,4 @@ -@import '../../assets/styles/variables'; +@import "../../assets/styles/variables"; /* ==================== START HEADER STYLE ======================= */ header { diff --git a/src/components/HowItWorks/Card.js b/src/components/HowItWorks/Card.js index 370b5a5..c112fbf 100644 --- a/src/components/HowItWorks/Card.js +++ b/src/components/HowItWorks/Card.js @@ -1,5 +1,5 @@ -import { Link } from 'react-router-dom'; -import PropTypes from 'prop-types'; +import { Link } from "react-router-dom"; +import PropTypes from "prop-types"; const CardComponent = ({ icon, title, text, link }) => { return ( diff --git a/src/components/Jumbotron/Jumbotron.js b/src/components/Jumbotron/Jumbotron.js index 2841bb5..7dd8b4c 100644 --- a/src/components/Jumbotron/Jumbotron.js +++ b/src/components/Jumbotron/Jumbotron.js @@ -2,24 +2,24 @@ import React from "react"; import PropTypes from "prop-types"; const Jumbotron = ({ title, description, subheading = null, children }) => { - return ( -
-

{title}

-
- {subheading &&

{subheading}

} -

{description}

-
- {/* add any other children */} - {children} -
- ); + return ( +
+

{title}

+
+ {subheading &&

{subheading}

} +

{description}

+
+ {/* add any other children */} + {children} +
+ ); }; Jumbotron.propTypes = { - title: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, - subheading: PropTypes.string, - children: PropTypes.node, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + subheading: PropTypes.string, + children: PropTypes.node, }; export default Jumbotron; diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js index bb8e610..882a3be 100644 --- a/src/components/Layout/Layout.js +++ b/src/components/Layout/Layout.js @@ -1,8 +1,8 @@ /* eslint-disable react/prop-types */ -import React from 'react'; -import { Footer, Header } from '../../components'; -import { getBadgedFullBG, getBadgedMobile } from '../../assets/images'; -import './Layout.scss'; +import React from "react"; +import { Footer, Header } from "../../components"; +import { getBadgedFullBG, getBadgedMobile } from "../../assets/images"; +import "./Layout.scss"; // Pass the child props const Layout = ({ children, className }) => { diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss index 578ef44..a8041bf 100644 --- a/src/components/Layout/Layout.scss +++ b/src/components/Layout/Layout.scss @@ -1,4 +1,4 @@ -@import '../../assets/styles/variables'; +@import "../../assets/styles/variables"; .requirements { display: grid; diff --git a/src/components/RandomString.js b/src/components/RandomString.js deleted file mode 100644 index fcabd4e..0000000 --- a/src/components/RandomString.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -function RandomString() { - const generateRandomString = (length = 7) => { - const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; - let randomString = ''; - - for (let i = 0; i < length; i++) { - const randomIndex = Math.floor(Math.random() * characters.length); - randomString += characters.charAt(randomIndex); - } - - return randomString; - }; - - const randomString = generateRandomString(); - - return randomString -} - -export default RandomString; diff --git a/src/components/SelectProject/SearchBar.js b/src/components/SelectProject/SearchBar.js index a3a0a49..2adbb91 100644 --- a/src/components/SelectProject/SearchBar.js +++ b/src/components/SelectProject/SearchBar.js @@ -8,115 +8,115 @@ import { DataContext } from "../../contexts/DataContext"; // import useLoadingError from "../../hooks/useLoadingError"; const SearchBar = ({ setShowInfo }) => { - const [inputValue, setInputValue] = useState(""); - const [inputClicked, setInputClicked] = useState(false); - const [searchResults, setSearchResults] = useState([]); - const [focusedSuggestionIndex, setFocusedSuggestionIndex] = useState(-1); - const { userData, setUserData } = useContext(DataContext); - // const { loading, setLoading, error, setError } = useLoadingError(); - const searchBarRef = useRef(null); + const [inputValue, setInputValue] = useState(""); + const [inputClicked, setInputClicked] = useState(false); + const [searchResults, setSearchResults] = useState([]); + const [focusedSuggestionIndex, setFocusedSuggestionIndex] = useState(-1); + const { userData, setUserData } = useContext(DataContext); + // const { loading, setLoading, error, setError } = useLoadingError(); + const searchBarRef = useRef(null); - useEffect(() => { - const handleClickOutside = (e) => { - if (searchBarRef.current && !searchBarRef.current.contains(e.target)) { - clearSuggestions(); - } - }; + useEffect(() => { + const handleClickOutside = (e) => { + if (searchBarRef.current && !searchBarRef.current.contains(e.target)) { + clearSuggestions(); + } + }; - document.addEventListener("mousedown", handleClickOutside); + document.addEventListener("mousedown", handleClickOutside); - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, []); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); - function handleInputChange(e) { - const value = e.target.value; - setInputValue(value); + function handleInputChange(e) { + const value = e.target.value; + setInputValue(value); - const results = performSearch(value); - setSearchResults(results); - } + const results = performSearch(value); + setSearchResults(results); + } - const handleInputClick = () => { - if (!inputClicked) { - setInputClicked(true); - setShowInfo(false); - setSearchResults(userData.repos); - } - }; + const handleInputClick = () => { + if (!inputClicked) { + setInputClicked(true); + setShowInfo(false); + setSearchResults(userData.repos); + } + }; - function performSearch(value) { - return userData.repos.filter((result) => - result.toLowerCase().includes(value.toLowerCase()) - ); - } + function performSearch(value) { + return userData.repos.filter((result) => + result.toLowerCase().includes(value.toLowerCase()) + ); + } - function handleRepoSelection(result) { - setUserData({ - ...userData, - reposToBadge: [...userData.reposToBadge, result], - }); - clearSuggestions(); - } + function handleRepoSelection(result) { + setUserData({ + ...userData, + reposToBadge: [...userData.reposToBadge, result], + }); + clearSuggestions(); + } - function handleSuggestionClick(result, index) { - if (focusedSuggestionIndex === index) { - handleRepoSelection(result); - } - setFocusedSuggestionIndex(index); - } + function handleSuggestionClick(result, index) { + if (focusedSuggestionIndex === index) { + handleRepoSelection(result); + } + setFocusedSuggestionIndex(index); + } - function clearSuggestions() { - setSearchResults([]); - setFocusedSuggestionIndex(-1); - } + function clearSuggestions() { + setSearchResults([]); + setFocusedSuggestionIndex(-1); + } - return ( -
-
- search - -
- {searchResults.length > 0 && ( -
    - {searchResults.slice(0, 4).map((result, index) => ( -
  • - -
    • - ))} -
- )} -
- ); + return ( +
+
+ search + +
+ {searchResults.length > 0 && ( +
    + {searchResults.slice(0, 4).map((result, index) => ( +
  • + +
    • + ))} +
+ )} +
+ ); }; SearchBar.propTypes = { - setShowInfo: PropTypes.func.isRequired, + setShowInfo: PropTypes.func.isRequired, }; export default SearchBar; diff --git a/src/components/SelectProject/SelectedProjects.js b/src/components/SelectProject/SelectedProjects.js index 48db3d3..6439cab 100644 --- a/src/components/SelectProject/SelectedProjects.js +++ b/src/components/SelectProject/SelectedProjects.js @@ -4,47 +4,47 @@ import { DataContext } from "../../contexts/DataContext"; // import useLoadingError from "../../hooks/useLoadingError"; const SelectedProjects = () => { - const { userData, setUserData } = useContext(DataContext); - const filteredReposToBadge = [...new Set(userData.reposToBadge)]; + const { userData, setUserData } = useContext(DataContext); + const filteredReposToBadge = [...new Set(userData.reposToBadge)]; - // const { loading, error } = useLoadingError(); + // const { loading, error } = useLoadingError(); - const handleClearInput = (event, result) => { - event.stopPropagation(); - const repos = userData.reposToBadge.filter((repo) => repo !== result); + const handleClearInput = (event, result) => { + event.stopPropagation(); + const repos = userData.reposToBadge.filter((repo) => repo !== result); - setUserData({ - ...userData, - reposToBadge: repos, - }); - }; + setUserData({ + ...userData, + reposToBadge: repos, + }); + }; - return ( -
    - {/* {loading &&
  • Loading...
    • } + return ( +
      + {/* {loading &&
    • Loading...
      • } {error &&
    • {error}
      • } {!loading && !error && results.length === 0 && (
    • Repository not found
      • )} */} - { - // !loading && - // !error && + { + // !loading && + // !error && - filteredReposToBadge.map((result, index) => ( -
    • - {result} - -
      • - )) - } -
    - ); + filteredReposToBadge.map((result, index) => ( +
  • + {result} + +
    • + )) + } +
+ ); }; export default SelectedProjects; diff --git a/src/components/SelectProject/searchbar.scss b/src/components/SelectProject/searchbar.scss index 599f093..0e904f2 100644 --- a/src/components/SelectProject/searchbar.scss +++ b/src/components/SelectProject/searchbar.scss @@ -3,84 +3,83 @@ .searchbar { position: relative; - .search { - display: flex; - border: 1px solid $headingColor; - border-radius: 4px; - background: #ffffff; - padding: 13px 0; + .search { + display: flex; + border: 1px solid $headingColor; + border-radius: 4px; + background: #ffffff; + padding: 13px 0; - input[type="text"] { - width: 100%; - border: none; - outline: none; - background: transparent; - font-size: 1rem; - color: $headingColor; - caret-color: $chaossPink; - } + input[type="text"] { + width: 100%; + border: none; + outline: none; + background: transparent; + font-size: 1rem; + color: $headingColor; + caret-color: $chaossPink; + } - // button { - // border: 1px solid #fff; - // outline: none; - // background: $headingColor; - // padding: 13px 16px; - // width: 11rem; - // color: #fff; - // } + // button { + // border: 1px solid #fff; + // outline: none; + // background: $headingColor; + // padding: 13px 16px; + // width: 11rem; + // color: #fff; + // } - img { - margin: 0 0.2rem 0 1rem; - } - } + img { + margin: 0 0.2rem 0 1rem; + } + } - .suggestions { - display: flex; - flex-direction: column; - column-gap: 1.3rem; + .suggestions { + display: flex; + flex-direction: column; + column-gap: 1.3rem; position: absolute; width: 100%; - border-radius: 0.25rem; - border: 0.5px solid #ededed; - background: #fff; - box-shadow: 0px 10px 20px 1px rgba(0, 0, 0, 0.05); + border-radius: 0.25rem; + border: 0.5px solid #ededed; + background: #fff; + box-shadow: 0px 10px 20px 1px rgba(0, 0, 0, 0.05); z-index: 2; padding: 1.44rem 0 0.88rem 0; + li { + list-style-type: none; + display: flex; - li { - list-style-type: none; - display: flex; - - button { + button { width: 100%; padding: 0.5rem 1rem; - text-align: left; - transition: all 0.2s ease-out; + text-align: left; + transition: all 0.2s ease-out; display: flex; justify-content: space-between; - } - button:focus, - button:active, - button.focused { - background: $chaossPink; + } + button:focus, + button:active, + button.focused { + background: $chaossPink; color: #fff; svg path { fill: #fff; } - } - } + } + } li:not(:last-child) { button { - border-bottom: 0.5px solid #BEBEBE; - } + border-bottom: 0.5px solid #bebebe; + } } - } + } - > button { - background: #fff; - padding: 1.25rem 0; - } + > button { + background: #fff; + padding: 1.25rem 0; + } } diff --git a/src/components/index.js b/src/components/index.js index 820b663..4aef0bd 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -17,21 +17,21 @@ import Spinner from "./loader/Spinner"; import Loader from "./loader/Loader"; export { - Header, - Footer, - Faq, - CardComponent, - CardCarousel, - Jumbotron, - SearchBar, - Sidebar, - AboutDeiMobile, - WhatIsDeiBadging, - ApplicationProcess, - DeiFile, - DeiBadge, - SelectedProjects, - Layout, - Spinner, - Loader, + Header, + Footer, + Faq, + CardComponent, + CardCarousel, + Jumbotron, + SearchBar, + Sidebar, + AboutDeiMobile, + WhatIsDeiBadging, + ApplicationProcess, + DeiFile, + DeiBadge, + SelectedProjects, + Layout, + Spinner, + Loader, }; diff --git a/src/components/loader/Loader.js b/src/components/loader/Loader.js index 08c9f33..7e5c7ec 100644 --- a/src/components/loader/Loader.js +++ b/src/components/loader/Loader.js @@ -4,26 +4,26 @@ import Backdrop from "@mui/material/Backdrop"; import Spinner from "./Spinner"; const Loader = ({ open, bgColor, children }) => { - return ( - theme.zIndex.drawer + 1, - }} - open={open} - > -
- - {children} -
- - ); + return ( + theme.zIndex.drawer + 1, + }} + open={open} + > +
+ + {children} +
+ + ); }; Loader.propTypes = { - open: PropTypes.bool.isRequired, + open: PropTypes.bool.isRequired, bgColor: PropTypes.string, - children: PropTypes.node, + children: PropTypes.node, }; export default Loader; diff --git a/src/components/loader/Spinner.js b/src/components/loader/Spinner.js index 0b64d53..b75a682 100644 --- a/src/components/loader/Spinner.js +++ b/src/components/loader/Spinner.js @@ -2,7 +2,7 @@ import "../../assets/styles/global.scss"; import "./loader.scss"; const Spinner = () => { - return
; + return
; }; export default Spinner; diff --git a/src/components/loader/loader.scss b/src/components/loader/loader.scss index e77994b..62c783a 100644 --- a/src/components/loader/loader.scss +++ b/src/components/loader/loader.scss @@ -6,41 +6,41 @@ justify-content: center; row-gap: 53px; - p{ + p { font-family: $font-family_2; font-size: 1.25rem; font-weight: 500; } - .spinner { - width: 3.5rem; - flex-shrink: 0; - aspect-ratio: 1; - display: grid; - background: linear-gradient(0deg, #06f395 30%, #0000 0 70%, #253127 0) 50%/8% - 100%, - linear-gradient(90deg, #06f395 30%, #0000 0 70%, #253127 0) 50%/100% 8%; - background-repeat: no-repeat; - // background-size: 100% 100%; - animation: spin 0.4s infinite steps(8); - transition: all 0.4s ease-in-out; - } - .spinner::before, - .spinner::after { - content: ""; - grid-area: 1/1; - background: inherit; - opacity: 0.915; - transform: rotate(45deg); - } - .spinner::after { - opacity: 0.83; - transform: rotate(90deg); - } + .spinner { + width: 3.5rem; + flex-shrink: 0; + aspect-ratio: 1; + display: grid; + background: linear-gradient(0deg, #06f395 30%, #0000 0 70%, #253127 0) 50%/8% + 100%, + linear-gradient(90deg, #06f395 30%, #0000 0 70%, #253127 0) 50%/100% 8%; + background-repeat: no-repeat; + // background-size: 100% 100%; + animation: spin 0.4s infinite steps(8); + transition: all 0.4s ease-in-out; + } + .spinner::before, + .spinner::after { + content: ""; + grid-area: 1/1; + background: inherit; + opacity: 0.915; + transform: rotate(45deg); + } + .spinner::after { + opacity: 0.83; + transform: rotate(90deg); + } - @keyframes spin { - 100% { - transform: rotate(1turn); - } - } + @keyframes spin { + 100% { + transform: rotate(1turn); + } + } } diff --git a/src/contexts/DataContext.js b/src/contexts/DataContext.js index 5a95fe1..fb98836 100644 --- a/src/contexts/DataContext.js +++ b/src/contexts/DataContext.js @@ -4,43 +4,43 @@ import PropTypes from "prop-types"; export const DataContext = createContext(); export const DataProvider = ({ children }) => { - const [userData, setUserData] = useState({ - name: "", - email: "", - username: "", - repos: [], - reposToBadge: [], - }); + const [userData, setUserData] = useState({ + name: "", + email: "", + username: "", + repos: [], + reposToBadge: [], + }); - /** - * KINDLY FOLLOW THESE STEPS TO TEST THIS PROGRAM ON YOUR LOCAL MACHINE - * Step 1: Login to your gihub via http://localhost:5050/badge - * Step 2: Grant this program access to repo(s) - * Step 3: Copy your github info and replace it with the empty useState() above as mine below - * Step 4: Then proceed to SearchBar.js and comment out the first useEffect() - * Step 5: Visit localhost:5050/select-project, select the project you want to badge and proceed. - * Now you are good go!!! - */ + /** + * KINDLY FOLLOW THESE STEPS TO TEST THIS PROGRAM ON YOUR LOCAL MACHINE + * Step 1: Login to your gihub via http://localhost:5050/badge + * Step 2: Grant this program access to repo(s) + * Step 3: Copy your github info and replace it with the empty useState() above as mine below + * Step 4: Then proceed to SearchBar.js and comment out the first useEffect() + * Step 5: Visit localhost:5050/select-project, select the project you want to badge and proceed. + * Now you are good go!!! + */ - // const [userData, setUserData] = useState({ - // email: "tochuks.chris@gmail.com", - // name: "Tochukwu", - // repos: [ - // "AllInOpenSource/ProjectBadging", - // "animeshack/church-website", - // "badging/badging", - // ], - // username: "teek-tech", - // reposToBadge: [], - // }); + // const [userData, setUserData] = useState({ + // email: "tochuks.chris@gmail.com", + // name: "Tochukwu", + // repos: [ + // "AllInOpenSource/ProjectBadging", + // "animeshack/church-website", + // "badging/badging", + // ], + // username: "teek-tech", + // reposToBadge: [], + // }); - return ( - - {children} - - ); + return ( + + {children} + + ); }; DataProvider.propTypes = { - children: PropTypes.node, + children: PropTypes.node, }; diff --git a/src/contexts/DesktopContext.js b/src/contexts/DesktopContext.js index 2cc4f81..c06b14e 100644 --- a/src/contexts/DesktopContext.js +++ b/src/contexts/DesktopContext.js @@ -2,28 +2,28 @@ import { useState, useContext, createContext } from "react"; import PropTypes from "prop-types"; const DesktopContext = createContext({ - isDesktop: false, + isDesktop: false, }); const DesktopProvider = ({ children }) => { - // eslint-disable-next-line no-unused-vars - const [isDesktop, setDesktop] = useState(window.innerWidth > 768); + // eslint-disable-next-line no-unused-vars + const [isDesktop, setDesktop] = useState(window.innerWidth > 768); - return ( - <> - - {children} - - - ); + return ( + <> + + {children} + + + ); }; const useDesktop = () => { - return useContext(DesktopContext); + return useContext(DesktopContext); }; DesktopProvider.propTypes = { - children: PropTypes.node.isRequired, + children: PropTypes.node.isRequired, }; export { DesktopContext, DesktopProvider, useDesktop }; diff --git a/src/hooks/fetchProjects.js b/src/hooks/fetchProjects.js index 66fe3fc..fe99b9e 100644 --- a/src/hooks/fetchProjects.js +++ b/src/hooks/fetchProjects.js @@ -1,5 +1,5 @@ // utils/useFetchData.js -import { useEffect, useState } from 'react'; +import { useEffect, useState } from "react"; export function fetchProjects(apiUrl) { const [data, setData] = useState([]); @@ -15,7 +15,7 @@ export function fetchProjects(apiUrl) { }); if (!response.ok) { - throw new Error('Failed to fetch data'); + throw new Error("Failed to fetch data"); } const jsonData = await response.json(); diff --git a/src/pages/AboutDeiBadging/About.js b/src/pages/AboutDeiBadging/About.js index 0d1b14d..828f09e 100644 --- a/src/pages/AboutDeiBadging/About.js +++ b/src/pages/AboutDeiBadging/About.js @@ -6,39 +6,39 @@ import { useDesktop } from "../../contexts/DesktopContext"; import { Outlet } from "react-router-dom"; const About = () => { - const { isDesktop } = useDesktop(); + const { isDesktop } = useDesktop(); - return ( -
-
-
-
- badging-logo -

About DEI Badging

-
-
-
-
- {isDesktop && ( - <> - -
- -
- - )} - {!isDesktop && ( -
- -
- )} -
-
-
-
- ); + return ( +
+
+
+
+ badging-logo +

About DEI Badging

+
+
+
+
+ {isDesktop && ( + <> + +
+ +
+ + )} + {!isDesktop && ( +
+ +
+ )} +
+
+
+
+ ); }; export default About; diff --git a/src/pages/AboutDeiBadging/about.scss b/src/pages/AboutDeiBadging/about.scss index 775fee1..5cbadef 100644 --- a/src/pages/AboutDeiBadging/about.scss +++ b/src/pages/AboutDeiBadging/about.scss @@ -1,285 +1,285 @@ @import "../../assets/styles/variables"; .about-dei { - * > * { - color: inherit; - } - - .header { - .container { - padding: 1.5rem; - } - - .jumbotron__container { - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - align-items: center; + * > * { + color: inherit; + } + + .header { + .container { + padding: 1.5rem; + } + + .jumbotron__container { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + align-items: center; row-gap: 1.5rem; padding-top: 10rem; padding-bottom: 5rem; - h1 { - font-size: 3rem; - font-family: $font-family_1; - background: $heroTitleBackground2; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - -webkit-text-fill-color: transparent; - } - - .jumbotron { - padding: 6rem 0 1.8rem 0; - margin: 0rem 0rem; - max-width: 70.875rem; - - h2 { - font-size: 3rem; - } - - h3 { - font-size: 1.125rem; - margin: 0; - } - - p { - max-width: inherit; - font-size: 1.125rem; - padding-right: 3.8rem; - } - } - } - } - - main { - background-color: #fff; - - &.container { - padding: 4rem 1rem; - } - - .main__container { - background: #fff; - - h3, - h2 { - background: linear-gradient( - 180deg, - $headingColor 0%, - $headingColor 100% - ); - -webkit-background-clip: text; - background-clip: text; - } - - h3 { - font-family: $font-family_2; - font-size: 1rem; - // margin: 0; - } - - p { - color: $textColor2; - line-height: 1.8; - } - - .page__content { - ul { - padding: 0 0 0 1.5rem; - - li { - list-style: disc; - line-height: 1.8; - color: $textColor2; - } - } - - h3 { - margin-top: 1rem; - } - - a { - color: $chaossPink; - } - - p:not(:first-of-type) { - margin-top: 1.5rem; - } - - .what__is__dei { - h3 { - font-size: 1.5rem; - font-weight: bold; - margin-top: 0; - } - - .objectives { - margin-top: 2.375rem; - } - } - - .application_process, - .dei__file, - .dei__badges { - a { - text-decoration: underline; - } - } - - .dei__file { - ul { - margin-top: 1.5rem; - } - } - - .dei__badges { - h4 { - margin-top: 1rem; - } - - .badges { - display: flex; - flex-wrap: wrap; - gap: 0.5rem 1rem; - margin-bottom: 1rem; - } - } - } - } - } + h1 { + font-size: 3rem; + font-family: $font-family_1; + background: $heroTitleBackground2; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + -webkit-text-fill-color: transparent; + } + + .jumbotron { + padding: 6rem 0 1.8rem 0; + margin: 0rem 0rem; + max-width: 70.875rem; + + h2 { + font-size: 3rem; + } + + h3 { + font-size: 1.125rem; + margin: 0; + } + + p { + max-width: inherit; + font-size: 1.125rem; + padding-right: 3.8rem; + } + } + } + } + + main { + background-color: #fff; + + &.container { + padding: 4rem 1rem; + } + + .main__container { + background: #fff; + + h3, + h2 { + background: linear-gradient( + 180deg, + $headingColor 0%, + $headingColor 100% + ); + -webkit-background-clip: text; + background-clip: text; + } + + h3 { + font-family: $font-family_2; + font-size: 1rem; + // margin: 0; + } + + p { + color: $textColor2; + line-height: 1.8; + } + + .page__content { + ul { + padding: 0 0 0 1.5rem; + + li { + list-style: disc; + line-height: 1.8; + color: $textColor2; + } + } + + h3 { + margin-top: 1rem; + } + + a { + color: $chaossPink; + } + + p:not(:first-of-type) { + margin-top: 1.5rem; + } + + .what__is__dei { + h3 { + font-size: 1.5rem; + font-weight: bold; + margin-top: 0; + } + + .objectives { + margin-top: 2.375rem; + } + } + + .application_process, + .dei__file, + .dei__badges { + a { + text-decoration: underline; + } + } + + .dei__file { + ul { + margin-top: 1.5rem; + } + } + + .dei__badges { + h4 { + margin-top: 1rem; + } + + .badges { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1rem; + margin-bottom: 1rem; + } + } + } + } + } } @media screen and (min-width: 769px) { - .about-dei { - .header { - .container { - padding: 0.625rem 7.5rem; - } - - .jumbotron__container { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - text-align: left; - width: 1440px; + .about-dei { + .header { + .container { + padding: 0.625rem 7.5rem; + } + + .jumbotron__container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + text-align: left; + width: 1440px; padding: 10rem 8rem 6rem 8rem; - column-gap: 1.5rem; - - h1 { - font-size: 3.375rem; - font-family: $font-family_1; - background: $heroTitleBackground2; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - -webkit-text-fill-color: transparent; - } - - .jumbotron { - // padding: 10rem 0 6rem 0; - gap: 0 1rem; - max-width: 902px; - - p { - padding: 0; - } - - & > p { - margin-top: 1.5rem; - } - } - } - } - - main { - display: flex; - justify-content: center; - - &.container { - padding: 0 7.5rem; - } - - .main__container { - display: flex; - color: $textColor2; - padding: 6.12rem 0; - gap: 0 4rem; - align-items: flex-start; - width: 1200px; - - .page__nav { - width: 265px; + column-gap: 1.5rem; + + h1 { + font-size: 3.375rem; + font-family: $font-family_1; + background: $heroTitleBackground2; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + -webkit-text-fill-color: transparent; + } + + .jumbotron { + // padding: 10rem 0 6rem 0; + gap: 0 1rem; + max-width: 902px; + + p { + padding: 0; + } + + & > p { + margin-top: 1.5rem; + } + } + } + } + + main { + display: flex; + justify-content: center; + + &.container { + padding: 0 7.5rem; + } + + .main__container { + display: flex; + color: $textColor2; + padding: 6.12rem 0; + gap: 0 4rem; + align-items: flex-start; + width: 1200px; + + .page__nav { + width: 265px; position: sticky; top: 10rem; - ul { - li { - cursor: pointer; - transition: all 0.3s ease-in-out; - margin-bottom: 0.75rem; - - .main__link { - display: flex; - align-items: center; - margin-bottom: 0.75rem; - - a { - line-height: 150%; - - &.active { - color: $chaossPink; - font-weight: 600; - - & ~ img { - display: block; - margin-left: 8px; - } - } - } - } - - .sub__links { - border-left: 3px solid $chaossPink; - padding: 0px 0 4px 12px; - display: flex; - flex-direction: column; - row-gap: 0.75rem; - - a { - display: block; - } - } - - img { - display: none; - } - } - } - } - - .page__content { - width: calc(100% - 265px); - max-width: 719px; - - h2 { - font-size: 2rem; - font-family: $font-family_1; - font-weight: bolder; - margin-bottom: 1rem; - background: linear-gradient( - 180deg, - $headingColor 0%, - $headingColor 100% - ); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - } - } - } - } - } + ul { + li { + cursor: pointer; + transition: all 0.3s ease-in-out; + margin-bottom: 0.75rem; + + .main__link { + display: flex; + align-items: center; + margin-bottom: 0.75rem; + + a { + line-height: 150%; + + &.active { + color: $chaossPink; + font-weight: 600; + + & ~ img { + display: block; + margin-left: 8px; + } + } + } + } + + .sub__links { + border-left: 3px solid $chaossPink; + padding: 0px 0 4px 12px; + display: flex; + flex-direction: column; + row-gap: 0.75rem; + + a { + display: block; + } + } + + img { + display: none; + } + } + } + } + + .page__content { + width: calc(100% - 265px); + max-width: 719px; + + h2 { + font-size: 2rem; + font-family: $font-family_1; + font-weight: bolder; + margin-bottom: 1rem; + background: linear-gradient( + 180deg, + $headingColor 0%, + $headingColor 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + } + } + } + } } diff --git a/src/pages/GetStartedBadging/GetStartedBadging.js b/src/pages/GetStartedBadging/GetStartedBadging.js index 89dd889..e63626e 100644 --- a/src/pages/GetStartedBadging/GetStartedBadging.js +++ b/src/pages/GetStartedBadging/GetStartedBadging.js @@ -1,14 +1,14 @@ -import { useState } from 'react'; -import { Layout, Loader } from '../../components'; -import { loginArrow } from '../../assets/images'; +import { useState } from "react"; +import { Layout, Loader } from "../../components"; +import { loginArrow } from "../../assets/images"; -import '../../assets/styles/global.scss'; -import './getStartedBadging.scss'; +import "../../assets/styles/global.scss"; +import "./getStartedBadging.scss"; const GetStartedBadging = () => { const [openLoader, setOpenLoader] = useState(false); - const baseurl = 'https://badging.allinopensource.org/api'; + const baseurl = "https://badging.allinopensource.org/api"; const handleLogin = () => { setOpenLoader(true); @@ -41,7 +41,7 @@ const GetStartedBadging = () => { className="login-github" onClick={handleLogin} > - Get Started{' '} + Get Started{" "} Login with GitHub arrow icon diff --git a/src/pages/GetStartedBadging/getStartedBadging.scss b/src/pages/GetStartedBadging/getStartedBadging.scss index 74c20f6..6faa407 100644 --- a/src/pages/GetStartedBadging/getStartedBadging.scss +++ b/src/pages/GetStartedBadging/getStartedBadging.scss @@ -1,4 +1,4 @@ -@import '../../assets/styles/variables'; +@import "../../assets/styles/variables"; .section-two { background-color: white; diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index 0f2b9c9..c789d54 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -1,15 +1,15 @@ -import '../../assets/styles/global.scss'; -import './home.scss'; +import "../../assets/styles/global.scss"; +import "./home.scss"; import { Footer, Header, // Faq, CardComponent, CardCarousel, -} from '../../components'; +} from "../../components"; // import { faqData } from '../../components/Faq/data'; -import { howItWorksData } from './data'; +import { howItWorksData } from "./data"; import { howItWorksBgMobile, howItWorksBgWeb, @@ -17,9 +17,9 @@ import { // faqBgMobile, heroSectionBgWeb, heroSectionBgMobile, -} from '../../assets/images'; +} from "../../assets/images"; // import zIndex from '@mui/material/styles/zIndex'; -import { useMediaQuery } from 'react-responsive'; +import { useMediaQuery } from "react-responsive"; const Home = () => { const isMobile = useMediaQuery({ maxWidth: 650 }); @@ -27,10 +27,10 @@ const Home = () => { backgroundImage: `url(${ isMobile ? heroSectionBgMobile : heroSectionBgWeb })`, - height: '100%', - backgroundPosition: 'center top', - backgroundSize: 'cover', - backgroundRepeat: 'no-repeat', + height: "100%", + backgroundPosition: "center top", + backgroundSize: "cover", + backgroundRepeat: "no-repeat", }; return (
diff --git a/src/pages/Home/data.js b/src/pages/Home/data.js index 608f61f..772f257 100644 --- a/src/pages/Home/data.js +++ b/src/pages/Home/data.js @@ -6,23 +6,23 @@ import { ApplySvgComponent, ReviewSvgComponent, GetBadgedSvgComponent, -} from '../../assets/images'; +} from "../../assets/images"; export const featuredProjects = [ { - name: 'github', + name: "github", logo: github, }, { - name: 'loom', + name: "loom", logo: loom, }, { - name: 'discord', + name: "discord", logo: discord, }, { - name: 'dropbox', + name: "dropbox", logo: dropbox, }, ]; @@ -30,24 +30,24 @@ export const featuredProjects = [ export const howItWorksData = [ { id: 1, - title: 'Apply for Badge', + title: "Apply for Badge", text: `To apply for a DEI badge, ensure you have a document that describes the DEI efforts (DEI.md) for your open source project.`, - link: 'Check a DEI.md file template', + link: "Check a DEI.md file template", icon: , }, { id: 2, - title: 'Review', + title: "Review", text: `The submitted project will automatically be scanned for the presence of the DEI.md file.`, - link: 'Learn More', + link: "Learn More", icon: , }, { id: 3, - title: 'Get a DEI Project Badge', + title: "Get a DEI Project Badge", text: `After a successful review, your project will receive a DEI badge and a supplemental inclusive language report via email.`, diff --git a/src/pages/Home/home.scss b/src/pages/Home/home.scss index 5368501..c6ba475 100644 --- a/src/pages/Home/home.scss +++ b/src/pages/Home/home.scss @@ -1,4 +1,4 @@ -@import '../../assets/styles/variables'; +@import "../../assets/styles/variables"; .sub-nav { display: flex; diff --git a/src/pages/NewBadgingRequirements/LatestBadging.scss b/src/pages/NewBadgingRequirements/LatestBadging.scss index 28e4d77..bab0048 100644 --- a/src/pages/NewBadgingRequirements/LatestBadging.scss +++ b/src/pages/NewBadgingRequirements/LatestBadging.scss @@ -1,4 +1,4 @@ -@import '../../assets/styles/variables'; +@import "../../assets/styles/variables"; .requirements { width: 100%; diff --git a/src/pages/NewBadgingRequirements/LatestBadgingSample.js b/src/pages/NewBadgingRequirements/LatestBadgingSample.js index 312ce62..8f10081 100644 --- a/src/pages/NewBadgingRequirements/LatestBadgingSample.js +++ b/src/pages/NewBadgingRequirements/LatestBadgingSample.js @@ -1,16 +1,16 @@ -import React from 'react'; -import { Footer, Header } from '../../components'; +import React from "react"; +import { Footer, Header } from "../../components"; import { loginArrow, getBadgedFullBG, getBadgedMobile, -} from '../../assets/images'; +} from "../../assets/images"; -import '../../assets/styles/global.scss'; -import './LatestBadging.scss'; +import "../../assets/styles/global.scss"; +import "./LatestBadging.scss"; const LatestBadgingSample = () => { - const baseurl = 'https://badging.allinopensource.org/api'; + const baseurl = "https://badging.allinopensource.org/api"; const handleLogin = () => { window.location.href = `${baseurl}/login`; @@ -60,7 +60,7 @@ const LatestBadgingSample = () => { className="login-github" onClick={handleLogin} > - Get Started{' '} + Get Started{" "} Login with GitHub arrow icon diff --git a/src/pages/ProjectBadgingSuccess/ProjectBadgingSuccess.js b/src/pages/ProjectBadgingSuccess/ProjectBadgingSuccess.js index e3fd652..fab5652 100644 --- a/src/pages/ProjectBadgingSuccess/ProjectBadgingSuccess.js +++ b/src/pages/ProjectBadgingSuccess/ProjectBadgingSuccess.js @@ -1,49 +1,87 @@ -import React from 'react' -import { Header } from '../../components' -import { Link, useLocation } from 'react-router-dom' -import "./ProjectBadgingSuccess.scss" +import React from "react"; +import { Header } from "../../components"; +import { Link, useLocation } from "react-router-dom"; +import "./ProjectBadgingSuccess.scss"; const ProjectBadgingSuccess = () => { const location = useLocation(); - const { state } = location + const { state } = location; return (
-
-
-
-
-
- - - - - - - - - - - - - - -
-

Scan Successful!

-
-

Hello {state?.name}! You will receive an email shortly.

-

Kindly check your email {state?.email}.

-
-
- +
+
+
+
+
+ + + + + + + + + + + + + + +
+

Scan Successful!

+
+

Hello {state?.name}! You will receive an email shortly.

+

Kindly check your email {state?.email}.

+
-
-
- Badge more repos -
-
-
+
+
+
+ Badge more repos +
+
+
- ) -} + ); +}; -export default ProjectBadgingSuccess \ No newline at end of file +export default ProjectBadgingSuccess; diff --git a/src/pages/ProjectBadgingSuccess/ProjectBadgingSuccess.scss b/src/pages/ProjectBadgingSuccess/ProjectBadgingSuccess.scss index c285abf..ef2d67f 100644 --- a/src/pages/ProjectBadgingSuccess/ProjectBadgingSuccess.scss +++ b/src/pages/ProjectBadgingSuccess/ProjectBadgingSuccess.scss @@ -1,4 +1,4 @@ -@import '../../assets/styles/variables.scss'; +@import "../../assets/styles/variables.scss"; // body { // background-color: #fff; // } @@ -38,7 +38,6 @@ // } // .report { // text-align: center; - // p { // font-family: $font-family_2; @@ -48,7 +47,7 @@ // color: #000; // } // } - + // .badge-more { // background-color: orange; // width:inherit !important; @@ -66,7 +65,6 @@ // } // // } - // } // @media screen and (max-width: 700px) { @@ -74,124 +72,114 @@ // .title-header { // font-size: 25px !important; // } - + // .badge-more { // background-color: red; // display: flex; // align-items: center; // justify-content: center; // width: inherit; - + // a { // padding: 20px 20px !important; // } // } - + // } // } main { - // background-color: blue; - color: #000; - height: auto; - width: 100%; - - - .successContainer { - background-color: #fff; - max-width: 1440px; - margin: auto; - padding: 0 20px; - - .infoContainer{ - height: 70vh; - display: flex; - align-items: center; - justify-content: end; - flex-direction: column; - background-color: #fff; - max-width: 1440px; - gap: 10px; - - .msg-icon { - // border-bottom: 2px solid #000; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - } - - .title-header { - font-family: $font-family_1; - font-size: 32px; - font-weight: 600; - color: #000; - // background: linear-gradient($congratulationTextColor, 88deg, #E9E9E9 0%, #BABABA 100%); - } - .report { - text-align: center; - margin-bottom: 5rem; - p { - font-family: $font-family_2; - font-size: 18px; - font-weight: 400; - line-height: 150%; - color: #000; - - } - } + // background-color: blue; + color: #000; + height: auto; + width: 100%; - } + .successContainer { + background-color: #fff; + max-width: 1440px; + margin: auto; + padding: 0 20px; - - } - .badge-more { - background-color: #F7F7F7; - height: 30vh; - width: 100% !important; - padding: 0 10px; - - .item { - max-width: 1440px; - background-color: #F7F7F7; - margin: auto; - display: flex; - align-items: center; - justify-content: end; - height: 100%; - border: none; - - a { - padding: 20px 70px; - background-color: #06F395; - margin-right: 4rem; - color: #000; - } + .infoContainer { + height: 70vh; + display: flex; + align-items: center; + justify-content: end; + flex-direction: column; + background-color: #fff; + max-width: 1440px; + gap: 10px; + + .msg-icon { + // border-bottom: 2px solid #000; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + .title-header { + font-family: $font-family_1; + font-size: 32px; + font-weight: 600; + color: #000; + // background: linear-gradient($congratulationTextColor, 88deg, #E9E9E9 0%, #BABABA 100%); + } + .report { + text-align: center; + margin-bottom: 5rem; + p { + font-family: $font-family_2; + font-size: 18px; + font-weight: 400; + line-height: 150%; + color: #000; } + } } - -} + } + .badge-more { + background-color: #f7f7f7; + height: 30vh; + width: 100% !important; + padding: 0 10px; + .item { + max-width: 1440px; + background-color: #f7f7f7; + margin: auto; + display: flex; + align-items: center; + justify-content: end; + height: 100%; + border: none; + + a { + padding: 20px 70px; + background-color: #06f395; + margin-right: 4rem; + color: #000; + } + } + } +} @media screen and (max-width: 700px) { - .successContainer { - .title-header { - font-size: 25px !important; - } + .successContainer { + .title-header { + font-size: 25px !important; } - .badge-more { - - .item { - justify-content: center !important; - align-items: start !important; - padding-top: 50px !important; - } - - a { - padding: 20px 70px !important; - margin-right: 0 !important; - } - } - - -} \ No newline at end of file + } + .badge-more { + .item { + justify-content: center !important; + align-items: start !important; + padding-top: 50px !important; + } + + a { + padding: 20px 70px !important; + margin-right: 0 !important; + } + } +} diff --git a/src/pages/Projects/Projects.js b/src/pages/Projects/Projects.js index d93215f..f44347b 100644 --- a/src/pages/Projects/Projects.js +++ b/src/pages/Projects/Projects.js @@ -1,100 +1,95 @@ -import React, { useState } from 'react'; -import '../../assets/styles/global.scss'; -import './project.scss'; -import { Footer, Header } from '../../components'; -import Jumbotron from '../../components/Jumbotron/Jumbotron'; -import { Pagination, TablePagination } from '@mui/material'; -import { styled } from '@mui/material/styles'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell, { tableCellClasses } from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; -import { AZicon, DateIcon, Filter, ScheduleIcon, SearchIcon, badge, curlyBraces } from '../../assets/images'; -import { Publish } from '@mui/icons-material'; -import { fetchProjects } from '../../hooks/fetchProjects'; -import RandomString from '../../components/RandomString'; +/* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ + +import React, { useState } from "react"; +import "../../assets/styles/global.scss"; +import "./project.scss"; +import { Footer, Header } from "../../components"; +import { Pagination } from "@mui/material"; +import { styled } from "@mui/material/styles"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell, { tableCellClasses } from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; +import Paper from "@mui/material/Paper"; +import { + AZicon, + DateIcon, + Filter, + ScheduleIcon, + SearchIcon, + curlyBraces, +} from "../../assets/images"; +import { fetchProjects } from "../../hooks/fetchProjects"; const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { - backgroundColor: '#1C1C1C', + backgroundColor: "#1C1C1C", color: theme.palette.common.white, - borderBottom: '1px solid #030303', + borderBottom: "1px solid #030303", }, [`&.${tableCellClasses.body}`]: { fontSize: 14, - backgroundColor: '#131314', + backgroundColor: "#131314", color: theme.palette.common.white, }, - })); const StyledTableRow = styled(TableRow)(({ theme }) => ({ - '&:nth-of-type(odd)': { + "&:nth-of-type(odd)": { backgroundColor: theme.palette.action.hover, }, // hide last border - 'th, td': { - borderBottom: '1px solid #030303', + "th, td": { + borderBottom: "1px solid #030303", }, - '&:last-child td, &:last-child th': { + "&:last-child td, &:last-child th": { border: 0, }, })); -const StyledTablePagination = styled(TablePagination)(theme => ({ - backgroundColor: '#1C1C1C', - color: '#fff', -})); - const Projects = () => { const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(4); + const [rowsPerPage, setRowsPerPage] = useState(4); // eslint-disable-line no-unused-vars const [filter, setFilter] = useState(false); - const [filterStatus, setFilterStatus] = useState("Published"); - const [searchTerm, setSearchTerm] = useState(''); - const [sortBy, setSortBy] = useState('createdAt'); - const { data, isLoading, error } = fetchProjects('https://badging.allinopensource.org/api/badgedRepos'); - const handleChangePage = (event, newPage) => { - setPage(newPage); - }; + const [searchTerm, setSearchTerm] = useState(""); + const [sortBy, setSortBy] = useState("createdAt"); + const { data, isLoading } = fetchProjects( + "https://badging.allinopensource.org/api/badgedRepos" + ); - const handleChangeRowsPerPage = (event) => { - setRowsPerPage(parseInt(event.target.value, 10)); - setPage(0); + const handleFilterToggle = () => { + setFilter((prev) => !prev); }; - const handleFilterToggle = () => { - setFilter((prev) => !prev) - } - function formatDate(dateString) { const date = new Date(dateString); - const day = String(date.getDate()).padStart(2, '0'); - const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based + const day = String(date.getDate()).padStart(2, "0"); + const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-based const year = date.getFullYear(); return `${day}-${month}-${year}`; } - - // const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage); - const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage); - - const filteredData = data && data.filter((row) => - // row.title.toLowerCase().includes(searchTerm.toLowerCase()) - row.repoLink.includes(searchTerm.toLowerCase()) - ) - .sort((a, b) => { - if (sortBy === 'Published') { - return new Date(b.createdAt) - new Date(a.createdAt); - } else if (sortBy === 'Badged') { - return new Date(b.updatedAt) - new Date(a.updatedAt); - } else if (sortBy === 'Project') { - return a.badgeType.localeCompare(b.badgeType); - } - return 0; - }); + + const emptyRows = + rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage); + + const filteredData = + data && + data + .filter((row) => row.repoLink.includes(searchTerm.toLowerCase())) + .sort((a, b) => { + if (sortBy === "Published") { + return new Date(b.createdAt) - new Date(a.createdAt); + } else if (sortBy === "Badged") { + return new Date(b.updatedAt) - new Date(a.updatedAt); + } else if (sortBy === "Project") { + return a.badgeType.localeCompare(b.badgeType); + } + return 0; + }); function extractImageUrl(markdownText) { const imageUrlRegex = /!\[.*?\]\((.*?)\)/; @@ -105,119 +100,180 @@ const Projects = () => { return (
-
- badging-logo -

DEI Badged Projects

-
+
+ badging-logo +

DEI Badged Projects

+
- -

- The All in CHAOSS Badging project is - helping open source communities prioritize diversity, - equity, and inclusion. Using the CHAOSS DEI metrics - as an industry benchmark, we are creating more - inclusive and welcoming open-source environments - for all. Our badged projects serve as exemplary - demonstrations: +

+ The All in CHAOSS Badging project is helping open source communities + prioritize diversity, equity, and inclusion. Using the CHAOSS DEI + metrics as an industry benchmark, we are creating more inclusive and + welcoming open-source environments for all. Our badged projects serve + as exemplary demonstrations:

-
- { - !isLoading ? ( -
-
-
-

DEI Projects

-
-
- filter-icon - setSearchTerm(e.target.value)} /> -
-
- - filter-icon -
-
+
+ {!isLoading ? ( +
+
+
+

DEI Projects

+
+
+ filter-icon + setSearchTerm(e.target.value)} + /> +
+
+ + filter-icon +
+
    -
  • setSortBy("Published")}> - filter-icon - Published Date +
  • setSortBy("Published")} + > + filter-icon + Published Date
    • -
  • setSortBy("Badged")}> - filter-icon - Badged Date +
  • setSortBy("Badged")} + > + filter-icon + Badged Date
    • -
  • setSortBy("Project")}> - filter-icon - Project Title +
  • setSortBy("Project")} + > + filter-icon + Project Title
+
-
-
- - - - - - S/N - Badge Date - Project Title - DEI Badge - Project Repository - - - - - { - (filteredData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map((row, index) => ( - - - {row.id} - - - {formatDate(row.createdAt)} - - {(()=>{const text=row.repoLink.split('/');return text[3]})()} - - badgeImage - - {row.repoLink} - - ))) - - } +
+ +
+ + + S/N + + Badge Date + + + Project Title + + + DEI Badge + + + Project Repository + + + - {emptyRows > 0 && ( - - - - )} - + + {filteredData + .slice( + page * rowsPerPage, + page * rowsPerPage + rowsPerPage + ) + .map((row, index) => ( + + + {row.id} + + + {formatDate(row.createdAt)} + + + {(() => { + const text = row.repoLink.split("/"); + return text[3]; + })()} + + + badgeImage + + + + {row.repoLink} + + + + ))} -
- -
-
- setPage(newPage - 1)} - variant="outlined" - shape="rounded" - color="success" - className="pagination" - /> -
+ {emptyRows > 0 && ( + + + + )} + + + +
+
+ setPage(newPage - 1)} + variant="outlined" + shape="rounded" + color="success" + className="pagination" + /> +
+
- -
- ): ( -

Error Retrieving Data....

- ) - } - + ) : ( +

Error Retrieving Data....

+ )}
diff --git a/src/pages/Projects/project.scss b/src/pages/Projects/project.scss index 5b133bb..6f7885e 100644 --- a/src/pages/Projects/project.scss +++ b/src/pages/Projects/project.scss @@ -1,367 +1,350 @@ -@import '../../assets/styles/variables.scss'; +@import "../../assets/styles/variables.scss"; main { - width: 100%; + width: 100%; } - .jumbotron__container { - display: flex; - align-items: center; - gap: 20px; - height: 400px; - margin: auto; - max-width: 1440px; - h1 { - font-size: 3.375rem; - font-family: $font-family_1; - background: $heroTitleBackground2; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - -webkit-text-fill-color: transparent; - } + display: flex; + align-items: center; + gap: 20px; + height: 400px; + margin: auto; + max-width: 1440px; + h1 { + font-size: 3.375rem; + font-family: $font-family_1; + background: $heroTitleBackground2; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + -webkit-text-fill-color: transparent; + } } .project { + .projectIntro { + color: #000; + padding-top: 50px; + font-size: 16px; + font-weight: 400; + line-height: 180%; + } + .divider { + border: 1px solid gray; + margin: 30px 0px; + } - .projectIntro { - color: #000; - padding-top: 50px; - font-size: 16px; - font-weight: 400; - line-height: 180%; - } - .divider { - border: 1px solid gray; - margin: 30px 0px; - } - - height: auto; - background-color: #fff; - // padding: 100px 20px 50px; - max-width: 1440px; + height: auto; + background-color: #fff; + // padding: 100px 20px 50px; + max-width: 1440px; + margin: auto; + // color: #000 !important; + .badging > div { + color: #000; + } + + .badging { + width: 100%; margin: auto; - // color: #000 !important; - .badging > div { - color: #000; - } + // background-color: red; - .badging { + p { + color: #000; + } + .container-holder { + background-color: #f5f5f5; + padding: 0px 20px 30px; + border-radius: 10px; + + .table-top-header { + display: flex; + align-items: center; + justify-content: space-between; width: 100%; - margin: auto; - // background-color: red; p { - color: #000; + font-size: 32px; + font-weight: 700; + font-family: $font-family_1; + padding: 10px 0px; } - .container-holder { - background-color: #F5F5F5; - padding: 0px 20px 30px; - border-radius: 10px; - .table-top-header { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - - p { - font-size: 32px; - font-weight: 700; - font-family: $font-family_1; - padding: 10px 0px; - - } - - .filter-projects { - display: flex; - padding: 20px 0px; - align-items: center; - gap: 10px; - position: relative; - - .filter { - display: flex; - background-color: #000; - border: none; - padding: 7px 30px; - border-radius: 10px; - cursor: pointer; - } - .filter button { - background-color: #000; - font-size: 16px; - // padding: 0px 30px; - border: none; - margin-right: 10px; - - } - .filter-dropdown { - position: absolute; - right: 0; - top: 4rem; - background-color: #fff; - height: auto; - width: auto; - padding: 10px; - border-radius: 8px; - border: 0.5px solid var(--neutral-gray-gr-07, #EDEDED); - background: #FFF; - box-shadow: 0px 19px 15px 6px rgba(0, 0, 0, 0.05); - - ul { - width: 250px; - - } - - ul li { - display: flex; - justify-content: flex-start; - align-items: center; - gap: 10px; - padding: 10px 5px; - cursor: pointer; - - span { - color: #000 !important; - font-size: 14px; - font-weight: 400; - } - img { - color: #000 !important; - } - } - .activeFilter { - border-radius: 12px; - background-color: #D61B5E; - padding:10px; - - span { - color: #fff !important; - cursor: pointer; - } - img { - color: #fff !important; - } - } - - } - - - .search { - // background-color: red; - display: flex; - align-items: center; - width: 100%; - position: relative; - - input{ - padding: 0 30px; - height: 40px; - color: #000; - font-size: 16px; - border-radius: 8px; - background: #E4E4E4; - max-width: 100%; - border: #858C90; - - } - - img { - position: absolute; - left: 2px; - } - } - - } - } - - } - .badging-table { - max-width: 100%; - margin: auto; - } - .search { + .filter-projects { + display: flex; + padding: 20px 0px; + align-items: center; + gap: 10px; + position: relative; + + .filter { display: flex; - gap: 4px; - justify-content:end; - position: relative; - .filter { - display: flex; - flex-direction: row; - align-items: flex-start; - padding: 13px 24px; - gap: 4px; - width: 119px; - height: 50px; - background: #EDEDED; - font-family: $font-family_2; - - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 150%; - text-align: center; - letter-spacing: 0.02em; - color: #222D33; - border: none; + background-color: #000; + border: none; + padding: 7px 30px; + border-radius: 10px; + cursor: pointer; + } + .filter button { + background-color: #000; + font-size: 16px; + // padding: 0px 30px; + border: none; + margin-right: 10px; + } + .filter-dropdown { + position: absolute; + right: 0; + top: 4rem; + background-color: #fff; + height: auto; + width: auto; + padding: 10px; + border-radius: 8px; + border: 0.5px solid var(--neutral-gray-gr-07, #ededed); + background: #fff; + box-shadow: 0px 19px 15px 6px rgba(0, 0, 0, 0.05); + + ul { + width: 250px; } - input { - box-sizing: border-box; - width: 564px; - height: 50px; - border: 1px solid #BEBEBE; + + ul li { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 10px; + padding: 10px 5px; + cursor: pointer; + + span { + color: #000 !important; + font-size: 14px; + font-weight: 400; + } + img { + color: #000 !important; + } } - .search-button { - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; - padding: 9px 31px; - position: absolute; - width: 117px; - height: 42px; - right: 5px; - top: 4px; - background: #030303; - border: none; - - font-family: $font-family_2; - font-style: normal; - font-weight: 600; - font-size: 16px; - line-height: 19px; - text-align: center; - color: #fff; + .activeFilter { + border-radius: 12px; + background-color: #d61b5e; + padding: 10px; + + span { + color: #fff !important; + cursor: pointer; + } + img { + color: #fff !important; + } } - } - - .badging-footer { - // background-color: red !important; - padding: 20px 1px; - color: #000; + } + + .search { + // background-color: red; display: flex; - background-color: #F5F5F5; align-items: center; - max-width: inherit !important; - justify-content: flex-end; - margin: auto; + width: 100%; + position: relative; - .pagination { - // background-color: gray; - color: #000 !important; + input { + padding: 0 30px; + height: 40px; + color: #000; + font-size: 16px; + border-radius: 8px; + background: #e4e4e4; + max-width: 100%; + border: #858c90; + } + + img { + position: absolute; + left: 2px; } + } } + } + } + .badging-table { + max-width: 100%; + margin: auto; + } + .search { + display: flex; + gap: 4px; + justify-content: end; + position: relative; + .filter { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 13px 24px; + gap: 4px; + width: 119px; + height: 50px; + background: #ededed; + font-family: $font-family_2; + + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 150%; + text-align: center; + letter-spacing: 0.02em; + color: #222d33; + border: none; + } + input { + box-sizing: border-box; + width: 564px; + height: 50px; + border: 1px solid #bebebe; + } + .search-button { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 9px 31px; + position: absolute; + width: 117px; + height: 42px; + right: 5px; + top: 4px; + background: #030303; + border: none; + + font-family: $font-family_2; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 19px; + text-align: center; + color: #fff; + } + } + .badging-footer { + // background-color: red !important; + padding: 20px 1px; + color: #000; + display: flex; + background-color: #f5f5f5; + align-items: center; + max-width: inherit !important; + justify-content: flex-end; + margin: auto; + + .pagination { + // background-color: gray; + color: #000 !important; + } } - + } } .css-cisyew-MuiTableCell-root.MuiTableCell-body { - background-color: #fff !important; - color: #000 !important; - font-size: 14px; - font-weight: 400; + background-color: #fff !important; + color: #000 !important; + font-size: 14px; + font-weight: 400; } .css-ux5ofw-MuiTableCell-root.MuiTableCell-head { - background-color: #EDEDED !important; - color: #000 !important; - font-size: 18px; - font-weight: 500; - border-bottom: none !important; + background-color: #ededed !important; + color: #000 !important; + font-size: 18px; + font-weight: 500; + border-bottom: none !important; } -.css-1gj0jdp-MuiTableRow-root th, .css-1gj0jdp-MuiTableRow-root td { - border-bottom: 1px solid gray !important; +.css-1gj0jdp-MuiTableRow-root th, +.css-1gj0jdp-MuiTableRow-root td { + border-bottom: 1px solid gray !important; } .MuiPagination-root .MuiPaginationItem-root { - color: #fff; // Replace with your desired pagination text color - // border: #1C1C1C 1px solid; - border-bottom: none !important; - } - - .MuiPagination-root .MuiPaginationItem-root.Mui-selected { - color: #000; // Replace with your desired pagination text color - background-color: #fff; - } + color: #fff; // Replace with your desired pagination text color + // border: #1C1C1C 1px solid; + border-bottom: none !important; +} + +.MuiPagination-root .MuiPaginationItem-root.Mui-selected { + color: #000; // Replace with your desired pagination text color + background-color: #fff; +} // .MuiPagination-root .MuiPaginationItem-root.Mui-selected > * { // color: #000 !important; // } - .MuiPagination-root .MuiPaginationItem-root { - color: #000; - border-bottom: none !important; +.MuiPagination-root .MuiPaginationItem-root { + color: #000; + border-bottom: none !important; } +.css-1q1u3t4-MuiTableRow-root { + height: auto !important; +} +.MuiPagination-ul { + color: #000 !important; + // background-color: red !important; +} +.MuiPagination-ul button { + background-color: #000; + color: #000 !important; +} - .css-1q1u3t4-MuiTableRow-root { - height: auto !important; - } - .MuiPagination-ul{ - color: #000 !important; - // background-color: red !important; - } - .MuiPagination-ul button { - background-color: #000; - color: #000 !important; - } - - @media screen and (max-width:1080px) { - .search { - - input { - width: 400px !important; - } +@media screen and (max-width: 1080px) { + .search { + input { + width: 400px !important; } } - @media screen and (max-width:900px) { - .search { - - input { - width: 100% !important; - } +} +@media screen and (max-width: 900px) { + .search { + input { + width: 100% !important; } } - - @media screen and (max-width:520px) { - .container-holder { - // padding: 0 !important; - } - } - @media screen and (max-width:700px) { - .jumbotron__container { - - h1 { - font-size: 2.375rem; - } - } - .table-top-header { - flex-direction: column !important; - gap: 0px !important; - align-items: flex-start !important; +@media screen and (max-width: 520px) { + .container-holder { + // padding: 0 !important; + } +} - .filter-projects{ - // background-color: red !important; - width: 100%; - } - .filter button { - display: none; - } +@media screen and (max-width: 700px) { + .jumbotron__container { + h1 { + font-size: 2.375rem; } - .filter-dropdown { - // background-color: red !important; - width: 250px !important; - - .activeFilter { - width: 220px; - } + } + .table-top-header { + flex-direction: column !important; + gap: 0px !important; + align-items: flex-start !important; + + .filter-projects { + // background-color: red !important; + width: 100%; } - .project .badging .badging-table { - padding: 0 !important; + .filter button { + display: none; } + } + .filter-dropdown { + // background-color: red !important; + width: 250px !important; + .activeFilter { + width: 220px; + } } + .project .badging .badging-table { + padding: 0 !important; + } +} diff --git a/src/pages/SelectProjectRepo/SelectProjectRepo.js b/src/pages/SelectProjectRepo/SelectProjectRepo.js index 761b7a2..dab2925 100644 --- a/src/pages/SelectProjectRepo/SelectProjectRepo.js +++ b/src/pages/SelectProjectRepo/SelectProjectRepo.js @@ -8,140 +8,140 @@ import { DataContext } from "../../contexts/DataContext"; // import useLoadingError from "../../hooks/useLoadingError"; const SelectProjectRepo = () => { - const { userData, setUserData } = useContext(DataContext); - // const { error, setError } = useLoadingError(); - const { name, email, reposToBadge } = userData; - const [showInfo, setShowInfo] = useState(true); - const [openLoaderDark, setOpenLoaderDark] = useState(false); - const [openLoaderLight, setOpenLoaderLight] = useState(false); + const { userData, setUserData } = useContext(DataContext); + // const { error, setError } = useLoadingError(); + const { name, email, reposToBadge } = userData; + const [showInfo, setShowInfo] = useState(true); + const [openLoaderDark, setOpenLoaderDark] = useState(false); + const [openLoaderLight, setOpenLoaderLight] = useState(false); - const navigate = useNavigate(); + const navigate = useNavigate(); - useEffect(() => { - const baseurl = "https://badging.allinopensource.org/api"; - const urlParams = new URLSearchParams(document.location.search); - const code = urlParams.get("code"); + useEffect(() => { + const baseurl = "https://badging.allinopensource.org/api"; + const urlParams = new URLSearchParams(document.location.search); + const code = urlParams.get("code"); - if (!code) { - // ?? get data from local storage - setShowInfo(false); - return; - } + if (!code) { + // ?? get data from local storage + setShowInfo(false); + return; + } - setOpenLoaderDark(true); + setOpenLoaderDark(true); - fetch(`${baseurl}/callback`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ code }), - }) - .then((response) => response.json()) - .then((data) => { - setUserData({ - ...userData, - username: data.username, - name: data.name, - email: data.email, - repos: data.repos, - }); + fetch(`${baseurl}/callback`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ code }), + }) + .then((response) => response.json()) + .then((data) => { + setUserData({ + ...userData, + username: data.username, + name: data.name, + email: data.email, + repos: data.repos, + }); - setOpenLoaderDark(false); - }) - .catch((error) => { - setOpenLoaderDark(false); - // setError("An error occurred while fetching your data. Please try again later."); - console.log("an error occurred: ", error); - }); - }, []); + setOpenLoaderDark(false); + }) + .catch((error) => { + setOpenLoaderDark(false); + // setError("An error occurred while fetching your data. Please try again later."); + console.log("an error occurred: ", error); + }); + }, []); - const handleSubmit = () => { - // open loader - setOpenLoaderLight(true); + const handleSubmit = () => { + // open loader + setOpenLoaderLight(true); - // api call to get badged - const baseurl = "https://badging.allinopensource.org/api"; - fetch(`${baseurl}/repos-to-badge`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ name, email, repos: reposToBadge }), - }) - .then((response) => response.json()) - // eslint-disable-next-line no-unused-vars - .then((data) => { - setUserData({ ...userData, reposToBadge: [] }); - navigate("/project-badging-successful", { state: { name, email } }); // navigate to success page - }) - // eslint-disable-next-line no-unused-vars - .catch((error) => { - setUserData({ ...userData, reposToBadge: [] }); - setOpenLoaderLight(false); + // api call to get badged + const baseurl = "https://badging.allinopensource.org/api"; + fetch(`${baseurl}/repos-to-badge`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ name, email, repos: reposToBadge }), + }) + .then((response) => response.json()) + // eslint-disable-next-line no-unused-vars + .then((data) => { + setUserData({ ...userData, reposToBadge: [] }); + navigate("/project-badging-successful", { state: { name, email } }); // navigate to success page + }) + // eslint-disable-next-line no-unused-vars + .catch((error) => { + setUserData({ ...userData, reposToBadge: [] }); + setOpenLoaderLight(false); - // setError( - // "an error occurred while submitting repo for badging. Please try again" - // ); - // console.log( - // "an error occurred while submitting repo for badging: ", - // error - // ); - }); - }; + // setError( + // "an error occurred while submitting repo for badging. Please try again" + // ); + // console.log( + // "an error occurred while submitting repo for badging: ", + // error + // ); + }); + }; - return ( - -
-
- {showInfo && ( -
- setShowInfo(false)} /> -
-

Hello {name}!

-

We appreciate you choosing to badge your project.

-

- Enter your desired project in the search box below before you - proceed to scan. You can scan as many projects as you desire. -

-
-
- )} -

Search For Project Repository

-

- Note: The selected repository must have the - presence of a DEI.md file. -

- - {/* {error && !reposToBadge &&

{error}

} */} - {reposToBadge.length > 0 && ( -
-

SEARCH RESULT

-

- You can proceed to scan the selected project below or search to - add more projects -

- -
- )} - - -
- -

Authenticating User

- - -

...scanning Repository

- - - ); + return ( + +
+
+ {showInfo && ( +
+ setShowInfo(false)} /> +
+

Hello {name}!

+

We appreciate you choosing to badge your project.

+

+ Enter your desired project in the search box below before you + proceed to scan. You can scan as many projects as you desire. +

+
+
+ )} +

Search For Project Repository

+

+ Note: The selected repository must have the + presence of a DEI.md file. +

+ + {/* {error && !reposToBadge &&

{error}

} */} + {reposToBadge.length > 0 && ( +
+

SEARCH RESULT

+

+ You can proceed to scan the selected project below or search to + add more projects +

+ +
+ )} + + +
+ +

Authenticating User

+ + +

...scanning Repository

+ + + ); }; export default SelectProjectRepo; diff --git a/src/pages/SelectProjectRepo/selectProjectRepo.scss b/src/pages/SelectProjectRepo/selectProjectRepo.scss index c544e5a..44e2603 100644 --- a/src/pages/SelectProjectRepo/selectProjectRepo.scss +++ b/src/pages/SelectProjectRepo/selectProjectRepo.scss @@ -26,164 +26,165 @@ // } .main__content { - background: #fff; - display: flex; - flex-direction: column; - padding: 5.8rem 3.88rem; - height: 100%; - - // width: 100%; - // flex: 1 1 auto; - - * > * { - color: $headingColor; - } - - .heading__2 { - font-size: 3rem; - font-weight: 600; - background: linear-gradient(88deg, #e9e9e9 0%, #bababa 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; - margin-bottom: 2rem; - } - - button { - background: inherit; - border: none; - font-size: 1rem; - cursor: pointer; - } - - .select__project__form { - width: 100%; - max-width: 37.2rem; - color: $headingColor; - - h2 { - background: linear-gradient(180deg, #030303 0%, #030303 100%); - font-size: 1.5rem; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; - margin-bottom: 1rem; - font-weight: 700; - } - - p, - p > *, - svg > * { - color: $headingColor; - line-height: 150%; - } - - p.text { - margin-bottom: 1rem; - } - - .select__project__info { - border-radius: 4px; - border: 1px solid #06f395; - background: #e4f8f0; - display: flex; - flex-direction: column; - padding: 1.5rem 1.5rem 2rem 1.5rem; - justify-content: center; - font-weight: 500; - margin-bottom: 3.62rem; - - svg { - align-self: flex-end; - } - } - - > button { - background: #06f395; - align-self: flex-start; - margin-top: 1rem; - padding: 23px 47px; - width: 263px; - font-weight: bolder; - color: $headingColor; - - &:disabled { - background: $disabledBtnColor; - color: #5B656B; - } - } - - .search__results { - margin: 3rem 0 2rem 0; - - h3 { - line-height: 150%; - background: linear-gradient( - 180deg, - $headingColor 0%, - $headingColor 100% - ); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; - font-family: $font-family_2; - font-weight: normal; - letter-spacing: 3.7px; - } - - p { - line-height: 180%; - width: 100%; - max-width: 458px; - margin-bottom: 1.5rem; - } - - ul { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - - li.result { - display: flex; - align-items: center; - border-radius: 2rem; - border: 1px solid #000; - padding: 0.5rem 1rem; - line-height: 150%; - height: 2.5rem; - max-width: 100%; - position: relative; - transition: padding-right 0.5s ease-out; - - button.clear { - position: absolute; - opacity: 0; - visibility: hidden; - right: 0; - top: 18%; - transform: translateY(-50%); - transform: translateX(50%); - transition: opacity 0.5s ease-out, visibility 0.5s ease-out, - transform 0.5s ease-out; - } - - &:hover { - padding-right: 2.8rem; - - button.clear { - opacity: 1; - visibility: visible; - transform: translateX(0); - right: 1rem; - } - } - } - } - } - } + background: #fff; + display: flex; + flex-direction: column; + padding: 5.8rem 3.88rem; + height: 100%; + + // width: 100%; + // flex: 1 1 auto; + + * > * { + color: $headingColor; + } + + .heading__2 { + font-size: 3rem; + font-weight: 600; + background: linear-gradient(88deg, #e9e9e9 0%, #bababa 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; + margin-bottom: 2rem; + } + + button { + background: inherit; + border: none; + font-size: 1rem; + cursor: pointer; + } + + .select__project__form { + width: 100%; + max-width: 37.2rem; + color: $headingColor; + + h2 { + background: linear-gradient(180deg, #030303 0%, #030303 100%); + font-size: 1.5rem; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; + margin-bottom: 1rem; + font-weight: 700; + } + + p, + p > *, + svg > * { + color: $headingColor; + line-height: 150%; + } + + p.text { + margin-bottom: 1rem; + } + + .select__project__info { + border-radius: 4px; + border: 1px solid #06f395; + background: #e4f8f0; + display: flex; + flex-direction: column; + padding: 1.5rem 1.5rem 2rem 1.5rem; + justify-content: center; + font-weight: 500; + margin-bottom: 3.62rem; + + svg { + align-self: flex-end; + } + } + + > button { + background: #06f395; + align-self: flex-start; + margin-top: 1rem; + padding: 23px 47px; + width: 263px; + font-weight: bolder; + color: $headingColor; + + &:disabled { + background: $disabledBtnColor; + color: #5b656b; + } + } + + .search__results { + margin: 3rem 0 2rem 0; + + h3 { + line-height: 150%; + background: linear-gradient( + 180deg, + $headingColor 0%, + $headingColor 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; + font-family: $font-family_2; + font-weight: normal; + letter-spacing: 3.7px; + } + + p { + line-height: 180%; + width: 100%; + max-width: 458px; + margin-bottom: 1.5rem; + } + + ul { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + + li.result { + display: flex; + align-items: center; + border-radius: 2rem; + border: 1px solid #000; + padding: 0.5rem 1rem; + line-height: 150%; + height: 2.5rem; + max-width: 100%; + position: relative; + transition: padding-right 0.5s ease-out; + + button.clear { + position: absolute; + opacity: 0; + visibility: hidden; + right: 0; + top: 18%; + transform: translateY(-50%); + transform: translateX(50%); + transition: opacity 0.5s ease-out, visibility 0.5s ease-out, + transform 0.5s ease-out; + } + + &:hover { + padding-right: 2.8rem; + + button.clear { + opacity: 1; + visibility: visible; + transform: translateX(0); + right: 1rem; + } + } + } + } + } + } } -@media screen and (min-width: 768px) {} +@media screen and (min-width: 768px) { +} diff --git a/src/pages/index.js b/src/pages/index.js index 0bd4a6b..06f7644 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,16 +1,24 @@ -import Home from './Home/Home'; +import Home from "./Home/Home"; // import DeiBadge from './DeiBadge/DeiBadge'; -import Projects from './Projects/Projects'; +import Projects from "./Projects/Projects"; -import GetStartedBadging from './GetStartedBadging/GetStartedBadging'; +import GetStartedBadging from "./GetStartedBadging/GetStartedBadging"; -import About from './AboutDeiBadging/About'; +import About from "./AboutDeiBadging/About"; -import SelectProjectRepo from './SelectProjectRepo/SelectProjectRepo'; +import SelectProjectRepo from "./SelectProjectRepo/SelectProjectRepo"; -import ErrorPage from './Home/ErrorPage/ErrorPage'; +import ErrorPage from "./Home/ErrorPage/ErrorPage"; -import SuccessfullyBadged from './ProjectBadgingSuccess/ProjectBadgingSuccess'; +import SuccessfullyBadged from "./ProjectBadgingSuccess/ProjectBadgingSuccess"; -export { Home, About, Projects, GetStartedBadging, SelectProjectRepo, ErrorPage, SuccessfullyBadged }; +export { + Home, + About, + Projects, + GetStartedBadging, + SelectProjectRepo, + ErrorPage, + SuccessfullyBadged, +}; diff --git a/webpack.config.js b/webpack.config.js index ca69c70..781a53e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,76 +2,76 @@ const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { - mode: "development", - entry: path.join(__dirname, "src", "index.js"), - output: { - path: path.resolve(__dirname, "build"), - filename: "[name].bundle.js", - }, - module: { - rules: [ - { - test: /\.?js$/, - exclude: /node_modules/, - use: "babel-loader", - }, - { - test: /\.(c|sa|sc)ss$/, - use: [ - { - loader: "style-loader", - }, - { - loader: "css-loader", - options: { url: false }, - }, - { loader: "sass-loader" }, - ], - }, - { - test: /\.(png|jp(e*)g|gif|ttf|woff(2)?|eot|otf)(\?v=\d+\.\d+\.\d+)?$/, - use: ["file-loader"], - // type: "asset/resource", - }, - { - test: /\.svg$/, - use: [ - { - loader: "svg-url-loader", - options: { - limit: 50000, - }, - }, - ], - }, - ], - }, - plugins: [ - new HtmlWebpackPlugin({ - template: path.join(__dirname, "src", "index.html"), - favicon: path.join( - __dirname, - "/src/assets/images", - "logos", - "all-in-chaoss-logo.svg" - ), - }), - ], - devServer: { - static: { - directory: path.join(__dirname, "build"), - }, - client: { - logging: "info", - overlay: true, - reconnect: 2, - }, + mode: "development", + entry: path.join(__dirname, "src", "index.js"), + output: { + path: path.resolve(__dirname, "build"), + filename: "[name].bundle.js", + }, + module: { + rules: [ + { + test: /\.?js$/, + exclude: /node_modules/, + use: "babel-loader", + }, + { + test: /\.(c|sa|sc)ss$/, + use: [ + { + loader: "style-loader", + }, + { + loader: "css-loader", + options: { url: false }, + }, + { loader: "sass-loader" }, + ], + }, + { + test: /\.(png|jp(e*)g|gif|ttf|woff(2)?|eot|otf)(\?v=\d+\.\d+\.\d+)?$/, + use: ["file-loader"], + // type: "asset/resource", + }, + { + test: /\.svg$/, + use: [ + { + loader: "svg-url-loader", + options: { + limit: 50000, + }, + }, + ], + }, + ], + }, + plugins: [ + new HtmlWebpackPlugin({ + template: path.join(__dirname, "src", "index.html"), + favicon: path.join( + __dirname, + "/src/assets/images", + "logos", + "all-in-chaoss-logo.svg" + ), + }), + ], + devServer: { + static: { + directory: path.join(__dirname, "build"), + }, + client: { + logging: "info", + overlay: true, + reconnect: 2, + }, - historyApiFallback: true, + historyApiFallback: true, - compress: true, - port: 5050, - hot: true, - }, - devtool: "source-map", + compress: true, + port: 5050, + hot: true, + }, + devtool: "source-map", };