diff --git a/apps/src/lib/ui/Headings.jsx b/apps/src/lib/ui/Headings.jsx
index d3b7e03a56a49..6643d7553d58d 100644
--- a/apps/src/lib/ui/Headings.jsx
+++ b/apps/src/lib/ui/Headings.jsx
@@ -46,9 +46,9 @@ export class Heading2 extends Component {
export const h3Style = {
...baseHeadingStyle,
- fontFamily: '"Gotham 5r", sans-serif',
- fontSize: 16,
- lineHeight: '24px'
+ fontFamily: '"Barlow Semi Condensed Semibold", sans-serif',
+ fontSize: '1.75em',
+ lineHeight: '1.2'
};
export class Heading3 extends Component {
diff --git a/apps/src/templates/teacherDashboard/CardContainer.jsx b/apps/src/templates/teacherDashboard/CardContainer.jsx
index a4811480e285f..03019f42bc2b5 100644
--- a/apps/src/templates/teacherDashboard/CardContainer.jsx
+++ b/apps/src/templates/teacherDashboard/CardContainer.jsx
@@ -5,9 +5,8 @@ import styleConstants from '../../styleConstants';
const style = {
width: styleConstants['content-width'],
display: 'flex',
- flexDirection: 'row',
flexWrap: 'wrap',
- justifyContent: 'flexStart'
+ justifyContent: 'space-between'
};
/** Uses flexbox to arrange content cards into nice rows with wrapping. */
diff --git a/apps/src/templates/teacherDashboard/LoginTypeCard.jsx b/apps/src/templates/teacherDashboard/LoginTypeCard.jsx
index 64793e0387800..1e61cf96ecaec 100644
--- a/apps/src/templates/teacherDashboard/LoginTypeCard.jsx
+++ b/apps/src/templates/teacherDashboard/LoginTypeCard.jsx
@@ -15,9 +15,11 @@ class LoginTypeCard extends Component {
hover: false
};
- toggleHover = () => {
- this.setState({hover: !this.state.hover});
- };
+ // Toggle hover is not working properly when component is rendered with mouse already 'over' the component.
+ // In order for hover to work properly - set on/off hover implicitly.
+ onHover = () => this.setState({hover: true});
+
+ offHover = () => this.setState({hover: false});
render() {
const {title, subtitle, description, onClick} = this.props;
@@ -29,22 +31,19 @@ class LoginTypeCard extends Component {
description: descriptionStyle
} = styles;
if (this.state.hover) {
- cardStyle = {...cardStyle, borderColor: color.dark_charcoal};
- titleStyle = {...titleStyle, color: color.dark_charcoal};
- subtitleStyle = {...subtitleStyle, color: color.dark_charcoal};
- descriptionStyle = {...descriptionStyle, color: color.dark_charcoal};
+ cardStyle = {...cardStyle, background: color.neutral_light};
}
return (
-
{title}
+
{title}
{subtitle &&
{subtitle}
}
{description}
@@ -56,48 +55,45 @@ class LoginTypeCard extends Component {
const styles = {
card: {
overflow: 'hidden',
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'space-between',
+ display: 'inline-block',
boxSizing: 'border-box',
// Set width to form a three-column layout on 970px teacher dashboard.
width: 312,
- // Uniform height, even in different rows
- flex: '0 0 auto',
minHeight: 150,
- padding: 16,
- marginBottom: 5,
- marginLeft: 5,
+ padding: 8,
+ margin: '8px 0',
borderStyle: 'solid',
borderWidth: 1,
- borderColor: color.border_gray,
- borderRadius: 5,
- background: color.white
+ borderColor: color.neutral_dark20,
+ borderRadius: 1,
+ background: color.neutral_white,
+ cursor: 'pointer'
},
title: {
- paddingBottom: 6,
- fontSize: 24,
+ paddingBottom: 4,
+ marginTop: 8,
+ marginBottom: 0,
+ fontSize: '1.5em',
lineHeight: '18px',
- fontFamily: '"Gotham 5r", sans-serif',
+ fontFamily: '"Barlow Semi Condensed Medium", sans-serif',
zIndex: 2,
- color: color.charcoal
+ color: color.neutral_dark
},
subtitle: {
- paddingBottom: 12,
- fontSize: 14,
+ paddingBottom: 0,
+ fontSize: 12,
lineHeight: '18px',
- fontFamily: '"Gotham 4r", sans-serif',
+ fontFamily: '"Gotham 5r", sans-serif',
zIndex: 2,
- color: color.charcoal
+ color: color.neutral_dark
},
description: {
- paddingTop: 10,
- paddingBottom: 5,
- fontSize: 13,
+ paddingTop: 12,
+ fontSize: 12,
lineHeight: '18px',
fontFamily: '"Gotham 4r", sans-serif',
zIndex: 2,
- color: color.charcoal
+ color: color.neutral_dark
}
};
export default LoginTypeCard;
diff --git a/apps/src/templates/teacherDashboard/LoginTypePicker.jsx b/apps/src/templates/teacherDashboard/LoginTypePicker.jsx
index 52c7cdb701c1f..f6eba88ab5eff 100644
--- a/apps/src/templates/teacherDashboard/LoginTypePicker.jsx
+++ b/apps/src/templates/teacherDashboard/LoginTypePicker.jsx
@@ -8,13 +8,14 @@ import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import i18n from '@cdo/locale';
-import {Heading1, Heading2} from '../../lib/ui/Headings';
+import {Heading3} from '../../lib/ui/Headings';
import CardContainer from './CardContainer';
import LoginTypeCard from './LoginTypeCard';
import Button from '../Button';
import {OAuthSectionTypes} from '@cdo/apps/lib/ui/accounts/constants';
import styleConstants from '../../styleConstants';
import analyticsReporter from '@cdo/apps/lib/util/AnalyticsReporter';
+import color from '@cdo/apps/util/color';
const LOGIN_TYPE_SELECTED_EVENT = 'Login Type Selected';
const CANCELLED_EVENT = 'Section Setup Cancelled';
@@ -76,7 +77,7 @@ class LoginTypePicker extends Component {
const hasThirdParty = withGoogle | withMicrosoft | withClever;
// Adjust max height of the LoginTypePicker container based on the number of
// LoginType cards (which affects number of rows in the CardContainer flexbox).
- const containerHeight = hasThirdParty ? '500px' : '360px';
+ const containerHeight = hasThirdParty ? '500px' : '334px';
const style = {
container: {
@@ -98,22 +99,30 @@ class LoginTypePicker extends Component {
width: styleConstants['content-width'],
height: '100px',
left: 0,
- bottom: '-65px',
+ bottom: '-51px',
padding: '0px 20px 20px 20px',
backgroundColor: '#fff',
borderRadius: '5px'
},
+ mediumText: {
+ fontSize: '.75em',
+ color: color.neutral_dark,
+ fontFamily: '"Gotham 5r", sans-serif'
+ },
+ learnHow: {
+ marginTop: '12px'
+ },
emailPolicyNote: {
- marginBottom: '20px',
- paddingTop: '20px',
- borderTop: '1px solid #000'
+ marginBottom: '31px',
+ paddingTop: '8px',
+ borderTop: `1px solid ${color.neutral_dark}`
}
};
return (
-
{title}
-
{i18n.addStudentsToSectionInstructionsUpdated()}
+
{title}
+
{i18n.addStudentsToSectionInstructionsUpdated()}
{withGoogle && (
@@ -128,28 +137,27 @@ class LoginTypePicker extends Component {
{!hasThirdParty && (
-
+
{i18n.thirdPartyProviderUpsell() + ' '}
{i18n.learnHow()}
{' ' + i18n.connectAccountThirdPartyProviders()}
-
+
)}
-
-
{i18n.note()}
+
+ {i18n.note()}
{' ' + i18n.emailAddressPolicy() + ' '}
{i18n.moreInfo()}
-
+
diff --git a/apps/src/templates/teacherDashboard/ParticipantTypePicker.jsx b/apps/src/templates/teacherDashboard/ParticipantTypePicker.jsx
index 69c7da2fe4d65..878aa67951686 100644
--- a/apps/src/templates/teacherDashboard/ParticipantTypePicker.jsx
+++ b/apps/src/templates/teacherDashboard/ParticipantTypePicker.jsx
@@ -5,7 +5,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import i18n from '@cdo/locale';
-import {Heading1, Heading2} from '../../lib/ui/Headings';
+import {Heading3} from '../../lib/ui/Headings';
+import color from '../../util/color';
import CardContainer from './CardContainer';
import LoginTypeCard from './LoginTypeCard';
import Button from '../Button';
@@ -43,14 +44,16 @@ export default class ParticipantTypePicker extends Component {
return (
-
{title}
-
{i18n.professionalLearningParticipantQuestion()}
+
{title}
+
+ {i18n.professionalLearningParticipantQuestion()}
+
- {this.props.availableParticipantTypes.map((type, index) => (
+ {this.props.availableParticipantTypes.map(type => (
))}
@@ -60,8 +63,7 @@ export default class ParticipantTypePicker extends Component {
@@ -74,7 +76,7 @@ const ParticipantTypeCard = props => (
props.onClick(props.type)}
/>
);
@@ -86,10 +88,14 @@ ParticipantTypeCard.propTypes = {
const style = {
container: {
width: styleConstants['content-width'],
- height: '360px',
+ color: color.neutral_dark,
+ height: '300px',
left: '20px',
right: '20px'
},
+ bodyText: {
+ fontSize: '1em'
+ },
scroll: {
overflowX: 'hidden',
overflowY: 'auto',
@@ -98,9 +104,9 @@ const style = {
footer: {
position: 'absolute',
width: styleConstants['content-width'],
- height: '100px',
+ height: '50px',
left: 0,
- bottom: '-65px',
+ bottom: '-23px',
padding: '0px 20px 20px 20px',
backgroundColor: '#fff',
borderRadius: '5px'
diff --git a/dashboard/app/assets/stylesheets/application.scss b/dashboard/app/assets/stylesheets/application.scss
index 11bfb5890eed2..77d1e8026172c 100644
--- a/dashboard/app/assets/stylesheets/application.scss
+++ b/dashboard/app/assets/stylesheets/application.scss
@@ -869,7 +869,6 @@ $default-modal-width: 640px;
}
a:hover:not(.btn) {
- color: $red;
background-color: $white;
}