Skip to content

Commit f4919f9

Browse files
Naveen-7000Naveen-7000
committed
MUI Select Styling done like previous version
1 parent 25dfe78 commit f4919f9

3 files changed

Lines changed: 136 additions & 51 deletions

File tree

‎client/src/pages/SearchPage/MentorsPage.tsx‎

Lines changed: 44 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { Grid, InputBase, Paper, Box } from '@mui/material';
33
import SearchIcon from '@mui/icons-material/Search';
44
import { styled } from '@mui/material/styles';
55
// import { ReactSelect as Select } from 'components/common';
66
import FormControl from '@mui/material/FormControl';
77
import Select, { SelectChangeEvent } from '@mui/material/Select';
88
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
9+
import MenuItem from '@mui/material/MenuItem';
10+
import InputLabel from '@mui/material/InputLabel';
911
import { expertiseOptions } from 'data';
1012
import UserCard from 'components/UserCard';
1113
import { useRecoilState, useRecoilValue } from 'recoil';
@@ -80,6 +82,18 @@ const RenderCards = ({
8082

8183
let timer: any;
8284

85+
// mui select styling
86+
const ITEM_HEIGHT = 48;
87+
const ITEM_PADDING_TOP = 8;
88+
const MenuProps = {
89+
PaperProps: {
90+
style: {
91+
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
92+
width: 250,
93+
},
94+
},
95+
};
96+
8397
const MentorsPage = () => {
8498
const [expertise, setExpertise] = useRecoilState(expertiseState);
8599
// @ts-ignore
@@ -160,41 +174,56 @@ const MentorsPage = () => {
160174
<FormControl
161175
sx={{ m: 1, minWidth: 120, borderRadius: 4 }}
162176
size="small">
177+
{!expertiseValue && (
178+
<InputLabel
179+
id="search"
180+
sx={{
181+
color: '#868686',
182+
fontSize: '20px',
183+
paddingLeft: 2,
184+
fontWeight: '400',
185+
}}>
186+
Filter by Expertise
187+
</InputLabel>
188+
)}
163189
<Paper
164190
sx={{ display: 'flex', minWidth: '240px', marginLeft: '16px' }}>
165191
<Select
166-
labelId="demo-select-small"
167-
id="demo-select-small"
168-
value={expertiseValue}
169-
label="Age"
192+
labelId="search"
193+
fullWidth
194+
value={expertiseValue ?? null}
170195
onChange={handleChange}
171-
native={true}
196+
defaultValue=""
172197
sx={{
173-
width: '100%',
174-
border: 'none',
175-
backgroundColor: '#0c0c0c',
176-
padding: '3px 6px',
198+
padding: '5px 6px',
177199
borderRadius: 1,
178200
color: '#868686',
179-
fontSize: '20px',
201+
fontSize: '18px',
202+
backgroundColor: 'black !important',
203+
boxShadow:
204+
'0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)',
205+
backgroundImage:
206+
'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
180207
}}
181208
variant={'standard'}
182-
IconComponent={(props) => (
209+
disableUnderline
210+
IconComponent={() => (
183211
<i
184212
style={{
185213
position: 'absolute',
214+
top: !expertiseValue ? 10 : 5,
186215
right: 5,
187216
pointerEvents: 'none',
188217
}}>
189218
<ExpandMoreIcon />
190219
</i>
191220
)}
192-
disableUnderline>
221+
MenuProps={MenuProps}>
193222
{[...expertiseOptions, { label: 'All', value: 'All' }].map(
194223
(item, index) => (
195-
<option key={index} value={item.value}>
224+
<MenuItem key={index} value={item.value}>
196225
{item.value}
197-
</option>
226+
</MenuItem>
198227
),
199228
)}
200229
</Select>

‎client/src/pages/SearchPage/TopicsPage.tsx‎

Lines changed: 44 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { Grid, InputBase, Paper } from '@mui/material';
2+
import { Grid, InputBase, InputLabel, MenuItem, Paper } from '@mui/material';
33
import SearchIcon from '@mui/icons-material/Search';
44
import { styled } from '@mui/material/styles';
55
import FormControl from '@mui/material/FormControl';
@@ -53,6 +53,19 @@ const filterTopics = (topics_: Topic[], motivation: string) => {
5353
return topics.filter((topic) => topic.motivation === motivation);
5454
};
5555

56+
// mui menuprops
57+
// mui select styling
58+
const ITEM_HEIGHT = 48;
59+
const ITEM_PADDING_TOP = 8;
60+
const MenuProps = {
61+
PaperProps: {
62+
style: {
63+
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
64+
// width: 250,
65+
},
66+
},
67+
};
68+
5669
const MentorsPage = () => {
5770
const [motivation, setMotivation] = useRecoilState(motivationState);
5871
const setTabIndex = useSetRecoilState(tabIndexState);
@@ -105,42 +118,57 @@ const MentorsPage = () => {
105118
</Grid>
106119
<Grid item xs={12} sm={4} lg={3} className="search_wrapper">
107120
<FormControl
108-
sx={{ m: 1, minWidth: 200, borderRadius: 4 }}
121+
sx={{ m: 1, minWidth: 120, borderRadius: 4 }}
109122
size="small">
123+
{!motivationValue && (
124+
<InputLabel
125+
id="search"
126+
sx={{
127+
color: '#868686',
128+
fontSize: '20px',
129+
paddingLeft: 2,
130+
fontWeight: '400',
131+
}}>
132+
Filter by Motivation
133+
</InputLabel>
134+
)}
110135
<Paper
111136
sx={{ display: 'flex', minWidth: '240px', marginLeft: '16px' }}>
112137
<Select
113-
labelId="demo-select-small"
114-
id="demo-select-small"
115-
value={motivationValue}
116-
label="Age"
138+
labelId="search"
139+
fullWidth
140+
value={motivationValue ?? null}
117141
onChange={handleChange}
118-
native={true}
142+
defaultValue=""
119143
sx={{
120-
width: '100%',
121-
border: 'none',
122-
backgroundColor: '#0c0c0c',
123-
padding: '3px 6px',
144+
padding: '5px 6px',
124145
borderRadius: 1,
125146
color: '#868686',
126-
fontSize: '20px',
147+
fontSize: '18px',
148+
backgroundColor: 'black !important',
149+
boxShadow:
150+
'0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)',
151+
backgroundImage:
152+
'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
127153
}}
128154
variant={'standard'}
129-
IconComponent={(props) => (
155+
disableUnderline
156+
IconComponent={() => (
130157
<i
131158
style={{
132159
position: 'absolute',
160+
top: !motivationValue ? 10 : 5,
133161
right: 5,
134162
pointerEvents: 'none',
135163
}}>
136164
<ExpandMoreIcon />
137165
</i>
138166
)}
139-
disableUnderline>
167+
MenuProps={MenuProps}>
140168
{motivationOptions.map((item, index) => (
141-
<option key={index} value={item.value}>
169+
<MenuItem key={index} value={item.value}>
142170
{item.value}
143-
</option>
171+
</MenuItem>
144172
))}
145173
</Select>
146174
</Paper>

‎client/src/pages/UserPage/index.tsx‎

Lines changed: 48 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import {
77
Typography,
88
Box,
99
Tooltip,
10+
MenuItem,
11+
InputLabel,
12+
Paper,
1013
} from '@mui/material';
1114
import { Favorite, LinkedIn, Flag } from '@mui/icons-material';
1215
import { lightGreen } from '@mui/material/colors';
@@ -134,6 +137,19 @@ const getTopics = (topicNums: number[]) =>
134137

135138
let likeDebounceTimer: any;
136139

140+
// mui menuprops
141+
// mui select styling
142+
const ITEM_HEIGHT = 48;
143+
const ITEM_PADDING_TOP = 8;
144+
const MenuProps = {
145+
PaperProps: {
146+
style: {
147+
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
148+
// width: 250,
149+
},
150+
},
151+
};
152+
137153
const UserPage = () => {
138154
const queryClient = useQueryClient();
139155
const auth = useRecoilValue(authState);
@@ -367,46 +383,58 @@ const UserPage = () => {
367383

368384
{/* adding select here */}
369385
<Grid item xs={12} md={4} sx={{ paddingTop: '1rem' }}>
370-
<div style={{ margin: '1rem 0rem' }}>
371-
<FormControl
372-
sx={{ m: 1, minWidth: 200, borderRadius: 4 }}
373-
size="small">
386+
<FormControl sx={{ minWidth: 120, borderRadius: 4 }} size="small">
387+
{!motivation && (
388+
<InputLabel
389+
id="search"
390+
sx={{
391+
color: '#868686',
392+
fontSize: '20px',
393+
fontWeight: '400',
394+
}}>
395+
Filter by Motivation
396+
</InputLabel>
397+
)}
398+
<Paper sx={{ display: 'flex', minWidth: '240px' }}>
374399
<Select
375-
labelId="demo-select-small"
376-
id="demo-select-small"
377-
value={motivationValue}
378-
label="Age"
400+
labelId="search"
401+
fullWidth
402+
value={motivation ?? null}
379403
onChange={handleChange}
380-
native={true}
404+
defaultValue=""
381405
sx={{
382-
width: '100%',
383-
border: 'none',
384-
backgroundColor: '#0c0c0c',
385-
padding: '3px 6px',
406+
padding: '5px 6px',
386407
borderRadius: 1,
387408
color: '#868686',
388-
fontSize: '20px',
409+
fontSize: '18px',
410+
backgroundColor: 'black !important',
411+
boxShadow:
412+
'0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)',
413+
backgroundImage:
414+
'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
389415
}}
390416
variant={'standard'}
391-
IconComponent={(props) => (
417+
disableUnderline
418+
IconComponent={() => (
392419
<i
393420
style={{
394421
position: 'absolute',
422+
top: !motivationValue ? 10 : 5,
395423
right: 5,
396424
pointerEvents: 'none',
397425
}}>
398426
<ExpandMoreIcon />
399427
</i>
400428
)}
401-
disableUnderline>
429+
MenuProps={MenuProps}>
402430
{motivationOptions.map((item, index) => (
403-
<option key={index} value={item.value}>
431+
<MenuItem key={index} value={item.value}>
404432
{item.value}
405-
</option>
433+
</MenuItem>
406434
))}
407435
</Select>
408-
</FormControl>
409-
</div>
436+
</Paper>
437+
</FormControl>
410438
</Grid>
411439
<Grid item container width="100%">
412440
<PaginatedBookingCard

0 commit comments

Comments
 (0)