Skip to content

Commit

Permalink
change font sizes and add required
Browse files Browse the repository at this point in the history
  • Loading branch information
@anchen9
anchen9 committed Feb 9, 2025
1 parent bee32f5 commit 7a5ac35
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 32 deletions.
55 changes: 33 additions & 22 deletions src/components/includes/AddQuestion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import SessionAlertModal from "./SessionAlertModal";

import { collectionData, firestore, auth } from "../../firebase";
import { addQuestion } from "../../firebasefunctions/sessionQuestion";
import addFiles from "../../media/AddFilesButton.svg";

const LOCATION_CHAR_LIMIT = 40;
const WARNING_THRESHOLD = 10; // minutes left in queue
Expand Down Expand Up @@ -48,6 +49,7 @@ const AddQuestion = ({ course, session, mobileBreakpoint, showProfessorStudentVi
const [tags, setTags] = useState<FireTag[]>([]);
// For hybrid sessions to keep track if student is in virtual location
const [isVirtual, setIsVirtual] = useState<boolean>(false);
// const [error, setError] = useState<boolean>(false);

const primaryTags = tags.filter((tag) => tag.level === 1);
const secondaryTags = tags.filter((tag) => tag.level === 2);
Expand Down Expand Up @@ -217,32 +219,37 @@ const AddQuestion = ({ course, session, mobileBreakpoint, showProfessorStudentVi
<div className="tagsContainer">
{primaryTags.length !== 0 && (
<>
<hr />
<div className="tagsMiniContainer">
<p className="header">Select a Category</p>
<div className="QuestionTags">
{tags
.filter((tag) => tag.active && tag.level === 1)
.map((tag) => (
<SelectedTags
key={tag.tagId}
tag={tag}
isSelected={stage > INITIAL_STATE}
onClick={() => handlePrimarySelected(tag)}
check={tag.name === selectedPrimary?.name}
isPrimary={true}
select={true}
/>
))}
<div className="topRow">
<div className="disclaimerContainer">
<p className="text"><span className="required"> * </span>Required</p>
</div>
<div className="tagsMiniContainer">
<p className="header">Select a Category<span className="required"> * </span></p>
<div className="category">
{tags
.filter((tag) => tag.active && tag.level === 1)
.map((tag) => (
<SelectedTags
key={tag.tagId}
tag={tag}
isSelected={stage > INITIAL_STATE}
onClick={() => handlePrimarySelected(tag)}
check={tag.name === selectedPrimary?.name}
isPrimary={true}
select={true}
/>
))}
</div>
</div>
</div>

</>
)}
{secondaryTags.length !== 0 && (
<>
<hr />
<div className={"tagsMiniContainer secondaryTags " + !!selectedPrimary}>
<p className="header">Select a Tag</p>
<p className="header">Select a Tag<span className="required"> * </span></p>
{selectedPrimary ? (
tags
.filter((tag) => tag.active && tag.level === 2)
Expand Down Expand Up @@ -285,6 +292,7 @@ const AddQuestion = ({ course, session, mobileBreakpoint, showProfessorStudentVi
{LOCATION_CHAR_LIMIT - location.length !== 1 && "s"} left)
</span>
)}
<span className="required"> * </span>
</p>
}
{stage >= SECONDARY_SELECTED || activeTags.length === 0 ? (
Expand All @@ -308,7 +316,7 @@ const AddQuestion = ({ course, session, mobileBreakpoint, showProfessorStudentVi
onChange={handleUpdateLocation}
placeholder={
session.modality === "in-person" || !isVirtual
? "What is your location?"
? "Enter where you are (room & location in room)"
: "What is your zoom link?"
}
/>
Expand All @@ -318,11 +326,10 @@ const AddQuestion = ({ course, session, mobileBreakpoint, showProfessorStudentVi
<p className="placeHolder text">Finish selecting tags...</p>
)}
</div>
<hr />
</>
)}
<div className="tagsMiniContainer">
<p className="header">{"Question "}</p>
<p className="header">{"Question "} <span className="required"> * </span></p>
{stage >= LOCATION_INPUTTED ||
primaryTags.length === 0 ||
secondaryTags.length === 0 ||
Expand All @@ -331,7 +338,7 @@ const AddQuestion = ({ course, session, mobileBreakpoint, showProfessorStudentVi
className="TextInput question"
value={question}
onChange={handleUpdateQuestion}
placeholder="What's your question about?"
placeholder="What would you like help or feedback on?"
/>
) : (
<textarea
Expand All @@ -347,6 +354,10 @@ const AddQuestion = ({ course, session, mobileBreakpoint, showProfessorStudentVi
/>
)}
</div>
<div className="tagsMiniContainer">
<p className="header">Your Files<span className="required"> * </span></p>
<img alt="" src={addFiles}/>
</div>
<div className="addButtonWrapper">
{stage > LOCATION_INPUTTED || primaryTags.length === 0 || secondaryTags.length === 0 ? (
<p className="AddButton active" onClick={() => handleJoinClick()}>
Expand Down
5 changes: 5 additions & 0 deletions src/media/AddFilesButton.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 46 additions & 8 deletions src/styles/session/AddQuestion.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@
width: 100%;
top: 30px;
bottom: 30px;
padding-bottom: 5px;
padding-right: 15px;
padding-left: 15px;
padding-top: 32px;
padding-bottom: 4px;
padding-right: 32px;
padding-left: 32px;
margin-bottom: 40px;


Expand Down Expand Up @@ -49,7 +50,7 @@
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 22px;
font-size: 24px;
color: #484848;
}

Expand All @@ -74,6 +75,29 @@
clear:both;
}

.topRow{
position: relative;
width: 100%;
padding-top: 24px;
padding-bottom: 24px;
}

.disclaimerContainer{
position: absolute;
right: 0;
top: 24px;
width: 100%;
font-family: Roboto;
font-weight: 500;
font-size: 9.87px;
line-height: 11.56px;
letter-spacing: 0%;
text-align: right;
.text{
color: #F67D7D;
}
}

.tagsMiniContainer {
padding: 10px 32px;
clear: both;
Expand All @@ -88,13 +112,27 @@
text-align: left;
margin-bottom:0.5em;
}
.required{
color: #F67D7D;
font-size: 14px;
font-weight: 500;
line-height: 16.41px;
}

.shaded{
background-color: rgba(246, 125, 125, 0.15);
}

.category{
padding-top: 12px;
}

.header {
height: 17px;
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 14.625px;
font-size: 14px;
line-height: 17px;
color: #696969;
margin-bottom: 14px;
Expand All @@ -112,7 +150,7 @@
font-family: Roboto;
font-style: normal;
font-weight: 300;
font-size: 12.675px;
font-size: 12px;
color: #BBBBBB;
}

Expand All @@ -125,7 +163,7 @@
font-weight: normal;
border: 0px;
color: $text-grey;
font-size:15px;
font-size:12px;
padding: 8px;
border-radius: 3.3px;
resize: none;
Expand All @@ -144,7 +182,7 @@
font-family: Roboto;
font-style: normal;
font-weight: 300;
font-size: 12.675px;
font-size: 12px;
color: #BBBBBB;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/styles/session/SelectedTags.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ $secondary-tag-selected: #ffdba6;
.tag {
font-weight: normal;
display: inline-block;
font-size: 13px;
font-size: 12px;
border: 0.5px solid;
padding: 2px 10px;
margin: 0 6px 0 0;
Expand Down Expand Up @@ -44,7 +44,7 @@ $secondary-tag-selected: #ffdba6;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 14.8909px;
font-size: 12px;
line-height: 17px;
color: #565656;

Expand Down

0 comments on commit 7a5ac35

Please sign in to comment.