diff --git a/frontend/src/components/Dropdown.module.css b/frontend/src/components/Dropdown.module.css index f88d5fa..0bbd0e6 100644 --- a/frontend/src/components/Dropdown.module.css +++ b/frontend/src/components/Dropdown.module.css @@ -1,53 +1,26 @@ -.dropDown { - cursor: pointer; - background-color: white; - font-size: 16px; - color: var(--color-ccidc-placeholder); - height: 40px; - width: 460px; - border-radius: 4px; - border: 1px solid #d8d8d8; +.select { + padding: 0.5rem 1rem; + width: 100%; background-image: url("../assets/dropDownIcon.svg"); background-repeat: no-repeat, repeat; background-position: right 0.7em top 50%, 0 0; -} - -.dpContent { - position: relative; - top: 25%; - width: 100%; - background: white; - gap: 1em; - border: 1px solid #d8d8d8; - font-size: 16px; -} - -.dpItem { - padding: 10px; - border: 0.5px solid #d8d8d8; - color: black; - cursor: pointer; -} - -.selectOne { - margin-left: 15px; - margin-top: 10px; -} + font: var(--font-body); + border-color: #d8d8d8; + border-radius: 0.25rem; -.selectedOption { - color: black; - margin-left: 15px; - margin-top: 10px; + /* hide arrow for Firefox */ + -moz-appearance: none; + /* hide arrow for Chrome */ + -webkit-appearance: none; } -.dpItem:hover { - background-color: #ebebeb; +/* hide arrow for IE10 */ +.select::-ms-expand { + display: none; } -@media (max-width: 1250px) { - .dropDown { - width: 330px; - } +.select.unselected { + color: #b4b4b4; } diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx index acfd1d1..9f37abf 100644 --- a/frontend/src/components/Dropdown.tsx +++ b/frontend/src/components/Dropdown.tsx @@ -2,55 +2,49 @@ import { useState } from "react"; import styles from "./Dropdown.module.css"; -export function Dropdown(props: { +type DropdownProps = { options: string[]; - onSelect: (value: string) => void; + onSelect?: (value: string) => void; required?: boolean; -}) { - const [selected, setSelected] = useState("Select One"); - const [isActive, setIsActive] = useState(false); +}; - const handleOptionClick = (option: string) => { +export function Dropdown(props: DropdownProps) { + const { options, onSelect, required } = props; + + // default value must be "" for required prop to work, https://stackoverflow.com/a/6048891 + const defaultSelected = ""; + + const [selected, setSelected] = useState(defaultSelected); + + function onSelectChange(event: React.FormEvent) { + const element = event.target as HTMLSelectElement; + const option = element.value; setSelected(option); - setIsActive(false); - props.onSelect(option); - }; + if (onSelect) onSelect(option); + } return ( -