Add required input class

packages/strapi-plugin-settings-manager/admin/src/components/InputNumber/index.js

@@ -140,8 +140,10 @@ class InputNumber extends React.Component { // eslint-disable-line react/prefer-
         placeholder={placeholder}
       />;
 
+    const requiredClass = this.props.validations.required && this.props.addRequiredInputDesign ? this.props.styles.requiredClass : '';
+
     return (
-      <div className={`${this.props.styles.inputNumber} ${bootStrapClass} ${bootStrapClassDanger}`}>
+      <div className={`${this.props.styles.inputNumber} ${requiredClass} ${bootStrapClass} ${bootStrapClassDanger}`}>
         <label htmlFor={this.props.name}><FormattedMessage {...{id: this.props.name}} /></label>
         {input}
         <small>{this.props.inputDescription}</small>
@@ -152,6 +154,7 @@ class InputNumber extends React.Component { // eslint-disable-line react/prefer-
 }
 
 InputNumber.propTypes = {
+  addRequiredInputDesign: React.PropTypes.bool,
   customBootstrapClass: React.PropTypes.string,
   deactivateErrorHighlight: React.PropTypes.bool,
   errors: React.PropTypes.oneOfType([

packages/strapi-plugin-settings-manager/admin/src/components/InputSelect/index.js

@@ -20,9 +20,10 @@ class InputSelect extends React.Component { // eslint-disable-line react/prefer-
 
   render() {
     const bootStrapClass = this.props.customBootstrapClass ? this.props.customBootstrapClass : 'col-md-6';
+    const requiredClass = this.props.validations.required && this.props.addRequiredInputDesign ? styles.requiredClass : '';
     
     return (
-      <div className={`${styles.inputSelect} ${bootStrapClass}`}>
+      <div className={`${styles.inputSelect} ${requiredClass} ${bootStrapClass}`}>
         <label htmlFor={this.props.name}>
           <FormattedMessage {...{id: this.props.name}} />
         </label>
@@ -49,6 +50,7 @@ class InputSelect extends React.Component { // eslint-disable-line react/prefer-
 }
 
 InputSelect.propTypes = {
+  addRequiredInputDesign: React.PropTypes.bool,
   customBootstrapClass: React.PropTypes.string,
   handleChange: React.PropTypes.func.isRequired,
   name: React.PropTypes.string.isRequired,
@@ -57,6 +59,7 @@ InputSelect.propTypes = {
     React.PropTypes.object, // TODO remove
   ]),
   target: React.PropTypes.string,
+  validations: React.PropTypes.object,
   value: React.PropTypes.string,
 };
 

packages/strapi-plugin-settings-manager/admin/src/components/InputSelect/styles.scss

@@ -14,3 +14,13 @@
     border-radius: 0rem!important;
   }
 }
+
+.requiredClass {
+  > label:after {
+    color: red;
+    font-family: Lato;
+    font-weight: bold;
+    margin-left: 5px;
+    content: "*";
+  }
+}

packages/strapi-plugin-settings-manager/admin/src/components/InputText/index.js

@@ -158,8 +158,11 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
         placeholder={placeholder}
       />;
 
+
+    const requiredClass = this.props.validations.required && this.props.addRequiredInputDesign ? this.props.styles.requiredClass : '';
+
     return (
-      <div className={`${this.props.styles.inputText} ${bootStrapClass} ${bootStrapClassDanger}`}>
+      <div className={`${this.props.styles.inputText} ${bootStrapClass} ${requiredClass} ${bootStrapClassDanger}`}>
         {label}
         {input}
         <small>{this.props.inputDescription}</small>
@@ -170,6 +173,7 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
 }
 
 InputText.propTypes = {
+  addRequiredInputDesign: React.PropTypes.bool,
   customBootstrapClass: React.PropTypes.string,
   deactivateErrorHighlight: React.PropTypes.bool,
   errors: React.PropTypes.array,

packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss

@@ -93,12 +93,20 @@
   color: white;
   width: 15rem;
   margin-left: 1.9rem!important;
+  &:hover {
+    color: white;
+  }
 }
 
 .secondary {
   font-family: Lato;
   color: #F64D0A;
   border: 0.1rem solid #F64D0A;
+  &:hover {
+    color: #F64D0A;
+    background-color: white;
+    border: 0.1rem solid #F64D0A;
+  }
 }
 
 .bordered {
@@ -152,6 +160,11 @@
   > input {
     margin-top: 1.3rem!important;
   }
+  > button {
+    &:focus {
+      outline: 0;
+    }
+  }
 }
 
 .padded {

packages/strapi-plugin-settings-manager/admin/src/components/PopUpForm/styles.scss

@@ -11,7 +11,7 @@
   bottom: -5.4rem;
   left: 3rem;
   display: flex;
-
+  color: #27B710;
 }
 
 .rounded {
@@ -22,7 +22,7 @@
   border-radius: 50%;
   padding-left: .1rem;
   padding-bottom: .1rem;
-  border: 1px solid black;
+  border: 1px solid #27B710;
   font-size: .4rem;
   vertical-align: middle;
   display: flex;

packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/index.js

@@ -19,6 +19,7 @@ import styles from './styles.scss';
 
 const WithFormSection = (InnerComponent) => class extends React.Component {
   static propTypes = {
+    addRequiredInputDesign: React.PropTypes.bool,
     cancelAction: React.PropTypes.bool,
     handleChange: React.PropTypes.func.isRequired,
     section: React.PropTypes.oneOfType([
@@ -113,6 +114,7 @@ const WithFormSection = (InnerComponent) => class extends React.Component {
         selectOptions={selectOptions}
         validations={props.validations}
         value={inputValue}
+        addRequiredInputDesign={this.props.addRequiredInputDesign}
       />
     );
   }

packages/strapi-plugin-settings-manager/admin/src/components/WithInput/styles.scss

@@ -52,3 +52,13 @@
 .insideInput:hover {
   color: black!important;
 }
+
+.requiredClass {
+  > label:after {
+    color: red;
+    font-family: Lato;
+    font-weight: bold;
+    margin-left: 5px;
+    content: "*";
+  }
+}

packages/strapi-plugin-settings-manager/admin/src/containers/Home/index.js

@@ -304,6 +304,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
             clearable={false}
 
           />
+          <div className={styles.popUpSpacer} />
         </div>
       )
     })
@@ -332,7 +333,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
     const specificComponent = findKey(this.customComponents, (value) => includes(value, this.props.params.slug)) || 'defaultComponent';
     // if custom view display render specificComponent
     const Component = this.components[specificComponent];
-
+    const addRequiredInputDesign = this.props.params.slug === 'databases';
     const listTitle = this.props.params.slug === 'languages' || 'databases' ? this.renderListTitle() : '';
     const listButtonLabel = this.props.params.slug === 'languages' || 'databases' ? this.renderListButtonLabel() : '';
 
@@ -390,6 +391,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
         renderListComponent={renderListComponent}
         cancelAction={this.props.home.cancelAction}
         actionBeforeOpenPopUp={actionBeforeOpenPopUp}
+        addRequiredInputDesign={addRequiredInputDesign}
       />
     );
   }

packages/strapi-plugin-settings-manager/admin/src/containers/Home/styles.scss

@@ -34,3 +34,7 @@
 .modalLanguageLabel {
   padding-bottom: 10px;
 }
+
+.popUpSpacer {
+  height: 1rem;
+}