feat(v3-uplift): restyle no-search-results state & search input affordances

- NoSearchResults: two-text layout — H5 fg-max title (keyword appended in plain
  JS so it renders without waiting on i18n compilation) + fg-3 Paragraph
  description, 0.5rem gap, centered
- consumers: trim the asset "no results" copy to a single sentence; add a
  proposals description to the governance list
- SearchInput: swap the border for an outset shadow (figSurfaceShadow), and wrap
  the field in a <label> so clicking the search icon / padding focuses the input

Author: abjt14

src/components/NoSearchResults.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { ReactNode } from 'react';
 
 type NoSearchResultsProps = {
@@ -8,40 +8,35 @@ type NoSearchResultsProps = {
 };
 
 export const NoSearchResults: React.FC<NoSearchResultsProps> = ({ searchTerm, subtitle }) => {
-  const { breakpoints } = useTheme();
-  const sm = useMediaQuery(breakpoints.down('sm'));
-
   return (
     <Box
       sx={{
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-        gap: 1,
+        gap: '0.5rem',
+        width: '100%',
         pt: 15,
         pb: 32,
         px: 4,
       }}
     >
-      {sm ? (
-        <Box sx={{ textAlign: 'center', maxWidth: '300px' }}>
-          <Typography variant="h2">{t`No search results${searchTerm && ' for'}`}</Typography>
-          {searchTerm && (
-            <Typography sx={{ overflowWrap: 'anywhere' }} variant="h2">
-              &apos;{searchTerm}&apos;
-            </Typography>
-          )}
-        </Box>
-      ) : (
+      {/* Title: H5, fg-max, centered; a long keyword ellipsizes rather than wrapping. */}
+      <Typography variant="h5" color="fg-max" noWrap sx={{ textAlign: 'center', maxWidth: '100%' }}>
+        {searchTerm ? t`No search results for` + ` '${searchTerm}'` : t`No search results`}
+      </Typography>
+      {/* Description: fg-3 "Paragraph" (0.875rem / 400 / 1.1875rem), supplied per search context. */}
+      {subtitle && (
         <Typography
-          sx={{ textAlign: 'center', maxWidth: '480px', overflowWrap: 'anywhere' }}
-          variant="h2"
+          variant="description"
+          color="fg-3"
+          sx={{
+            textAlign: 'center',
+            maxWidth: '280px',
+            lineHeight: '1.1875rem',
+            letterSpacing: 'normal',
+          }}
         >
-          {t`No search results${searchTerm && ` for \'${searchTerm}\'`}`}
-        </Typography>
-      )}
-      {subtitle && (
-        <Typography sx={{ width: '280px', textAlign: 'center' }} variant="description" color="fg-2">
           {subtitle}
         </Typography>
       )}

src/components/SearchInput.tsx

@@ -3,7 +3,7 @@ import { Box, BoxProps, IconButton, InputBase, useMediaQuery, useTheme } from '@
 import debounce from 'lodash/debounce';
 import { useMemo, useRef, useState } from 'react';
 import { SearchIcon } from 'src/components/icons/SearchIcon';
-import { figVars } from 'src/utils/figmaColors';
+import { figSurfaceShadow, figVars } from 'src/utils/figmaColors';
 
 interface SearchInputProps {
   onSearchTermChange: (value: string) => void;
@@ -37,14 +37,18 @@ export const SearchInput = ({
   }, [onSearchTermChange]);
   return (
     <Box
+      component="label"
       sx={{
         display: 'flex',
         alignItems: 'center',
         gap: 2,
-        border: `1px solid ${figVars['border-2']}`,
+        boxShadow: figSurfaceShadow(),
         borderRadius: '0.5rem',
         height: '36px',
-        // Focus ring: a 3px fg-3 outline held 2px off the border (replaces the prior no-op focus).
+        // Wrapping <label> so clicking anywhere in the field (the search icon, the padding) focuses
+        // the input, not just the input box itself.
+        cursor: 'text',
+        // Focus ring: a 3px fg-3 outline held 2px out (replaces the prior no-op focus).
         '&:focus-within': {
           outline: `3px solid ${figVars['fg-3']}`,
           outlineOffset: '2px',

src/locales/el/messages.js

@@ -968,6 +968,12 @@ msgstr "Protocol Incentives"
 msgid "Watch wallet"
 msgstr "Watch wallet"
 
+#: src/modules/markets/MarketAssetsListContainer.tsx
+#: src/modules/umbrella/StakeAssets/UmbrellaAssetsListContainer.tsx
+#: src/modules/umbrella/UmbrellaAssetsDefault.tsx
+msgid "We couldn't find any assets related to your search."
+msgstr "We couldn't find any assets related to your search."
+
 #: src/modules/migration/MigrationBottomPanel.tsx
 msgid "This action will reduce health factor of V3 below liquidation threshold. Increase migrated collateral or reduce migrated borrow to continue."
 msgstr "This action will reduce health factor of V3 below liquidation threshold. Increase migrated collateral or reduce migrated borrow to continue."
@@ -2516,12 +2522,6 @@ msgstr "Before supplying"
 msgid "Liquidation value"
 msgstr "Liquidation value"
 
-#: src/modules/markets/MarketAssetsListContainer.tsx
-#: src/modules/umbrella/StakeAssets/UmbrellaAssetsListContainer.tsx
-#: src/modules/umbrella/UmbrellaAssetsDefault.tsx
-msgid "We couldn't find any assets related to your search. Try again with a different asset name, symbol, or address."
-msgstr "We couldn't find any assets related to your search. Try again with a different asset name, symbol, or address."
-
 #: src/modules/history/actions/ActionDetails.tsx
 msgid "enabled"
 msgstr "enabled"
@@ -2774,6 +2774,10 @@ msgstr "Ltv validation failed"
 msgid "Maximum amount available to supply is <0/> {0} (<1/>)."
 msgstr "Maximum amount available to supply is <0/> {0} (<1/>)."
 
+#: src/components/NoSearchResults.tsx
+msgid "No search results for"
+msgstr "No search results for"
+
 #: src/components/transactions/Repay/RepayModalContent.tsx
 msgid "You don’t have enough funds in your wallet to repay the full amount. If you proceed to repay with your current amount of funds, you will still have a small borrowing position in your dashboard."
 msgstr "You don’t have enough funds in your wallet to repay the full amount. If you proceed to repay with your current amount of funds, you will still have a small borrowing position in your dashboard."
@@ -3964,6 +3968,10 @@ msgstr "Remove"
 msgid "Auto Slippage"
 msgstr "Auto Slippage"
 
+#: src/components/NoSearchResults.tsx
+msgid "No search results"
+msgstr "No search results"
+
 #: src/components/incentives/MeritIncentivesTooltipContent.tsx
 msgid "Supply {0} and double your yield by <0><1>verifying your humanity through Self</1></0> for {1} per user."
 msgstr "Supply {0} and double your yield by <0><1>verifying your humanity through Self</1></0> for {1} per user."
@@ -4026,11 +4034,6 @@ msgstr "Transaction failed"
 msgid "Invalid flashloan premium"
 msgstr "Invalid flashloan premium"
 
-#: src/components/NoSearchResults.tsx
-#: src/components/NoSearchResults.tsx
-msgid "No search results{0}"
-msgstr "No search results{0}"
-
 #: src/modules/bridge/BridgeWrapper.tsx
 msgid "Status"
 msgstr "Status"
@@ -4150,6 +4153,10 @@ msgstr "Language"
 msgid "Allows you to decide whether to use a supplied asset as collateral. An asset used as collateral will affect your borrowing power and health factor."
 msgstr "Allows you to decide whether to use a supplied asset as collateral. An asset used as collateral will affect your borrowing power and health factor."
 
+#: src/modules/governance/ProposalsV3List.tsx
+msgid "We couldn't find any proposals related to your search."
+msgstr "We couldn't find any proposals related to your search."
+
 #: src/modules/governance/proposal/ProposalTimeline.tsx
 #: src/modules/history/actions/ActionDetails.tsx
 #: src/modules/history/actions/ActionDetails.tsx

src/locales/en/messages.js

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/macro';
 import { Box, Paper, Skeleton, Stack, Typography } from '@mui/material';
 import { useState } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
@@ -202,7 +203,10 @@ export const ProposalsV3List = () => {
       ) : ((!loadingSearchResults && searchTerm) ||
           (!loadingProposals && proposalFilter !== 'all')) &&
         listItems.length === 0 ? (
-        <NoSearchResults searchTerm={searchTerm} />
+        <NoSearchResults
+          searchTerm={searchTerm}
+          subtitle={<Trans>We couldn&apos;t find any proposals related to your search.</Trans>}
+        />
       ) : (
         Array.from({ length: 4 }).map((_, i) => <ProposalListSkeleton key={i} />)
       )}

src/locales/en/messages.po

@@ -221,12 +221,7 @@ export const MarketAssetsListContainer = () => {
       {!loading && filteredData.length === 0 && !displayGhoBanner && (
         <NoSearchResults
           searchTerm={searchTerm}
-          subtitle={
-            <Trans>
-              We couldn&apos;t find any assets related to your search. Try again with a different
-              asset name, symbol, or address.
-            </Trans>
-          }
+          subtitle={<Trans>We couldn&apos;t find any assets related to your search.</Trans>}
         />
       )}
 

src/locales/es/messages.js

@@ -83,12 +83,7 @@ export const UmbrellaAssetsListContainer = () => {
           filteredData?.length === 0 && (
             <NoSearchResults
               searchTerm={searchTerm}
-              subtitle={
-                <Trans>
-                  We couldn&apos;t find any assets related to your search. Try again with a
-                  different asset name, symbol, or address.
-                </Trans>
-              }
+              subtitle={<Trans>We couldn&apos;t find any assets related to your search.</Trans>}
             />
           )
         )}