From b2e08defbb368394b826617cf446d3d2d9245772 Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gustav.hansen@strapi.io>
Date: Mon, 8 May 2023 12:15:44 +0200
Subject: [PATCH] Chore: Remove styled overwrites

---
 .../BrowseStep/PaginationFooter/Pagination.js | 18 ++++++------------
 .../AssetDialog/BrowseStep/index.js           | 19 ++++---------------
 2 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/Pagination.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/Pagination.js
index dbce37140e..352020d403 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/Pagination.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/Pagination.js
@@ -1,24 +1,18 @@
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Flex } from '@strapi/design-system';
+import { Box, Flex } from '@strapi/design-system';
 import { PaginationContext } from './PaginationContext';
 
-const PaginationWrapper = styled.nav``;
-const PaginationList = styled(Flex)`
-  & > * + * {
-    margin-left: ${({ theme }) => theme.spaces[1]};
-  }
-`;
-
 export const Pagination = ({ children, label, activePage, pageCount }) => {
   const paginationValue = useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
 
   return (
     <PaginationContext.Provider value={paginationValue}>
-      <PaginationWrapper aria-label={label}>
-        <PaginationList as="ul">{children}</PaginationList>
-      </PaginationWrapper>
+      <Box as="nav" aria-label={label}>
+        <Flex as="ul" gap={1}>
+          {children}
+        </Flex>
+      </Box>
     </PaginationContext.Provider>
   );
 };
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
index eb0e78abaf..8d0d8f0dbd 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
@@ -40,17 +40,6 @@ import PageSize from './PageSize';
 import SearchAsset from './SearchAsset';
 import { isSelectable } from './utils/isSelectable';
 
-const StartBlockActions = styled(Flex)`
-  & > * + * {
-    margin-left: ${({ theme }) => theme.spaces[2]};
-  }
-  margin-left: ${({ pullRight }) => (pullRight ? 'auto' : undefined)};
-`;
-
-const EndBlockActions = styled(StartBlockActions)`
-  flex-shrink: 0;
-`;
-
 const TypographyMaxWidth = styled(Typography)`
   max-width: 100%;
 `;
@@ -131,7 +120,7 @@ export const BrowseStep = ({
         <Box paddingBottom={4}>
           <Flex justifyContent="space-between" alignItems="flex-start">
             {(assetCount > 0 || folderCount > 0 || isFiltering) && (
-              <StartBlockActions wrap="wrap">
+              <Flex gap={2} wrap="wrap">
                 {multiple && isGridView && (
                   <Flex
                     paddingLeft={2}
@@ -157,11 +146,11 @@ export const BrowseStep = ({
                   appliedFilters={queryObject?.filters?.$and}
                   onChangeFilters={onChangeFilters}
                 />
-              </StartBlockActions>
+              </Flex>
             )}
 
             {(assetCount > 0 || folderCount > 0 || isSearching) && (
-              <EndBlockActions pullRight>
+              <Flex marginLeft="auto" shrink={0}>
                 <ActionContainer paddingTop={1} paddingBottom={1}>
                   <IconButton
                     icon={isGridView ? <List /> : <Grid />}
@@ -180,7 +169,7 @@ export const BrowseStep = ({
                   />
                 </ActionContainer>
                 <SearchAsset onChangeSearch={onChangeSearch} queryValue={queryObject._q || ''} />
-              </EndBlockActions>
+              </Flex>
             )}
           </Flex>
         </Box>