Migrate plugin to styled compo

packages/strapi-plugin-email/admin/src/components/EditForm/Wrapper.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  background: #ffffff;
+  padding: 45px 30px 22px 30px;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px #e3e9f3;
+
+  .inputStyle {
+    max-width: 358px;
+  }
+
+  .subFormWrapper {
+    margin-bottom: 14px;
+    padding: 23px 30px 0 30px;
+    background-color: #fafafb;
+  }
+`;
+
+export default Wrapper;

packages/strapi-plugin-email/admin/src/components/EditForm/index.js

@@ -8,15 +8,14 @@ import React from 'react';
 import { findIndex, get, isEmpty, map } from 'lodash';
 import PropTypes from 'prop-types';
 import { InputsIndex as Input } from 'strapi-helper-plugin';
-
-import styles from './styles.scss';
+import Wrapper from './Wrapper';
 
 class EditForm extends React.Component {
   getProviderForm = () =>
     get(
       this.props.settings,
       ['providers', this.props.selectedProviderIndex, 'auth'],
-      {},
+      {}
     );
 
   generateSelectOptions = () =>
@@ -29,19 +28,19 @@ class EditForm extends React.Component {
         acc.push(option);
         return acc;
       },
-      [],
+      []
     );
 
   render() {
     return (
-      <div className={styles.editForm}>
+      <Wrapper>
         <div className="row">
           <Input
             customBootstrapClass="col-md-6"
             inputDescription={{
               id: 'email.EditForm.Input.select.inputDescription',
             }}
-            inputClassName={styles.inputStyle}
+            inputClassName="inputStyle"
             label={{ id: 'email.EditForm.Input.select.label' }}
             name="provider"
             onChange={this.props.onChange}
@@ -51,7 +50,7 @@ class EditForm extends React.Component {
           />
         </div>
         {!isEmpty(this.getProviderForm()) && (
-          <div className={styles.subFormWrapper}>
+          <div className="subFormWrapper">
             <div className="row">
               {map(this.getProviderForm(), (value, key) => (
                 <Input
@@ -73,7 +72,7 @@ class EditForm extends React.Component {
             </div>
           </div>
         )}
-      </div>
+      </Wrapper>
     );
   }
 }

packages/strapi-plugin-email/admin/src/components/EditForm/styles.scss

@@ -1,24 +0,0 @@
-.editForm {
-  background: #ffffff;
-  padding: 45px 30px 22px 30px;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #E3E9F3;
-}
-
-.inputStyle {
-  max-width: 358px;
-}
-
-.separator {
-  height: 1px;
-  width: 100%;
-  margin-bottom: 22px;
-  background: #F6F6F6;
-  box-sizing: border-box;
-}
-
-.subFormWrapper {
-  margin-bottom: 14px;
-  padding: 23px 30px 0 30px;
-  background-color: #FAFAFB;
-}