Merge pull request #1994 from oasisprotocol/csillag/adjust-votes

Votes page: adjust filter positions on layout

Author: csillag

.changelog/1994.trivial.md

@@ -0,0 +1 @@
+Votes page: adjust filter positions

src/app/components/CardHeaderWithResponsiveActions/index.tsx

@@ -2,6 +2,16 @@ import CardHeader, { cardHeaderClasses } from '@mui/material/CardHeader'
 import { styled } from '@mui/material/styles'
 
 export const CardHeaderWithResponsiveActions = styled(CardHeader)(({ theme }) => ({
+  [`.${cardHeaderClasses.content}`]: {
+    flex: 0,
+    textWrap: 'nowrap',
+  },
+  [`.${cardHeaderClasses.action}`]: {
+    marginLeft: theme.spacing(4),
+    flex: 1,
+    alignSelf: 'auto',
+    textAlign: 'end',
+  },
   [theme.breakpoints.down('md')]: {
     display: 'inline',
     alignItems: 'flex-start',

src/app/components/Proposals/VoteTypeFilter.tsx

@@ -6,6 +6,7 @@ import { FilterButtons } from '../FilterButtons'
 type VoteTypeFilterProps = {
   onSelect: (voteType: VoteType) => void
   value?: VoteType
+  fullWidth?: boolean
 }
 
 export const VoteTypeFilter: FC<VoteTypeFilterProps> = props => {

src/app/components/Search/TableSearchBar.tsx

@@ -18,10 +18,29 @@ export interface TableSearchBarProps {
   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
 }
 
-export const TableSearchBar: FC<TableSearchBarProps> = ({ value, onChange, placeholder, warning }) => {
+export const TableSearchBar: FC<TableSearchBarProps> = ({
+  value,
+  onChange,
+  placeholder,
+  warning,
+  fullWidth,
+  width = 250,
+}) => {
   const { isTablet } = useScreenSize()
 
   const [isWarningFresh, setIsWarningFresh] = useState(false)
@@ -72,7 +91,7 @@ export const TableSearchBar: FC<TableSearchBarProps> = ({ value, onChange, place
         verticalAlign: 'middle',
         mt: 3,
         mb: 4,
-        width: isTablet ? '160px' : undefined,
+        width: fullWidth ? '100%' : isTablet ? '160px' : undefined,
       }}
     >
       <WarningIcon sx={{ mr: 3 }} />
@@ -84,10 +103,8 @@ export const TableSearchBar: FC<TableSearchBarProps> = ({ value, onChange, place
     <TextField
       sx={{
         backgroundColor: COLORS.white,
-        marginLeft: 4,
-        marginRight: helperText ? '25px' : '25px',
         '&:focus-within': {
-          boxShadow: '3px 3px 3px 3px rgb(0, 0, 98, 0.25) !important',
+          boxShadow: '3px 3px 3px 3px rgb(0, 0, 98, 0.125) !important',
         },
         [`.${inputBaseClasses.root}`]: {
           border: '1px solid',
@@ -101,6 +118,7 @@ export const TableSearchBar: FC<TableSearchBarProps> = ({ value, onChange, place
             }
           : {}),
         zIndex: 10,
+        ...(fullWidth ? { width: '100%' } : {}),
       }}
       variant={'outlined'}
       value={value}
@@ -109,7 +127,7 @@ export const TableSearchBar: FC<TableSearchBarProps> = ({ value, onChange, place
         inputProps: {
           sx: {
             p: 0,
-            width: isTablet ? 110 : 300,
+            width: fullWidth ? '100%' : width,
             margin: 2,
           },
         },

src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx

@@ -16,6 +16,7 @@ import { ErrorBoundary } from '../../components/ErrorBoundary'
 import Box from '@mui/material/Box'
 import { NoMatchingDataMaybeClearFilters, TableSearchBar } from '../../components/Search/TableSearchBar'
 import { CardEmptyState } from '../../components/CardEmptyState'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 type ProposalVotesProps = {
   isLoading: boolean
@@ -115,22 +116,32 @@ export const ProposalVotesView: FC = () => {
 
 export const ProposalVotesCard: FC = () => {
   const { t } = useTranslation()
+  const { isMobile, isTablet } = useScreenSize()
 
   const { wantedType, setWantedType, wantedNameInput, setWantedNameInput, nameError } = useVoteFiltering()
 
   return (
     <SubPageCard>
       <CardHeaderWithResponsiveActions
         action={
-          <>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexWrap: isTablet ? 'wrap' : 'nowrap',
+              gap: 4,
+              paddingRight: isMobile ? 4 : 0,
+            }}
+          >
+            <VoteTypeFilter onSelect={setWantedType} value={wantedType} />
             <TableSearchBar
               value={wantedNameInput}
               onChange={setWantedNameInput}
               placeholder={t('networkProposal.searchForVoter')}
               warning={nameError}
+              fullWidth={isTablet}
             />
-            <VoteTypeFilter onSelect={setWantedType} value={wantedType} />
-          </>
+          </Box>
         }
         disableTypography
         component="h2"