Remove all scss files in admin container and components

2025-08-12 18:53:23 +00:00 · 2019-09-17 18:00:42 +02:00 · 2019-09-17 18:00:42 +02:00 · 00b18c38d5
commit 00b18c38d5
parent db7ab9d9a4
4 changed files with 104 additions and 107 deletions
--- a/packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss
+++ b/packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss
@ -1,4 +1,6 @@
-li.listItem {
+import styled from 'styled-components';
+
+const Li = styled.li`
  display: block;
  padding: 17px 15px;
  cursor: pointer;
@ -27,7 +29,7 @@ li.listItem {
      z-index: 1;
      width: 100%;
      height: 100%;
-      background-color: rgba(#0E7DE7, .8);
+      background-color: rgba(#0e7de7, 0.8);
    }
    img {
      position: relative;
@ -100,45 +102,47 @@ li.listItem {
      line-height: 11px;
    }
  }
-}

-.hiddenPlayerWrapper {
-  display: none;
-}
+  .hiddenPlayerWrapper {
+    display: none;
+  }

-.videoModal {
-  margin-right: auto !important;
-  margin-left: auto !important;
-  .videoModalHeader {
-    padding-bottom: 0;
-    border-bottom: 0;
-    > h5 {
-      font-family: Lato;
-      font-weight: bold!important;
-      font-size: 1.8rem!important;
-      line-height: 3.1rem;
-      color: #333740;
+  .videoModal {
+    margin-right: auto !important;
+    margin-left: auto !important;
+    .videoModalHeader {
+      padding-bottom: 0;
+      border-bottom: 0;
+      > h5 {
+        font-family: Lato;
+        font-weight: bold !important;
+        font-size: 1.8rem !important;
+        line-height: 3.1rem;
+        color: #333740;
+      }
+      > button {
+        display: flex;
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-top: 0;
+        margin-right: 0;
+        padding: 10px;
+        cursor: pointer;
+        span {
+          line-height: 0.6em;
+        }
+      }
    }
-    > button {
-      display: flex;
-      position: absolute;
-      right: 0;
-      top: 0;
-      margin-top: 0;
-      margin-right: 0;
-      padding: 10px;
-      cursor: pointer;
-      span {
-        line-height: 0.6em;
+    .videoPlayer {
+      > button {
+        top: 50%;
+        margin-top: -0.75em;
+        left: 50%;
+        margin-left: -1.5em;
      }
    }
  }
-  .videoPlayer {
-    > button {
-      top: 50%;
-      margin-top: -0.75em;
-      left: 50%;
-      margin-left: -1.5em;
-    }
-  }
-}
+`;
+
+export default Li;
--- a/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js
+++ b/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js
@ -10,10 +10,8 @@ import cn from 'classnames';

 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { Player } from 'video-react';
-
 import 'video-react/dist/video-react.css';
-
-import styles from './styles.scss';
+import Li from './Li';

 class OnboardingVideo extends React.Component {
  componentDidMount() {
@ -46,7 +44,7 @@ class OnboardingVideo extends React.Component {
    this.props.getVideoCurrentTime(
      this.props.id,
      curr,
-      this.props.video.duration,
+      this.props.video.duration
    );
  };

@ -84,49 +82,47 @@ class OnboardingVideo extends React.Component {

  render() {
    const { video } = this.props;
-
    return (
-      <li
+      <Li
        key={this.props.id}
        onClick={this.props.onClick}
        id={this.props.id}
-        className={cn(styles.listItem, video.end && styles.finished)}
+        className={cn(video.end && 'finished')}
      >
-        <div className={styles.thumbWrapper}>
+        <div className="thumbWrapper">
          <img src={video.preview} alt="preview" />
-          <div className={styles.overlay} />
-          <div className={styles.play} />
+          <div className="overlay" />
+          <div className="play" />
        </div>
-        <div className={styles.txtWrapper}>
-          <p className={styles.title}>{video.title}</p>
-          <p className={styles.time}>
+        <div className="txtWrapper">
+          <p className="title">{video.title}</p>
+          <p className="time">
            {isNaN(video.duration)
              ? '\xA0'
              : `${Math.floor(video.duration / 60)}:${Math.floor(
-                video.duration,
-              ) % 60}`}
+                  video.duration
+                ) % 60}`}
          </p>
        </div>

        <Modal
          isOpen={video.isOpen}
          toggle={this.props.onClick} // eslint-disable-line react/jsx-handler-names
-          className={styles.videoModal}
+          className="videoModal"
          onOpened={this.handleModalOpen}
          onClosed={this.handleModalClose}
        >
          <ModalHeader
            toggle={this.props.onClick} // eslint-disable-line react/jsx-handler-names
-            className={styles.videoModalHeader}
+            className="videoModalHeader"
          >
            {video.title}
          </ModalHeader>
-          <ModalBody className={styles.modalBodyHelper}>
+          <ModalBody className="modalBodyHelper">
            <div>
              <Player
                ref={this.player}
-                className={styles.videoPlayer}
-                // poster="/assets/poster.png"
+                className="videoPlayer"
                src={video.video}
                startTime={video.startTime}
                preload="auto"
@ -139,7 +135,7 @@ class OnboardingVideo extends React.Component {
        </Modal>

        {!this.props.video.duration && (
-          <div className={cn(styles.hiddenPlayerWrapper)}>
+          <div className="hiddenPlayerWrapper">
            <Player
              ref={this.hiddenPlayer}
              // poster="/assets/poster.png"
@ -149,7 +145,7 @@ class OnboardingVideo extends React.Component {
            />
          </div>
        )}
-      </li>
+      </Li>
    );
  }
 }
--- a/packages/strapi-admin/admin/src/containers/Onboarding/styles.scss
+++ b/packages/strapi-admin/admin/src/containers/Onboarding/styles.scss
@ -1,4 +1,6 @@
-.videosWrapper {
+import styled, { keyframes } from 'styled-components';
+
+const Wrapper = styled.div`
  position: fixed;
  right: 15px;
  bottom: 15px;
@ -45,10 +47,10 @@
    border-radius: 3px;
    overflow: hidden;
    &.shown {
-      animation: fadeIn 0.5s forwards;
+      animation: ${fadeIn} 0.5s forwards;
    }
    &.hide {
-      animation: fadeOut 0.5s forwards;
+      animation: ${fadeOut} 0.5s forwards;
    }

    ul {
@ -81,36 +83,37 @@
      }
    }
  }
+`;
+
+const fadeIn = keyframes`
+0% {
+  width: auto;
+  height: auto;
+  opacity: 0;
 }

-@keyframes fadeIn {
-  0% {
-    width: auto;
-    height: auto;
-    opacity: 0;
-  }
-
-  5% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
+5% {
+  opacity: 0;
 }

-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-
-  60% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
+100% {
+  opacity: 1;
 }
+`;
+const fadeOut = keyframes`
+0% {
+  opacity: 1;
+}
+
+60% {
+  opacity: 0;
+}
+
+100% {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+`;
+
+export default Wrapper;
--- a/packages/strapi-admin/admin/src/containers/Onboarding/index.js
+++ b/packages/strapi-admin/admin/src/containers/Onboarding/index.js
@ -13,9 +13,8 @@ import { FormattedMessage } from 'react-intl';
 import { GlobalContext } from 'strapi-helper-plugin';
 import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
-
 import OnboardingVideo from '../../components/OnboardingVideo';
-
+import Wrapper from './Wrapper';
 import {
  getVideos,
  onClick,
@ -28,8 +27,6 @@ import makeSelectOnboarding from './selectors';
 import reducer from './reducer';
 import saga from './saga';

-import styles from './styles.scss';
-
 export class Onboarding extends React.Component {
  static contextType = GlobalContext;

@ -101,21 +98,18 @@ export class Onboarding extends React.Component {
    const style = showVideos ? {} : { maxWidth: 0 };

    return (
-      <div
+      <Wrapper
        style={style}
-        className={cn(
-          styles.videosWrapper,
-          videos.length > 0 ? styles.visible : styles.hidden
-        )}
+        className={cn(videos.length > 0 ? 'visible' : 'hidden')}
      >
        <div
          style={style}
          className={cn(
-            styles.videosContent,
-            this.state.showVideos ? styles.shown : styles.hide
+            'videosContent',
+            this.state.showVideos ? 'shown' : 'hide'
          )}
        >
-          <div className={styles.videosHeader}>
+          <div className="videosHeader">
            <p>
              <FormattedMessage id="app.components.Onboarding.title" />
            </p>
@ -128,7 +122,7 @@ export class Onboarding extends React.Component {
              </p>
            )}
          </div>
-          <ul className={styles.onboardingList}>
+          <ul className="onboardingList">
            {videos.map((video, i) => {
              return (
                <OnboardingVideo
@ -146,17 +140,17 @@ export class Onboarding extends React.Component {
          </ul>
        </div>

-        <div className={styles.openBtn}>
+        <div className="openBtn">
          <button
            onClick={this.handleVideosToggle}
-            className={this.state.showVideos ? styles.active : ''}
+            className={this.state.showVideos ? 'active' : ''}
          >
            <i className="fa fa-question" />
            <i className="fa fa-times" />
            <span />
          </button>
        </div>
-      </div>
+      </Wrapper>
    );
  }
 }