Andal.LND/frontend-app-profile
6
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: design updates (#141)

Browse Source 
* fix: add more spacing between sections

* fix: make empty content an inline-block button

* fix: make labels and headings have same line-height

* fix: make visibility selector and submit buttons on same line in large column

* fix: update the old blue to the new navy in the hero image

* fix: make underlines stay on hover for btn-links and not on others
This commit is contained in:
Adam Butterworth
2019-04-10 11:39:47 -04:00
committed by GitHub
parent fedff33c62
commit b15ba32fe8
12 changed files with 175 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ProfilePage/Bio.jsx
View File

@@ -50,7 +50,7 @@ class Bio extends React.Component {
return (
<SwitchContent
className="mb-4"
className="mb-5"
expression={editMode}
cases={{
editing: (
@@ -61,7 +61,7 @@ class Bio extends React.Component {
invalid={error !== null}
invalidMessage={error}
>
<label htmlFor={formId}>
<label className="edit-section-header" htmlFor={formId}>
{intl.formatMessage(messages['profile.bio.about.me'])}
</label>
<textarea

4
src/components/ProfilePage/Country.jsx
View File

@@ -61,7 +61,7 @@ class Country extends React.Component {
return (
<SwitchContent
className="mb-4"
className="mb-5"
expression={editMode}
cases={{
editing: (
@@ -72,7 +72,7 @@ class Country extends React.Component {
invalid={error !== null}
invalidMessage={error}
>
<label htmlFor={formId}>
<label className="edit-section-header" htmlFor={formId}>
{intl.formatMessage(messages['profile.country.label'])}
</label>
<select

4
src/components/ProfilePage/Education.jsx
View File

@@ -57,7 +57,7 @@ class Education extends React.Component {
return (
<SwitchContent
className="mb-4"
className="mb-5"
expression={editMode}
cases={{
editing: (
@@ -68,7 +68,7 @@ class Education extends React.Component {
invalid={error !== null}
invalidMessage={error}
>
<label htmlFor={formId}>
<label className="edit-section-header" htmlFor={formId}>
{intl.formatMessage(messages['profile.education.education'])}
</label>
<select

2
src/components/ProfilePage/Name.jsx
View File

@@ -52,7 +52,7 @@ class Name extends React.Component {
return (
<SwitchContent
className="mb-4"
className="mb-5"
expression={editMode}
cases={{
editing: (

4
src/components/ProfilePage/PreferredLanguage.jsx
View File

@@ -71,7 +71,7 @@ class PreferredLanguage extends React.Component {
return (
<SwitchContent
className="mb-4"
className="mb-5"
expression={editMode}
cases={{
editing: (
@@ -82,7 +82,7 @@ class PreferredLanguage extends React.Component {
invalid={error !== null}
invalidMessage={error}
>
<label htmlFor={formId}>
<label className="edit-section-header" htmlFor={formId}>
{intl.formatMessage(messages['profile.preferredlanguage.label'])}
</label>
<select

2
src/components/ProfilePage/SocialLinks.jsx
View File

@@ -98,7 +98,7 @@ class SocialLinks extends React.Component {
return (
<SwitchContent
className="mb-4"
className="mb-5"
expression={editMode}
cases={{
empty: (

2
src/components/ProfilePage/elements/Banner.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
function Banner() {
return <div className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative" />;
return <div className="profile-page-bg-banner bg-primary d-none d-md-block p-relative" />;
}
export default Banner;

2
src/components/ProfilePage/elements/EditableItemHeader.jsx
View File

@@ -16,7 +16,7 @@ function EditableItemHeader({
return (
<React.Fragment>
<div className="editable-item-header mb-2">
<h2 className="h6 font-weight-normal mb-0" id={headingId}>
<h2 className="edit-section-header" id={headingId}>
{content}
{showEditButton ? <EditButton style={{ marginTop: '-.35rem' }} className="float-right px-0" onClick={onClickEdit} /> : null}
</h2>

20
src/components/ProfilePage/elements/EmptyContent.jsx
View File

@@ -4,26 +4,18 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
function EmptyContent({ children, onClick, showPlusIcon }) {
const onKeyDown = (e) => { if (e.key === 'Enter') onClick(); };
const interactiveProps = {
onClick,
onKeyDown,
role: 'button',
tabIndex: 0,
};
return (
<div>
{onClick ? (
<a
role="button"
className="pl-0 text-left d-block"
{...interactiveProps}
<button
className="pl-0 text-left btn btn-link"
onClick={onClick}
onKeyDown={(e) => { if (e.key === 'Enter') onClick(); }}
tabIndex={0}
>
{showPlusIcon ? <FontAwesomeIcon size="xs" className="mr-2" icon={faPlus} /> : null}
{children}
</a>
</button>
) : children}
</div>
);

10
src/components/ProfilePage/elements/FormControls.jsx
View File

@@ -14,9 +14,9 @@ function FormControls({
const buttonState = saveState === 'error' ? null : saveState;
return (
<React.Fragment>
<div className="mb-4 form-group">
<label className="mb-1 col-form-label-sm" htmlFor={visibilityId}>
<div className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center">
<div className="form-group">
<label className="col-form-label" htmlFor={visibilityId}>
{intl.formatMessage(messages['profile.formcontrols.who.can.see'])}
</label>
<VisibilitySelect
@@ -28,7 +28,7 @@ function FormControls({
onChange={changeHandler}
/>
</div>
<div className="form-group">
<div className="form-group flex-shrink-0 mr-auto">
<StatefulButton
type="submit"
className="btn-primary"
@@ -43,7 +43,7 @@ function FormControls({
{intl.formatMessage(messages['profile.formcontrols.button.cancel'])}
</Button>
</div>
</React.Fragment>
</div>
);
}

259
src/components/__snapshots__/ProfilePage.test.jsx.snap
View File

@@ -3,7 +3,7 @@
exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
<div>
<div
className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative"
className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
/>
<div
className="d-flex justify-content-center align-items-center flex-column"
@@ -26,7 +26,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
className="profile-page"
>
<div
className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative"
className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
/>
<div
className="container-fluid"
@@ -132,7 +132,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
className="d-md-none mb-4"
/>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -140,7 +140,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
}
/>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -148,7 +148,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
}
/>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -156,7 +156,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
}
/>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -164,7 +164,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
}
/>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -176,7 +176,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -202,7 +202,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
className="profile-page"
>
<div
className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative"
className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
/>
<div
className="container-fluid"
@@ -402,7 +402,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
</a>
</div>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -420,7 +420,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
Full Name
@@ -497,7 +497,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
</div>
</div>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -515,7 +515,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
Location
@@ -587,7 +587,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
</div>
</div>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -605,7 +605,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
Primary Language Spoken
@@ -677,7 +677,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
</div>
</div>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -695,7 +695,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
Education
@@ -767,7 +767,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
</div>
</div>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -785,7 +785,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
Social Links
@@ -910,11 +910,10 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
className="form-group"
>
<div>
<a
className="pl-0 text-left d-block"
<button
className="pl-0 text-left btn btn-link"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
>
<svg
@@ -936,7 +935,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
</svg>
Add
LinkedIn
</a>
</button>
</div>
</li>
</ul>
@@ -947,7 +946,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -965,7 +964,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
About Me
@@ -1055,7 +1054,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
My Certificates
@@ -1215,7 +1214,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
className="profile-page"
>
<div
className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative"
className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
/>
<div
className="container-fluid"
@@ -1415,7 +1414,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
</a>
</div>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -1433,7 +1432,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
Full Name
@@ -1510,7 +1509,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
</div>
</div>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -1528,7 +1527,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
Location
@@ -1600,7 +1599,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
</div>
</div>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -1618,7 +1617,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
Primary Language Spoken
@@ -1690,7 +1689,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
</div>
</div>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -1708,7 +1707,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
Education
@@ -1780,7 +1779,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
</div>
</div>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -1798,7 +1797,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
Social Links
@@ -1923,11 +1922,10 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
className="form-group"
>
<div>
<a
className="pl-0 text-left d-block"
<button
className="pl-0 text-left btn btn-link"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
>
<svg
@@ -1949,7 +1947,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
</svg>
Add
LinkedIn
</a>
</button>
</div>
</li>
</ul>
@@ -1960,7 +1958,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
>
<div
className="pgn-transition-replace-group position-relative mb-4"
className="pgn-transition-replace-group position-relative mb-5"
style={
Object {
"height": null,
@@ -1985,6 +1983,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
className="form-group"
>
<label
className="edit-section-header"
htmlFor="bio"
>
About Me
@@ -1999,100 +1998,104 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
/>
</div>
<div
className="mb-4 form-group"
className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
>
<label
className="mb-1 col-form-label-sm"
htmlFor="visibilityBio"
<div
className="form-group"
>
Who can see this:
</label>
<span
className="w-auto"
>
<span
className="d-inline-block ml-1 mr-2"
style={
Object {
"width": "1.5rem",
}
}
<label
className="col-form-label"
htmlFor="visibilityBio"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-eye fa-w-18 "
data-icon="eye"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
fill="currentColor"
style={Object {}}
/>
</svg>
</span>
<select
className="d-inline-block w-auto form-control"
id="visibilityBio"
name="visibilityBio"
onChange={[Function]}
type="select"
value="all_users"
>
<option
value="private"
>
Just me
</option>
<option
value="all_users"
>
Everyone on edX
</option>
</select>
</span>
</div>
<div
className="form-group"
>
<button
aria-live="assertive"
className="btn pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="submit"
>
Who can see this:
</label>
<span
className="d-flex align-items-center justify-content-center"
className="w-auto"
>
<span
className="pgn__stateful-btn-icon"
className="d-inline-block ml-1 mr-2"
style={
Object {
"width": "1.5rem",
}
}
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-eye fa-w-18 "
data-icon="eye"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
fill="currentColor"
style={Object {}}
/>
</svg>
</span>
<select
className="d-inline-block w-auto form-control"
id="visibilityBio"
name="visibilityBio"
onChange={[Function]}
type="select"
value="all_users"
>
<option
value="private"
>
Just me
</option>
<option
value="all_users"
>
Everyone on edX
</option>
</select>
</span>
</div>
<div
className="form-group flex-shrink-0 mr-auto"
>
<button
aria-live="assertive"
className="btn pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="submit"
>
<span
className="d-flex align-items-center justify-content-center"
>
<span
aria-hidden={true}
className="icon fa fa-spinner fa-spin"
id="Icon1"
/>
className="pgn__stateful-btn-icon"
>
<span
aria-hidden={true}
className="icon fa fa-spinner fa-spin"
id="Icon1"
/>
</span>
Saving
</span>
Saving
</span>
</button>
<button
className="btn btn-link"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
Cancel
</button>
</button>
<button
className="btn btn-link"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
Cancel
</button>
</div>
</div>
</form>
</div>
@@ -2117,7 +2120,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
className="editable-item-header mb-2"
>
<h2
className="h6 font-weight-normal mb-0"
className="edit-section-header"
id={null}
>
My Certificates

45
src/index.scss
View File

@@ -10,31 +10,18 @@ $fa-font-path: "~font-awesome/fonts";
.word-break-all {
word-break: break-all !important;
}
.w-auto {
width: auto !important;
// TODO: Update edx-bootstrap theme to incorporate these edits.
.btn, a.btn {
text-decoration: none;
&:hover {
text-decoration: none;
}
}
.btn-async-action {
transition: background .2s linear;
min-width: 6rem;
.icon-state {
transition: opacity .2s ease, width .2s ease;
opacity: 0;
width: 0;
}
.icon {
font-size: 1.125rem;
}
&.btn-state-pending,
&.btn-state-complete,
&.btn-state-error, {
.icon-state {
width: 1.5rem;
opacity: 1;
}
.btn-link {
text-decoration: underline;
&:hover {
text-decoration: underline;
}
}
@@ -46,6 +33,16 @@ $fa-font-path: "~font-awesome/fonts";
}
.profile-page {
.edit-section-header {
@extend .h6;
display: block;
font-weight: normal;
letter-spacing: 0;
margin: 0;
}
label.edit-section-header {
margin-bottom: $spacer * .5;
}
.profile-avatar-wrap {
@include media-breakpoint-up(md) {
max-width: 12rem;