Andal.LND/frontend-app-learning
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update goal styling (#721)

Browse Source
This commit is contained in:
Carla Duarte
2021-11-02 09:22:43 -06:00
committed by GitHub
parent 7ed1be1960
commit 6f0a69b838
6 changed files with 65 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/course-home/outline-tab/DateSummary.jsx
View File

@@ -40,7 +40,7 @@ export default function DateSummary({
};
return (
<li className="container p-0 mb-3 small text-dark-500">
<li className="p-0 mb-3 small text-dark-500">
<div className="row">
<FontAwesomeIcon icon={faCalendarAlt} className="ml-3 mt-1 mr-1" fixedWidth />
<div className="ml-1 font-weight-bold">

8
src/course-home/outline-tab/widgets/FlagButton.jsx
View File

@@ -12,20 +12,20 @@ function FlagButton({
return (
<button
type="button"
className={classnames('flag-button m-1.5 pt-3 pb-md-3 pb-xl-0',
className={classnames('flag-button row w-100 align-content-between m-1.5 py-3.5',
isSelected ? 'flag-button-selected' : '')}
aria-checked={isSelected}
role="radio"
onClick={() => handleSelect()}
data-testid={`weekly-learning-goal-input-${title}`}
>
<div className="row justify-content-center pb-1 w-100 m-0">
<div className="row w-100 m-0 justify-content-center pb-1">
{buttonIcon}
</div>
<div className={classnames('text-center small text-gray-700 pb-1', isSelected ? 'font-weight-bold' : '')}>
<div className={classnames('row w-100 m-0 justify-content-center small text-gray-700 pb-1', isSelected ? 'font-weight-bold' : '')}>
{title}
</div>
<div className={classnames('text-center micro text-gray-500 pb-2', isSelected ? 'font-weight-bold' : '')}>
<div className={classnames('row w-100 m-0 justify-content-center micro text-gray-500', isSelected ? 'font-weight-bold' : '')}>
{text}
</div>
</button>

2
src/course-home/outline-tab/widgets/FlagButton.scss
View File

@@ -5,7 +5,7 @@
.flag-button {
background-color: $white;
border: 1px solid $light-400;
border-radius:.2rem;
border-radius: .2rem;
box-shadow: 0 0 0 2px $light-400;
&:hover {

6
src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx
View File

@@ -38,10 +38,12 @@ function StartOrResumeCourseCard({ intl }) {
};
return (
<Card className="mb-3" data-testid="start-resume-card">
<Card className="mb-3 shadow-sm border-0" data-testid="start-resume-card">
<Card.Body>
<div className="row w-100 m-0 justify-content-between align-items-center">
<h2 className="h3 m-md-0">{hasVisitedCourse ? intl.formatMessage(messages.resumeBlurb) : intl.formatMessage(messages.startBlurb)}</h2>
<div className="col-12 col-md-7 p-0 mb-3 mb-md-0">
<h2 className="h3 m-0">{hasVisitedCourse ? intl.formatMessage(messages.resumeBlurb) : intl.formatMessage(messages.startBlurb)}</h2>
</div>
<div className="col-12 col-md-auto p-0">
<Button
variant="brand"

114
src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx
View File

@@ -47,68 +47,62 @@ function WeeklyLearningGoalCard({
}
return (
<div className="row w-100 m-0 p-0">
<Card
className="mb-3 shadow border-0"
data-testid="weekly-learning-goal-card"
>
<Card.Body className="p-3.5">
<Card.Title>
<h2 className="h4 m-0 text-primary-500">{intl.formatMessage(messages.setWeeklyGoal)}</h2>
</Card.Title>
<Card.Text
className="text-gray-700"
// id="learning_goal_choices_label"
<Card
className="row w-100 m-0 mb-3 shadow-sm border-0"
data-testid="weekly-learning-goal-card"
>
<Card.Body className="p-3 p-lg-3.5">
<h2 className="h4 mb-1 text-primary-500">{intl.formatMessage(messages.setWeeklyGoal)}</h2>
<Card.Text
className="text-gray-700 small mb-2.5"
>
{intl.formatMessage(messages.setWeeklyGoalDetail)}
</Card.Text>
<div
className="flag-button-container m-0 p-0"
>
<LearningGoalButton
level="casual"
currentGoal={daysPerWeekGoal}
handleSelect={handleSelect}
/>
<LearningGoalButton
level="regular"
currentGoal={daysPerWeekGoal}
handleSelect={handleSelect}
/>
<LearningGoalButton
level="intense"
currentGoal={daysPerWeekGoal}
handleSelect={handleSelect}
/>
</div>
<div className="d-flex pt-3">
<Form.Switch
checked={isGetReminderSelected}
onChange={(event) => handleSubscribeToReminders(event)}
disabled={!daysPerWeekGoal}
>
{intl.formatMessage(messages.setWeeklyGoalDetail)}
</Card.Text>
<div
className="flag-button-container m-0 p-0"
>
<LearningGoalButton
level="casual"
currentGoal={daysPerWeekGoal}
handleSelect={handleSelect}
/>
<LearningGoalButton
level="regular"
currentGoal={daysPerWeekGoal}
handleSelect={handleSelect}
/>
<LearningGoalButton
level="intense"
currentGoal={daysPerWeekGoal}
handleSelect={handleSelect}
/>
</div>
<div className="pt-3 pb-1">
<Form.Switch
checked={isGetReminderSelected}
onChange={(event) => handleSubscribeToReminders(event)}
disabled={!daysPerWeekGoal}
>
{intl.formatMessage(messages.setGoalReminder)}
</Form.Switch>
</div>
</Card.Body>
{isGetReminderSelected && (
<Card.Footer className="border-0 px-2.5 bg-light-200 ">
<div className="row w-100 m-0 small align-center">
<div className="d-flex align-items-center pr-1">
<Icon
className="text-primary-500"
src={Email}
/>
</div>
<div className="col">
{intl.formatMessage(messages.goalReminderDetail)}
</div>
<small>{intl.formatMessage(messages.setGoalReminder)}</small>
</Form.Switch>
</div>
</Card.Body>
{isGetReminderSelected && (
<Card.Footer className="border-0 px-2.5 bg-light-200">
<div className="row w-100 m-0 small align-center">
<div className="d-flex align-items-center pr-1">
<Icon
className="text-primary-500"
src={Email}
/>
</div>
</Card.Footer>
)}
</Card>
</div>
<div className="col">
{intl.formatMessage(messages.goalReminderDetail)}
</div>
</div>
</Card.Footer>
)}
</Card>
);
}

1
src/course-home/outline-tab/widgets/WelcomeMessage.jsx
View File

@@ -37,6 +37,7 @@ function WelcomeMessage({ courseId, intl }) {
setDisplay(false);
dispatch(dismissWelcomeMessage(courseId));
}}
className="shadow-sm border-0"
actions={messageCanBeShortened ? [
<Button
onClick={() => setShowShortMessage(!showShortMessage)}