AA-448: UI fixes (#285)

LinkedIn button size and single column for view grades button in mobile
This commit is contained in:
Dillon Dumesnil
2020-12-02 04:59:16 -08:00
committed by GitHub
parent 1bfe3f4436
commit 2d56bc5953
2 changed files with 15 additions and 13 deletions

View File

@@ -282,7 +282,7 @@ function CourseCelebration({ intl }) {
onClick={() => logClick(courseId, administrator, 'linkedin_add_to_profile')}
style={{ backgroundColor: LINKEDIN_BLUE, padding: '0.25rem 1.25rem 0.25rem 0.5rem' }}
>
<LinkedinIcon bgStyle={{ fill: 'white' }} className="mr-2" iconFillColor={LINKEDIN_BLUE} round size={28} />
<LinkedinIcon bgStyle={{ fill: 'white' }} className="mr-2" iconFillColor={LINKEDIN_BLUE} round size={24} />
{`${intl.formatMessage(messages.linkedinAddToProfileButton)}`}
</Button>
)}

View File

@@ -33,18 +33,20 @@ function CourseNonPassing({ intl }) {
<div className="col-12 p-0 h2 text-center">
{ intl.formatMessage(messages.endOfCourseHeader) }
</div>
<Alert variant="primary" className="col col-lg-10 mt-4 d-flex align-items-start">
<div className="flex-grow-1 mr-5">{ intl.formatMessage(messages.endOfCourseDescription) }</div>
{progressLink && (
<Button
variant="primary"
className="flex-shrink-0"
href={progressLink}
onClick={() => logClick(courseId, administrator, 'view_grades')}
>
{intl.formatMessage(messages.viewGradesButton)}
</Button>
)}
<Alert variant="primary" className="col col-lg-10 mt-4 d-flex">
<div className="row align-items-start">
<div className="flex-grow-1 col-sm">{ intl.formatMessage(messages.endOfCourseDescription) }</div>
{progressLink && (
<Button
variant="primary"
className="flex-shrink-0 mt-3 mt-sm-0 mb-1 mb-sm-0 ml-2 ml-sm-5"
href={progressLink}
onClick={() => logClick(courseId, administrator, 'view_grades')}
>
{intl.formatMessage(messages.viewGradesButton)}
</Button>
)}
</div>
</Alert>
<DashboardFootnote />
</div>