styled components migration

2025-07-31 21:09:39 +00:00 · 2019-09-17 15:24:22 +02:00 · 2019-09-17 15:24:22 +02:00 · a6b57689fb
commit a6b57689fb
parent 4f45134dd1
11 changed files with 91 additions and 309 deletions
--- a/packages/strapi-plugin-users-permissions/admin/src/components/BoundRoute/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/BoundRoute/index.js
@ -8,27 +8,29 @@ import React from 'react';
 import { get, includes, map, tail, toLower } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
-import styles from './styles.scss';
+
+import { Header, Path, Verb, Wrapper } from './Components';

 function BoundRoute({ route }) {
  const title = get(route, 'handler');
-  const formattedRoute = get(route, 'path') ? tail(get(route, 'path').split('/')) : [];
+  const formattedRoute = get(route, 'path')
+    ? tail(get(route, 'path').split('/'))
+    : [];
  const [controller = '', action = ''] = title ? title.split('.') : [];

  return (
    <div className="col-md-12">
-      <div className={styles.title}>
+      <Header>
        <FormattedMessage id="users-permissions.BoundRoute.title" />
        &nbsp;
        <span>{controller}</span>
        <span>.{action} </span>
-      </div>
-      <div className={styles.boundRoute}>
-        <div className={cn(styles.verb, styles[toLower(get(route, 'method'))])}>
+      </Header>
+      <Wrapper>
+        <Verb className={toLower(get(route, 'method'))}>
          {get(route, 'method')}
-        </div>
-        <div className={styles.path}>
+        </Verb>
+        <Path>
          {map(formattedRoute, value => (
            <span
              key={value}
@ -37,8 +39,8 @@ function BoundRoute({ route }) {
              /{value}
            </span>
          ))}
-        </div>
-      </div>
+        </Path>
+      </Wrapper>
    </div>
  );
 }
--- a/packages/strapi-plugin-users-permissions/admin/src/components/BoundRoute/styles.scss
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/BoundRoute/styles.scss
@ -1,59 +0,0 @@
-.boundRoute {
-  display: flex;
-  height: 2.4rem;
-  border-radius: 3px;
-  background-color: #E9EAEB;
-  line-height: 2.4rem;
-}
-
-.verb {
-  padding: 0 1rem;
-  border-radius: 3px;
-  color: #FFFFFF;
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.path {
-  padding: 0 1rem;
-  font-size: 13px;
-  font-weight: 600;
-  color: #333740;
-}
-
-.title {
-  margin-bottom: 3rem;
-  padding-top: 1.1rem;
-  color: #333740;
-  font-size: 18px;
-  font-weight: 600;
-
-  > span:not(:first-child) {
-    color: #787E8F;
-    font-size: 16px;
-    font-weight: 500;
-  }
-
-  > span:last-child {
-    color: #1642E1;
-    font-weight: 600;
-  }
-}
-
-.get {
-  background-color: #008DFE;
-}
-
-.post {
-  background-color: #69BA05;
-}
-
-.put {
-  background-color: #F68E0E;
-}
-
-.delete {
-  background-color: #F64D0A;
-}
--- a/packages/strapi-plugin-users-permissions/admin/src/components/Controller/Components.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/Controller/Components.js
@ -5,6 +5,12 @@ const Wrapper = styled.div`
  background: #ffffff;
  opacity: none;
  -webkit-font-smoothing: antialiased;
+  .checkbox-wrapper {
+    font-size: 13px;
+    > div {
+      margin-bottom: 0 !important;
+    }
+  }
 `;

 const Header = styled.div`
@ -18,7 +24,6 @@ const Header = styled.div`
 `;

 const Label = styled.label`
-  position: relative;
  margin-right: 0px;
  margin-left: 10px;
  font-weight: 400 !important;
--- a/packages/strapi-plugin-users-permissions/admin/src/components/Controller/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/Controller/index.js
@ -7,12 +7,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { get, map } from 'lodash';
-import cn from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import pluginId from '../../pluginId';

 import InputCheckbox from '../InputCheckboxPlugin';
-import styles from './styles.scss';

 import { Header, Label, Separator, Wrapper } from './Components';

@ -55,10 +53,10 @@ class Controller extends React.Component {
          <div>{this.props.name}</div>
          <Separator />
          <div>
-            <div className={cn(styles.inputCheckbox)}>
+            <div className="checkbox-wrapper">
              <div className="form-check">
                <Label
-                  className={`${this.areAllActionsSelected() &&
+                  className={`form-check-label ${this.areAllActionsSelected() &&
                    'checked'} ${!this.areAllActionsSelected() &&
                    this.hasSomeActionsSelected() &&
                    'some-checked'}`}
--- a/packages/strapi-plugin-users-permissions/admin/src/components/Controller/styles.scss
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/Controller/styles.scss
@ -1,81 +0,0 @@
-.checked {
-  &:after {
-    content: '\f00c';
-    position: absolute;
-    top: 0px; left: 2px;
-    font-size: 10px;
-    font-family: 'FontAwesome';
-    font-weight: 100;
-    color: #1C5DE7;
-    transition: all .2s;
-
-  }
-}
-.someChecked {
-  &:after {
-    content: '\f068';
-    position: absolute;
-    top: 0px; left: 3px;
-    font-size: 10px;
-    font-family: 'FontAwesome';
-    font-weight: 100;
-    color: #1C5DE7;
-  }
-}
-
-.controller {
-  padding: 1px 43px 0 28px;
-  background: #ffffff;
-  opacity: none;
-  -webkit-font-smoothing: antialiased;
-}
-
-.controllerHeader {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 1.5rem;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 16px;
-  text-transform: capitalize;
-}
-
-.inputCheckbox {
-  font-size: 13px;
-  > div {
-    margin-bottom: 0 !important;
-  }
-}
-
-.label {
-  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;
-  }
-}
-
-.separator {
-  height: 1px;
-  flex-grow: 2;
-  margin-top: 8px;
-  margin-right: 15px;
-  margin-left: 15px;
-  background-color: #F6F6F6;
-}
-
--- a/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/index.js
@ -6,9 +6,8 @@

 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';

-import styles from './styles.scss';
+import { Label, Wrapper } from './Components';

 class InputCheckboxPlugin extends React.Component {
  // eslint-disable-line react/prefer-stateless-function
@ -65,8 +64,8 @@ class InputCheckboxPlugin extends React.Component {

  render() {
    return (
-      <div
-        className={cn(styles.inputCheckbox, 'col-md-4')}
+      <Wrapper
+        className="col-md-4"
        onMouseEnter={() => {
          if (this.props.value) {
            this.setState({ showCog: true });
@ -75,17 +74,12 @@ class InputCheckboxPlugin extends React.Component {
        onMouseLeave={() => this.setState({ showCog: false })}
      >
        <div
-          className={cn(
-            'form-check',
-            this.state.showBackground ? styles.highlighted : ''
-          )}
+          className={`form-check ${
+            this.state.showBackground ? 'highlighted' : ''
+          }`}
        >
-          <label
-            className={cn(
-              'form-check-label',
-              styles.label,
-              this.props.value ? styles.checked : ''
-            )}
+          <Label
+            className={`form-check-label ${this.props.value ? 'checked' : ''}`}
            htmlFor={this.props.name}
          >
            <input
@ -97,14 +91,14 @@ class InputCheckboxPlugin extends React.Component {
              type="checkbox"
            />
            {this.props.label}
-          </label>
+          </Label>
          {this.state.showCog || this.state.showBackground ? (
            <i className="fa fa-cog" onClick={this.handleClick} />
          ) : (
            ''
          )}
        </div>
-      </div>
+      </Wrapper>
    );
  }
 }
--- a/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/styles.scss
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/styles.scss
@ -1,58 +0,0 @@
-.inputCheckbox {
-  margin-bottom: .5rem;
-  padding-left: 0;
-  font-size: 13px;
-
-  > div {
-    height: 26px;
-    padding-left: 15px;
-    line-height: 26px;
-
-    > i {
-      position: absolute;
-      top: 8px;
-      right: 10px;
-      color: #787E8F;
-      cursor: pointer;
-    }
-  }
-}
-
-.label {
-  margin-left: 9px;
-  cursor: pointer;
-  > input {
-    display: none;
-    margin-right: 9px;
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    left:15px; top: 6px;
-    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: 0; left: 17px;
-    font-size: 10px;
-    font-family: 'FontAwesome';
-    font-weight: 100;
-    color: #1C5DE7;
-    transition: all .2s;
-
-  }
-}
-
-.highlighted {
-  border-radius: 3px;
-  background-color: #E9EAEB;
-  font-weight: 600;
-}
--- a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js
@ -15,6 +15,8 @@ import InputSearchLi from '../InputSearchLi';

 import styles from './styles.scss';

+import { Wrapper } from './Components';
+
 class InputSearchContainer extends React.Component {
  // eslint-disable-line react/prefer-stateless-function
  state = {
@ -99,9 +101,9 @@ class InputSearchContainer extends React.Component {

  render() {
    return (
-      <div className={cn(styles.inputSearch, 'col-md-6')}>
+      <Wrapper className="col-md-6">
        <Label htmlFor={this.props.name} message={this.props.label} />
-        <div className={cn('input-group')}>
+        <div className="input-group">
          <span
            className={cn(
              'input-group-addon',
@ -148,7 +150,7 @@ class InputSearchContainer extends React.Component {
            ))}
          </ul>
        </div>
-      </div>
+      </Wrapper>
    );
  }
 }
--- a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/styles.scss
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/styles.scss
@ -1,15 +1,15 @@
 .addon {
  width: 3.2rem;
  height: 3.4rem;
-  margin-top: .9rem;
+  margin-top: 0.9rem;
  background-color: rgba(16, 22, 34, 0.02);
-  border: 1px solid #E3E9F3;
+  border: 1px solid #e3e9f3;
  border-right: 0;
  border-bottom: 0px;
  border-radius: 0.25rem;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
-  color: #B3B5B9;
+  color: #b3b5b9;
  line-height: 3.2rem;
  font-size: 1.3rem;
  font-family: 'Lato';
@ -23,7 +23,7 @@
    display: inline-table;
    margin-top: 0px;
    margin-left: 2px;
-    color: #B3B5B9;
+    color: #b3b5b9;
    font-weight: 900;
    font-size: 14px;
    font-family: 'FontAwesome';
@ -31,40 +31,40 @@
  }
 }

-.inputSearch {
-  min-width: 200px;
-  margin-bottom: 1.5rem;
-  font-size: 1.3rem;
+// .inputSearch {
+//   min-width: 200px;
+//   margin-bottom: 1.5rem;
+//   font-size: 1.3rem;

-  label {
-    margin-bottom: 0;
-    font-weight: 500;
-  }
+//   label {
+//     margin-bottom: 0;
+//     font-weight: 500;
+//   }

-  input {
-    height: 3.4rem;
-    margin-top: .9rem;
-    padding-left: 1rem;
-    background-size: 0 !important;
-    border: 1px solid #E3E9F3;
-    border-left: 0;
-    border-bottom: 0px;
-    border-radius: 0.25rem;
-    border-bottom-right-radius: 0;
-    line-height: 3.4rem;
-    font-size: 1.3rem;
-    font-family: 'Lato' !important;
-    box-shadow: 0px 2px 1px rgba(104, 118, 142, 0.05);
-    &:focus {
-      border-color: #78caff;
-    }
-  }
-}
+//   input {
+//     height: 3.4rem;
+//     margin-top: .9rem;
+//     padding-left: 1rem;
+//     background-size: 0 !important;
+//     border: 1px solid #E3E9F3;
+//     border-left: 0;
+//     border-bottom: 0px;
+//     border-radius: 0.25rem;
+//     border-bottom-right-radius: 0;
+//     line-height: 3.4rem;
+//     font-size: 1.3rem;
+//     font-family: 'Lato' !important;
+//     box-shadow: 0px 2px 1px rgba(104, 118, 142, 0.05);
+//     &:focus {
+//       border-color: #78caff;
+//     }
+//   }
+// }

 .ulContainer {
  height: 16.3rem;
  overflow: scroll;
-  border: 1px solid #E3E9F3;
+  border: 1px solid #e3e9f3;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none;
--- a/packages/strapi-plugin-users-permissions/admin/src/components/Policies/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/Policies/index.js
@ -5,7 +5,6 @@
 */

 import React from 'react';
-import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { get, isEmpty, map, takeRight, toLower, without } from 'lodash';
@ -13,7 +12,7 @@ import { get, isEmpty, map, takeRight, toLower, without } from 'lodash';
 import { InputsIndex as Input } from 'strapi-helper-plugin';
 import BoundRoute from '../BoundRoute';

-import styles from './styles.scss';
+import { Header, Wrapper } from './Components';

 class Policies extends React.Component {
  // eslint-disable-line react/prefer-stateless-function
@ -27,7 +26,7 @@ class Policies extends React.Component {
      this.props.inputSelectName.split('.'),
      'permissions',
      'controllers',
-      'policy',
+      'policy'
    );
    const controllerRoutes = get(
      this.props.routes,
@ -35,22 +34,22 @@ class Policies extends React.Component {
        this.props.inputSelectName.split('.'),
        'permissions',
        'controllers',
-        'policy',
-      )[0],
+        'policy'
+      )[0]
    );
    const routes = isEmpty(controllerRoutes)
      ? []
      : controllerRoutes.filter(
-        o => toLower(o.handler) === toLower(takeRight(path, 2).join('.')),
+          o => toLower(o.handler) === toLower(takeRight(path, 2).join('.'))
        );

    return (
-      <div className={cn('col-md-5', styles.policies)}>
+      <Wrapper className="col-md-5">
        <div className="container-fluid">
-          <div className={cn('row', styles.inputWrapper)}>
-            <div className={cn('col-md-12', styles.header)}>
+          <div className="row">
+            <Header className="col-md-12">
              <FormattedMessage id={`${baseTitle}.${title}`} />
-            </div>
+            </Header>
            {!this.props.shouldDisplayPoliciesHint ? (
              <Input
                customBootstrapClass="col-md-12"
@ -74,7 +73,7 @@ class Policies extends React.Component {
              : ''}
          </div>
        </div>
-      </div>
+      </Wrapper>
    );
  }
 }
--- a/packages/strapi-plugin-users-permissions/admin/src/components/Policies/styles.scss
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/Policies/styles.scss
@ -1,20 +0,0 @@
-.policies {
-  min-height: 100%;
-  background-color: #F6F6F6;
-}
-
-.header {
-  margin-bottom: 1.1rem;
-  padding-top: 2.8rem;
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 3.6rem;
-}
-
-.inputWrapper {
-  > div:nth-child(2) {
-    > label {
-      // font-weight: 800!important;
-    }
-  }
-}