Users permissions styled compo ip

packages/strapi-plugin-users-permissions/admin/src/components/Controller/Components.js

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding: 1px 43px 0 28px;
+  background: #ffffff;
+  opacity: none;
+  -webkit-font-smoothing: antialiased;
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 16px;
+  text-transform: capitalize;
+`;
+
+const Label = styled.label`
+  position: relative;
+  margin-right: 0px;
+  margin-left: 10px;
+  font-weight: 400 !important;
+  cursor: pointer;
+
+  > input {
+    display: none;
+    margin-right: 9px;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0px;
+    top: 1px;
+    width: 14px;
+    height: 14px;
+    border: 1px solid rgba(16, 22, 34, 0.15);
+    background-color: #fdfdfd;
+    border-radius: 3px;
+  }
+  &.checked {
+    &:after {
+      content: '\f00c';
+      position: absolute;
+      top: 0px;
+      left: 2px;
+      font-size: 10px;
+      font-family: 'FontAwesome';
+      font-weight: 100;
+      color: #1c5de7;
+      transition: all 0.2s;
+    }
+  }
+  &.some-checked {
+    &:after {
+      content: '\f068';
+      position: absolute;
+      top: 0px;
+      left: 3px;
+      font-size: 10px;
+      font-family: 'FontAwesome';
+      font-weight: 100;
+      color: #1c5de7;
+    }
+  }
+`;
+
+const Separator = styled.div`
+  height: 1px;
+  flex-grow: 2;
+  margin-top: 8px;
+  margin-right: 15px;
+  margin-left: 15px;
+  background-color: #f6f6f6;
+`;
+
+export { Header, Label, Separator, Wrapper };

packages/strapi-plugin-users-permissions/admin/src/components/Controller/index.js

@@ -14,6 +14,8 @@ import pluginId from '../../pluginId';
 import InputCheckbox from '../InputCheckboxPlugin';
 import styles from './styles.scss';
 
+import { Header, Label, Separator, Wrapper } from './Components';
+
 class Controller extends React.Component {
   state = { inputSelected: '' };
 
@@ -48,22 +50,18 @@ class Controller extends React.Component {
     const labelId = this.areAllActionsSelected() ? 'unselectAll' : 'selectAll';
 
     return (
-      <div className={styles.controller}>
-        <div className={styles.controllerHeader}>
+      <Wrapper>
+        <Header>
           <div>{this.props.name}</div>
-          <div className={styles.separator} />
+          <Separator />
           <div>
             <div className={cn(styles.inputCheckbox)}>
               <div className="form-check">
-                <label
-                  className={cn(
-                    'form-check-label',
-                    styles.label,
-                    this.areAllActionsSelected() && styles.checked,
-                    !this.areAllActionsSelected() &&
-                      this.hasSomeActionsSelected() &&
-                      styles.someChecked
-                  )}
+                <Label
+                  className={`${this.areAllActionsSelected() &&
+                    'checked'} ${!this.areAllActionsSelected() &&
+                    this.hasSomeActionsSelected() &&
+                    'some-checked'}`}
                   htmlFor={this.props.name}
                 >
                   <input
@@ -75,11 +73,11 @@ class Controller extends React.Component {
                     type="checkbox"
                   />
                   <FormattedMessage id={`${pluginId}.Controller.${labelId}`} />
-                </label>
+                </Label>
               </div>
             </div>
           </div>
-        </div>
+        </Header>
         <div className="row">
           {map(Object.keys(this.props.actions).sort(), actionKey => (
             <InputCheckbox
@@ -93,7 +91,7 @@ class Controller extends React.Component {
             />
           ))}
         </div>
-      </div>
+      </Wrapper>
     );
   }
 }

packages/strapi-plugin-users-permissions/admin/src/components/EditForm/Components.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const Separator = styled.div`
+  box-sizing: border-box;
+  height: 1px;
+  width: 100%;
+  margin-top: 1.4rem;
+  margin-bottom: 2.1rem;
+  background: #f6f6f6;
+`;
+
+const Wrapper = styled.div`
+  background: #ffffff;
+  padding: 45px 30px 22px 30px;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px #e3e9f3;
+  &.load-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    min-height: 209px;
+    padding-top: 88px;
+  }
+`;
+
+export { Separator, Wrapper };

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

@@ -7,11 +7,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
-import cn from 'classnames';
 
 import { InputsIndex as Input, LoadingIndicator } from 'strapi-helper-plugin';
 
-import styles from './styles.scss';
+import { Separator, Wrapper } from './Components';
 
 class EditForm extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
@@ -26,126 +25,101 @@ class EditForm extends React.Component {
     }, []);
 
   render() {
-    if (this.props.showLoaders) {
-      return (
-        <div
-          className={cn(
-            styles.editForm,
-            this.props.showLoaders && styles.loadIndicatorContainer,
-          )}
-        >
-          <LoadingIndicator />
-        </div>
-      );
-    }
+    const { onChange, showLoaders } = this.props;
 
     return (
-      <div className={styles.editForm}>
-        <div className="row">
-          <Input
-            inputDescription={{
-              id: 'users-permissions.EditForm.inputSelect.description.role',
-            }}
-            inputClassName={styles.inputStyle}
-            label={{ id: 'users-permissions.EditForm.inputSelect.label.role' }}
-            name="advanced.settings.default_role"
-            onChange={this.props.onChange}
-            selectOptions={this.generateSelectOptions()}
-            type="select"
-            value={get(this.props.values.settings, 'default_role')}
-          />
-        </div>
-        <div className={styles.separator} />
-        <div className="row">
-          <Input
-            label={{ id: 'users-permissions.EditForm.inputToggle.label.email' }}
-            inputDescription={{
-              id: 'users-permissions.EditForm.inputToggle.description.email',
-            }}
-            name="advanced.settings.unique_email"
-            onChange={this.props.onChange}
-            type="toggle"
-            value={get(this.props.values.settings, 'unique_email')}
-          />
-        </div>
-        <div className={styles.separator} />
-        {/*}
-        <div className="row">
-          <Input
-            customBootstrapClass="col-md-3"
-            label="users-permissions.EditForm.inputSelect.subscriptions.label"
-            inputDescription="users-permissions.EditForm.inputSelect.subscriptions.description"
-            name="subscriptions"
-            onChange={this.props.onChange}
-            type="number"
-            validations={{}}
-            value={get(this.props.values, 'subscriptions')}
-          />
-          <div className="col-md-3" />
-          <Input
-            customBootstrapClass="col-md-3"
-            label="users-permissions.EditForm.inputSelect.durations.label"
-            inputDescription="users-permissions.EditForm.inputSelect.durations.description"
-            name="durations"
-            onChange={this.props.onChange}
-            type="number"
-            validations={{}}
-            value={get(this.props.values, 'durations')}
-          />
-        </div>
-        <div className={styles.separator} />
-        */}
-        <div className="row">
-          <Input
-            label={{
-              id: 'users-permissions.EditForm.inputToggle.label.sign-up',
-            }}
-            inputDescription={{
-              id: 'users-permissions.EditForm.inputToggle.description.sign-up',
-            }}
-            name="advanced.settings.allow_register"
-            onChange={this.props.onChange}
-            type="toggle"
-            value={get(this.props.values.settings, 'allow_register')}
-          />
-        </div>
-        <div className={styles.separator} />
-        <div className="row">
-          <Input
-            label={{
-              id:
-                'users-permissions.EditForm.inputToggle.label.email-confirmation',
-            }}
-            inputDescription={{
-              id:
-                'users-permissions.EditForm.inputToggle.description.email-confirmation',
-            }}
-            name="advanced.settings.email_confirmation"
-            onChange={this.props.onChange}
-            type="toggle"
-            value={get(this.props.values.settings, 'email_confirmation')}
-          />
-        </div>
-        <div className="row">
-          <Input
-            label={{
-              id:
-                'users-permissions.EditForm.inputToggle.label.email-confirmation-redirection',
-            }}
-            inputDescription={{
-              id:
-                'users-permissions.EditForm.inputToggle.description.email-confirmation-redirection',
-            }}
-            name="advanced.settings.email_confirmation_redirection"
-            onChange={this.props.onChange}
-            type="text"
-            value={get(
-              this.props.values.settings,
-              'email_confirmation_redirection',
-            )}
-          />
-        </div>
-      </div>
+      <Wrapper className={showLoaders && 'load-container'}>
+        {showLoaders ? (
+          <LoadingIndicator />
+        ) : (
+          <div>
+            <div className="row">
+              <Input
+                inputDescription={{
+                  id: 'users-permissions.EditForm.inputSelect.description.role',
+                }}
+                label={{
+                  id: 'users-permissions.EditForm.inputSelect.label.role',
+                }}
+                name="advanced.settings.default_role"
+                onChange={onChange}
+                selectOptions={this.generateSelectOptions()}
+                type="select"
+                value={get(this.props.values.settings, 'default_role')}
+              />
+            </div>
+            <Separator />
+            <div className="row">
+              <Input
+                label={{
+                  id: 'users-permissions.EditForm.inputToggle.label.email',
+                }}
+                inputDescription={{
+                  id:
+                    'users-permissions.EditForm.inputToggle.description.email',
+                }}
+                name="advanced.settings.unique_email"
+                onChange={onChange}
+                type="toggle"
+                value={get(this.props.values.settings, 'unique_email')}
+              />
+            </div>
+            <Separator />
+
+            <div className="row">
+              <Input
+                label={{
+                  id: 'users-permissions.EditForm.inputToggle.label.sign-up',
+                }}
+                inputDescription={{
+                  id:
+                    'users-permissions.EditForm.inputToggle.description.sign-up',
+                }}
+                name="advanced.settings.allow_register"
+                onChange={onChange}
+                type="toggle"
+                value={get(this.props.values.settings, 'allow_register')}
+              />
+            </div>
+            <Separator />
+            <div className="row">
+              <Input
+                label={{
+                  id:
+                    'users-permissions.EditForm.inputToggle.label.email-confirmation',
+                }}
+                inputDescription={{
+                  id:
+                    'users-permissions.EditForm.inputToggle.description.email-confirmation',
+                }}
+                name="advanced.settings.email_confirmation"
+                onChange={onChange}
+                type="toggle"
+                value={get(this.props.values.settings, 'email_confirmation')}
+              />
+            </div>
+            <div className="row">
+              <Input
+                label={{
+                  id:
+                    'users-permissions.EditForm.inputToggle.label.email-confirmation-redirection',
+                }}
+                inputDescription={{
+                  id:
+                    'users-permissions.EditForm.inputToggle.description.email-confirmation-redirection',
+                }}
+                name="advanced.settings.email_confirmation_redirection"
+                onChange={onChange}
+                type="text"
+                value={get(
+                  this.props.values.settings,
+                  'email_confirmation_redirection'
+                )}
+              />
+            </div>
+          </div>
+        )}
+      </Wrapper>
     );
   }
 }

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

@@ -1,23 +0,0 @@
-.editForm {
-  background: #ffffff;
-  padding: 45px 30px 22px 30px;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #E3E9F3;
-}
-
-.separator {
-  box-sizing: border-box;
-  height: 1px;
-  width: 100%;
-  margin-top: 1.4rem;
-  margin-bottom: 2.1rem;
-  background: #F6F6F6;
-}
-
-.loadIndicatorContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  min-height: 209px;
-  padding-top: 88px;
-}

packages/strapi-plugin-users-permissions/admin/src/components/Plugin/Components.js

@@ -1,82 +1,66 @@
-.plugin {
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
   min-height: 5.4rem;
-
   -webkit-font-smoothing: antialiased;
-}
+`;
 
