Enhance design filters

packages/strapi-plugin-content-manager/admin/src/components/AddFilterCTA/index.js

@@ -15,7 +15,7 @@ import Logo from '../../assets/images/icon_filter.png';
 const imgStyle = {
   marginTop: '-3px',
   marginRight: '10px',
-  height: '9px',
+  height: '7px',
 };
 
 function AddFilterCTA({ onClick, showHideText }) {

packages/strapi-plugin-content-manager/admin/src/components/CustomButton/index.js

@@ -8,7 +8,7 @@ const CustomButton = styled.button`
   background-color: #FFFFFF;
   border: 1px solid #E3E9F3;
   border-radius: 2px;
-  line-height: 30px;
+  line-height: 28px;
   font-size: 13px;
   font-weight: 500;
   font-family: Lato;
@@ -17,6 +17,10 @@ const CustomButton = styled.button`
   &:hover {
     background: #F7F8F8;
   }
+
+  img{
+    font-size: 12px;
+  }
 `;
 
 export default CustomButton;

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

@@ -1,27 +1,37 @@
 .flexWrapper {
-  height: 30px;
   display: inline-block;
+  height: 30px;
   margin-bottom: 6px;
   margin-right: 10px;
   padding: 0 10px;
   background: rgba(0,126,255,0.08);
   border: 1px solid rgba(0,126,255,0.24);
   border-radius: 2px;
-  line-height: 30px;
+  line-height: 28px;
   color: #007EFF;
   font-size: 13px;
+
+  > span{
+    display: inline-block;
+    margin-top: -1px;
+  }
+
   > span:nth-child(2) {
     font-weight: 700;
   }
+
   > span:nth-child(3) {
     cursor: pointer;
   }
+
   -webkit-font-smoothing: antialiased;
 }
 
 .remove {
-  height: 30px;
+  height: 28px;
   cursor: pointer;
+  vertical-align: bottom;
+
   &:after {
     content: '\f00d';
     font-family: FontAwesome;

packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Div.js

@@ -2,8 +2,14 @@ import styled from 'styled-components';
 
 const Div = styled.div`
   display: flex;
+  min-height: 36px;
   border-left: ${props => props.borderLeft ? '3px solid #007EFF' : '0px' };
   padding-left: ${props => props.borderLeft ? '10px' : '13px' };
+  margin-bottom: 0px !important;
+
+  input, select{
+    margin: 0px 5px !important;
+  }
 `;
 
 export default Div;

packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js

@@ -69,7 +69,7 @@ function FilterOptions({ filter, filterToFocus, index, onChange, onClickAdd, onC
       {showAddButton && (
         <Add
           onClick={onClickAdd}
-          style={attrType === 'boolean' ? { marginLeft: '10px' } : {}}
+          style={{ marginLeft: '6px' }}
           type="button"
         />
       )}

packages/strapi-plugin-content-manager/admin/src/components/FilterOptionsCTA/index.js

@@ -5,7 +5,7 @@ const FilterOptionsCTA = styled.button`
   justify-content: center;
   height: 20px;
   width: 20px;
-  margin: 17px 10px 0px 0px;
+  margin: 8px 5px 0px 0px;
   border-radius: 50%;
   border: 1px solid #E3E9F3;
   cursor: pointer;

packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/Flex.js

@@ -3,13 +3,16 @@ import styled from 'styled-components';
 const Flex = styled.div`
   display: flex;
   justify-content: flex-end;
-  padding: 0 30px 9px 30px !important;
+  padding: 0 0 9px 30px !important;
   color: #C3C5C8;
   font-size: 13px;
 
   > span {
+    vertical-align: text-top;
     cursor: pointer;
+
     &:after {
+      margin-left: 2px;
       content: '\f077';
       font-family: FontAwesome;
       font-size: 10px;

packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/wrapperStyles.scss

@@ -1,7 +1,7 @@
 .wrapperStyle {
   margin-top: -13px;
   > div:not(:first-child) {
-    padding-top: 2px;
+    padding-top: 10px;
   }
   > div:last-child {
     margin-bottom: 2px;

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/styles.scss

@@ -8,6 +8,7 @@
 
 .row{
   padding-bottom: 36px;
+  padding-left: 5px;
 }
 
 .noPadding {

packages/strapi-plugin-content-manager/admin/src/translations/en.json

@@ -15,8 +15,8 @@
   "components.LimitSelect.itemsPerPage": "Items per page",
   "containers.List.errorFetchRecords": "Error",
 
-  "components.AddFilterCTA.add": "Add filter",
+  "components.AddFilterCTA.add": "Filters",
-  "components.AddFilterCTA.hide": "Hide filters",
+  "components.AddFilterCTA.hide": "Filters",
   "components.FilterOptions.button.apply": "Apply",
   "components.FiltersPickWrapper.PluginHeader.actions.apply": "Apply",
   "components.FiltersPickWrapper.PluginHeader.actions.clearAll": "Clear all",

packages/strapi-plugin-content-manager/admin/src/translations/fr.json

@@ -16,8 +16,8 @@
   "components.LimitSelect.itemsPerPage": "Éléments par page",
   "containers.List.errorFetchRecords": "Erreur",
 
-  "components.AddFilterCTA.add": "Ajouter un filtre",
+  "components.AddFilterCTA.add": "Filtres",
-  "components.AddFilterCTA.hide": "Cacher les filtres",
+  "components.AddFilterCTA.hide": "Filtres",
   "components.FilterOptions.button.apply": "Appliquer",
   "components.FiltersPickWrapper.PluginHeader.actions.apply": "Appliquer",
   "components.FiltersPickWrapper.PluginHeader.actions.clearAll": "Tout supprimer",