[Teach-298] Create section - Update dialog styling (#50605)

* * update Heading3 styles * * update CardContainer.jsx * * update LoginTypeCard.jsx * redesign create section modals
code-dot-org · Mar 10, 2023 · 2b1ce97 · 2b1ce97
1 parent e59e405
commit 2b1ce97
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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 (
       <div
         style={cardStyle}
         onClick={onClick}
-        onMouseEnter={this.toggleHover}
-        onMouseLeave={this.toggleHover}
+        onMouseEnter={this.onHover}
+        onMouseLeave={this.offHover}
         className={this.props.className}
       >
         <div>
-          <div style={titleStyle}>{title}</div>
+          <h4 style={titleStyle}>{title}</h4>
           {subtitle && <div style={subtitleStyle}>{subtitle}</div>}
           <div style={descriptionStyle}>{description}</div>
         </div>
@@ -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
@@ -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 (
       <div style={style.container}>
-        <Heading1>{title}</Heading1>
-        <Heading2>{i18n.addStudentsToSectionInstructionsUpdated()}</Heading2>
+        <Heading3>{title}</Heading3>
+        <p>{i18n.addStudentsToSectionInstructionsUpdated()}</p>
         <div style={style.scroll}>
           <CardContainer>
             {withGoogle && (
@@ -128,28 +137,27 @@ class LoginTypePicker extends Component {
             <EmailLoginCard onClick={this.onLoginTypeSelect} />
           </CardContainer>
           {!hasThirdParty && (
-            <div>
+            <p style={{...style.mediumText, ...style.learnHow}}>
               {i18n.thirdPartyProviderUpsell() + ' '}
               <a href="https://support.code.org/hc/en-us/articles/115001319312-Setting-up-sections-with-Google-Classroom-or-Clever">
                 {i18n.learnHow()}
               </a>
               {' ' + i18n.connectAccountThirdPartyProviders()}
-            </div>
+            </p>
           )}
         </div>
         <div style={style.footer}>
-          <div style={style.emailPolicyNote}>
-            <b>{i18n.note()}</b>
+          <p style={{...style.mediumText, ...style.emailPolicyNote}}>
+            {i18n.note()}
             {' ' + i18n.emailAddressPolicy() + ' '}
             <a href="http://blog.code.org/post/147756946588/codeorgs-new-login-approach-to-student-privacy">
               {i18n.moreInfo()}
             </a>
-          </div>
+          </p>
           <Button
             onClick={this.cancel}
             text={i18n.dialogCancel()}
-            size={Button.ButtonSize.large}
-            color={Button.ButtonColor.gray}
+            color={Button.ButtonColor.neutralDark}
             disabled={disabled}
           />
         </div>

diff --git 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 (
       <div style={style.container} className="uitest-participant-type-picker">
-        <Heading1>{title}</Heading1>
-        <Heading2>{i18n.professionalLearningParticipantQuestion()}</Heading2>
+        <Heading3>{title}</Heading3>
+        <p style={style.bodyText}>
+          {i18n.professionalLearningParticipantQuestion()}
+        </p>
         <div style={style.scroll}>
           <CardContainer>
-            {this.props.availableParticipantTypes.map((type, index) => (
+            {this.props.availableParticipantTypes.map(type => (
               <ParticipantTypeCard
                 onClick={setParticipantType}
-                key={index}
+                key={type}
                 type={type}
               />
             ))}
@@ -60,8 +63,7 @@ export default class ParticipantTypePicker extends Component {
           <Button
             onClick={handleCancel}
             text={i18n.dialogCancel()}
-            size={Button.ButtonSize.large}
-            color={Button.ButtonColor.gray}
+            color={Button.ButtonColor.neutralDark}
             style={{margin: 0}}
           />
         </div>
@@ -74,7 +76,7 @@ const ParticipantTypeCard = props => (
   <LoginTypeCard
     className={`uitest-${props.type}-type`}
     title={cardInfoByAudience[props.type].title}
-    description={cardInfoByAudience[props.type].description}
+    subtitle={cardInfoByAudience[props.type].description}
     onClick={() => 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
@@ -869,7 +869,6 @@ $default-modal-width: 640px;
   }
 
   a:hover:not(.btn) {
-    color: $red;
     background-color: $white;
   }