Update list design

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

@@ -97,7 +97,7 @@ class List extends React.Component { // eslint-disable-line react/prefer-statele
             <div className={styles.titleContainer}>
               {this.props.listTitle}
             </div>
-            <div>
+            <div className={styles.buttonContainer}>
               {button}
             </div>
           </div>

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

@@ -1,10 +1,10 @@
 .listContainer { /* stylelint-disable */
-  margin-right: 15px;
+  // margin-right: 15px;
 }
 
 .listSubContainer {
   margin: 0 3.3rem;
-  padding: 1rem 3rem 5.8rem 3rem;
+  padding: 1rem 2.8rem 5.8rem 2.8rem;
   border-radius: 0.2rem;
   background-color: #FFFFFF;
   // background-color: red;
@@ -31,9 +31,11 @@
   padding-top: .5rem;
   > ul {
     list-style: none;
-    padding: 0 2.7rem 0 1rem;
+    padding: 0 1.7rem 0 1rem;
     > li {
-      margin-bottom: 3.3rem;
+
+      padding-top: .3rem;
+      line-height: 1.6rem;
     }
   }
 }
@@ -58,9 +60,10 @@
 
 .label {
   width: 20rem;
-  margin-left: 5.2rem;
+  margin-left: 5rem;
   color: #333740;
   font-weight: 600;
+
 }
 
 .capitalized {
@@ -68,16 +71,18 @@
 }
 
 .centered {
-  width: 25rem;
+  width: 20rem;
   text-align: right;
 }
 
 .italicText {
+  font-family: Lato;
   color: #49515A;
   font-style: italic;
 }
 
 .normal {
+  font-family: Lato;
   color: #1C5DE7;
   padding-top: 0rem;
 }
@@ -184,3 +189,19 @@
 .leftSpaced {
   margin-left: 1rem;
 }
+
+.buttonContainer {
+  > button {
+    margin-right: 0;
+  }
+}
+
+.trashContainer {
+  margin-left: 4rem;
+}
+
+.spacer {
+  height: 1.6rem;
+  margin-bottom: 1.6rem;
+  border-bottom: 1px solid rgba(14,22,34,0.04);
+}

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

@@ -18,14 +18,13 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
     super(props);
     this.state = {
       modal: false,
-      databaseName: '',
       warning: false,
     };
   }
 
-  showDatabaseModal = ({ target }) => {
+  showDatabaseModal = () => {
-    this.setState({ modal: !this.state.modal, databaseName: target.id });
+    this.setState({ modal: !this.state.modal });
-    this.props.getDatabase(target.id);
+    this.props.getDatabase(this.props.data.name);
   }
 
   toggle = () => {
@@ -36,7 +35,7 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
 
   handleSubmit = (e) => {
     e.preventDefault();
-    this.props.handleSubmit(this.state.databaseName);
+    this.props.handleSubmit(this.props.data.name);
     this.setState({ modal: !this.state.modal });
   }
 
@@ -49,17 +48,17 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
     return (
       <li>
         <div className={styles.flexLi}>
-          <div className={styles.flexed}>
+          <div className={styles.flexed} onClick={this.showDatabaseModal} style={{ cursor: 'pointer' }}>
             <div className={styles.squared} style={{ backgroundColor: this.props.data.color }}>
               {this.props.data.letter}
             </div>
             <div className={styles.label}>{this.props.data.name}</div>
           </div>
-          <div>{this.props.data.database}</div>
+          <div onClick={this.showDatabaseModal} style={{ cursor: 'pointer' }}>{this.props.data.database}</div>
-          <div className={styles.centered}>{this.props.data.host}</div>
+          <div className={styles.centered} style={{ width: '15rem', cursor: 'pointer'}} onClick={this.showDatabaseModal}>{this.props.data.host}</div>
-          <div className={styles.flexed}>
+          <div className={styles.flexed} style={{ width: '4rem', justifyContent: 'space-between'}}>
 
-            <div><i className="fa fa-pencil" onClick={this.showDatabaseModal} id={this.props.data.name} /></div>
+            <div><i className="fa fa-pencil" style={{ cursor: 'pointer' }} onClick={this.showDatabaseModal} id={this.props.data.name} /></div>
             <div className={styles.leftSpaced}><i id={this.props.data.name} className="fa fa-trash" onClick={this.toggleWarning} /></div>
           </div>
         </div>
@@ -97,6 +96,7 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
             warningMessage={'popUpWarning.databases.delete.message'}
           />
         </div>
+        <div className={styles.spacer} />
       </li>
     );
   }

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

@@ -60,7 +60,7 @@ class RowLanguage extends React.Component { // eslint-disable-line react/prefer-
           </div>
           <div>{this.props.name}</div>
           <div className={this.props.liStyles.centered}>{languageLabel}</div>
-          <div>{deleteIcon}</div>
+          <div className={this.props.liStyles.trashContainer}>{deleteIcon}</div>
         </div>
         <div>
           <PopUpWarning
@@ -70,6 +70,8 @@ class RowLanguage extends React.Component { // eslint-disable-line react/prefer-
             warningMessage={'popUpWarning.languages.delete.message'}
           />
         </div>
+        <div className={this.props.liStyles.spacer} />
+
       </li>
     );
   }

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

@@ -299,7 +299,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
             valueComponent={this.valueComponent}
             optionComponent={this.optionComponent}
             clearable={false}
-            searchable={false}
+            
           />
         </div>
       )