From 94e12eceaa9c945ee551319aeb3b5f0c935611ad Mon Sep 17 00:00:00 2001 From: Harsh kasana Date: Sun, 22 Oct 2023 23:40:53 +0530 Subject: [PATCH 1/2] Reform the About page --- frontend/src/pages/About.css | 194 +++++++++++++++++++---------------- frontend/src/pages/About.js | 138 +++++++++++-------------- 2 files changed, 164 insertions(+), 168 deletions(-) diff --git a/frontend/src/pages/About.css b/frontend/src/pages/About.css index 5603358..01e075c 100644 --- a/frontend/src/pages/About.css +++ b/frontend/src/pages/About.css @@ -1,127 +1,141 @@ -.header { +.main { display: flex; flex-direction: column; align-items: center; - /* justify-content: center; */ - background-color: rgb(243, 235, 235); + width: 99vw; + background:radial-gradient(rgb(54, 135, 141),rgb(79, 110, 167)); padding: 10px; - text-align: center; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } -.logo-img { - margin-left: 70px; -} -.About-logo { - width: 5rem; -} -.heading { - color: red; -} -.social-links ul { + +/* Add these styles for the improved navbar */ +.navbar { + background:linear-gradient(to left,rgb(74, 74, 155),rgb(74, 140, 167)); + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; +} +.navbar ul{ display: flex; - justify-content: center; - margin-right: 40px; } -.social-links ul li { + +.navbar ul li{ list-style: none; - padding: 5px; } -.social-links ul li a { - color: black; + +.navbar .logo-img { + display: flex; + margin-right: 20px; } -/* repositories css styling done from here */ -.center { - text-align: center; - font-size: 2rem; +.navbar .logo-img img { + width: 60px; + height: 60px; + margin-right: 20px; + } -.repositories { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - gap: 10; - margin: 10px; -} -.repo-container { - background-color: rgba(220, 230, 245, 0.301); - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); - text-align: center; - opacity: 0.9; - width: 25rem; - height: 16rem; + +.navbar h1 { + color: #fff; + font-size: 1.5rem; + align-self:center; + margin: 0; } -.repo-name { - opacity: 1; + +.navbar { + list-style: none; display: flex; - justify-content: center; - color: rgba(0, 132, 255, 0.808); + align-items: center; + margin: 0; + padding: 0; } -.repo-name a { + + + +.navbar a { text-decoration: none; - color: rgba(0, 132, 255, 0.808); -} -.repo-icons { - padding: 5px; + color: #fff; + font-size: 1rem; + font-weight: 500; } -.repo-description p { - margin: 0px 5px 5px 2px; - padding: 10px; - line-height: 1px; - font-size: 0.9rem; - font-family: sans-serif; - font-weight: 500px; +/* Add these styles to enhance the hover effect */ +.navbar a:hover { + color: #1f4a99; } -.contributor-names { + +.social-links { + list-style: none; display: flex; - flex-wrap: wrap; - justify-content: space-around; - gap: 10px; - padding: 5px; + justify-content: space-evenly; + align-items: center; + +} + +.social-links { + padding: 10px; } -.contributor-names .nameofcontributor { - color: rgb(7, 182, 252); - font-size: larger; - font-weight: 600; + +.social-links a { + color: black; + margin: 0px 6px; + text-decoration: none; + font-size: 1.2rem; } -.App { + +.what-is-gfi{ + padding-top:3rem; +} +.what-is-gfi, +.motivation, +.how-to-contribute { + + margin: 20px; text-align: center; } -.App-logo { - height: 40vmin; - pointer-events: none; +.what-is-gfi h2, +.motivation h2, +.how-to-contribute h2 { + font-size: 2rem; + color: #3c30a8f3; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +.what-is-gfi p, +.motivation p, +.how-to-contribute p { + font-size: 1rem; + line-height: 1.5; } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; +.footer { + background: linear-gradient(to left, rgb(74, 74, 155), rgb(74, 140, 167)); + padding: 20px; + text-align: center; + /* position: fixed; + */ + position: relative; + width: 99vw; + color: #fff; + /* margin-top: 20px; */ + margin-bottom: -20px; + bottom: 0; } -.App-link { - color: #61dafb; +.footer a { + color: #ffcc00; + text-decoration: none; + font-size: 1.2rem; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.footer a:hover { + color: #ff9900; } diff --git a/frontend/src/pages/About.js b/frontend/src/pages/About.js index 7d1e88f..72f45d2 100644 --- a/frontend/src/pages/About.js +++ b/frontend/src/pages/About.js @@ -5,89 +5,71 @@ import "./About.css"; import { FaGithub, FaTwitter } from "react-icons/fa"; import { GoRepo, GoPerson } from "react-icons/go"; import { HiUserGroup } from "react-icons/hi"; + const About = () => { return ( - <> -
- {/* header */} -
-
-
- logo -
-

Club Gamma

-
-
- Empowering Student Tech Community -
-
- +
+
+
+ Club Gamma Logo +
+

Club Gamma

+

Empowering Student Tech Community

-

My Repositories

-
- {/* repo container starts here */} -
- -
-

A simple react-native expo app to never forget anything.

-
-
-

- - - - Contributors -

-
-
-
-
- - - - Nishu0 -
- -
- - - - syprogrammer -
-
-
-
-
- - {/* repo container ends here */} + -
- +
+
+

What is GFI?

+

+ GitHub advises the usage of "good first issue" (GFI) labels to identify + issues that are feasible for newcomers to handle in order to speed up + beginner onboarding. However, prior research demonstrates the scarcity + and inappropriateness of manually classified GFIs, demonstrating the + need for automated suggestions. In this project, we propose + GFI-Web-app, a proof-of-concept for automatic GFI recommendation in + reality. Project administrators can set up GFI-app to find and tag + potential GFIs so that beginners can quickly find issues to fix when + submitting their first contributions. +

+
+
+

Motivation for the Project

+

+ This website is primarily intended for developers who wish to + contribute to open source software but are unsure of where or how to + begin. This website gives developers filters so they may search and + choose issues and repositories based on the programming languages they + are most familiar with. Additionally, they have a choice in the issues + they choose to address. +

+
+
+

How to Contribute

+
    +
  1. Visit our GitHub repository: Good_First_Issue_Web_App
    2. +
  2. Explore open issues and select a good first issue.
    3. +
  3. Fork the repository and create a branch for your work.
    4. +
  4. Make the necessary changes and commit them.
    5. +
  5. Create a pull request to propose your changes.
    6. +
  6. Participate in discussions and complete the assigned tasks.
    7. +
+
+ +
); }; From 75559172db0c5e13a7d95a04ce70369c7896e930 Mon Sep 17 00:00:00 2001 From: Harsh kasana Date: Mon, 30 Oct 2023 01:41:20 +0530 Subject: [PATCH 2/2] added basic authentication to form and About page also --- frontend/src/pages/About.js | 14 +++-- frontend/src/pages/Form.js | 104 +++++++++++++++++++++++++----------- 2 files changed, 82 insertions(+), 36 deletions(-) diff --git a/frontend/src/pages/About.js b/frontend/src/pages/About.js index dbfe328..c4d9495 100644 --- a/frontend/src/pages/About.js +++ b/frontend/src/pages/About.js @@ -11,7 +11,7 @@ import { HiUserGroup } from "react-icons/hi"; const About = () => { return (
-
+ {/*
Club Gamma Logo
@@ -31,7 +31,7 @@ const About = () => {
-
+
*/}

What is GFI?

@@ -68,9 +68,9 @@ const About = () => {

  • Participate in discussions and complete the assigned tasks.
    • - */}
    @@ -78,3 +78,9 @@ const About = () => { }; export default About; + + + + + + diff --git a/frontend/src/pages/Form.js b/frontend/src/pages/Form.js index ea7efd1..7a96977 100644 --- a/frontend/src/pages/Form.js +++ b/frontend/src/pages/Form.js @@ -35,11 +35,56 @@ const options = [ function Form() { const [selected, setSelected] = useState(); - + const [repoName, setRepoName] = useState(""); + const [repoLink, setRepoLink] = useState(""); + const [description, setDescription] = useState(""); //Fuction handling the tech-stack options function handleSelect(data) { setSelected(data); } + + // Function to handle form submission + function handleSubmit(e) { + e.preventDefault(); + // Basic client-side validation + + let authenticated=true; + // Check if the repoName is empty + if (!repoName) { + alert("Repo Name cannot be empty"); + authenticated=false; + } + + // Check if the repoLink is empty + if (!repoLink) { + alert("Repo Link cannot be empty"); + authenticated=false; + } + const githubRepoPattern = /^https:\/\/github.com\/\w+\/\w+$/; + if (!githubRepoPattern.test(repoLink)) { + alert("Please enter a valid GitHub repository link (e.g., 'https://github.com/username/repo')."); + authenticated=false; + } + // Check if description is empty + if (!description) { + alert("Description cannot be empty"); + authenticated=false; + } + + // Check if a tech stack is selected + if (!selected || selected.length === 0) { + alert("Tech Stack cannot be empty"); + authenticated=false; + } + + // If the user is authenticated, you can proceed with the form submission + if(authenticated){ + return; + } + // Add your form submission logic here + } + + return ( <> {/* HTML for Form */} @@ -61,36 +106,30 @@ function Form() {
    -
    - - - {/* */} -

    Repo Name cannot be empty

    -
    -
    - - - {/* */} -

    Repo Link cannot be empty

    -
    +
    + + setRepoName(e.target.value)} + /> +
    +
    + + setRepoLink(e.target.value)} + /> +
    + +
    {/* Tech Stack cannot be empty

    -