From 309f609be99fdbaf80d6888ee8c00efc280d8522 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 8 Oct 2025 14:52:45 +0200
Subject: [PATCH 1/2] Replace MUI dependencies in TableSearchBar with Oasis UI
 Library

---
 .changelog/2247.internal.md                   |   1 +
 src/app/components/Search/TableSearchBar.tsx  | 147 ++----------------
 .../ProposalDetailsPage/ProposalVotesCard.tsx |   4 -
 src/app/pages/RoflAppsPage/index.tsx          |   1 -
 4 files changed, 14 insertions(+), 139 deletions(-)
 create mode 100644 .changelog/2247.internal.md

diff --git a/.changelog/2247.internal.md b/.changelog/2247.internal.md
new file mode 100644
index 0000000000..6758a130f0
--- /dev/null
+++ b/.changelog/2247.internal.md
@@ -0,0 +1 @@
+Replace MUI dependencies in TableSearchBar with Oasis UI Library
diff --git a/src/app/components/Search/TableSearchBar.tsx b/src/app/components/Search/TableSearchBar.tsx
index 89486a63e5..70f1f1f801 100644
--- a/src/app/components/Search/TableSearchBar.tsx
+++ b/src/app/components/Search/TableSearchBar.tsx
@@ -1,68 +1,28 @@
-import { FC, KeyboardEventHandler, useCallback, useEffect, useState } from 'react'
-import TextField from '@mui/material/TextField'
-import SearchIcon from '@mui/icons-material/Search'
-import HighlightOffIcon from '@mui/icons-material/HighlightOff'
-import InputAdornment from '@mui/material/InputAdornment'
-import { COLORS } from '../../../styles/theme/colors'
-import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
-import { useScreenSize } from '../../hooks/useScreensize'
-import WarningIcon from '@mui/icons-material/WarningAmber'
-import { typingDelay } from '../../../styles/theme'
-import Typography from '@mui/material/Typography'
+import { FC, KeyboardEventHandler, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import MuiButton from '@mui/material/Button'
+import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
 import { CardEmptyState } from '../CardEmptyState'
-import { inputBaseClasses } from '@mui/material/InputBase'
-
-type SearchBarSize = 'small' | 'medium' | 'large'
+import { SearchInput } from '@oasisprotocol/ui-library/src/components/input'
 
 export interface TableSearchBarProps {
+  className?: string
   placeholder: string
   warning?: string
   value: string
-  /**
-   * Should we go 100% width?
-   */
-  fullWidth?: boolean
-
-  /**
-   * Width of the whole component
-   *
-   * Note: fullWidth overrides this.
-   */
-  width?: string | number
-
   onChange: (value: string) => void
   onEnter?: () => void
-  size?: SearchBarSize
   autoFocus?: boolean
 }
 
 export const TableSearchBar: FC<TableSearchBarProps> = ({
+  className,
   value,
   onChange,
   placeholder,
   warning,
-  fullWidth,
   autoFocus,
   onEnter,
-  width = 190,
 }) => {
-  const { isTablet } = useScreenSize()
-
-  const [isWarningFresh, setIsWarningFresh] = useState(false)
-
-  useEffect(() => {
-    if (warning) {
-      const timeout = setTimeout(() => {
-        setIsWarningFresh(false)
-      }, typingDelay)
-      return () => clearTimeout(timeout)
-    } else {
-      setIsWarningFresh(true)
-    }
-  }, [warning])
-
   const handleKeyPress: KeyboardEventHandler<HTMLInputElement> = useCallback(
     event => {
       if (event.key === 'Enter') {
@@ -72,96 +32,15 @@ export const TableSearchBar: FC<TableSearchBarProps> = ({
     [onEnter],
   )
 
-  const startAdornment = (
-    <InputAdornment
-      position="start"
-      disablePointerEvents // Pass clicks through, so it focuses the input
-    >
-      <SearchIcon sx={{ color: COLORS.grayDark, ml: -3 }} />
-    </InputAdornment>
-  )
-
-  const onClearValue = () => onChange('')
-
-  const endAdornment = (
-    <InputAdornment position="end">
-      {value ? (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onClearValue}
-          className="hover:bg-black/[0.04] rounded-full -my-2 -ml-0.5"
-        >
-          <HighlightOffIcon />
-        </Button>
-      ) : (
-        <span style={{ width: '38px' }} />
-      )}
-    </InputAdornment>
-  )
-
-  const helperText = isWarningFresh ? undefined : (
-    <Typography
-      component="span"
-      sx={{
-        display: 'inline-flex',
-        color: COLORS.warningColor,
-        fontSize: 12,
-        lineHeight: 2,
-        alignItems: 'center',
-        verticalAlign: 'middle',
-        mt: 3,
-        mb: 4,
-        width: fullWidth ? '100%' : isTablet ? '160px' : undefined,
-      }}
-    >
-      <WarningIcon sx={{ mr: 3 }} />
-      {warning}
-    </Typography>
-  )
-
   return (
-    <TextField
-      sx={{
-        backgroundColor: COLORS.white,
-        '&:focus-within': {
-          boxShadow: '3px 3px 3px 3px rgb(0, 0, 98, 0.125) !important',
-        },
-        [`.${inputBaseClasses.root}`]: {
-          border: '1px solid',
-          borderColor: COLORS.inactiveStroke,
-        },
-        ...(helperText
-          ? {
-              border: '1px solid',
-              borderColor: COLORS.inactiveStroke,
-              marginBottom: isTablet ? '-99px' : '-50px',
-            }
-          : {}),
-        zIndex: 10,
-        ...(fullWidth ? { width: '100%' } : {}),
-      }}
-      variant={'outlined'}
-      value={value}
-      onChange={e => onChange(e.target.value)}
+    <SearchInput
+      className={className}
+      autoFocus={autoFocus}
+      hint={warning}
+      onChange={onChange}
       onKeyDown={handleKeyPress}
-      InputProps={{
-        inputProps: {
-          sx: {
-            p: 2,
-            width: fullWidth ? '100%' : width,
-            margin: 2,
-            marginLeft: 0,
-            paddingLeft: 0,
-            fontSize: '14px',
-          },
-          autoFocus,
-        },
-        startAdornment,
-        endAdornment,
-      }}
       placeholder={placeholder}
-      helperText={helperText}
+      value={value}
     />
   )
 }
@@ -169,9 +48,9 @@ export const TableSearchBar: FC<TableSearchBarProps> = ({
 export const NoMatchingDataMaybeClearFilters: FC<{ clearFilters: () => void }> = ({ clearFilters }) => {
   const { t } = useTranslation()
   const clearButton = (
-    <MuiButton variant={'text'} onClick={() => clearFilters()}>
+    <Button size="sm" variant="link" onClick={() => clearFilters()}>
       {t('tableSearch.clearFilters')}
-    </MuiButton>
+    </Button>
   )
   return <CardEmptyState label={t('tableSearch.noMatchingResults')} action={clearButton} />
 }
diff --git a/src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx b/src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx
index 10e5ba4f6e..46aabcad0c 100644
--- a/src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx
+++ b/src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx
@@ -17,7 +17,6 @@ import Box from '@mui/material/Box'
 import { NoMatchingDataMaybeClearFilters, TableSearchBar } from '../../components/Search/TableSearchBar'
 import { CardEmptyState } from '../../components/CardEmptyState'
 import { WithHighlightPattern } from '../../components/PatternHighlightingContext'
-import { useScreenSize } from '../../hooks/useScreensize'
 
 type ProposalVotesProps = {
   isLoading: boolean
@@ -120,7 +119,6 @@ export const ProposalVotesView: FC = () => {
 
 export const ProposalVotesCard: FC = () => {
   const { t } = useTranslation()
-  const { isTablet } = useScreenSize()
 
   const { wantedType, setWantedType, wantedNameInput, setWantedNameInput, nameError } = useVoteFiltering()
 
@@ -138,8 +136,6 @@ export const ProposalVotesCard: FC = () => {
             onChange={setWantedNameInput}
             placeholder={t('networkProposal.searchForVoter')}
             warning={nameError}
-            size={'small'}
-            fullWidth={isTablet}
           />
         </div>
       </div>
diff --git a/src/app/pages/RoflAppsPage/index.tsx b/src/app/pages/RoflAppsPage/index.tsx
index b07bc746a1..f60c87a95d 100644
--- a/src/app/pages/RoflAppsPage/index.tsx
+++ b/src/app/pages/RoflAppsPage/index.tsx
@@ -83,7 +83,6 @@ export const RoflAppsPage: FC = () => {
       onChange={setWantedNameInput}
       placeholder={t('rofl.searchByNameOrKeyword')}
       warning={nameError}
-      fullWidth={isMobile}
       autoFocus={!isMobile}
       onEnter={jumpToSingleResult}
     />

From f6536ec0773d2aa2a9b94f58e462768cf82371f9 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Thu, 9 Oct 2025 08:41:11 +0200
Subject: [PATCH 2/2] Update Oasis UI Library dependency

---
 ui-library | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-library b/ui-library
index 8836ee08bb..70985dbc63 160000
--- a/ui-library
+++ b/ui-library
@@ -1 +1 @@
-Subproject commit 8836ee08bb953e191acb8f9efa03737bdc8501fa
+Subproject commit 70985dbc63d4090ee37599820e9a3ac3b9ff63fc