update UI for candidate decider (#573)

* update UI for candidate decider

* add psacing between responses and questions

frontend/src/components/Candidate-Decider/ApplicantCredentials.module.css

@@ -0,0 +1,19 @@
+.credentialContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  justify-content: left;
+  padding: 20px !important;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.iconsContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 10px;
+}

frontend/src/components/Candidate-Decider/ApplicantCredentials.tsx

@@ -0,0 +1,124 @@
+import { Card } from 'semantic-ui-react';
+import styles from './ApplicantCredentials.module.css';
+
+type Props = {
+  name: string;
+  email: string;
+  gradYear: string;
+  resumeURL: string;
+  githubURL?: string;
+  linkedinURL?: string;
+  portfolioURL?: string;
+  preferredName?: string;
+};
+
+const ApplicantCredentials: React.FC<Props> = ({
+  name,
+  email,
+  gradYear,
+  resumeURL,
+  githubURL,
+  linkedinURL,
+  portfolioURL,
+  preferredName
+}) => (
+  <Card className={styles.credentialContainer}>
+    <h1>
+      {name} {preferredName && `(${preferredName})`}
+    </h1>
+    <p>{email}</p>
+    <p>Class of {gradYear}</p>
+    <div className={styles.iconsContainer}>
+      <a className={styles.icon} href={resumeURL}>
+        <FileIcon />
+      </a>
+      {githubURL && (
+        <a className={styles.icon} href={githubURL}>
+          <GithubIcon />
+        </a>
+      )}
+      {linkedinURL && (
+        <a className={styles.icon} href={linkedinURL}>
+          <LinkedinIcon />
+        </a>
+      )}
+      {portfolioURL && (
+        <a className={styles.icon} href={portfolioURL}>
+          <GlobeIcon />
+        </a>
+      )}
+    </div>
+  </Card>
+);
+
+const FileIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+    <polyline points="14 2 14 8 20 8" />
+  </svg>
+);
+
+const GithubIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+    <path d="M9 18c-4.51 2-5-2-7-2" />
+  </svg>
+);
+
+const GlobeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="2" x2="22" y1="12" y2="12" />
+    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+  </svg>
+);
+
+const LinkedinIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+    <rect width="4" height="12" x="2" y="9" />
+    <circle cx="4" cy="4" r="2" />
+  </svg>
+);
+
+export default ApplicantCredentials;

frontend/src/components/Candidate-Decider/LocalProgressPanel.tsx

