mui select integrated

client/src/components/Contributors/Contributor.tsx

@@ -3,7 +3,7 @@ import { Avatar, Stack, Typography, Link, Paper } from '@mui/material';
 import { contributors } from './contributors';
 
 interface IProps {
-  contributor: typeof contributors[number];
+  contributor: (typeof contributors)[number];
   topContributor?: boolean;
 }
 

client/src/components/DaterPicker/Calendar.tsx

@@ -12,11 +12,14 @@ import { DurationType } from 'types';
 import { getSlotsByDays } from 'utils/helper';
 import { Stack, Typography } from '@mui/material';
 import moment from 'moment-timezone';
-import { StyledReactSelect } from 'components/common';
 import { useQuery } from 'react-query';
 import axios from 'axios';
 import { SERVER_URL } from 'config.keys';
 import Select_TEMP from './Select_temp';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Paper } from '@mui/material';
 
 const Wrapper = styled('div')`
   color: white;
@@ -101,23 +104,58 @@ const Calendar: React.FC<CalendarProps> = ({
     <div style={{ backgroundColor: '#292727' }}>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         <Stack spacing={2}>
-          <StyledReactSelect
-            value={timeZone}
-            placeholder={<div>Change TimeZone</div>}
-            onChange={(e: any) => {
-              if (e.value !== timeZone.value) {
-                setDate(null);
-                setTimeslot([]);
-                setSelectedSlot(undefined);
-              }
+          <FormControl sx={{ m: 1, minWidth: 100 }} size="small">
+            <Paper
+              sx={{
+                display: 'flex',
+                minWidth: '240px',
+                backgroundColor: 'transparent',
+                padding: '6px',
+              }}>
+              <Select
+                labelId="time-select-small"
+                id="time-select-small"
+                value={timeZone.value}
+                onChange={(e: any) => {
+                  if (e.value !== timeZone.value) {
+                    setDate(null);
+                    setTimeslot([]);
+                    setSelectedSlot(undefined);
+                  }
+
+                  setTimeZone(e);
+                }}
+                native={true}
+                sx={{
+                  width: '100%',
+                  border: 'none',
+                  backgroundColor: 'transparent',
+                  padding: '3px 6px',
+                  borderRadius: 1,
+                  color: '#868686',
+                  fontSize: '20px',
+                }}
+                variant={'standard'}
+                IconComponent={(props) => (
+                  <i
+                    style={{
+                      position: 'absolute',
+                      right: 5,
+                      pointerEvents: 'none',
+                    }}>
+                    <ExpandMoreIcon />
+                  </i>
+                )}
+                disableUnderline>
+                {moment.tz.names().map((item, index) => (
+                  <option key={index} value={item.value}>
+                    {item}
+                  </option>
+                ))}
+              </Select>
+            </Paper>
+          </FormControl>
 
-              setTimeZone(e);
-            }}
-            classNamePrefix="select"
-            options={moment.tz
-              .names()
-              .map((name) => ({ value: name, label: name }))}
-          />
           <Typography variant="subtitle1" px={2} mb={1}>
             Your default timezone is{' '}
             <Typography component="span" color="Highlight">

client/src/data/countryCode.ts

@@ -429,7 +429,7 @@ export const countries = [
   { code: 'ZW', label: 'Zimbabwe', phone: '263' },
 ];
 
-export type CountryType = typeof countries[0];
+export type CountryType = (typeof countries)[0];
 
 export const countryCodetoName: Record<string, string> = {
   BD: 'Bangladesh',

client/src/pages/SearchPage/MentorsPage.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Grid, InputBase, Paper, Box } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { styled } from '@mui/material/styles';
-import { ReactSelect as Select } from 'components/common';
+// import { ReactSelect as Select } from 'components/common';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
 import { expertiseOptions } from 'data';
 import UserCard from 'components/UserCard';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -77,6 +82,18 @@ const RenderCards = ({
 
 let timer: any;
 
+// mui select styling
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
 const MentorsPage = () => {
   const [expertise, setExpertise] = useRecoilState(expertiseState);
   // @ts-ignore
@@ -86,6 +103,14 @@ const MentorsPage = () => {
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.up('md'));
 
+  const handleChange = (event: SelectChangeEvent) => {
+    event.preventDefault();
+    const value = expertiseOptions.find(
+      (item) => item.value === event.target.value,
+    );
+    setExpertise(value);
+  };
+
   const { isLoading, data, fetchNextPage, hasNextPage, refetch } =
     useInfiniteQuery<GetMentorsResponse>(
       ['mentors', expertiseValue, topic],
@@ -146,20 +171,64 @@ const MentorsPage = () => {
           </TextAreaWrapper>
         </Grid>
         <Grid item xs={12} sm={4} lg={3} className="search_wrapper">
-          <Paper
-            sx={{ display: 'flex', minWidth: '240px', marginLeft: '16px' }}>
-            <Select
-              menuPlacement="auto"
-              name="Expertise"
-              sx={{ fontSize: '20px', width: '100%' }}
-              options={[...expertiseOptions, { label: 'All', value: 'All' }]}
-              value={expertise}
-              onChange={setExpertise}
-              isSearchable={matches}
-              classNamePrefix="select"
-              placeholder={<span>Filter by Expertise</span>}
-            />
-          </Paper>
+          <FormControl
+            sx={{ m: 1, minWidth: 120, borderRadius: 4 }}
+            size="small">
+            {!expertiseValue && (
+              <InputLabel
+                id="search"
+                sx={{
+                  color: '#868686',
+                  fontSize: '20px',
+                  paddingLeft: 2,
+                  fontWeight: '400',
+                }}>
+                Filter by Expertise
+              </InputLabel>
+            )}
+            <Paper
+              sx={{ display: 'flex', minWidth: '240px', marginLeft: '16px' }}>
+              <Select
+                labelId="search"
+                fullWidth
+                value={expertiseValue ?? null}
+                onChange={handleChange}
+                defaultValue=""
+                sx={{
+                  padding: '5px 6px',
+                  borderRadius: 1,
+                  color: '#868686',
+                  fontSize: '18px',
+                  backgroundColor: 'black !important',
+                  boxShadow:
+                    '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%)',
+                  backgroundImage:
+                    'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
+                }}
+                variant={'standard'}
+                disableUnderline
+                IconComponent={() => (
+                  <i
+                    style={{
+                      position: 'absolute',
+                      top: !expertiseValue ? 10 : 5,
+                      right: 5,
+                      pointerEvents: 'none',
+                    }}>
+                    <ExpandMoreIcon />
+                  </i>
+                )}
+                MenuProps={MenuProps}>
+                {[...expertiseOptions, { label: 'All', value: 'All' }].map(
+                  (item, index) => (
+                    <MenuItem key={index} value={item.value}>
+                      {item.value}
+                    </MenuItem>
+                  ),
+                )}
+              </Select>
+            </Paper>
+          </FormControl>
         </Grid>
       </GridWrapper>
       {content}

client/src/pages/SearchPage/TopicsPage.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
-import { Grid, InputBase, Paper } from '@mui/material';
+import { Grid, InputBase, InputLabel, MenuItem, Paper } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { styled } from '@mui/material/styles';
-import { ReactSelect as Select } from 'components/common';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { motivationOptions, shuffleTopics as topics } from 'data';
 import TopicCard from 'components/TopicCard';
 import InfiniteScroll from 'react-infinite-scroll-component';
@@ -51,6 +53,19 @@ const filterTopics = (topics_: Topic[], motivation: string) => {
   return topics.filter((topic) => topic.motivation === motivation);
 };
 
+// mui menuprops
+// mui select styling
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      // width: 250,
+    },
+  },
+};
+
 const MentorsPage = () => {
   const [motivation, setMotivation] = useRecoilState(motivationState);
   const setTabIndex = useSetRecoilState(tabIndexState);
@@ -64,6 +79,14 @@ const MentorsPage = () => {
   // @ts-ignore
   const motivationValue = motivation ? motivation?.value : 'All';
 
+  const handleChange = (event: SelectChangeEvent) => {
+    event.preventDefault();
+    const value = motivationOptions.find(
+      (item) => item.value === event.target.value,
+    );
+    setMotivation(value);
+  };
+
   const fetchMoreData = () => {
     const n = items.length;
     setTimeout(() => {
@@ -94,20 +117,62 @@ const MentorsPage = () => {
           </TextAreaWrapper>
         </Grid>
         <Grid item xs={12} sm={4} lg={3} className="search_wrapper">
-          <Paper
-            sx={{ display: 'flex', minWidth: '240px', marginLeft: '16px' }}>
-            <Select
-              menuPlacement="auto"
-              name="Motivation"
-              sx={{ fontSize: '20px' }}
-              options={motivationOptions}
-              value={motivation}
-              onChange={setMotivation}
-              isSearchable={matches}
-              classNamePrefix="select"
-              placeholder={<span>Filter by Motivation</span>}
-            />
-          </Paper>
+          <FormControl
+            sx={{ m: 1, minWidth: 120, borderRadius: 4 }}
+            size="small">
+            {!motivationValue && (
+              <InputLabel
+                id="search"
+                sx={{
+                  color: '#868686',
+                  fontSize: '20px',
+                  paddingLeft: 2,
+                  fontWeight: '400',
+                }}>
+                Filter by Motivation
+              </InputLabel>
+            )}
+            <Paper
+              sx={{ display: 'flex', minWidth: '240px', marginLeft: '16px' }}>
+              <Select
+                labelId="search"
+                fullWidth
+                value={motivationValue ?? null}
+                onChange={handleChange}
+                defaultValue=""
+                sx={{
+                  padding: '5px 6px',
+                  borderRadius: 1,
+                  color: '#868686',
+                  fontSize: '18px',
+                  backgroundColor: 'black !important',
+                  boxShadow:
+                    '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%)',
+                  backgroundImage:
+                    'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
+                }}
+                variant={'standard'}
+                disableUnderline
+                IconComponent={() => (
+                  <i
+                    style={{
+                      position: 'absolute',
+                      top: !motivationValue ? 10 : 5,
+                      right: 5,
+                      pointerEvents: 'none',
+                    }}>
+                    <ExpandMoreIcon />
+                  </i>
+                )}
+                MenuProps={MenuProps}>
+                {motivationOptions.map((item, index) => (
+                  <MenuItem key={index} value={item.value}>
+                    {item.value}
+                  </MenuItem>
+                ))}
+              </Select>
+            </Paper>
+          </FormControl>
         </Grid>
       </SearchWrapper>
       <InfiniteScroll