Cornellians Say Frontend #484
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from 'react'; | ||
| import styles from '../Styles/CornelliansSay.module.css'; | ||
| import Bear from '/cornellians_say_bear.svg'; | ||
|
|
||
| /** | ||
| * Component for Cornellians Say. Only appears on courses that have at least 3 reviews | ||
| * and a valid summary generated. | ||
| */ | ||
| type SummaryProps = { | ||
| classSummary: string; | ||
| summaryTags: Map<string, [string, string]>; | ||
| } | ||
| const CornelliansSay = ({ classSummary, summaryTags }: SummaryProps) => { | ||
| const summaryTagsMap = new Map(Object.entries(summaryTags)); | ||
|
Check warning on line 14 in client/src/modules/Course/Components/CornelliansSay.tsx
|
||
| return ( | ||
| <div className={styles.container}> | ||
| <div className={styles.header}> | ||
| <img src={Bear} alt="Bear Icon" className={styles.bearIcon} /> | ||
| <h1 className={styles.title}>Cornellians Say</h1> | ||
| </div> | ||
| <p className={styles.summary}>{classSummary}</p> | ||
| <h2 className={styles.tagsTitle}>Top Tags</h2> | ||
leihelen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| {/* map each tag into a div displaying each key/category with its | ||
| corresponding adjective and applies the corresponding style for the | ||
| adjective's connotation */} | ||
| <div className={styles.tagsContainer}> | ||
| {Array.from(summaryTags.entries()).map(([category, [adjective, connotation]]) => ( | ||
| <div | ||
| key={category} | ||
| className={`${styles.tag} ${connotation === "positive" | ||
| ? styles.positiveTag | ||
| : connotation === "negative" | ||
| ? styles.negativeTag | ||
| : styles.neutralTag | ||
| }`} | ||
| > | ||
| {adjective} {category} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default CornelliansSay | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| .container { | ||
| display: flex; | ||
| padding: 24px; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 5px; | ||
| border-radius: 10px; | ||
| background: #FFF; | ||
| } | ||
|
|
||
| .header { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 10px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .bear-icon { | ||
| width: 40px; | ||
| height: 40px; | ||
| } | ||
|
|
||
| .title { | ||
| font-size: 24px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .summary { | ||
|
There was a problem hiding this comment. I feel like it looks a bit weird for the summary text to be different from the review text - so maybe no need to format this There was a problem hiding this comment. Esp the line height looks a bit funky |
||
| font-size: 16px; | ||
| line-height: 1.5; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .tagsTitle { | ||
| font-size: 18px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .tagsContainer { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 10px; | ||
| } | ||
|
|
||
| .tag { | ||
|
There was a problem hiding this comment. I think the tags are too big somewhat, maybe reduce some of the padding There was a problem hiding this comment. Try It also helps when the tag is too long on certain screen widths the text stacks on top of each other and clips the tag container. |
||
| font-size: 16px; | ||
| display: flex; | ||
| height: 25px; | ||
| padding: 10px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 10px; | ||
| border-radius: 16px; | ||
| background: #FFF; | ||
| } | ||
|
|
||
| .positiveTag { | ||
| border: 1px solid #53b227; | ||
| } | ||
|
|
||
| .negativeTag { | ||
| border: 1px solid #ffa5a5; | ||
| } | ||
|
|
||
| .neutralTag { | ||
| border: 1px solid #f8cc30; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe instead of not showing the CornelliansSay box if there isn't a course summary, we could have a default message that appears?