added padding to views with FilterButton for Guard component

Author: andrewlee348

packages/wallet-widget/src/components/Filter/FilterButton.tsx

@@ -22,12 +22,12 @@ export const FilterButton = ({ label, type }: { label: string; type: 'tokens' |
 
   return (
     <div
-      className={cn(cardVariants({ clickable: true }), 'flex items-center justify-center p-2 relative overflow-visible')}
+      className={cn(cardVariants({ clickable: true }), 'flex items-center justify-center relative overflow-visible')}
       style={{ height: '52px', width: '52px' }}
       onClick={() => setIsOpen(true)}
     >
       <FilterIcon size="sm" color="white" />
-      <div className="absolute" style={{ top: '-4px', right: '-4px' }}>
+      <div className="absolute" style={{ top: '-5px', right: '-10px' }}>
         {howManyModifiedFilters > 0 && (
           <div className="flex items-center justify-center w-6 h-6 rounded-full" style={{ backgroundColor: '#0076CC' }}>
             <Text variant="small" color="white">

packages/wallet-widget/src/components/IconWrappers/MediaIconWrapper.tsx

@@ -81,13 +81,13 @@ export const MediaIconWrapper = ({
                 </div>
               ) : (
                 <div
-                  className={`flex items-center justify-center ${shapeClass} border overflow-hidden bg-background-primary`}
+                  className={`flex items-center justify-center ${shapeClass} border overflow-hidden`}
                   style={{
                     width: `calc(${widthClassMap[size]} + 2px)`,
                     height: `calc(${widthClassMap[size]} + 2px)`
                   }}
                 >
-                  <img src={icon} alt="icon" style={{ backgroundColor: 'lightgray' }} />
+                  <img src={icon} alt="icon" />
                 </div>
               )}
             </>

packages/wallet-widget/src/views/History.tsx

@@ -128,7 +128,7 @@ export const History = () => {
   }, [search, fuse])
 
   return (
-    <div className="flex flex-col gap-3 px-4 pb-4">
+    <div className="flex flex-col gap-3 p-4 pt-2">
       <div className="flex flex-row justify-between items-center w-full gap-2">
         <div className="grow">
           <TextInput

packages/wallet-widget/src/views/Search/SearchCollectibles.tsx

@@ -38,7 +38,7 @@ export const SearchCollectibles = () => {
   }
 
   return (
-    <div className="px-4 pb-4 w-full">
+    <div className="p-4 pt-2 w-full">
       <CollectiblesList
         tokenBalancesData={tokenBalancesData}
         isPendingTokenBalances={isPendingTokenBalances}

packages/wallet-widget/src/views/Search/SearchTokens.tsx

@@ -34,7 +34,7 @@ export const SearchTokens = () => {
   }
 
   return (
-    <div className="px-4 pb-4 w-full">
+    <div className="p-4 pt-2 w-full">
       <TokenList
         tokenBalancesData={tokenBalancesData}
         isPendingTokenBalances={isPendingTokenBalances}