@@ -36,34 +36,36 @@ const LocalProgressPanel: React.FC<ProgressPanelProps> = ({
         color="blue"
       >{`${myReviews.length}/${candidates.length}`}</Progress>
       <RatingsDisplay ratings={myRatings} header="My Rating Statistics" />
-      {showOtherVotes ? (
+      {showOtherVotes && userInfo?.role === 'lead' ? (
         <>
           <RatingsDisplay
             ratings={candidates[currentCandidate].ratings}
             header={`Candidate ${currentCandidate} Global Ratings`}
           />
-          <h3>All Votes on Candidate {currentCandidate}</h3>
-          <div className={styles.verticalContentContainer}>
-            {candidates[currentCandidate].ratings
-              .filter((rating) => rating.rating !== 0)
-              .map((rating) => (
+          <div>
+            <h3>All Votes on Candidate {currentCandidate}</h3>
+            <div className={styles.verticalContentContainer}>
+              {candidates[currentCandidate].ratings
+                .filter((rating) => rating.rating !== 0)
+                .map((rating) => (
+                  <span
+                    className={`${styles.fullWidth} ${styles.smallVerticalMargin}`}
+                    key={rating.reviewer.email}
+                  >{`${rating.reviewer.firstName} ${rating.reviewer.lastName}: ${ratingToString(
+                    rating.rating
+                  )}`}</span>
+                ))}
+            </div>
+            <h3>All Comments on Candidate {currentCandidate}</h3>
+            <div className={styles.verticalContentContainer}>
+              {candidates[currentCandidate].comments.map((comment) => (
                 <span
                   className={`${styles.fullWidth} ${styles.smallVerticalMargin}`}
-                  key={rating.reviewer.email}
-                >{`${rating.reviewer.firstName} ${rating.reviewer.lastName}: ${ratingToString(
-                  rating.rating
-                )}`}</span>
-              ))}
-          </div>
-          <h3>All Comments on Candidate {currentCandidate}</h3>
-          <div className={styles.verticalContentContainer}>
-            {candidates[currentCandidate].comments.map((comment) => (
-              <span
-                className={`${styles.fullWidth} ${styles.smallVerticalMargin}`}
-                key={comment.reviewer.email}
-              >{`${comment.reviewer.firstName} ${comment.reviewer.lastName}: ${comment.comment}
+                  key={comment.reviewer.email}
+                >{`${comment.reviewer.firstName} ${comment.reviewer.lastName}: ${comment.comment}
             `}</span>
-            ))}
+              ))}
+            </div>
           </div>
         </>
       ) : (

frontend/src/components/Candidate-Decider/ResponsesPanel.module.css

@@ -5,3 +5,7 @@
 .radioButtons {
   margin-top: 1%;
 }
+
+.responseText {
+  padding-bottom: 10px;
+}

frontend/src/components/Candidate-Decider/ResponsesPanel.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Form, Radio } from 'semantic-ui-react';
 import styles from './ResponsesPanel.module.css';
+import ApplicantCredentials from './ApplicantCredentials';
 
 type Props = {
   headers: string[];
@@ -20,6 +21,71 @@ const ratings = [
   { value: 0, text: 'Undecided', color: 'grey' }
 ];
 
+const credentialHeaders = [
+  'Email Address',
+  'First Name',
+  'Last Name',
+  'Graduation Semester',
+  'NetID',
+  'Link your resume (required).\n\nPlease make sure your resume is shared with us and anyone with the link can view. We will not review your application if the resume is not viewable!',
+  'Share your GitHub (optional)',
+  'Share your LinkedIn (optional)',
+  'Share an additional portfolio (optional)',
+  'Preferred Name (if different from previous answers)'
+];
+
+type Credentials = {
+  name: string;
+  email: string;
+  gradYear: string;
+  resumeURL: string;
+  githubURL?: string;
+  linkedinURL?: string;
+  portfolioURL?: string;
+  preferredName?: string;
+};
+
+const getCredentials = (headers: string[], responses: string[]) => {
+  const credentials: Credentials = {} as Credentials;
+  headers.forEach((header, i) => {
+    if (credentialHeaders.includes(header)) {
+      switch (header) {
+        case 'Email Address':
+          credentials.email = responses[i];
+          break;
+        case 'First Name':
+          credentials.name = responses[i];
+          break;
+        case 'Last Name':
+          credentials.name += ` ${responses[i]}`;
+          break;
+        case 'Graduation Semester':
+          credentials.gradYear = responses[i];
+          break;
+        case 'Link your resume (required).\n\nPlease make sure your resume is shared with us and anyone with the link can view. We will not review your application if the resume is not viewable!':
+          credentials.resumeURL = responses[i];
+          break;
+        case 'Share your GitHub (optional)':
+          credentials.githubURL = responses[i];
+          break;
+        case 'Share your LinkedIn (optional)':
+          credentials.linkedinURL = responses[i];
+          break;
+        case 'Share an additional portfolio (optional)':
+          credentials.portfolioURL = responses[i];
+          break;
+        case 'Preferred Name (if different from previous answers)':
+          credentials.preferredName = responses[i];
+          break;
+      }
+    }
+  });
+  return credentials;
+};
+
+const nonCredentialResponses = (headers: string[], responses: string[]): string[] =>
+  responses.filter((_, i) => !credentialHeaders.includes(headers[i]));
+
 const ResponsesPanel: React.FC<Props> = ({
   headers,
   responses,
@@ -46,12 +112,15 @@ const ResponsesPanel: React.FC<Props> = ({
       </Form.Group>
       <CommentEditor currentComment={currentComment} setCurrentComment={setCurrentComment} />
     </Form>
-    {headers.map((header, i) => (
-      <div key={i} className={styles.questionResponseContainer}>
-        <h4 className={styles.questionHeader}>{header}</h4>
-        <div>{responses[i]}</div>
-      </div>
-    ))}
+    <ApplicantCredentials {...getCredentials(headers, responses)} />
+    {headers
+      .filter((header) => !credentialHeaders.includes(header))
+      .map((header, i) => (
+        <div key={i} className={styles.questionResponseContainer}>
+          <h4 className={styles.questionHeader}>{header}</h4>
+          <div className={styles.responseText}>{nonCredentialResponses(headers, responses)[i]}</div>
+        </div>
+      ))}
   </div>
 );