Merge pull request #273 from strapi/fix/popup-design

Center popupwarning and remove confirm button border

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

@@ -9,16 +9,14 @@ import { Link } from 'react-router-dom';
 
 import styles from './styles.scss';
 
-class LeftMenuHeader extends React.Component { // eslint-disable-line react/prefer-stateless-function
+function LeftMenuHeader() {
-  render() {
+  return (
-    return (
+    <div className={styles.leftMenuHeader}>
-      <div className={styles.leftMenuHeader}>
+      <Link to="/" className={styles.leftMenuHeaderLink}>
-        <Link to="/" className={styles.leftMenuHeaderLink}>
+        <span className={styles.projectName}></span>
-          <span className={styles.projectName}></span>
+      </Link>
-        </Link>
+    </div>
-      </div>
+  );
-    );
-  }
 }
 
 export default LeftMenuHeader;

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

@@ -7,18 +7,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { map } from 'lodash';
+import { get, map, size } from 'lodash';
 
 import LeftMenuLink from 'components/LeftMenuLink';
 
 import styles from './styles.scss';
 import messages from './messages.json';
 
-class LeftMenuLinkContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function
+function LeftMenuLinkContainer({ plugins }) {
-  render() {
+  // Generate the list of sections
-    // Generate the list of sections
+  const linkSections = map(plugins.toJS(), plugin => (
-    const linkSections = map(this.props.plugins.toJS(), plugin => (
+    plugin.leftMenuSections.map((leftMenuSection, j) => {
-      plugin.leftMenuSections.map((leftMenuSection, j) => (
+
+      if (size(get(leftMenuSection, 'links')) === 0) {
+        return <div />
+      }
+
+      return (
         <div key={j}>
           <p className={styles.title}>{leftMenuSection.name}</p>
           <ul className={styles.list}>
@@ -27,57 +32,57 @@ class LeftMenuLinkContainer extends React.Component { // eslint-disable-line rea
             )}
           </ul>
         </div>
-      ))
-    ));
-
-    // Check if the plugins list is empty or not
-    const pluginsLinks = this.props.plugins.size
-      ? this.props.plugins.valueSeq().map((plugin) => (
-        <LeftMenuLink
-          key={plugin.get('id')}
-          icon={plugin.get('icon') || 'plug'}
-          label={plugin.get('name')}
-          destination={`/plugins/${plugin.get('id')}`}
-        />
-      ))
-      : (
-        <li className={styles.noPluginsInstalled}>
-          <FormattedMessage {...messages.noPluginsInstalled} />.
-        </li>
       );
+    })
+  ));
 
-    return (
+  // Check if the plugins list is empty or not
-      <div className={styles.leftMenuLinkContainer}>
+  const pluginsLinks = plugins.size
-        {linkSections}
+    ? plugins.valueSeq().map((plugin) => (
-        <div>
+      <LeftMenuLink
-          <p className={styles.title}><FormattedMessage {...messages.plugins} /></p>
+        key={plugin.get('id')}
-          <ul className={styles.list}>
+        icon={plugin.get('icon') || 'plug'}
-            {pluginsLinks}
+        label={plugin.get('name')}
-          </ul>
+        destination={`/plugins/${plugin.get('id')}`}
-        </div>
+      />
-        <div>
+    ))
-          <p className={styles.title}><FormattedMessage {...messages.general} /></p>
+    : (
-          <ul className={styles.list}>
+      <li className={styles.noPluginsInstalled}>
-            <LeftMenuLink
+        <FormattedMessage {...messages.noPluginsInstalled} />.
-              icon="cubes"
+      </li>
-              label={messages.listPlugins.id}
-              destination="/list-plugins"
-            />
-            <LeftMenuLink
-              icon="download"
-              label={messages.installNewPlugin.id}
-              destination="/install-plugin"
-            />
-            <LeftMenuLink
-              icon="gear"
-              label={messages.configuration.id}
-              destination="/configuration"
-            />
-          </ul>
-        </div>
-      </div>
     );
-  }
+
+  return (
+    <div className={styles.leftMenuLinkContainer}>
+      {linkSections}
+      <div>
+        <p className={styles.title}><FormattedMessage {...messages.plugins} /></p>
+        <ul className={styles.list}>
+          {pluginsLinks}
+        </ul>
+      </div>
+      <div>
+        <p className={styles.title}><FormattedMessage {...messages.general} /></p>
+        <ul className={styles.list}>
+          <LeftMenuLink
+            icon="cubes"
+            label={messages.listPlugins.id}
+            destination="/list-plugins"
+          />
+          <LeftMenuLink
+            icon="download"
+            label={messages.installNewPlugin.id}
+            destination="/install-plugin"
+          />
+          <LeftMenuLink
+            icon="gear"
+            label={messages.configuration.id}
+            destination="/configuration"
+          />
+        </ul>
+      </div>
+    </div>
+  );
 }
 
 LeftMenuLinkContainer.propTypes = {

packages/strapi-helper-plugin/lib/src/components/PopUpWarning/styles.scss

@@ -17,6 +17,7 @@
 }
 .modalPosition {
   top: 16.8rem;
+  left: 18.2rem;
   margin-top: 0 !important;
 
   > div {
@@ -52,7 +53,6 @@
     position: relative;
     border-radius: 0.3rem;
     text-transform: capitalize;
-    // margin-right: 1.8rem;
     cursor: pointer;
     font-family: Lato;
     &:focus {
@@ -81,6 +81,7 @@
   background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
   -webkit-font-smoothing: antialiased;
   color: white !important;
+  border: none;
   &:active {
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.15);
  }

packages/strapi-plugin-content-type-builder/admin/src/components/PopUpWarning/styles.scss

@@ -41,7 +41,7 @@
 }
 
 .modalPosition {
-  // top: 16.8rem;
+  left: 18.2rem;
   > div {
     border:none;
     border-radius: 2px;
@@ -80,7 +80,6 @@
     position: relative;
     border-radius: 0.3rem;
     text-transform: capitalize;
-    // margin-right: 1.8rem;
     cursor: pointer;
     font-family: Lato;
     &:focus {
@@ -110,6 +109,7 @@
   background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
   -webkit-font-smoothing: antialiased;
   color: white !important;
+  border: none;
   &:active {
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.15);
  }