diff --git a/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_danger.svg b/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_danger.svg new file mode 100644 index 0000000000..298f3b53d3 --- /dev/null +++ b/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_danger.svg @@ -0,0 +1,19 @@ + + + + Danger + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_flag_not_found.svg b/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_flag_not_found.svg new file mode 100644 index 0000000000..ff4aae7d6f --- /dev/null +++ b/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_flag_not_found.svg @@ -0,0 +1,27 @@ + + + + Icon Flag Not Found + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_info.svg b/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_info.svg new file mode 100644 index 0000000000..ad7351feda --- /dev/null +++ b/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_info.svg @@ -0,0 +1,19 @@ + + + + Info + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_warning.svg b/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_warning.svg new file mode 100644 index 0000000000..9984c70ce1 --- /dev/null +++ b/packages/strapi-plugin-settings-manager/admin/src/assets/icons/icon_warning.svg @@ -0,0 +1,21 @@ + + + + Warning + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/List/index.js b/packages/strapi-plugin-settings-manager/admin/src/components/List/index.js index 750874c8e5..bcbd517e55 100644 --- a/packages/strapi-plugin-settings-manager/admin/src/components/List/index.js +++ b/packages/strapi-plugin-settings-manager/admin/src/components/List/index.js @@ -74,7 +74,7 @@ class List extends React.Component { // eslint-disable-line react/prefer-statele - +
+
{/*
*/} diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss b/packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss index 3f9bacb4d1..6652c282f4 100644 --- a/packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss +++ b/packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss @@ -12,7 +12,7 @@ } .paddedTopList { - margin-top: 2.7rem!important; + margin-top: 2.8rem!important; } .flex { @@ -32,7 +32,7 @@ } .ulContainer { - padding-top: 1.5rem; + padding-top: 1rem; margin: 0 3.3rem; background-color: #FFFFFF; // background-color: red; @@ -40,10 +40,15 @@ > ul { list-style: none; padding: 0; + // .borderBottom { + // &:last-child{ + // border-bottom: none; + // } > li { - line-height: 5rem; - height: 5rem; - border-bottom: 1px solid rgba(14,22,34,0.04); + line-height: 5.2rem; + height: 5.2rem; + + border-bottom: 1px solid transparent; &:last-of-type { border: none; } @@ -51,17 +56,32 @@ background-color: rgba(14,22,34,0.03); } } - >li:not(:first-child) { - margin-top: .4rem; + >li:first-child { + padding-top: .3rem; + padding-bottom: 5.1rem; + height: 5.2rem; + line-height: 5.2rem; + } + + > li:last-child .borderBottom { + border-top: none; } } } +.liSpacer { + height: .2rem!important; +} + +.borderBottom { + border-top: 1px solid rgba(14,22,34,0.04); +} + .flexLi { display: flex; justify-content: space-between; margin: 0 4.1rem 0 2.8rem; - + position: relative; align-items: center; } @@ -95,7 +115,14 @@ text-align: right; > button { padding-right: 0; - margin-top: .1rem; + padding-top: .2rem; + // margin-top: .1rem; + &:first-child { + // margin-top: .1rem; + } + > div { + padding-top: .2rem; + } } } @@ -103,12 +130,15 @@ font-family: Lato; color: #49515A; font-style: italic; + height: 100%; + height: 5.2rem; + line-height: 5.2rem; } .normal { font-family: Lato; color: #1C5DE7; - padding-top: 0rem; + // padding-top: 0rem; } .primary { @@ -284,3 +314,8 @@ .flagContainer { margin-left: 1rem; } + +.bottomSpacer { + height: 1.2rem; + background-color: #FFFFFF; +} diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/index.js b/packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/index.js index 23c528a038..049ce0122b 100644 --- a/packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/index.js +++ b/packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/index.js @@ -8,10 +8,48 @@ import React from 'react'; // modal import { Button, Modal, ModalHeader, ModalBody } from 'reactstrap'; import { FormattedMessage } from 'react-intl'; +import Danger from '../../assets/icons/icon_danger.svg'; import styles from './styles.scss'; class PopUpWarning extends React.Component { // eslint-disable-line react/prefer-stateless-function + renderModalBodyDanger = () => ( + +
+ icon + + {(message) => ( +

{message}

+ )} + +
+
+ +
+ + ) + + renderModalBody = () => ( + + +
+ + {(message) => ( + + )} + + + {(message) => ( + + )} + +
+ + ) + render() { + const modalBody = this.props.showDanger ? this.renderModalBodyDanger() : this.renderModalBody(); return (
@@ -21,21 +59,7 @@ class PopUpWarning extends React.Component { // eslint-disable-line react/prefer
- - -
- - {(message) => ( - - )} - - - {(message) => ( - - )} - -
- + {modalBody}
@@ -44,8 +68,11 @@ class PopUpWarning extends React.Component { // eslint-disable-line react/prefer } PopUpWarning.propTypes = { + dangerMessage: React.PropTypes.string, handleConfirm: React.PropTypes.func, + handleConfirmDanger: React.PropTypes.func, isOpen: React.PropTypes.bool.isRequired, + showDanger: React.PropTypes.bool, toggleModal: React.PropTypes.func.isRequired, warningMessage: React.PropTypes.string, } diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/styles.scss b/packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/styles.scss index 359f4661e4..58b60da537 100644 --- a/packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/styles.scss +++ b/packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/styles.scss @@ -19,6 +19,7 @@ } .bordered { + margin-top: -.4rem; margin-left: 3rem; margin-right: 3rem; border: 1px solid #F6F6F6; @@ -40,9 +41,16 @@ .primary { font-family: Lato; - background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%); color: white; width: 15rem; + border: none; + background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%); + &:active { + background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%); + background-color: none!important; + color: white!important; + + } } @@ -59,7 +67,6 @@ display: flex; margin-top: 3.5rem; justify-content: space-between; - } .modalBody { @@ -72,3 +79,42 @@ top: 18.7rem; width: 37.5rem; } + +.modalDangerBodyContainer { + padding-top: .1rem; + > img { + width: 2.5rem; + margin-bottom: 1.5rem; + } + > p { + line-height: 1.8rem; + } + + color: #F64D0A; + text-align: center; + font-family: Lato; + font-size: 1.3rem; +} + +.buttonDangerContainer { + width: 100%; + padding: 0 .5rem; + display: flex; + margin-top: 3.1rem; + justify-content: space-around; + > button { + width: 31.5rem; + height: 3rem; + font-size: 1.3rem; + -webkit-font-smoothing: antialiased; + &:hover { + color: white; + } + + } +} + +.modalPosition { + top: 20.3rem; + width: 37.5rm; +} diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/RowDatabase/index.js b/packages/strapi-plugin-settings-manager/admin/src/components/RowDatabase/index.js index 65676157fc..5a404c90b5 100644 --- a/packages/strapi-plugin-settings-manager/admin/src/components/RowDatabase/index.js +++ b/packages/strapi-plugin-settings-manager/admin/src/components/RowDatabase/index.js @@ -53,7 +53,7 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer- render() { return (
  • -
    +
    @@ -69,6 +69,7 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
    +
    @@ -102,7 +103,10 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer- isOpen={this.state.warning} toggleModal={this.toggleWarning} handleConfirm={this.deleteDatabase} + handleConfirmDanger={this.toggleWarning} warningMessage={'popUpWarning.databases.delete.message'} + dangerMessage={'popUpWarning.databases.danger.message'} + showDanger={this.props.data.isUsed} />
    • diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/RowLanguage/index.js b/packages/strapi-plugin-settings-manager/admin/src/components/RowLanguage/index.js index 063b928fe1..7d327d6a65 100644 --- a/packages/strapi-plugin-settings-manager/admin/src/components/RowLanguage/index.js +++ b/packages/strapi-plugin-settings-manager/admin/src/components/RowLanguage/index.js @@ -39,9 +39,14 @@ class RowLanguage extends React.Component { // eslint-disable-line react/prefer- const languageDisplay = isObject(languageObject) ? : ''; const languageLabel = this.props.active ? - - - : + + {(message) => ( + +
    + {message} +
    + )} +     : // set the span's id with the language name to retrieve it {(message) => ( @@ -50,9 +55,11 @@ class RowLanguage extends React.Component { // eslint-disable-line react/prefer- )} ; - + const spacer = this.props.active ?
    : ''; + const borderPosition = this.props.active ? '-.3rem' : '-.6rem'; return (
  • + {spacer}
    @@ -61,7 +68,10 @@ class RowLanguage extends React.Component { // eslint-disable-line react/prefer-
    {this.props.name}
    {languageLabel}
    {deleteIcon}
    +
    +
    +