Merge pull request #3029 from strapi/fix/3000

Fix Blue button

packages/strapi-admin/admin/src/containers/Onboarding/index.js

@@ -15,7 +15,14 @@ import injectReducer from 'utils/injectReducer';
 
 import OnboardingVideo from 'components/OnboardingVideo';
 
-import { getVideos, onClick, removeVideos, setVideoDuration, setVideoEnd, updateVideoStartTime } from './actions';
+import {
+  getVideos,
+  onClick,
+  removeVideos,
+  setVideoDuration,
+  setVideoEnd,
+  updateVideoStartTime,
+} from './actions';
 import makeSelectOnboarding from './selectors';
 import reducer from './reducer';
 import saga from './saga';
@@ -43,17 +50,17 @@ export class Onboarding extends React.Component {
 
   setVideoEnd = () => {
     this.setVideoEnd();
-  }
+  };
-  
+
   didPlayVideo = (index, currTime) => {
     const eventName = `didPlay${index}GetStartedVideo`;
-    this.context.emitEvent(eventName, {timestamp: currTime});
+    this.context.emitEvent(eventName, { timestamp: currTime });
-  }
+  };
 
   didStopVideo = (index, currTime) => {
     const eventName = `didStop${index}Video`;
-    this.context.emitEvent(eventName, {timestamp: currTime});
+    this.context.emitEvent(eventName, { timestamp: currTime });
-  }
+  };
 
   handleOpenModal = () => this.setState({ showVideos: true });
 
@@ -67,10 +74,9 @@ export class Onboarding extends React.Component {
   };
 
   updateCurrentTime = (index, current, duration) => {
-
     this.props.updateVideoStartTime(index, current);
 
-    const percent = current * 100 / duration;
+    const percent = (current * 100) / duration;
     const video = this.props.videos[index];
 
     if (percent >= 80) {
@@ -80,21 +86,35 @@ export class Onboarding extends React.Component {
     }
   };
 
-  updateEnd = (index) => {
+  updateEnd = index => {
     this.props.setVideoEnd(index, true);
   };
 
   // eslint-disable-line jsx-handler-names
   render() {
     const { videos, onClick, setVideoDuration } = this.props;
+    const { showVideos } = this.state;
+
+    const style = showVideos ? {} : { maxWidth: 0 };
 
     return (
-      <div className={cn(styles.videosWrapper, videos.length > 0 ? styles.visible : styles.hidden)}>
+      <div
-        <div className={cn(styles.videosContent, this.state.showVideos ? styles.shown : styles.hide)}>
+        style={style}
+        className={cn(styles.videosWrapper, videos.length > 0 ? styles.visible : styles.hidden)}
+      >
+        <div
+          style={style}
+          className={cn(styles.videosContent, this.state.showVideos ? styles.shown : styles.hide)}
+        >
           <div className={styles.videosHeader}>
-            <p><FormattedMessage id="app.components.Onboarding.title" /></p>
+            <p>
+              <FormattedMessage id="app.components.Onboarding.title" />
+            </p>
             {videos.length && (
-              <p>{Math.floor((videos.filter(v => v.end).length)*100/videos.length)}<FormattedMessage id="app.components.Onboarding.label.completed" /></p>
+              <p>
+                {Math.floor((videos.filter(v => v.end).length * 100) / videos.length)}
+                <FormattedMessage id="app.components.Onboarding.label.completed" />
+              </p>
             )}
           </div>
           <ul className={styles.onboardingList}>
@@ -116,10 +136,7 @@ export class Onboarding extends React.Component {
         </div>
 
         <div className={styles.openBtn}>
-          <button
+          <button onClick={this.handleVideosToggle} className={this.state.showVideos ? styles.active : ''}>
-            onClick={this.handleVideosToggle}
-            className={this.state.showVideos ? styles.active : ''}
-          >
             <i className="fa fa-question" />
             <i className="fa fa-times" />
             <span />
@@ -157,7 +174,10 @@ Onboarding.propTypes = {
 const mapStateToProps = makeSelectOnboarding();
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators({ getVideos, onClick, setVideoDuration, updateVideoStartTime, setVideoEnd, removeVideos }, dispatch);
+  return bindActionCreators(
+    { getVideos, onClick, setVideoDuration, updateVideoStartTime, setVideoEnd, removeVideos },
+    dispatch,
+  );
 }
 
 const withConnect = connect(

packages/strapi-admin/admin/src/containers/Onboarding/styles.scss

@@ -113,4 +113,4 @@
     width: 0;
     height: 0;
   }
-}
+}