diff --git a/frontend/README.md b/frontend/README.md index f49bb305a..08e83ea68 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -8,7 +8,7 @@ houses 3 projects, namely `Penn Course Alert`, `Penn Course Plan` and that are used in both PCA and PCP. ## Setting Up Development Environment -Make sure you have `node` (with a version that is <= 16.9.0) and `yarn` installed. +Make sure you have `node` (with a version that is ^18) and `yarn` installed. We use [Yarn Workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) to handle development dependency installation/resolution. In `frontend/package.json`, we have defined the directories of each project diff --git a/frontend/alert/.babelrc b/frontend/alert/.babelrc deleted file mode 100644 index a87394660..000000000 --- a/frontend/alert/.babelrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [ - [ - "babel-plugin-styled-components", - { - "ssr": true, - "displayName": true - } - ] - ] -} diff --git a/frontend/alert/components/AutoComplete.tsx b/frontend/alert/components/AutoComplete.tsx index 8a2966a68..666a668f5 100644 --- a/frontend/alert/components/AutoComplete.tsx +++ b/frontend/alert/components/AutoComplete.tsx @@ -39,15 +39,15 @@ const DOWN_ARROW = 40; const RETURN_KEY = 13; const DELETE_KEY = 8; -const DropdownContainer = styled.div<{ below: RefObject }>` +const DropdownContainer = styled.div<{ $below: RefObject, $hidden: boolean }>` position: absolute; left: 0; top: 100%; - width: ${({ below }) => + width: ${({ $below: below }) => below.current && below.current.getBoundingClientRect().width - AUTOCOMPLETE_BORDER_WIDTH * 2}px; - visibility: ${({ hidden }) => (hidden ? "hidden" : "visible")}; + visibility: ${({ $hidden }) => ($hidden ? "hidden" : "visible")}; z-index: 5000; text-align: left; `; @@ -81,21 +81,21 @@ const AutoCompleteInputBackground = styled(AutoCompleteInput)` ${(props) => (props.disabled ? "" : "background: white;")} `; -const Container = styled.div<{ inputHeight: string }>` +const Container = styled.div<{ $inputHeight: string }>` position: relative; display: block; margin-bottom: 1rem; - height: ${(props) => props.inputHeight}; + height: ${(props) => props.$inputHeight}; `; const AutoCompleteInputContainer = styled.div``; const ClearSelection = styled(FontAwesomeIcon)<{ - hidden?: boolean; - parent: RefObject; + $hidden?: boolean; + $parent: RefObject; }>` - display: ${(props) => (props.hidden ? "none" : "block")}; - top: ${({ parent }) => + display: ${(props) => (props.$hidden ? "none" : "block")}; + top: ${({ $parent: parent }) => parent.current && parent.current.getBoundingClientRect().height / 2}px; right: 5px; padding: 0 8px; @@ -268,7 +268,7 @@ const AutoComplete = ({ return ( { @@ -342,22 +342,22 @@ const AutoComplete = ({ />