Merge pull request #58 from brainhack-vandy/dvaid-project-card-fixes

fixed template and project card

Author: shansitads

.github/ISSUE_TEMPLATE/project-submission-template.yml

@@ -180,14 +180,14 @@ body:
   - type: textarea
     attributes:
       label: Image
-      description: Provide a representative image for your project to be featured on our website and social media platforms. If you dont have one, we will use a default image.
+      description: Provide a representative image for your project to be featured on our website and social media platforms. If you dont have one, we will use a default image. Please upload the image using the button below this text box.
     validations:
       required: true
 
   - type: textarea
     attributes:
-      label: Project summary - maximum 160 characters. 
-      description: This concise summary will be featured on our website and social media platforms.
+      label: Project Summary
+      description: Maximum 160 characters. This concise summary will be featured on our website and social media platforms.
     validations:
       required: true
 

src/components/Projects/ProjectCard.js

@@ -2,7 +2,7 @@ import React from "react";
 import Card from "react-bootstrap/Card";
 import Button from "react-bootstrap/Button";
 import { CgWebsite } from "react-icons/cg";
-import { BsGithub } from "react-icons/bs";
+import { TbBulbFilled } from "react-icons/tb";
 import './projects.css';
 
 function ProjectCards(props) {
@@ -21,8 +21,8 @@ function ProjectCards(props) {
                 <Card.Text style={{ textAlign: "justify" }}>
                     {props.description}
                 </Card.Text>
-                <Button variant="primary" href={props.ghLink} target="_blank">
-                    <BsGithub /> &nbsp;GitHub
+                <Button className="project-details-btn" variant="primary" href={props.issueLink} target="_blank">
+                    <TbBulbFilled /> &nbsp;Project Details
                 </Button>
                 {"\n"}
                 {"\n"}

src/components/Projects/Projects.js

@@ -28,7 +28,7 @@ const ProjectPitchInstr = () => {
               <div className="project-pitch-button-container mt-4">
                 <a
                   className="btn project-pitch-submit-button"
-                  href="https://docs.google.com/forms/d/e/1FAIpQLScLJXlY4obEaS8U5z4kiayC_9YKHTgxiPAfatZzvCMrW4Q_kQ/viewform"
+                  href="https://github.com/brainhack-vandy/brainhack-vandy.github.io/issues/new?assignees=&labels=project-proposal&projects=&template=project-submission-template.yml&title=Project%3A+"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
@@ -126,6 +126,7 @@ function Projects() {
                   imgPath={project.imgPath}
                   ghLink={project.ghLink}
                   demoLink={project.demoLink}
+                  issueLink={project.issueLink}
                 />
               </Col>
             ))}

src/components/Projects/projects.css

@@ -73,6 +73,18 @@
     background-color: rgba(15, 6, 33, 0.9) !important;
 }
 
+.project-details-btn.btn-primary {
+    display: inline-flex !important;       /* forces inline-flex override */
+    align-items: center !important;        /* vertical centering */
+    justify-content: center !important;    /* horizontal centering (if needed) */
+   
+    /* optional tweaks if needed */
+    vertical-align: middle !important;
+    /* line-height: 1; <-- might also help if text is off-center */
+  }
+
+
+
 /* Year Select Styles */
 .year-select-container {
     position: relative !important;
@@ -81,6 +93,7 @@
     margin-bottom: 30px;
 }
 
+
 .year-select-container select {
     width: 100px !important;
     background-color: #623686 !important;

src/data/data_utils.js

@@ -37,7 +37,7 @@ function processIssues(issues) {
       // Regular expressions
       const linkRegex = /### Link to project repository\/sources([\s\S]*?)###/;
       const imageRegex = /### Image!\[.*?\]\((.*?)\)/;
-      const descriptionRegex = /### Project Description([\s\S]*?)###/;
+      const descriptionRegex = /### Project Summary([\s\S]*?)###/;
 
       const titleRegex = /### Title([\s\S]*?)###/;
 
@@ -70,6 +70,7 @@ function processIssues(issues) {
         description: description,
         ghLink: infoLink,
         imgPath: imageLink,
+        issueLink: `https://github.com/brainhack-vandy/brainhack-vandy.github.io/issues/${issue.number}`,
       };
 
       projects[yearLabel].push(project);