Fix 4466/Finalizing with remaining icons (#5562)

Yay!

Fixes #4466

app/assets/javascripts/components/articles/article_list.jsx

@@ -191,7 +191,7 @@ const ArticleList = createReactClass({
     } else {
       header = (
         <h3 className="article tooltip-trigger">{ArticleUtils.I18n('edited', project)}
-          <span className="tooltip-indicator" />
+          <span className="tooltip-indicator-heading" />
           <div className="tooltip dark">
             <p>{ArticleUtils.I18n('cross_wiki_tracking', project)}</p>
           </div>

app/assets/javascripts/components/common/AssignCell/AssignButton.jsx

@@ -161,7 +161,7 @@ const Tooltip = ({ message }) => {
 
 // Button to add new assignments
 const EditButton = ({
-  allowMultipleArticles, current_user, is_open, open, role, student,
+  allowMultipleArticles, current_user, is_open, setHover, open, role, student,
   tooltip, tooltipIndicator, assignmentLength, project
 }) => {
   let assignText;
@@ -183,7 +183,7 @@ const EditButton = ({
   if (is_open) finalText = I18n.t('users.assign_articles_done');
 
   return (
-    <div className="tooltip-trigger">
+    <div className="tooltip-trigger" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
       <button
         className={`button border small assign-button ${is_open ? 'dark' : ''}`}
         onClick={open}
@@ -377,12 +377,13 @@ const AssignButton = ({ course, role, course_id, wikidataLabels = {}, hideAssign
     );
   }
 
+  const [hover, setHover] = useState();
   let editButton;
   if (!showButton && permitted) {
     let tooltip;
     let tooltipIndicator;
     if (tooltip_message && !isOpen) {
-      tooltipIndicator = (<span className="tooltip-indicator" />);
+      tooltipIndicator = (<span className={`${hover ? 'tooltip-indicator-hover' : 'tooltip-indicator'}`}/>);
       tooltip = (<Tooltip message={tooltip_message} />);
     }
 
@@ -392,6 +393,7 @@ const AssignButton = ({ course, role, course_id, wikidataLabels = {}, hideAssign
         current_user={current_user}
         is_open={isOpen}
         open={open}
+        setHover={setHover}
         role={role}
         student={student}
         tooltip={tooltip}

app/assets/javascripts/components/common/list.jsx

@@ -100,14 +100,14 @@ const List = createReactClass({
             <p>{I18n.t(keyObj.info_key, options)}</p>
           </div>
         ), (
-          <span key="ttindicator" className="tooltip-indicator" />
+          <span key="ttindicator" className="tooltip-indicator-list" />
         )];
       }
       const order = (keyObj.order) ? keyObj.order : '';
       headers.push((
         <th onClick={headerOnClick} className={`${headerClass} ${order}`} key={key}>
           <span dangerouslySetInnerHTML={{ __html: keyObj.label }} />
-          <span className={`sortable-indicator ${order}`} />
+          <span className={`sortable-indicator-${order} ${order}`} />
           {tooltip}
         </th>
       ));

app/assets/javascripts/components/common/notifications.jsx

@@ -36,7 +36,7 @@ export const Notifications = () => {
         <div className="container">
           {message}
           {
-            notification.closable && <button onClick={() => _handleClose(notification)} className="icon-close-small" />
+            notification.closable && <button onClick={() => _handleClose(notification)} className="pull-right icon-close-small" />
           }
         </div>
       </div>

app/assets/javascripts/components/enroll/enroll_card.jsx

@@ -84,7 +84,7 @@ const EnrollCard = ({
   return (
     <div className="module enroll">
       {
-        course.passcode !== '' && <a href={courseLink} className="icon-close-small" />
+        course.passcode !== '' && <a href={courseLink} className="icon-close-small pull-right" />
       }
       {messageBody}
       {Features.wikiEd && modalShown

app/assets/javascripts/components/explore/explore.jsx

@@ -21,19 +21,18 @@ const Explore = ({ dashboardTitle }) => {
         <div className="campaigns-actions" >
           {showCreateButton && <a className="button dark" href="campaigns/new?create=true">{I18n.t('campaign.create_campaign')}</a>}
           <a href="/campaigns" className="button">
-            {I18n.t('campaign.all_campaigns')} <span className="icon icon-rt_arrow" />
+            {I18n.t('campaign.all_campaigns')} <span className="icon2 icon-rt_arrow_dark" />
           </a>
         </div>
       </div>
       {Features.wikiEd
       && (
         <div id="active_courses">
-
           <ActiveCourseList campaignOnly={true}/>
           <div className="campaigns-actions">
             {showCreateButton && <a className="button dark" href="/course_creator">{I18n.t(`${Features.course_string_prefix}.creator.create_new`)}</a>}
             <a href={`/campaigns/${Features.default_campaign_slug}/programs`} className="button">
-              {I18n.t(`${Features.course_string_prefix}.all_courses`)} <span className="icon icon-rt_arrow" />
+              {I18n.t(`${Features.course_string_prefix}.all_courses`)} <span className="icon2 icon-rt_arrow_dark" />
             </a>
           </div>
         </div>

app/assets/javascripts/components/onboarding/intro.jsx

@@ -1,20 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
 const Intro = ({ currentUser, returnToParam }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
   return (
     <div className="intro text-center">
       <h1>Hi {currentUser.real_name || currentUser.username}</h1>
       <p>We’re excited that you’re here!</p>
       <Link
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
         to={{
           pathname: '/onboarding/form',
           search: `?return_to=${returnToParam}`
         }}
         className="button border inverse-border"
       >
-        Start <i className="icon icon-rt_arrow" />
+        Start <i className={`icon3 ${isHovered ? 'icon-rt_arrow_purple' : ' icon-rt_arrow'}`} />
       </Link>
     </div>
   );

app/assets/javascripts/components/onboarding/permissions.jsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
 // Permissions slide
 const Permissions = ({ currentUser, returnToParam }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
   let slide;
 
   if (currentUser.instructor) {
@@ -20,8 +22,8 @@ const Permissions = ({ currentUser, returnToParam }) => {
           <li>you send public messages to students</li>
         </ul>
         <p>All course content you contribute to this website will be freely available under the <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Creative Commons Attribution-ShareAlike license</a> (the same one used by Wikipedia).</p>
-        <Link to={{ pathname: '/onboarding/finish', search: `?return_to=${returnToParam}` }} className="button border inverse-border">
-          Finish <i className="icon icon-rt_arrow" />
+        <Link onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} to={{ pathname: '/onboarding/finish', search: `?return_to=${returnToParam}` }} className="button border inverse-border">
+          Finish <i className={`icon3 ${isHovered ? 'icon-rt_arrow_purple' : ' icon-rt_arrow'}`} />
         </Link>
       </div>
     );
@@ -40,8 +42,8 @@ const Permissions = ({ currentUser, returnToParam }) => {
           <li>update your course´s wiki page when you join the course or choose an assignment topic</li>
         </ul>
         <p>All course content you contribute to this website will be freely available under the <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Creative Commons Attribution-ShareAlike license</a> (the same one used by Wikipedia).</p>
-        <Link to={{ pathname: '/onboarding/finish', search: `?return_to=${returnToParam}` }} className="button border inverse-border">
-          Finish <i className="icon icon-rt_arrow" />
+        <Link onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} to={{ pathname: '/onboarding/finish', search: `?return_to=${returnToParam}` }} className="button border inverse-border">
+          Finish <i className={`icon3 ${isHovered ? 'icon-rt_arrow_purple' : ' icon-rt_arrow'}`} />
         </Link>
       </div>
     );

app/assets/javascripts/components/onboarding/supplementary.jsx

@@ -106,7 +106,7 @@ export const OnboardingSupplementary = createReactClass({
             <textarea className="form-control" type="text" name="otherReason" defaultValue={this.state.otherReason} onChange={this._handleFieldChange.bind(this, 'otherReason')} />
           </div>
           <button disabled={disabled} type="submit" className="button dark right">
-            {submitText} <i className="icon icon-rt_arrow" />
+            {submitText} <i className="icon3 icon-rt_arrow" />
           </button>
         </form>
       </div>