Merge pull request #2255 from oasisprotocol/mz/uil-search

Replace MUI dependencies in Search with Oasis UI Library

Author: buberdds

.changelog/2255.internal.md

@@ -0,0 +1 @@
+Replace MUI dependencies in Search with Oasis UI Library

src/app/components/AppendMobileSearch/index.tsx

@@ -30,8 +30,8 @@ export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> &
       {action}
 
       {isMobile && enableMobileSearch && (
-        <div className="w-[50px] h-[47px] ml-auto">
-          <Search scope={scope} variant="expandable" />
+        <div className="w-[40px] h-[40px] ml-auto">
+          <Search scope={scope} expandable />
         </div>
       )}
     </div>

src/app/components/PageLayout/index.tsx

@@ -20,7 +20,7 @@ export const StyledMain = styled('main')({
 
 export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, mobileFooterAction }) => {
   const theme = useTheme()
-  const { isMobile, isTablet } = useScreenSize()
+  const { isMobile } = useScreenSize()
   const scope = useScopeParam()
   const isApiReachable = useIsApiReachable(scope?.network ?? 'mainnet').reachable
 
@@ -62,7 +62,7 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
                 mb: 6,
               }}
             >
-              <Search scope={scope} variant={isTablet ? 'icon' : 'button'} disabled={!isApiReachable} />
+              <Search scope={scope} disabled={!isApiReachable} />
             </Box>
           )}
           <StyledMain>{children}</StyledMain>

src/app/components/Search/SearchSuggestionsButtons.tsx

@@ -41,31 +41,47 @@ export const SearchSuggestionsButtons: FC<Props> = ({ scope, onClickSuggestion }
   const defaultComponents = {
     OptionalBreak: <OptionalBreak />,
     BlockIcon: <WidgetsIcon sx={{ fontSize: '18px' }} />,
-    BlockLink: <SuggestionButton onClick={() => onClickSuggestion(suggestedBlock)} />,
+    BlockLink: (
+      <SuggestionButton
+        onClick={() => onClickSuggestion(suggestedBlock)}
+        onMouseDown={e => e.preventDefault()}
+      />
+    ),
     TransactionIcon: <RepeatIcon sx={{ fontSize: '18px' }} />,
-    TransactionLink: <SuggestionButton onClick={() => onClickSuggestion(suggestedTransaction)} />,
+    TransactionLink: (
+      <SuggestionButton
+        onClick={() => onClickSuggestion(suggestedTransaction)}
+        onMouseDown={e => e.preventDefault()}
+      />
+    ),
     AccountIcon: <AccountBalanceWalletIcon sx={{ fontSize: '18px' }} />,
-    AccountLink: <SuggestionButton onClick={() => onClickSuggestion(suggestedAccount)} />,
+    AccountLink: (
+      <SuggestionButton
+        onClick={() => onClickSuggestion(suggestedAccount)}
+        onMouseDown={e => e.preventDefault()}
+      />
+    ),
   }
   const runtimeComponents = {
     ...defaultComponents,
     TokenIcon: <TokenIcon sx={{ fontSize: '18px' }} />,
-    TokenLink: <SuggestionButton onClick={() => onClickSuggestion(suggestedTokenFragment)} />,
+    TokenLink: (
+      <SuggestionButton
+        onClick={() => onClickSuggestion(suggestedTokenFragment)}
+        onMouseDown={e => e.preventDefault()}
+      />
+    ),
   }
 
   return (
-    <span>
-      <span className="text-gray-800 text-xs">
-        <Trans
-          t={t}
-          i18nKey={
-            scope?.layer === 'consensus'
-              ? 'search.searchSuggestionsForConsensus'
-              : 'search.searchSuggestionsForRuntime'
-          }
-          components={scope?.layer === 'consensus' ? defaultComponents : runtimeComponents}
-        />
-      </span>
-    </span>
+    <Trans
+      t={t}
+      i18nKey={
+        scope?.layer === 'consensus'
+          ? 'search.searchSuggestionsForConsensus'
+          : 'search.searchSuggestionsForRuntime'
+      }
+      components={scope?.layer === 'consensus' ? defaultComponents : runtimeComponents}
+    />
   )
 }

src/app/components/Search/TableSearchBar.tsx

@@ -36,7 +36,7 @@ export const TableSearchBar: FC<TableSearchBarProps> = ({
     <SearchInput
       className={className}
       autoFocus={autoFocus}
-      hint={warning}
+      warning={warning}
       onChange={onChange}
       onKeyDown={handleKeyPress}
       placeholder={placeholder}