Merge branch 'styled-component/ctb' of github.com:strapi/strapi into styled-component/ctb

packages/strapi-helper-plugin/lib/src/assets/styles/sizes.js

@@ -1,4 +1,8 @@
 const sizes = {
+  tablet: '768px',
+  desktop: '992px',
+  wide: '1280px',
+
   header: {
     height: '6rem',
   },

packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/StyledPluginHeaderActions.js

@@ -11,7 +11,7 @@ const StyledPluginHeaderActions = styled.div`
   justify-content: flex-end;
   width: fit-content;
   max-width: 100%;
-  padding-top: 0.9rem;
+  padding-top: 1rem;
   button {
     margin-right: 0;
     margin-left: 1.8rem;

packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/styles.scss

@@ -1,7 +1,6 @@
 .controlsContainer {
   display: flex;
   box-sizing: border-box;
-  overflow-x: scroll;
   background-color: #f3f4f4;
 
   select {

packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js

@@ -652,8 +652,8 @@ export class ModelPage extends React.Component {
               </div>
             </ListWrapper>
           )}
-          {!this.getSource() && (
-            <div className="trash-btn-wrapper">
+          <div className="trash-btn-wrapper">
+            {!this.getSource() && (
               <TrashButton
                 onClick={e => {
                   e.stopPropagation();
@@ -672,8 +672,8 @@ export class ModelPage extends React.Component {
                 </div>
                 <FormattedMessage id={`${pluginId}.button.delete.label`} />
               </TrashButton>
-            </div>
-          )}
+            )}
+          </div>
         </ViewContainer>
 
         <AttributesModalPicker

packages/strapi-plugin-upload/admin/src/components/List/Wrapper.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   margin-top: 9px;
   padding: 0;
+  padding-bottom: 7px;
 
   > div:first-child {
     margin: 0;
@@ -12,6 +13,7 @@ const Wrapper = styled.div`
     width: 100%;
     padding: 0 !important;
     list-style: none;
+    margin-bottom: 0;
     > li:nth-child(2) {
       height: 57px;
       > div {

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

@@ -61,9 +61,9 @@ function InputCheckboxPlugin({
   return (
     <Wrapper className="col-md-4">
       <div
-        className={`form-check ${isSelected ? 'highlighted' : ''}  ${
-          value ? 'is-checked' : ''
-        }`}
+        className={`form-check ${
+          isSelected && policiesShown ? 'highlighted' : ''
+        }  ${value ? 'is-checked' : ''}`}
       >
         <Label
           className={`form-check-label ${value ? 'checked' : ''}`}

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

@@ -67,7 +67,7 @@ const Addon = styled.div`
 
 const List = styled.div`
   height: 16.3rem;
-  overflow: scroll;
+  overflow-y: auto;
   border: 1px solid #e3e9f3;
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;

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

@@ -8,18 +8,20 @@ const Wrapper = styled.div`
 const Banner = styled.div`
   display: flex;
   justify-content: space-between;
-  padding: 0 28px;
-  padding-right: 43px;
+  padding: 0 43px 0 28px;
   color: #787e8f;
   cursor: pointer;
   > div:first-child {
     display: flex;
     line-height: 5.3rem;
+    width: 100%;
   }
 `;
 
 const Chevron = styled.div`
   margin: auto;
+  margin-left: auto;
+  padding-left: 5px;
   margin-right: 0;
   color: #787e8f;
   font-family: 'FontAwesome';
@@ -48,7 +50,8 @@ const Description = styled.div`
 const Icon = styled.div`
   height: 36px;
   width: 70px;
-  margin: auto;
+  min-width: 70px;
+  margin: auto 0;
   margin-right: 14px;
   color: #333740;
   border: 1px solid rgba(28, 93, 231, 0.1);
@@ -59,8 +62,10 @@ const Icon = styled.div`
 
 const Name = styled.div`
   font-size: 12px;
+  line-height: 18px;
   font-weight: 600;
   text-transform: uppercase;
+  margin: auto 0;
 `;
 
 export { Banner, Chevron, ControllerWrapper, Description, Icon, Name, Wrapper };

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

@@ -89,16 +89,16 @@ class Plugin extends React.Component {
                 />
               )}
             </Description>
+            {emptyApplication && (
+              <Chevron>
+                {this.state.collapse ? (
+                  <i className="fa fa-chevron-up" />
+                ) : (
+                  <i className="fa fa-chevron-down" />
+                )}
+              </Chevron>
+            )}
           </div>
-          {emptyApplication && (
-            <Chevron>
-              {this.state.collapse ? (
-                <i className="fa fa-chevron-up" />
-              ) : (
-                <i className="fa fa-chevron-down" />
-              )}
-            </Chevron>
-          )}
         </Banner>
         <Collapse isOpen={this.state.collapse}>
           <div />

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

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
   padding: 0;
   .plugins-wrapper {
     padding-top: 1.8rem;
+    width: 100%;
   }
 `;
 
@@ -27,7 +28,7 @@ const Header = styled.div`
 `;
 
 const PluginsContainer = styled.div`
-  padding-top: 1.9rem;
+  padding-top: 2rem;
   > div {
     border-bottom: 1px solid white;
     &:last-child {

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

@@ -1,10 +1,19 @@
 import styled from 'styled-components';
 
+import { sizes } from 'strapi-helper-plugin';
+
 const Wrapper = styled.div`
+  * {
+    box-sizing: border-box;
+  }
+
   > .container-fluid {
     padding: 18px 30px;
     > div:first-child {
-      margin-bottom: 11px;
+      margin-bottom: 7px;
+      @media (min-width: ${sizes.desktop}) {
+        margin-bottom: 11px;
+      }
     }
   }
 
@@ -39,7 +48,7 @@ const Title = styled.div`
 `;
 
 const Separator = styled.div`
-  margin-top: 15px;
+  margin-top: 13px;
   border-top: 1px solid #f6f6f6;
 `;