-.banner {
+const Banner = styled.div`
   display: flex;
   justify-content: space-between;
-
   padding: 0 28px;
   padding-right: 43px;
-  color: #787E8F;
+  color: #787e8f;
   cursor: pointer;
   > div:first-child {
     display: flex;
     line-height: 5.3rem;
   }
-}
+`;
 
-.chevronDown {
+const Chevron = styled.div`
   margin: auto;
   margin-right: 0;
-  &:before {
-    content: '\F078';
-    display: block;
-    color: #787E8F;
-    font-family: 'FontAwesome';
-    font-size: 10px;
-  }
-}
+  color: #787e8f;
+  font-family: 'FontAwesome';
+  font-size: 10px;
+`;
 
-.chevronUp {
-  margin: auto;
-  margin-right: 0;
-  &:before {
-    content: '\F077';
-    display: block;
-    color: #787E8F;
-    font-family: 'FontAwesome';
-    font-size: 10px;
-  }
-}
-
-
-.controllerContainer {
+const ControllerWrapper = styled.div`
   > div:not(:first-child) {
     padding-top: 2.3rem;
   }
   > div:last-child {
     padding-bottom: 1.8rem;
   }
-}
+`;
 
-.description {
-  // width: 50%;
+const Description = styled.div`
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #8B91A0;
+  color: #8b91a0;
   font-size: 12px;
   font-weight: 400;
-}
+`;
 
-.iconContainer {
+const Icon = styled.div`
   height: 36px;
   width: 70px;
   margin: auto;
   margin-right: 14px;
   color: #333740;
-  border: 1px solid rgba(28,93,231,0.1);
+  border: 1px solid rgba(28, 93, 231, 0.1);
   border-radius: 3px;
   line-height: 36px;
   text-align: center;
-}
+`;
 
-.name {
+const Name = styled.div`
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
-}
+`;
+
+export { Banner, Chevron, ControllerWrapper, Description, Icon, Name, Wrapper };

packages/strapi-plugin-users-permissions/admin/src/components/Plugin/index.js

@@ -12,7 +12,15 @@ import { FormattedMessage } from 'react-intl';
 
 import Controller from '../Controller';
 
-import styles from './styles.scss';
+import {
+  Banner,
+  Chevron,
+  ControllerWrapper,
+  Description,
+  Icon,
+  Name,
+  Wrapper,
+} from './Components';
 
 class Plugin extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
@@ -61,17 +69,15 @@ class Plugin extends React.Component {
     }
 
     return (
-      <div className={styles.plugin} style={divStyle}>
-        <div className={styles.banner} onClick={this.handleClick}>
+      <Wrapper style={divStyle}>
+        <Banner onClick={this.handleClick}>
           <div>
             {this.props.name !== 'application' && (
-              <div className={styles.iconContainer}>
-                {icon && <img src={icon} alt="icon" />}
-              </div>
+              <Icon>{icon && <img src={icon} alt="icon" />}</Icon>
             )}
-            <div className={styles.name}>{this.props.name}</div>
+            <Name>{this.props.name}</Name>
             &nbsp;—&nbsp;
-            <div className={styles.description}>
+            <Description>
               {this.props.name === 'application' ? (
                 <FormattedMessage id="users-permissions.Plugin.permissions.application.description" />
               ) : (
@@ -80,19 +86,21 @@ class Plugin extends React.Component {
                   values={{ name: capitalize(this.props.name) }}
                 />
               )}
-            </div>
+            </Description>
           </div>
           {emptyApplication && (
-            <div
-              className={
-                this.state.collapse ? styles.chevronUp : styles.chevronDown
-              }
-            ></div>
+            <Chevron>
+              {this.state.collapse ? (
+                <i className="fa fa-chevron-up" />
+              ) : (
+                <i className="fa fa-chevron-down" />
+              )}
+            </Chevron>
           )}
-        </div>
+        </Banner>
         <Collapse isOpen={this.state.collapse}>
           <div />
-          <div className={styles.controllerContainer}>
+          <ControllerWrapper>
             {map(
               get(this.props.plugin, 'controllers'),
               (controllerActions, key) => (
@@ -106,9 +114,9 @@ class Plugin extends React.Component {
                 />
               )
             )}
-          </div>
+          </ControllerWrapper>
         </Collapse>
-      </div>
+      </Wrapper>
     );
   }
 }

packages/strapi-plugin-users-permissions/admin/src/components/Plugins/Components.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin: 0 -15px;
+  padding: 0;
+  .plugins-wrapper {
+    padding-top: 1.8rem;
+  }
+`;
+
+const Header = styled.div`
+  padding: 0 28px;
+  > div:first-child {
+    margin-bottom: 2px;
+    color: #333740;
+    font-family: Lato;
+    font-size: 1.8rem;
+    font-weight: 600;
+    line-height: 2.1rem;
+  }
+  > div:last-child {
+    margin-top: 0rem;
+    color: #787e8f;
+    font-size: 1.2rem;
+    line-height: 1.5rem;
+  }
+`;
+
+const PluginsContainer = styled.div`
+  padding-top: 1.9rem;
+  > div {
+    border-bottom: 1px solid white;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  > div:not(:first-child) {
+    background: linear-gradient(
+      315deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(227, 233, 243, 0.54) 100%
+    );
+    > div {
+      line-height: 5.2rem;
+    }
+    > div:nth-child(2) {
+      > div:first-child {
+        min-height: 1.8rem;
+        background: #ffffff;
+      }
+    }
+  }
+  &.pluginsGradient {
+    > div:first-child {
+      background: linear-gradient(
+        315deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(227, 233, 243, 0.54) 100%
+      ) !important;
+    }
+  }
+`;
+
+export { Header, PluginsContainer, Wrapper };

packages/strapi-plugin-users-permissions/admin/src/components/Plugins/index.js

@@ -8,11 +8,10 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { has, map } from 'lodash';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 
 import Plugin from '../Plugin';
 
-import styles from './styles.scss';
+import { Header, PluginsContainer, Wrapper } from './Components';
 
 class Plugins extends React.Component {
   state = { pluginSelected: '' };
@@ -21,21 +20,20 @@ class Plugins extends React.Component {
 
   render() {
     return (
-      <div className={cn('col-md-7', styles.wrapper)}>
-        <div className={styles.plugins}>
-          <div className={styles.headerContainer}>
+      <Wrapper className="col-md-7">
+        <div className="plugins-wrapper">
+          <Header>
             <div>
               <FormattedMessage id="users-permissions.Plugins.header.title" />
             </div>
             <div>
               <FormattedMessage id="users-permissions.Plugins.header.description" />
             </div>
-          </div>
-          <div
-            className={cn(
-              styles.pluginsContainer,
-              !has(this.props.plugins, 'application') && styles.pluginsGradient
-            )}
+          </Header>
+          <PluginsContainer
+            className={
+              !has(this.props.plugins, 'application') && 'pluginsGradient'
+            }
           >
             {map(Object.keys(this.props.plugins).sort(), plugin => (
               <Plugin
@@ -46,9 +44,9 @@ class Plugins extends React.Component {
                 pluginSelected={this.state.pluginSelected}
               />
             ))}
-          </div>
+          </PluginsContainer>
         </div>
-      </div>
+      </Wrapper>
     );
   }
 }

packages/strapi-plugin-users-permissions/admin/src/components/Plugins/styles.scss

@@ -1,56 +0,0 @@
-.plugins {
-  padding-top: 1.8rem;
-}
-
-.pluginsContainer {
-  padding-top: 1.9rem;
-  > div {
-    border-bottom: 1px solid white;
-
-    &:last-child{
-      border-bottom: none;
-    }
-  }
-  > div:not(:first-child) {
-    background: linear-gradient(315deg, rgba(255,255,255,0) 0%, rgba(227, 233, 243, 0.54) 100%);
-    > div {
-      line-height: 5.2rem;
-    }
-    > div:nth-child(2) {
-      >div:first-child {
-        min-height: 1.8rem;
-        background: #ffffff;
-      }
-    }
-  }
-}
-
-.headerContainer {
-  padding: 0 28px;
-
-  > div:first-child {
-    margin-bottom: 2px;
-    color: #333740;
-    font-family: Lato;
-    font-size: 1.8rem;
-    font-weight: 600;
-    line-height: 2.1rem;
-  }
-  > div:last-child {
-    margin-top: 0rem;
-    color: #787E8F;
-    font-size: 1.2rem;
-    line-height: 1.5rem;
-  }
-}
-
-.wrapper {
-  margin: 0 -15px;
-  padding: 0;
-}
-
-.pluginsGradient {
-  > div:first-child {
-    background: linear-gradient(315deg, rgba(255,255,255,0) 0%, rgba(227, 233, 243, 0.54) 100%) !important;
-  }
-}

packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/Components.js

@@ -1,14 +1,143 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  background: red;
-  > div {
-    background: red;
+  .modalHeader {
+    margin: 0 2.9rem;
+    padding: 1.4rem 0 2.8rem 0;
+    border-bottom: 1px solid #f6f6f6;
+    position: relative;
+    > button {
+      margin-right: -2.5rem !important;
+      color: #c3c5c8;
+      opacity: 1;
+      font-size: 1.8rem;
+      font-weight: 100;
+      z-index: 999;
+      &:hover,
+      &:focus {
+        color: #c3c5c8;
+        opacity: 1;
+        outline: 0 !important;
+      }
+      > span {
+        display: none;
+      }
+      &:before {
+        -webkit-font-smoothing: antialiased;
+        content: '\F00d';
+        font-family: 'FontAwesome';
+        font-weight: 400;
+        font-size: 1.2rem;
+        margin-right: 10px;
+      }
+    }
   }
-  .modal {
-    background: red;
-    margin-top: 12.7rem !important;
+
+  .modalBody {
+    padding: 2.2rem 1.4rem 0 1.4rem;
+  }
+
+  .modalFooter {
+    padding: 1.2rem 1rem 2.8rem 1rem;
+    border: none;
+    > button {
+      height: 3rem;
+      position: relative;
+      border-radius: 0.3rem;
+      text-transform: capitalize;
+      margin-right: 1.8rem;
+      cursor: pointer;
+      font-family: Lato;
+      &:focus {
+        outline: 0;
+      }
+      > i {
+        margin-right: 1.3rem;
+      }
+      &:hover {
+        &::after {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+          border-radius: 0.3rem;
+          content: '';
+          opacity: 0.1;
+          background: #ffffff;
+        }
+      }
+      &.primary {
+        width: 15rem;
+        height: 3rem;
+        margin-left: 1.9rem !important;
+        cursor: pointer;
+        font-family: Lato;
+        border: none !important;
+        font-family: Lato !important;
+        line-height: 1.6rem;
+        font-weight: 600;
+        border-radius: 3px;
+        background: linear-gradient(315deg, #0097f6 0%, #005eea 100%);
+        -webkit-font-smoothing: antialiased;
+        color: white !important;
+        &:hover,
+        &:active {
+          border: none !important;
+          background: linear-gradient(315deg, #0097f6 0%, #005eea 100%);
+          color: white;
+        }
+        &:focus {
+          outline: 0;
+        }
+      }
+      &.secondary {
+        position: relative;
+        min-width: 100px;
+        height: 3rem;
+        cursor: pointer;
+        background-color: transparent;
+        border: 0.1rem solid #f64d0a;
+        border-radius: 3px;
+        color: #f64d0a;
+        font-family: Lato;
+        &:hover,
+        &:active {
+          color: #f64d0a;
+          background-color: white;
+          border: 0.1rem solid #f64d0a;
+        }
+      }
+    }
   }
 `;
 
-export { Wrapper };
+const Header = styled.div`
+  position: absolute;
+  top: 0;
+  width: 100%;
+  display: flex;
+  padding: 1.6rem 2.9rem 0 2.9rem;
+  font-size: 1.8rem;
+  font-weight: bold;
+`;
+
+const ProviderContainer = styled.div`
+  > div {
+    &:last-child {
+      > input {
+        &:disabled {
+          background-color: #fafafb !important;
+        }
+      }
+    }
+  }
+`;
+
+const Separator = styled.div`
+  width: 100%;
+  margin: 14px 15px 20px 15px;
+  border-bottom: 2px solid #f6f6f6;
+`;
+
+export { Header, ProviderContainer, Separator, Wrapper };

packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js

@@ -28,9 +28,7 @@ import { InputsIndex as Input } from 'strapi-helper-plugin';
 // Translations
 import en from '../../translations/en.json';
 
-import styles from './styles.scss';
-
-import { Wrapper } from './Components';
+import { Header, ProviderContainer, Separator, Wrapper } from './Components';
 
 class PopUpForm extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
@@ -133,7 +131,7 @@ class PopUpForm extends React.Component {
 
     if (settingType === 'providers') {
       return (
-        <div className={`row ${styles.providerDisabled}`}>
+        <ProviderContainer className="row">
           <Input
             inputDescription={{
               id: 'users-permissions.PopUpForm.Providers.enabled.description',
@@ -148,7 +146,7 @@ class PopUpForm extends React.Component {
             value={get(values, 'enabled', this.state.enabled)}
           />
 
-          {form.length > 1 && <div className={styles.separator} />}
+          {form.length > 1 && <Separator />}
 
           {map(tail(form), (value, key) => (
             <Input
@@ -203,7 +201,7 @@ class PopUpForm extends React.Component {
               validations={{}}
             />
           )}
-        </div>
+        </ProviderContainer>
       );
     }
 
@@ -298,44 +296,36 @@ class PopUpForm extends React.Component {
       header = <FormattedMessage id={`users-permissions.${display}`} />;
     }
 
-    console.log(actionType);
-
     return (
-      <Wrapper>
-        <Modal
-          isOpen={isOpen}
-          toggle={this.context.unsetDataToEdit}
-          className={`${styles.modalPosition}`}
-        >
+      <Modal
+        isOpen={isOpen}
+        toggle={this.context.unsetDataToEdit}
+        style={{ marginTop: '16.2rem' }}
+      >
+        <Wrapper>
           <ModalHeader
             toggle={this.context.unsetDataToEdit}
-            className={styles.modalHeader}
+            className="modalHeader"
           />
-          <div className={styles.headerContainer}>
-            <div>{header}</div>
-          </div>
+          <Header>{header}</Header>
           <form onSubmit={onSubmit}>
-            <ModalBody className={styles.modalBody}>
+            <ModalBody className="modalBody">
               <div className="container-fluid">{this.renderForm()}</div>
             </ModalBody>
-            <ModalFooter className={styles.modalFooter}>
+            <ModalFooter className="modalFooter">
               <Button
                 onClick={() => this.context.unsetDataToEdit()}
-                className={styles.secondary}
+                className="secondary"
               >
                 <FormattedMessage id="users-permissions.PopUpForm.button.cancel" />
               </Button>
-              <Button
-                type="submit"
-                onClick={onSubmit}
-                className={styles.primary}
-              >
+              <Button type="submit" onClick={onSubmit} className="primary">
                 <FormattedMessage id="users-permissions.PopUpForm.button.save" />
               </Button>
             </ModalFooter>
           </form>
-        </Modal>
-      </Wrapper>
+        </Wrapper>
+      </Modal>
     );
   }
 }

packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/styles.scss

@@ -1,185 +0,0 @@
-.headerContainer {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  display: flex;
-  padding: 1.6rem 2.9rem 0 2.9rem;
-  > div {
-    font-size: 1.8rem;
-    font-weight: bold;
-  }
-}
-
-.modalBody {
-  padding: 2.2rem 1.4rem 0 1.4rem;
-}
-
-.modalFooter {
-  padding: 1.1rem 1rem 2.8rem 1rem;
-  border: none;
-  > button {
-    height: 3rem;
-    position: relative;
-    border-radius: 0.3rem;
-    text-transform: capitalize;
-    margin-right: 1.8rem;
-    cursor: pointer;
-    font-family: Lato;
-    &:focus {
-      outline: 0;
-    }
-    > i {
-      margin-right: 1.3rem;
-    }
-    &:hover {
-     &::after {
-       position: absolute;
-       width: 100%;
-       height: 100%;
-       top: 0;
-       left: 0;
-       border-radius: 0.3rem;
-       content: '';
-       opacity: 0.1;
-       background: #FFFFFF;
-     }
-   }
-  }
-}
-
-.modalHeader {
-  margin: 0 2.9rem;
-  padding: 1.4rem 0 2.8rem 0;
-  border-bottom: 1px solid #F6F6F6;
-  position: relative;
-  > button {
-    margin-right: -2.5rem !important;
-    color: #C3C5C8;
-    opacity: 1;
-    font-size: 1.8rem;
-    font-weight: 100;
-    z-index: 999;
-    &:hover, &:focus {
-      color: #C3C5C8;
-      opacity: 1;
-      outline: 0!important;
-    }
-    > span {
-      display: none;
-    }
-    &:before {
-      -webkit-font-smoothing: antialiased;
-      content: '\F00d';
-      font-family: 'FontAwesome';
-      font-weight: 400;
-      font-size: 1.2rem;
-      margin-right: 10px;
-    }
-  }
-}
-
-.modalPosition {
-  > div {
-    border:none;
-    border-radius: 2px;
-    width: 74.5rem;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-.primary {
-  height: 3rem;
-  font-family: Lato!important;
-  margin-left: 1.9rem!important;
-  cursor: pointer;
-  font-family: Lato;
-  &:focus {
-    outline: 0;
-  }
-  border: none!important;
-  width: 15rem;
-  line-height: 1.6rem;
-  font-weight: 600;
-  border-radius: 3px;
-  background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
-  -webkit-font-smoothing: antialiased;
-  color: white!important;
-  &:hover, &:active {
-    border: none!important;
-    background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
-    color: white;
-  }
-}
-
-@keyframes blink {
-  0% {
-    opacity: .2;
-  }
-  20% {
-    opacity: 1;
-  }
-  100% {
-    opacity: .2;
-  }
-}
-
-.saving {
-  margin-top: -1.2rem;
-}
-
-
-.saving span {
-  animation-name: blink;
-  animation-duration: 1.4s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: both;
-  font-size: 5rem;
-}
-
-.saving span:nth-child(2) {
-  animation-delay: .2s;
-}
-
-.saving span:nth-child(3) {
-  animation-delay: .4s;
-}
-
-
-.secondary {
-  min-width: 100px;
-  font-family: Lato;
-  color: #F64D0A;
-  border: 0.1rem solid #F64D0A;
-  cursor: pointer;
-  background-color: transparent;
-  &:hover, &:active {
-    color: #F64D0A;
-    background-color: white;
-    border: 0.1rem solid #F64D0A;
-  }
-  height: 3rem;
-  color: #F64D0A;
-  border: 0.1rem solid #F64D0A;
-  position: relative;
-  border-radius: 3px;
-}
-
-.separator {
-  width: 100%;
-  margin: 14px 15px 20px 15px;
-  border-bottom: 2px solid #F6F6F6;
-}
-
-
-.providerDisabled {
-  > div {
-    &:last-child {
-      > input {
-        &:disabled {
-          background-color: #FAFAFB !important;
-        }
-      }
-    }
-  }
-}

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/Components.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .container-fluid {
+    padding: 18px 30px;
+    > div:first-child {
+      margin-bottom: 11px;
+    }
+  }
+
+  .form-wrapper {
+    padding-top: 18px;
+  }
+
+  .form-container {
+    background: #ffffff;
+    padding: 22px 28px 0px;
+    border-radius: 2px;
+    box-shadow: 0 2px 4px #e3e9f3;
+  }
+
+  form {
+    padding-top: 2rem;
+  }
+`;
+
+const Loader = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 260px;
+  margin: auto;
+`;
+
+const Title = styled.div`
+  font-size: 18px;
+  line-height: 18px;
+  font-weight: bold;
+`;
+
+const Separator = styled.div`
+  margin-top: 15px;
+  border-top: 1px solid #f6f6f6;
+`;
+
+export { Loader, Title, Separator, Wrapper };

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js

@@ -56,7 +56,7 @@ import makeSelectEditPage from './selectors';
 import reducer from './reducer';
 import saga from './saga';
 
-import styles from './styles.scss';
+import { Loader, Title, Separator, Wrapper } from './Components';
 
 export class EditPage extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
@@ -132,7 +132,7 @@ export class EditPage extends React.Component {
   };
 
   renderFirstBlock = () => (
-    <React.Fragment>
+    <>
       <div className="col-md-6">
         <div className="row">
           <Input
@@ -190,9 +190,9 @@ export class EditPage extends React.Component {
         values={get(this.props.editPage, ['modifiedData', 'users'])}
       />
       <div className="col-md-12">
-        <div className={styles.separator} />
+        <Separator />
       </div>
-    </React.Fragment>
+    </>
   );
 
   render() {
@@ -228,9 +228,9 @@ export class EditPage extends React.Component {
     }
 
     return (
-      <div>
+      <Wrapper>
         <BackHeader onClick={() => this.props.history.goBack()} />
-        <div className={cn('container-fluid', styles.containerFluid)}>
+        <div className="container-fluid">
           <PluginHeader
             title={{
               id: pluginHeaderTitle,
@@ -247,30 +247,27 @@ export class EditPage extends React.Component {
             }}
             actions={pluginHeaderActions}
           />
-          <div className={cn('row', styles.container)}>
+          <div className="form-wrapper row">
             <div className="col-md-12">
-              <div className={styles.main_wrapper}>
-                <div className={styles.titleContainer}>
+              <div className="form-container">
+                <Title>
                   <FormattedMessage id="users-permissions.EditPage.form.roles" />
-                </div>
-                <form className={styles.form}>
+                </Title>
+                <form>
                   <div className="row">
                     {this.showLoaderForm() ? (
-                      <div className={styles.loaderWrapper}>
+                      <Loader>
                         <LoadingIndicator />
-                      </div>
+                      </Loader>
                     ) : (
                       this.renderFirstBlock()
                     )}
                   </div>
                   <div className="row" style={{ marginRight: '-30px' }}>
                     {this.showLoaderPermissions() && (
-                      <div
-                        className={styles.loaderWrapper}
-                        style={{ minHeight: '400px' }}
-                      >
+                      <Loader style={{ minHeight: '400px' }}>
                         <LoadingIndicator />
-                      </div>
+                      </Loader>
                     )}
                     {!this.showLoaderPermissions() && (
                       <Plugins
@@ -295,7 +292,7 @@ export class EditPage extends React.Component {
             </div>
           </div>
         </div>
-      </div>
+      </Wrapper>
     );
   }
 }

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/styles.scss

@@ -1,40 +0,0 @@
-.container {
-  padding-top: 18px;
-}
-
-.containerFluid {
-  padding: 18px 30px;
-  > div:first-child {
-    margin-bottom: 11px;
-  }
-}
-
-.form {
-  padding-top: 2rem;
-}
-
-.main_wrapper{
-  background: #ffffff;
-  padding: 22px 28px 0px;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #E3E9F3;
-}
-
-.separator {
-  margin-top: 15px;
-  border-top: 1px solid #F6F6F6;
-}
-
-.titleContainer {
-  font-size: 18px;
-  font-weight: bold;
-  line-height: 18px;
-}
-
-.loaderWrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 260px;
-  margin: auto;
-}