Remove scss files in containers

packages/strapi-admin/admin/src/components/PluginCard/Wrapper.js

@@ -0,0 +1,147 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .wrapper {
+    position: relative;
+    min-height: 216px;
+    margin-bottom: 3.6rem;
+    padding: 1.2rem 1.5rem;
+    padding-bottom: 0;
+    background-color: #fff;
+    box-shadow: 0 2px 4px #e3e9f3;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .cardTitle {
+    display: flex;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    > div:first-child {
+      margin-right: 14px;
+    }
+
+    > div:last-child {
+      height: 36px;
+      line-height: 36px;
+    }
+
+    i {
+      margin-left: 7px;
+      color: #b3b5b9;
+      font-size: 1rem;
+      vertical-align: baseline;
+      cursor: pointer;
+    }
+  }
+
+  .cardDescription {
+    height: 54px;
+    margin-top: 27px;
+    margin-bottom: 9px;
+    font-size: 13px;
+    font-weight: 400;
+
+    > span:last-child {
+      color: #1c5de7;
+    }
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .cardFooter {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 45px;
+    padding: 0.9rem 1.5rem 1rem;
+    background-color: #fafafb;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    cursor: initial;
+  }
+
+  .compatible {
+    margin-top: 3px;
+    color: #5a9e06;
+    font-size: 1.3rem;
+    font-style: italic;
+
+    > i {
+      margin-right: 7px;
+      font-size: 12px;
+    }
+  }
+
+  .settings {
+    margin-top: 3px;
+    color: #323740;
+    font-size: 1.3rem;
+    font-weight: 500;
+    cursor: pointer;
+
+    > i {
+      margin-right: 7px;
+      font-size: 12px;
+    }
+  }
+
+  .button {
+    height: 26px;
+    min-width: 89px !important;
+    padding: 0 15px;
+    margin: 0;
+    border-radius: 2px !important;
+    line-height: 24px;
+    font-size: 13px;
+    font-weight: 500 !important;
+    cursor: pointer;
+
+    span {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      line-height: 24px;
+    }
+  }
+
+  .frame {
+    width: 70px;
+    height: 36px;
+    margin: auto 0;
+    text-align: center;
+    border: 1px solid #f3f3f7;
+    border-radius: 3px;
+    white-space: nowrap;
+    > img {
+      max-height: 36px;
+      vertical-align: middle;
+    }
+  }
+
+  .helper {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+  .primary {
+    background: linear-gradient(315deg, #0097f6 0%, #005eea 100%);
+    color: white;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+
+    &:active {
+      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  .secondary {
+    border: 1px solid #dfe0e1;
+    font-weight: 600;
+  }
+`;
+
+export default Wrapper;

packages/strapi-admin/admin/src/components/PluginCard/index.js

@@ -6,13 +6,9 @@
 /* eslint-disable */
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
-import { isEmpty, replace } from 'lodash';
 import { FormattedMessage } from 'react-intl';
-
 import { Button, PopUpWarning } from 'strapi-helper-plugin';
-
-import styles from './styles.scss';
+import Wrapper from './Wrapper';
 
 const PLUGINS_WITH_CONFIG = ['content-manager', 'email', 'upload'];
 
@@ -94,8 +90,8 @@ class PluginCard extends React.Component {
 
   render() {
     const buttonClass = !this.props.isAlreadyInstalled
-      ? styles.primary
-      : styles.secondary;
+      ? 'primary'
+      : 'secondary';
     const buttonLabel = this.props.isAlreadyInstalled
       ? 'app.components.PluginCard.Button.label.install'
       : 'app.components.PluginCard.Button.label.download';
@@ -104,7 +100,7 @@ class PluginCard extends React.Component {
     const settingsComponent = PLUGINS_WITH_CONFIG.includes(
       this.props.plugin.id
     ) && (
-      <div className={styles.settings} onClick={this.handleClickSettings}>
+      <div className="settings" onClick={this.handleClickSettings}>
         <i className="fa fa-cog" />
         <FormattedMessage id="app.components.PluginCard.settings" />
       </div>
@@ -132,11 +128,11 @@ class PluginCard extends React.Component {
     };
 
     return (
-      <div className={cn(this.state.boostrapCol, styles.pluginCard)}>
-        <div className={styles.wrapper}>
-          <div className={styles.cardTitle}>
-            <div className={styles.frame}>
-              <span className={styles.helper} />
+      <Wrapper className={this.state.boostrapCol}>
+        <div className="wrapper">
+          <div className="cardTitle">
+            <div className="frame">
+              <span className="helper" />
               <img src={this.props.plugin.logo} alt="icon" />
             </div>
             <div>
@@ -152,14 +148,14 @@ class PluginCard extends React.Component {
               />
             </div>
           </div>
-          <div className={styles.cardDescription}>
+          <div className="cardDescription">
             {descriptions.long}
             {/* &nbsp;<FormattedMessage id="app.components.PluginCard.more-details" /> */}
           </div>
-          <div className={styles.cardFooter} onClick={e => e.stopPropagation()}>
-            <div className={styles.cardFooterButton}>
+          <div className="cardFooter" onClick={e => e.stopPropagation()}>
+            <div className="cardFooterButton">
               <Button
-                className={cn(buttonClass, styles.button)}
+                className={`${buttonClass} button`}
                 label={buttonLabel}
                 onClick={this.handleDownloadPlugin}
               />
@@ -177,7 +173,7 @@ class PluginCard extends React.Component {
             {this.props.isAlreadyInstalled ? (
               settingsComponent
             ) : (
-              <div className={styles.compatible}>
+              <div className="compatible">
                 <i
                   className={`fa fa-${
                     this.props.plugin.isCompatible ? 'check' : 'times'
@@ -221,7 +217,7 @@ class PluginCard extends React.Component {
           onConfirm={() => this.setState({ showModalEnv: false })}
           popUpWarningType="warning"
         />
-      </div>
+      </Wrapper>
     );
   }
 }

packages/strapi-admin/admin/src/components/PluginCard/styles.scss

@@ -1,146 +0,0 @@
-.wrapper {
-  position: relative;
-  min-height: 216px;
-  margin-bottom: 3.6rem;
-  padding: 1.2rem 1.5rem;
-  padding-bottom: 0;
-  background-color: #fff;
-  box-shadow: 0 2px 4px #E3E9F3;
-  -webkit-font-smoothing: antialiased;
-}
-
-.cardTitle {
-  display: flex;
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-
-  > div:first-child {
-    margin-right: 14px;
-  }
-
-  > div:last-child {
-    height: 36px;
-    line-height: 36px;
-  }
-
-  i {
-    margin-left: 7px;
-    color: #B3B5B9;
-    font-size: 1rem;
-    vertical-align: baseline;
-    cursor: pointer;
-  }
-}
-
-.cardDescription {
-  height: 54px;
-  margin-top: 27px;
-  margin-bottom: 9px;
-  font-size: 13px;
-  font-weight: 400;
-
-  > span:last-child {
-    color: #1C5DE7;
-  }
-  -webkit-font-smoothing: antialiased;
-}
-
-.cardFooter {
-  position: absolute;
-  bottom: 0; left: 0;
-  display: flex;
-  width: 100%;
-  height: 45px;
-  padding: 0.9rem 1.5rem 1rem;
-  background-color: #FAFAFB;
-  justify-content: space-between;
-  flex-direction: row-reverse;
-  cursor: initial;
-}
-
-.compatible {
-  margin-top: 3px;
-  color: #5A9E06;
-  font-size: 1.3rem;
-  font-style: italic;
-
-  > i {
-    margin-right: 7px;
-    font-size: 12px;
-  }
-}
-
-.settings{
-  margin-top: 3px;
-  color: #323740;
-  font-size: 1.3rem;
-  font-weight: 500;
-  cursor: pointer;
-
-
-  > i {
-    margin-right: 7px;
-    font-size: 12px;
-  }
-}
-
-.button {
-  height: 26px;
-  min-width: 89px !important;
-  padding: 0 15px;
-  margin: 0;
-  border-radius: 2px !important;
-  line-height: 24px;
-  font-size: 13px;
-  font-weight: 500 !important;
-  cursor: pointer;
-
-  span {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    line-height: 24px;
-  }
-}
-
-.frame {
-  width: 70px;
-  height: 36px;
-  margin: auto 0;
-  text-align: center;
-  border: 1px solid #F3F3F7;
-  border-radius: 3px;
-  white-space: nowrap;
-  > img {
-    max-height: 36px;
-    vertical-align: middle;
-  }
-}
-
-.helper {
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-.pluginCard {
- 
-}
-
-.primary {
-  background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
-  color: white;
-  font-weight: 500;
-  -webkit-font-smoothing: antialiased;
-  
-  &:active {
-    box-shadow: inset 1px 1px 3px rgba(0,0,0,.15);
- }
-}
-
-.secondary {
-  border: 1px solid #DFE0E1;
-  font-weight: 600;
-}

packages/strapi-admin/admin/src/components/Row/Action.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Action = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export default Action;

packages/strapi-admin/admin/src/components/Row/Content.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+const Content = styled.div`
+  display: flex;
+
+  .icoContainer {
+    width: 70px;
+    height: 36px;
+    position: relative;
+    margin: auto 0;
+    text-align: center;
+    background: #FAFAFB;
+    border: 1px solid #F3F3F7;
+    border-radius: 3px;
+    font-size: 20px;
+
+    > img {
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
+
+    .icoWrapper {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      justify-content: space-around;
+    }
+
+    .pluginContent {
+      text-align: left !important;
+      > span:first-child {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.7px;
+        text-transform: uppercase;
+      }
+      > span:last-child {
+        font-size: 13px;
+
+      }
+    }
+`;
+
+export default Content;

packages/strapi-admin/admin/src/components/Row/index.js

@@ -6,16 +6,18 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 import { withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { isEmpty } from 'lodash';
-import { GlobalContext } from 'strapi-helper-plugin';
-
 // Design
-import { IcoContainer, ListRow, PopUpWarning } from 'strapi-helper-plugin';
-
-import styles from './styles.scss';
+import {
+  GlobalContext,
+  IcoContainer,
+  ListRow,
+  PopUpWarning,
+} from 'strapi-helper-plugin';
+import Action from './Action';
+import Content from './Content';
 
 const PLUGINS_WITH_CONFIG = ['content-manager', 'email', 'upload'];
 
@@ -71,29 +73,29 @@ class Row extends React.Component {
 
     return (
       <ListRow>
-        <div className={cn('col-md-11', styles.nameWrapper)}>
-          <div className={styles.icoContainer} style={{ marginRight: '14px' }}>
+        <Content className="col-md-11">
+          <div className="icoContainer" style={{ marginRight: '14px' }}>
             {!isEmpty(this.props.plugin.logo) && (
               <img src={`${this.props.plugin.logo}`} alt="icon" />
             )}
             {isEmpty(this.props.plugin.logo) && (
-              <div className={styles.icoWrapper}>
+              <div className="icoWrapper">
                 <i className={`fa fa-${this.props.plugin.icon}`} />
               </div>
             )}
           </div>
-          <div className={styles.pluginContent}>
+          <div className="pluginContent">
             <span>{this.props.plugin.name} —&nbsp;</span>
             <FormattedMessage
               id={`${this.props.plugin.description}.short`}
               defaultMessage={this.props.plugin.description}
             />
           </div>
-        </div>
+        </Content>
         <div className="col-md-1">
-          <div className={styles.actionContainer}>
+          <Action>
             <IcoContainer icons={icons} />
-          </div>
+          </Action>
         </div>
         <PopUpWarning
           isOpen={this.state.showModal}

packages/strapi-admin/admin/src/components/Row/styles.scss

@@ -1,74 +0,0 @@
-.nameWrapper {
-  display: flex;
-}
-
-.icoContainer {
-  width: 70px;
-  height: 36px;
-  position: relative;
-  margin: auto 0;
-  text-align: center;
-  background: #FAFAFB;
-  border: 1px solid #F3F3F7;
-  border-radius: 3px;
-  font-size: 20px;
-
-  > img {
-    max-width: 100%;
-    max-height: 100%;
-    width: auto;
-    height: auto;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-  }
-}
-
-.pluginContent {
-  text-align: left !important;
-  > span:first-child {
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.7px;
-    text-transform: uppercase;
-  }
-  > span:last-child {
-    font-size: 13px;
-
-  }
-}
-
-.actionContainer {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.frame {
-  width: 70px;
-  height: 36px;
-  margin: auto 0;
-  text-align: center;
-  border: 1px solid rgba(28,93,231,0.1);
-  border-radius: 3px;
-  white-space: nowrap;
-  > img {
-    max-height: 36px;
-    vertical-align: baseline;
-  }
-}
-
-.helper {
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-.icoWrapper {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: space-around;
-}

packages/strapi-admin/admin/src/components/StarsContainer/index.js

@@ -1,38 +0,0 @@
-/*
-*
-* StarsContainer
-*
-*
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { map, times } from 'lodash';
-import styles from './styles.scss';
-
-function StarsContainer({ ratings }) {
-  const stars = Math.round(ratings);
-  const coloredStars = times(stars, String);
-  const emptyStars = times(5 - stars, String);
-
-  return (
-    <div className={styles.starsContainer}>
-      <div>
-        {map(coloredStars, star => <i key={star} className="fa fa-star" />)}
-      </div>
-      <div>
-        {map(emptyStars, s => <i key={s} className="fa fa-star" />)}
-      </div>
-    </div>
-  );
-}
-
-StarsContainer.defaultProps = {
-  ratings: 5,
-};
-
-StarsContainer.propTypes = {
-  ratings: PropTypes.number,
-};
-
-export default StarsContainer;

packages/strapi-admin/admin/src/components/StarsContainer/styles.scss

@@ -1,13 +0,0 @@
-.starsContainer {
-  display: flex;
-  margin-right: 10px;
-  > div {
-    color: #EEA348;
-    > i {
-      margin-right: 2px;
-    }
-  }
-  > div:last-child {
-    color: #B3B5B9;
-  }
-}

packages/strapi-admin/admin/src/containers/Admin/Content.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Content = styled.div`
+  min-height: calc(100vh - ${props => props.theme.main.sizes.header.height});
+  width: calc(100vw - ${props => props.theme.main.sizes.leftMenu.width});
+  margin-top: ${props => props.theme.main.sizes.header.height};
+  margin-left: ${props => props.theme.main.sizes.leftMenu.width};
+  background: ${props => props.theme.main.colors.content['background-alpha']};
+`;
+
+Content.defaultProps = {
+  theme: {
+    main: {
+      colors: {
+        content: {},
+      },
+      sizes: {
+        header: {},
+        leftMenu: {},
+      },
+    },
+  },
+};
+
+Content.propTypes = {
+  theme: PropTypes.object,
+};
+
+export default Content;

packages/strapi-admin/admin/src/containers/Admin/Wrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  overflow-x: hidden;
+
+  .adminPageRightWrapper {
+    width: calc(100% - #{$left-menu-width});
+  }
+`;
+
+export default Wrapper;

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

@@ -22,7 +22,6 @@ import { SHOW_TUTORIALS } from '../../config';
 import Header from '../../components/Header/index';
 import Logout from '../../components/Logout';
 import NavTopRightWrapper from '../../components/NavTopRightWrapper';
-
 import ComingSoonPage from '../ComingSoonPage';
 import LeftMenu from '../LeftMenu';
 import ListPluginsPage from '../ListPluginsPage';
@@ -32,24 +31,21 @@ import Marketplace from '../Marketplace';
 import NotFoundPage from '../NotFoundPage';
 import Onboarding from '../Onboarding';
 import PluginDispatcher from '../PluginDispatcher';
-
 import {
   disableGlobalOverlayBlocker,
   enableGlobalOverlayBlocker,
   updatePlugin,
 } from '../App/actions';
 import makeSelecApp from '../App/selectors';
-
 import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
 import difference from './utils/difference';
-
 import { emitEvent, setAppError } from './actions';
 import makeSelectAdmin from './selectors';
 import reducer from './reducer';
 import saga from './saga';
-
-import styles from './styles.scss';
+import Wrapper from './Wrapper';
+import Content from './Content';
 
 export class Admin extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
@@ -151,16 +147,16 @@ export class Admin extends React.Component {
         plugins={this.props.global.plugins}
         updatePlugin={this.props.updatePlugin}
       >
-        <div className={styles.adminPage}>
+        <Wrapper>
           <LeftMenu version={strapiVersion} plugins={plugins} />
           <NavTopRightWrapper>
             {/* Injection zone not ready yet */}
             <Logout />
             <LocaleToggle isLogged />
           </NavTopRightWrapper>
-          <div className={styles.adminPageRightWrapper}>
+          <div className="adminPageRightWrapper">
             <Header />
-            <div className={styles.content}>
+            <Content>
               <Switch>
                 <Route
                   path="/"
@@ -186,7 +182,7 @@ export class Admin extends React.Component {
                 <Route key="7" path="" component={NotFoundPage} />
                 <Route key="8" path="404" component={NotFoundPage} />
               </Switch>
-            </div>
+            </Content>
           </div>
           <OverlayBlocker
             key="overlayBlocker"
@@ -194,7 +190,7 @@ export class Admin extends React.Component {
             {...overlayBlockerData}
           />
           {SHOW_TUTORIALS && <Onboarding />}
-        </div>
+        </Wrapper>
       </GlobalContextProvider>
     );
   }

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

@@ -1,54 +0,0 @@
-/* Import */
-@import '../../styles/variables/variables';
-
-.adminPage {
-  /* stylelint-disable */
-  display: flex;
-  overflow-x: hidden;
-}
-
-.adminPageRightWrapper {
-  width: calc(100% - #{$left-menu-width});
-}
-
-.adminPageSeparator {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 6rem;
-}
-
-.content {
-  /* stylelint-ignore */
-  min-height: calc(100vh - #{$header-height});
-  width: calc(100vw - #{$left-menu-width});
-  margin-top: $header-height;
-  margin-left: $left-menu-width;
-  background: $content-background-alpha;
-}
-
-.wrapper {
-  /* stylelint-ignore */
-  width: 100%;
-  min-height: 100%;
-  background: $content-background;
-}
-
-.localeDropdownMenuNotLogged {
-  background: transparent !important;
-  box-shadow: none !important;
-  border: 1px solid #e3e9f3 !important;
-  border-top: 0px !important;
-
-  button {
-    padding-left: 17px;
-
-    &:hover {
-      background-color: #f7f8f8 !important;
-    }
-  }
-
-  &:before {
-    box-shadow: none !important;
-  }
-}

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

@@ -5,41 +5,31 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
-import Helmet from 'react-helmet';
-
 import { PluginHeader } from 'strapi-helper-plugin';
+import PageTitle from '../../components/PageTitle';
 
-import styles from './styles.scss';
-
-export class ComingSoonPage extends React.Component {
-  // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return (
+const ComingSoonPage = () => {
+  return (
+    <div>
+      <PageTitle title="Coming soon" />
       <div>
-        <Helmet title="Coming soon" />
-        <div>
-          <div className={`container-fluid ${styles.containerFluid}`}>
-            <PluginHeader
-              title={{
-                id: 'app.components.ComingSoonPage.comingSoon',
-              }}
-              description={{
-                id: 'app.components.ComingSoonPage.featuresNotAvailable',
-              }}
-              actions={[]}
-            />
-          </div>
+        <div
+          className="container-fluid"
+          style={{ padding: '18px 30px', overflow: 'hidden' }}
+        >
+          <PluginHeader
+            title={{
+              id: 'app.components.ComingSoonPage.comingSoon',
+            }}
+            description={{
+              id: 'app.components.ComingSoonPage.featuresNotAvailable',
+            }}
+            actions={[]}
+          />
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
-function mapDispatchToProps(dispatch) {
-  return {
-    dispatch,
-  };
-}
-
-export default connect(mapDispatchToProps)(ComingSoonPage);
+export default ComingSoonPage;

packages/strapi-admin/admin/src/containers/ComingSoonPage/messages.json

@@ -1,6 +0,0 @@
-{
-  "comingSoon": {
-    "id": "app.components.ComingSoonPage.comingSoon",
-    "defaultMessage": "Coming soon"
-  }
-}

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

@@ -1,4 +0,0 @@
-.containerFluid { /* stylelint-disable */
-  padding: 18px 30px !important;
-  overflow: hidden;
-}

packages/strapi-admin/admin/src/containers/LeftMenu/Wrapper.js

@@ -0,0 +1,38 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+  position: fixed;
+  float: left;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: ${props => props.theme.main.sizes.leftMenu.width};
+  background: ${props => props.theme.main.colors.strapi['blue-darker']};
+`;
+
+Wrapper.defaultProps = {
+  theme: {
+    main: {
+      colors: {
+        strapi: {},
+      },
+      sizes: {
+        header: {},
+        leftMenu: {},
+      },
+    },
+  },
+};
+
+Wrapper.propTypes = {
+  theme: PropTypes.object,
+};
+
+export default Wrapper;

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

@@ -6,20 +6,18 @@
 
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-
 import LeftMenuHeader from '../../components/LeftMenuHeader';
 import LeftMenuLinkContainer from '../../components/LeftMenuLinkContainer';
 import LeftMenuFooter from '../../components/LeftMenuFooter';
-
-import styles from './styles.scss';
+import Wrapper from './Wrapper';
 
 function LeftMenu(props) {
   return (
-    <div className={styles.leftMenu}>
+    <Wrapper>
       <LeftMenuHeader key="header" {...props} />
       <LeftMenuLinkContainer {...props} />
       <LeftMenuFooter key="footer" {...props} />
-    </div>
+    </Wrapper>
   );
 }
 

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

@@ -1,12 +0,0 @@
-// Import
-@import "../../styles/variables/variables";
-
-.leftMenu { /* stylelint-ignore */
-  background: $left-menu-bg;
-  height: 100vh;
-  width: $left-menu-width;
-  float: left;
-  position: fixed;
-  top: 0;
-  left: 0;
-}

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

@@ -11,11 +11,8 @@ import { Helmet } from 'react-helmet';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
 import { FormattedMessage } from 'react-intl';
-
 import { PluginHeader, LoadingIndicatorPage } from 'strapi-helper-plugin';
-
 import ListPlugins from '../../components/ListPlugins';
-
 import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
 import Wrapper from './Wrapper';

packages/strapi-admin/admin/src/containers/LocaleToggle/Wrapper.js

@@ -0,0 +1,161 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  min-width: 90px;
+
+  > div {
+    height: 6rem;
+    width: 90px;
+    line-height: 5.8rem;
+    z-index: 999;
+    > button {
+      width: 100%;
+      padding-right: 30px;
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      color: #333740;
+      font-weight: 500;
+      text-align: right;
+      cursor: pointer;
+      transition: background 0.2s ease-out;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: #333740;
+        background-color: #fafafb !important;
+      }
+
+      > i {
+        margin-left: 10px;
+        transition: transform 0.3s ease-out;
+
+        &[alt='true'] {
+          transform: rotateX(180deg);
+        }
+      }
+    }
+  }
+  -webkit-font-smoothing: antialiased;
+
+  .localeDropdownContent {
+    span {
+      color: #333740;
+      font-size: 11px;
+      font-family: Lato;
+      font-weight: 600;
+      letter-spacing: 0.5;
+      text-transform: uppercase;
+      vertical-align: baseline;
+    }
+
+    img {
+      max-height: 13px;
+      margin-left: 9px;
+      border-radius: 1px;
+      vertical-align: middle;
+    }
+
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .localeDropdownMenu {
+    left: auto !important;
+    right: -5px !important;
+    min-width: 90px !important;
+    max-height: 162px !important;
+    overflow: auto !important;
+    margin: 0 !important;
+    padding: 0;
+    line-height: 1.8rem;
+    border: none !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    overflow: hidden;
+    box-shadow: 0 1px 4px 0px rgba(40, 42, 49, 0.05);
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: -3px;
+      left: -1px;
+      width: calc(100% + 1px);
+      height: 3px;
+      box-shadow: 0 1px 2px 0 rgba(40, 42, 49, 0.16);
+    }
+
+    > button {
+      height: 40px;
+      padding: 0px 15px;
+      line-height: 40px;
+      color: #f75b1d;
+      font-size: 11px;
+      font-weight: 500;
+      letter-spacing: 0.5;
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: #fafafb !important;
+        border-radius: 0px;
+        cursor: pointer;
+      }
+    }
+
+    > button:first-child {
+      // height: 44px;
+      line-height: 50px;
+      margin-bottom: 4px;
+      &:hover,
+      &:active {
+        color: #333740;
+      }
+    }
+
+    > button:not(:first-child) {
+      height: 36px;
+      line-height: 36px;
+      > i {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .localeDropdownMenuNotLogged {
+    background: transparent !important;
+    box-shadow: none !important;
+    border: 1px solid #e3e9f3 !important;
+    border-top: 0px !important;
+
+    button {
+      padding-left: 17px;
+
+      &:hover {
+        background-color: #f7f8f8 !important;
+      }
+    }
+
+    &:before {
+      box-shadow: none !important;
+    }
+  }
+
+  .localeToggleItem {
+    img {
+      max-height: 13.37px;
+      margin-left: 9px;
+    }
+    &:active {
+      color: black;
+    }
+    &:hover {
+      background-color: #fafafb !important;
+    }
+  }
+
+  .localeToggleItemActive {
+    color: #333740 !important;
+  }
+`;
+
+export default Wrapper;

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

@@ -10,19 +10,16 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
 import cn from 'classnames';
-
 import {
   ButtonDropdown,
   DropdownItem,
   DropdownMenu,
   DropdownToggle,
 } from 'reactstrap';
-
 import makeSelectLocale from '../LanguageProvider/selectors';
 import { changeLocale } from '../LanguageProvider/actions';
 import { languages } from '../../i18n';
-
-import styles from './styles.scss';
+import Wrapper from './Wrapper';
 
 export class LocaleToggle extends React.Component {
   // eslint-disable-line
@@ -55,12 +52,12 @@ export class LocaleToggle extends React.Component {
       currentLocale: { locale },
       className,
     } = this.props;
-    const style = cn(styles.localeDropdownMenu, styles[className]);
+    const style = cn('localeDropdownMenu', className);
 
     return (
-      <div className={styles.localeToggle}>
+      <Wrapper>
         <ButtonDropdown isOpen={this.state.isOpen} toggle={this.toggle}>
-          <DropdownToggle className={styles.localeDropdownContent}>
+          <DropdownToggle className="localeDropdownContent">
             <span>{locale}</span>
             <img src={this.getFlagUrl(locale)} alt={locale} />
           </DropdownToggle>
@@ -71,8 +68,8 @@ export class LocaleToggle extends React.Component {
                 key={language}
                 onClick={() => this.props.changeLocale(language)}
                 className={cn(
-                  styles.localeToggleItem,
-                  locale === language ? styles.localeToggleItemActive : ''
+                  'localeToggleItem',
+                  locale === language ? 'localeToggleItemActive' : ''
                 )}
               >
                 {language.toUpperCase()}
@@ -80,7 +77,7 @@ export class LocaleToggle extends React.Component {
             ))}
           </DropdownMenu>
         </ButtonDropdown>
-      </div>
+      </Wrapper>
     );
   }
 }

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

@@ -1,152 +0,0 @@
-.localeToggle {
-  min-width: 90px;
-
-  > div {
-    height: 6rem;
-    width: 90px;
-    line-height: 5.8rem;
-    z-index: 999;
-    > button {
-      width: 100%;
-      padding-right: 30px;
-      background: transparent;
-      border: none;
-      border-radius: 0;
-      color: #333740;
-      font-weight: 500;
-      text-align: right;
-      cursor: pointer;
-      transition: background .2s ease-out;
-
-      &:hover, &:focus, &:active {
-        color: #333740;
-        background-color: #FAFAFB !important;
-      }
-
-      > i {
-        margin-left: 10px;
-        transition: transform .3s ease-out;
-
-        &[alt="true"] {
-          transform: rotateX(180deg);
-        }
-      }
-    }
-  }
-  -webkit-font-smoothing: antialiased;
-}
-
-.localeDropdownContent {
-  span {
-    color: #333740;
-    font-size: 11px;
-    font-family: Lato;
-    font-weight: 600;
-    letter-spacing: 0.5;
-    text-transform: uppercase;
-    vertical-align: baseline;
-  }
-
-  img {
-    max-height: 13px;
-    margin-left: 9px;
-    border-radius: 1px;
-    vertical-align: middle;
-  }
-
-  -webkit-font-smoothing: antialiased;
-}
-
-.localeDropdownMenu {
-  left: auto !important;
-  right: -5px !important;
-  min-width: 90px!important;
-  max-height: 162px !important;
-  overflow: auto !important;
-  margin: 0 !important;
-  padding: 0;
-  line-height: 1.8rem;
-  border: none!important;
-  border-top-left-radius: 0!important;
-  border-top-right-radius: 0!important;
-  overflow: hidden;
-  box-shadow: 0 1px 4px 0px rgba(40, 42, 49, 0.05);
-
-  &:before{
-    content: '';
-    position: absolute;
-    top: -3px;
-    left: -1px;
-    width: calc(100% + 1px);
-    height: 3px;
-    box-shadow: 0 1px 2px 0 rgba(40, 42, 49, 0.16);
-  }
-
-  > button {
-    height: 40px;
-    padding: 0px 15px;
-    line-height: 40px;
-    color: #F75B1D;
-    font-size: 11px;
-    font-weight: 500;
-    letter-spacing: 0.5;
-    &:hover, &:focus, &:active {
-      background-color: #FAFAFB!important;
-      border-radius: 0px;
-      cursor: pointer;
-    }
-  }
-
-  > button:first-child {
-    // height: 44px;
-    line-height: 50px;
-    margin-bottom: 4px;
-    &:hover, &:active {
-      color: #333740;
-    }
-  }
-
-  > button:not(:first-child) {
-    height: 36px;
-    line-height: 36px;
-    > i {
-      margin-left: 10px
-    }
-  }
-}
-
-.localeDropdownMenuNotLogged{
-  background: transparent !important;
-  box-shadow: none !important;
-  border: 1px solid #e3e9f3 !important;
-  border-top: 0px !important;
-
-  button {
-    padding-left: 17px;
-
-    &:hover {
-      background-color: #F7F8F8 !important;
-    }
-  }
-
-  &:before{
-    box-shadow: none !important;
-  }
-}
-
-.localeToggleItem {
-  img {
-    max-height: 13.37px;
-    margin-left: 9px;
-  }
-  &:active {
-    color: black;
-  }
-  &:hover {
-    background-color: #FAFAFB !important;
-  }
-}
-
-.localeToggleItemActive {
-  color: #333740 !important;
-}

packages/strapi-admin/admin/src/containers/Marketplace/Wrapper.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding: 18px 30px !important;
+  > div:first-child {
+    margin-bottom: 11px;
+  }
+`;
+
+export default Wrapper;

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

@@ -9,30 +9,23 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { bindActionCreators, compose } from 'redux';
-import cn from 'classnames';
-
 import { LoadingIndicatorPage, PluginHeader } from 'strapi-helper-plugin';
-
 import { MarketPlaceContextProvider } from '../../contexts/MarketPlace';
 // Design
 import PageTitle from '../../components/PageTitle';
 import PluginCard from '../../components/PluginCard';
-
 import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
-
+import Wrapper from './Wrapper';
 import {
   downloadPlugin,
   getAvailableAndInstalledPlugins,
   resetProps,
 } from './actions';
 import makeSelectMarketplace from './selectors';
-
 import reducer from './reducer';
 import saga from './saga';
 
-import styles from './styles.scss';
-
 class Marketplace extends React.Component {
   componentDidMount() {
     // Fetch the available and installed plugins
@@ -89,7 +82,7 @@ class Marketplace extends React.Component {
           <FormattedMessage id="app.components.InstallPluginPage.helmet">
             {this.renderHelmet}
           </FormattedMessage>
-          <div className={cn('container-fluid', styles.containerFluid)}>
+          <Wrapper className="container-fluid">
             <PluginHeader
               title={{ id: 'app.components.InstallPluginPage.title' }}
               description={{
@@ -97,10 +90,10 @@ class Marketplace extends React.Component {
               }}
               actions={[]}
             />
-            <div className={cn('row', styles.wrapper)}>
+            <div className="row" style={{ paddingTop: '3.8rem' }}>
               {Object.keys(availablePlugins).map(this.renderPluginCard)}
             </div>
-          </div>
+          </Wrapper>
         </div>
       </MarketPlaceContextProvider>
     );

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

@@ -1,26 +0,0 @@
-.containerFluid {
-  padding: 18px 30px !important;
-  > div:first-child {
-    margin-bottom: 11px;
-  }
-}
-
-.inputContainer {
-  padding-top: 7px;
-  background-color: #fff;
-  > div {
-    > div {
-      margin-bottom: 0!important;
-    }
-    > div:nth-child(3) {
-      display: none;
-    }
-    > label {
-      display: none!important;
-    }
-  }
-}
-
-.wrapper {
-  padding-top: 3.8rem;
-}

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

@@ -11,18 +11,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { NotFound } from 'strapi-helper-plugin';
 
-export default class NotFoundPage extends React.Component {
-  // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return <NotFound {...this.props} />;
-  }
-}
+const NotFoundPage = props => <NotFound {...props} />;
 
 NotFoundPage.propTypes = {
   history: PropTypes.shape({
     goBack: PropTypes.func.isRequired,
   }).isRequired,
 };
+
+export default NotFoundPage;

packages/strapi-admin/admin/src/containers/NotFoundPage/messages.json

@@ -1,6 +0,0 @@
-{
-  "description": {
-    "id": "app.components.NotFoundPage.description",
-    "defaultMessage": "Page not found."
-  }
-}

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

@@ -1,30 +0,0 @@
-// Import
-@import "../../styles/variables/variables";
-
-.notFound { /* stylelint-ignore */
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-top: 114px;
-
-  h1{
-    margin-bottom: 12px;
-    text-shadow: 0 1rem 4rem rgba(255, 255, 255, 0.8);
-    color: #2C3138;
-    font-size: 6.4rem;
-    letter-spacing: 2px;
-  }
-
-  h2{
-    color: #2C3138;
-    font-size: 1.4rem;
-    font-weight: 400;
-    margin-bottom: 50px;
-  }
-
-  button{
-    margin: 0;
-  }
-}