Fix some ui bugs

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/index.js

@@ -29,8 +29,12 @@ const StyledAddIcon = styled(PlusCircle)`
 
 const StyledButton = styled(BaseButton)`
   border-radius: 26px;
+  border-color: ${({ theme }) => theme.colors.neutral150};
   background: ${({ theme }) => theme.colors.neutral0};
-  padding: ${({ theme }) => theme.spaces[3]};
+  padding-top: ${({ theme }) => theme.spaces[3]};
+  padding-right: ${({ theme }) => theme.spaces[4]};
+  padding-bottom: ${({ theme }) => theme.spaces[3]};
+  padding-left: ${({ theme }) => theme.spaces[4]};
 
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/tests/__snapshots__/index.test.js.snap

@@ -135,8 +135,12 @@ exports[`<AddComponentButton /> displays the name of the dz when the label is em
 
 .c2 {
   border-radius: 26px;
+  border-color: #eaeaef;
   background: #ffffff;
-  padding: 12px;
+  padding-top: 12px;
+  padding-right: 16px;
+  padding-bottom: 12px;
+  padding-left: 16px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
@@ -390,8 +394,12 @@ exports[`<AddComponentButton /> renders and matches the snapshot 1`] = `
 
 .c2 {
   border-radius: 26px;
+  border-color: #eaeaef;
   background: #ffffff;
-  padding: 12px;
+  padding-top: 12px;
+  padding-right: 16px;
+  padding-bottom: 12px;
+  padding-left: 16px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
@@ -645,8 +653,12 @@ exports[`<AddComponentButton /> renders and matches the snapshot when the isOpen
 
 .c2 {
   border-radius: 26px;
+  border-color: #eaeaef;
   background: #ffffff;
-  padding: 12px;
+  padding-top: 12px;
+  padding-right: 16px;
+  padding-bottom: 12px;
+  padding-left: 16px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 

packages/core/admin/admin/src/content-manager/pages/EditView/index.js

@@ -244,6 +244,7 @@ const EditView = ({
                         paddingLeft={4}
                         paddingRight={4}
                         paddingTop={6}
+                        shadow="tableShadow"
                       >
                         <Informations />
                         <InjectionZone area="contentManager.editView.informations" />
@@ -259,6 +260,7 @@ const EditView = ({
                           paddingLeft={4}
                           paddingRight={4}
                           paddingTop={6}
+                          shadow="tableShadow"
                         >
                           <TableLabel textColor="neutral600">
                             {formatMessage(

packages/core/admin/admin/src/content-manager/pages/ListView/index.js

@@ -292,6 +292,10 @@ function ListView({
                     { id: 'app.component.search.label', defaultMessage: 'Search for {target}' },
                     { target: headerLayoutTitle }
                   )}
+                  placeholder={formatMessage({
+                    id: 'app.component.search.placeholder',
+                    defaultMessage: 'Search...',
+                  })}
                   trackedEvent="didSearch"
                 />
               )}

packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js

@@ -4,10 +4,11 @@ import { useIntl } from 'react-intl';
 import SearchIcon from '@strapi/icons/Search';
 import { Searchbar, SearchForm } from '@strapi/design-system/Searchbar';
 import { IconButton } from '@strapi/design-system/IconButton';
+import { Icon } from '@strapi/design-system/Icon';
 import useQueryParams from '../../hooks/useQueryParams';
 import useTracking from '../../hooks/useTracking';
 
-const SearchURLQuery = ({ label, trackedEvent }) => {
+const SearchURLQuery = ({ label, placeholder, trackedEvent }) => {
   const wrapperRef = useRef(null);
   const iconButtonRef = useRef(null);
 
@@ -57,6 +58,7 @@ const SearchURLQuery = ({ label, trackedEvent }) => {
             clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
             onClear={handleClear}
             size="S"
+            placeholder={placeholder}
           >
             {label}
           </Searchbar>
@@ -66,16 +68,23 @@ const SearchURLQuery = ({ label, trackedEvent }) => {
   }
 
   return (
-    <IconButton ref={iconButtonRef} icon={<SearchIcon />} label="Search" onClick={handleToggle} />
+    <IconButton
+      ref={iconButtonRef}
+      icon={<Icon as={SearchIcon} color="neutral800" />}
+      label="Search"
+      onClick={handleToggle}
+    />
   );
 };
 
 SearchURLQuery.defaultProps = {
+  placeholder: undefined,
   trackedEvent: null,
 };
 
 SearchURLQuery.propTypes = {
   label: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
   trackedEvent: PropTypes.string,
 };
 

packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js

@@ -33,7 +33,7 @@ describe('<SearchURLQuery />', () => {
     const { container } = render(makeApp(history));
 
     expect(container).toMatchInlineSnapshot(`
-      .c2 {
+      .c4 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -143,6 +143,14 @@ describe('<SearchURLQuery />', () => {
         fill: #666687;
       }
 
+      .c2 {
+        color: #32324d;
+      }
+
+      .c3 path {
+        fill: #32324d;
+      }
+
       <div>
         <span>
           <button
@@ -153,6 +161,7 @@ describe('<SearchURLQuery />', () => {
             type="button"
           >
             <svg
+              class="c2 c3"
               fill="none"
               height="1em"
               viewBox="0 0 24 24"
@@ -169,7 +178,7 @@ describe('<SearchURLQuery />', () => {
           </button>
         </span>
         <div
-          class="c2"
+          class="c4"
         >
           <p
             aria-live="polite"