11import React , { useState , useEffect } from "react" ;
2- import { Menu , Dropdown } from "antd" ;
3- import { DownOutlined } from "@ant-design/icons" ;
2+ import { Menu , Dropdown , Button } from "antd" ;
3+ import { DownOutlined , SortAscendingOutlined } from "@ant-design/icons" ;
44import { getDisplaySpecializations } from "utils/api" ;
55
66export function SortByApptDropdown ( props ) {
77 const options = {
88 ASCENDING : {
99 key : 0 ,
10- text : "Greatest to least " ,
10+ text : "Most appointments " ,
1111 } ,
1212 DESCENDING : {
1313 key : 1 ,
14- text : "Least to greatest " ,
14+ text : "Least appointments " ,
1515 } ,
1616 } ;
1717
@@ -28,20 +28,22 @@ export function SortByApptDropdown(props) {
2828
2929 const overlay = (
3030 < Menu >
31- < Menu . Item >
32- < a onClick = { ( ) => handleClick ( options . ASCENDING ) } > Greatest to least </ a >
31+ < Menu . Item onClick = { ( ) => handleClick ( options . ASCENDING ) } >
32+ < span style = { { fontWeight : 500 } } > Most appointments </ span >
3333 </ Menu . Item >
34- < Menu . Item >
35- < a onClick = { ( ) => handleClick ( options . DESCENDING ) } > Least to greatest </ a >
34+ < Menu . Item onClick = { ( ) => handleClick ( options . DESCENDING ) } >
35+ < span style = { { fontWeight : 500 } } > Least appointments </ span >
3636 </ Menu . Item >
3737 </ Menu >
3838 ) ;
3939
4040 return (
4141 < Dropdown overlay = { overlay } className = { props . className } trigger = { [ "click" ] } >
42- < a >
43- { option ? option . text : "Sort Order" } < DownOutlined />
44- </ a >
42+ < Button style = { { display : 'flex' , alignItems : 'center' , gap : 8 } } >
43+ < SortAscendingOutlined />
44+ < span style = { { fontWeight : 500 } } > { option ? option . text : "Sort by" } </ span >
45+ < DownOutlined style = { { fontSize : 12 } } />
46+ </ Button >
4547 </ Dropdown >
4648 ) ;
4749}
@@ -91,34 +93,32 @@ export function MenteeMentorDropdown(props) {
9193
9294 const overlay = (
9395 < Menu >
94- < Menu . Item >
95- < a onClick = { ( ) => handleClick ( options . MENTORS ) } > Mentors</ a >
96+ < Menu . Item onClick = { ( ) => handleClick ( options . MENTORS ) } >
97+ < span style = { { fontWeight : 500 } } > Mentors</ span >
9698 </ Menu . Item >
97- < Menu . Item >
98- < a onClick = { ( ) => handleClick ( options . MENTEES ) } > Mentees</ a >
99+ < Menu . Item onClick = { ( ) => handleClick ( options . MENTEES ) } >
100+ < span style = { { fontWeight : 500 } } > Mentees</ span >
99101 </ Menu . Item >
100- < Menu . Item >
101- < a onClick = { ( ) => handleClick ( options . PARTNERS ) } > Partners</ a >
102+ < Menu . Item onClick = { ( ) => handleClick ( options . PARTNERS ) } >
103+ < span style = { { fontWeight : 500 } } > Partners</ span >
102104 </ Menu . Item >
103- < Menu . Item >
104- < a onClick = { ( ) => handleClick ( options . GUESTS ) } > Guests</ a >
105+ < Menu . Item onClick = { ( ) => handleClick ( options . GUESTS ) } >
106+ < span style = { { fontWeight : 500 } } > Guests</ span >
105107 </ Menu . Item >
106- < Menu . Item >
107- < a onClick = { ( ) => handleClick ( options . SUPPORT ) } > Supporters</ a >
108+ < Menu . Item onClick = { ( ) => handleClick ( options . SUPPORT ) } >
109+ < span style = { { fontWeight : 500 } } > Supporters</ span >
108110 </ Menu . Item >
109- < Menu . Item >
110- < a onClick = { ( ) => handleClick ( options . MODERATOR ) } > Moderators</ a >
111+ < Menu . Item onClick = { ( ) => handleClick ( options . MODERATOR ) } >
112+ < span style = { { fontWeight : 500 } } > Moderators</ span >
111113 </ Menu . Item >
112- { /* <Menu.Item>
113- <a onClick={() => handleClick(options.ALL)}>All</a>
114- </Menu.Item> */ }
115114 </ Menu >
116115 ) ;
117116 return (
118117 < Dropdown overlay = { overlay } className = { props . className } trigger = { [ "click" ] } >
119- < a >
120- { option . text } < DownOutlined />
121- </ a >
118+ < Button style = { { display : 'flex' , alignItems : 'center' , gap : 8 } } >
119+ < span style = { { fontWeight : 500 } } > { option . text } </ span >
120+ < DownOutlined style = { { fontSize : 12 } } />
121+ </ Button >
122122 </ Dropdown >
123123 ) ;
124124}
@@ -226,11 +226,11 @@ export function SortByDateDropdown(props) {
226226}
227227
228228export function HubsDropdown ( props ) {
229- const [ option , setOption ] = useState ( "Filter by " ) ;
229+ const [ option , setOption ] = useState ( "All Hubs " ) ;
230230 const [ selected , setSelected ] = useState ( [ ] ) ;
231231
232232 useEffect ( ( ) => {
233- setOption ( "Filter by " ) ;
233+ setOption ( "All Hubs " ) ;
234234 } , [ props . onReset ] ) ;
235235
236236 const handleClick = ( newOption , text ) => {
@@ -243,16 +243,19 @@ export function HubsDropdown(props) {
243243
244244 const overlay = (
245245 < Menu >
246+ < Menu . Item onClick = { ( ) => handleClick ( null , "All Hubs" ) } >
247+ < span style = { { fontWeight : 500 } } > All Hubs</ span >
248+ </ Menu . Item >
246249 { props . options &&
247250 props . options . map ( ( element , i ) => {
248251 return (
249- < Menu . Item >
250- < a
251- onClick = { ( ) => handleClick ( element . value , element . label ) }
252- style = { { color : selected . includes ( i ) ? "red" : "black" } }
253- >
252+ < Menu . Item
253+ key = { element . value }
254+ onClick = { ( ) => handleClick ( element . value , element . label ) }
255+ >
256+ < span style = { { fontWeight : selected . includes ( i ) ? 600 : 400 } } >
254257 { element . label }
255- </ a >
258+ </ span >
256259 </ Menu . Item >
257260 ) ;
258261 } ) }
@@ -264,11 +267,12 @@ export function HubsDropdown(props) {
264267 overlay = { overlay }
265268 className = { props . className }
266269 trigger = { [ "click" ] }
267- overlayStyle = { { overflowY : "auto" , height : "auto" } }
270+ overlayStyle = { { overflowY : "auto" , maxHeight : 300 } }
268271 >
269- < a >
270- { option } < DownOutlined />
271- </ a >
272+ < Button style = { { display : 'flex' , alignItems : 'center' , gap : 8 , minWidth : 140 } } >
273+ < span style = { { fontWeight : 500 } } > { option } </ span >
274+ < DownOutlined style = { { fontSize : 12 } } />
275+ </ Button >
272276 </ Dropdown >
273277 ) ;
274278}
0 commit comments